Internet Controlled Hand for Remote Lectures

A cohort in Calgary was getting upset that I was neglecting them during a lecture, so I made them a present. A hand that connects to slack and waves in front of me every time someone in Calgary has a question. You’re welcome neglected Calgary students.

By day, I give web lectures to students at Lighthouse Labs Coding Bootcamp in Vancouver. I lecture to students locally in Vancouver, and the lectures get streamed to remote cohorts around Canada. They can watch the lecture live and ask questions through Slack.

A cohort in Calgary was getting upset that I was neglecting them during a lecture, so I made them a present. A hand that connects to slack and waves in front of me every time someone in Calgary has a question. You’re welcome neglected Calgary students.

I used an Arduino UNO knock off board and attached to a high torque servo with a hand on the end. The code was written in 100% JavaScript with the help of the johnny-five library.

• An Arduino UNO
• A hobby servo.

Create a hand.

The first step is to create a hand that will wave. I used a wooden dowel that I had left over from my razor blade advent calendar, and a paper hand that I modeled after my own left hand ?. Then I used a lot of tape to attach it to the servo.

Connect the Arduino to the servo.

I used the exact configuration on the Johnny Five Example. The code to then get the servo working is pretty simple. Just call servo.to() to set a value between 0 and 180 degrees.

const five = require("johnny-five");
const board = new five.Board();

board.on("ready", function() {
  const servo = new five.Servo(10);
  servo.to(160)
});

Code the app.

Here is where things get interesting. The app basically has to follow these steps:

1. Wait for a message to come in on slack.
2. Have the servo go from 20 degrees to 160 degrees and back again to simulate waving.
3. Have my laptop say the slack message out loud.

Slack has a public API that can be used to detect new messages, but I only had a couple of hours to build this thing, so I didn’t have time to read the documentation. I figured that the fastest way to get this working would be to inject some javascript into a browser window running slack that could listen for a new message.

Here’s the code I wrote for the browser. You can just open up dev tools on a slack message and paste this right in:

(function() {

  function postMessage(message) {
    $.ajax({
      type: "POST",
      url: 'http://localhost:8008',
      data: { message: message },
    })
    .then((data) => console.log(data))
  }

    let old = $(".c-message__body").last().text();
    setInterval(() => {
        const current = $(".c-message__body").last().text();
        if (old !== current) {
            old = current;
            postMessage(current);
		}
  }, 500);
})()

So the idea here is that a small amount of javascript will sit on chrome listening for a new message to come in. When it detects a new message, it will send an HTTP request to a node app running on my laptop. Then that node app will control the Arduino and say the message out loud. It’s overcomplicated, but it works.

Here’s the server code:

var express = require('express')
var cors = require('cors')
var bodyParser = require('body-parser')

const servo = require('./servo');
const say = require('./say');

var app = express()

app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true}));

app.post('/', function (req, res) {
  console.log(req.body);
  
  res.send("?");

  say(req.body.message);
  servo.cycle();
})

app.listen(8008, function () {
  console.log('?')
})

It’s literally just waiting for a request, then activating the servo and say functions. This is where the talking code and Arduino code live. You can view all of the code here: https://github.com/Sam-Meech-Ward/Slack-Hand