Getting Started with Johnny Five for IoT (Part 2)

Getting Started with Johnny Five for IoT (Part 2) © GPL3+

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

  • 3,334 views
  • 0 comments
  • 7 respects

Components and supplies

Apps and online services

About this project

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

remote-blink.jsJavaScript
Node.js / Johnny-Five 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);}
  });
  
});
Remote control UI: index.htmlHTML
Remote control UI (Front-end code)
<h1>Prototyping IoT Demo UI</h1>

<p>The simplified version of this code (the one used in my Johnny-Five tutorial video on Arduino.cc is available at: <a href="http://codepen.io/girliemac/pen/ZWMqmZ">http://codepen.io/girliemac/pen/ZWMqmZ</a>)

<button class="button-blue">Blink LED</button>

<script src="//cdn.pubnub.com/pubnub-3.14.5.min.js"></script>
Remote control UI: app.jsJavaScript
Remote Control UI (Front-end code)
// 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);
    }
  });
  
});

Schematics

LED - Hello world
Arduino uno led bb annotations

Comments

Similar projects you might like

IoT Blink - Getting started with IoT

Project showcase by AppShed Support

  • 2,026 views
  • 0 comments
  • 11 respects

Android App-Based Home Automation System Using IOT

Project tutorial by Team Autoshack

  • 24,825 views
  • 17 comments
  • 75 respects
Add projectSign up / Login