Getting Started with Johnny Five for IoT (Part 2)

Tomomi Imura, developer evangelist at PubNub, walks through connecting the circuit built in part 1 to a remote user interface using PubNub.

BeginnerProtip4,698

Getting Started with Johnny Five for IoT (Part 2)

Things used in this project

Hardware components

Arduino UNO

LED (generic)

Jumper wires (generic)

Breadboard (generic)

Resistor 221 ohm

Software apps and online services

Johnny-Five

PubNub Publish/Subscribe API

Story

Introduction

In this video, we’re going to create a smart home network that builds upon our previous example. We again hack an Arduino Uno using JavaScript, but this time to create the simplest smart bulb. Because by “smart bulb,” we really just mean an LED.

This tutorial was developed by Tomomi from PubNub and also uses Johnny-Five. No, not the robot from the movie Short Circuit. It is an open-source JavaScript robotics framework that lets you program an Arduino with Node.js easily. The bulb itself is remotely controlled via a web portal.

To establish the real time communication between the Arduino and a web browser, we use the PubNub Data Stream Network (DSN). PubNub provides global infrastructure and allows you to build and scale real-time apps and IoT devices quite easily.

The remote controller (web app) is written in JavaScript. This is a simple user interface that includes only one button. While a completed code sample is available on CodePen, we use a simplified version in this tutorial so that it’s easier to follow along.

Enjoy the tutorial!

Note: at 5:40, where I am installing PubNub with npm, please do install v3.x.x to make the tutorial works. This is not compatible with PubNub Node SDK v4, which will be released soon!

$ npm install pubnub@3.15.2 --save

Code

var five = require('johnny-five');
var board = new five.Board();

var pubnub = require('pubnub').init({
  publish_key: 'pub-c-0b43969b-...', // Use your pub key
  subscribe_key: 'sub-c-cb24903e-...' // Use your sub key
});

var channel = 'led';
 
board.on('ready', function() {
  var led = new five.Led(13); // pin 13

  pubnub.subscribe({
    channel: channel,
    message: function(m) {
      if(m.blink === true) {
        led.blink(500);
      } else {
        led.stop();
        led.off();
      }
    },
    error: function(err) {console.log(err);}
  });
  
});

// Use the same keys that you are going to use for Arduino code with Johnny-Five

var pubnub = PUBNUB.init({
  publish_key: 'pub-c-0b43969b-...', // Use your pub key
  subscribe_key: 'sub-c-cb24903e-...' // Use your sub key
});

// Use the same channel name
var channel = 'led';

var button = document.querySelector('button');

var blinkState = true;

/***
Subscribe data from all subscibers of the channel to set the button state correctly
***/
pubnub.subscribe({
  channel: channel,
  message: function(m) {
    blinkState = m.blink; // the raw data
    blinkState = !blinkState; // toggle it to lable the button
    button.textContent = (blinkState) ? 'Blink LED' : 'Stop LED'; 
    console.log(blinkState);
  }
});

/*
Upon a button click, publish the data.
Arduino will subscribe it and blink LED
*/
button.addEventListener('click', function(e) {
  pubnub.publish({
    channel: channel, 
    message: {blink: blinkState},
    callback: function(m) {
      console.log(m);
    }
  });
  
});