Building a slack integrated doorbell with a M5StickC

2022-01-24 | By M5Stack

License: General Public License Arduino

* Thanks to the project info and source code provided by @obniz developer team

Story

Make a doorbell with a M5StickC. When a visitor presses the doorbell, it pushes a notification to a Slack channel.

Materials

M5StickC x1
Slack account x1

※You will need an M5stickC with obnizOS.

How to make

Hardware

Hardware you need to build a Slack doorbell is just a M5StickC. It is ok as long as it is supplied with power.

Software

As for software, go to this page, and get the Webhook URL to send a message to a Slack.

Select the channel where you want to receive a notification, and press “Add Incoming Webhooks Integration.”

Then, add your Webhook URL to the code below.

Use this URL for “WEBHOOK_URL_HERE,” and replace “CHANNEL_NAME_HERE” with your channel name. Make sure to put “#” before the name.

Copy Code

var url = 'WEBHOOK_URL_HERE';
var data = {
"channel": 'CHANNEL_NAME_HERE',
"username": 'obniz-bot',
"text": msg
};

Program

Copy Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://unpkg.com/[email protected]/obniz.js"></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <script>
      var stick = new Obniz.M5StickC("OBNIZ_ID_HERE");
      stick.onconnect = async function() {
        printPleasePressView();
      
        stick.buttonA.onchange = async pressed => {
          if (pressed) {
            onPressed();
          }
        };
      };
      async function onPressed() {
        sendToSlack("We've got a visitor.");
        for (let i = 0; i < 10; i++) {
          printWaitingView(i / 10);
          await stick.wait(1);
        }
        setTimeout(printPleasePressView, 3000);
      }
      function printWaitingView(percent) {
        let offset = 100 - percent * 100;
        offset = offset < 0 ? 0 : offset;
        stick.display.drawing(false);
        stick.display.clear(50, 5);
        stick.display.font(null, 50);
        stick.display.pos(20, 5);
        stick.display.print("🚪");
        stick.display.pos(50 + offset, 5);
        stick.display.print("🏃");
        stick.display.font(null, 20);
        stick.display.pos(100 + offset, 35);
        stick.display.print("💨");
        stick.display.font(null, 10);
        stick.display.pos(30, 60);
        stick.display.print("OK, PLEASE WAIT");
        stick.display.drawing(true);
      }
      function printPleasePressView() {
        stick.display.drawing(false);
        stick.display.clear(50, 5);
        stick.display.pos(50, 5);
        stick.display.font(null, 50);
        stick.display.print("🔔");
        stick.display.font(null, 10);
        stick.display.pos(40, 60);
        stick.display.print("PUSH TO CALL→");
        stick.display.drawing(true);
      }
      function sendToSlack(msg) {
        var url = "WEBHOOK_URL_HERE";
        var data = {
          channel: "CHANNEL_NAME_HERE",
          username: "obniz-bot",
          text: msg
        };
        var dataJson = JSON.stringify(data);
        $.ajax({
          type: "POST",
          dataType: "json",
          url: url,
          processData: false,
          data: "payload=" + dataJson
        }).then(
          function(data) {},
          function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("post to bot");
          }
        );
      }

    </script>
  </body>
</html>

Code

Code snippet #1

Copy Code

var url = 'WEBHOOK_URL_HERE';
var data = {
  "channel": 'CHANNEL_NAME_HERE',
  "username": 'obniz-bot',
  "text": msg
};

Untitled file HTML

Copy Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="https://unpkg.com/[email protected]/obniz.js"></script>
  </head>
  <body>
    <div id="obniz-debug"></div>
    <script>
      var stick = new Obniz.M5StickC("OBNIZ_ID_HERE");
      stick.onconnect = async function() {
        printPleasePressView();
      
        stick.buttonA.onchange = async pressed => {
          if (pressed) {
            onPressed();
          }
        };
      };
      async function onPressed() {
        sendToSlack("お客さんが来たよ");
        for (let i = 0; i < 10; i++) {
          printWaitingView(i / 10);
          await stick.wait(1);
        }
        setTimeout(printPleasePressView, 3000);
      }
      function printWaitingView(percent) {
        let offset = 100 - percent * 100;
        offset = offset < 0 ? 0 : offset;
        stick.display.drawing(false);
        stick.display.clear(50, 5);
        stick.display.font(null, 50);
        stick.display.pos(20, 5);
        stick.display.print("🚪");
        stick.display.pos(50 + offset, 5);
        stick.display.print("🏃");
        stick.display.font(null, 20);
        stick.display.pos(100 + offset, 35);
        stick.display.print("💨");
        stick.display.font(null, 10);
        stick.display.pos(30, 60);
        stick.display.print("OK, PLEASE WAIT");
        stick.display.drawing(true);
      }
      function printPleasePressView() {
        stick.display.drawing(false);
        stick.display.clear(50, 5);
        stick.display.pos(50, 5);
        stick.display.font(null, 50);
        stick.display.print("🔔");
        stick.display.font(null, 10);
        stick.display.pos(40, 60);
        stick.display.print("PUSH TO CALL→");
        stick.display.drawing(true);
      }
      function sendToSlack(msg) {
        var url = "WEBHOOK_URL_HERE";
        var data = {
          channel: "CHANNEL_NAME_HERE",
          username: "obniz-bot",
          text: msg
        };
        var dataJson = JSON.stringify(data);
        $.ajax({
          type: "POST",
          dataType: "json",
          url: url,
          processData: false,
          data: "payload=" + dataJson
        }).then(
          function(data) {},
          function(XMLHttpRequest, textStatus, errorThrown) {
            console.log("post to bot");
          }
        );
      }

    </script>
  </body>
</html>

Add all DigiKey Parts to Cart

Have questions or comments? Continue the conversation on TechForum, DigiKey's online community and technical resource.

Building a slack integrated doorbell with a M5StickC

2022-01-24 | By M5Stack

INFORMATION

HELP

CONTACT US

FOLLOW US