jsiot-workshop-slides

View Github Repository Open presentation in a new window

ajfisher

See all presentation from ajfisher

jsiot-workshop-slides

0 0

jsiot-workshop-slides

Slides for JS IOT workshop

On Github ajfisher / jsiot-workshop-slides

Workshop: Web Connected Physical things with JavaScript

DDD, August 8, 2015

Andrew Fisher @ajfisher

Press 'S' for full notes

Hi, my name is Andrew Fisher and I'm an interaction developer and I also build hardware using JavaScript. Our workshop today is going to go for the two sessions, so just under two hours and the aim is that by the end of it all of you will have gone away having built something that interacts with the physical world using JS.

workshop repository

http://github.com/ajfisher/dddworkshop

TODO

Introduction to electronics & JS hardware stack Building an API connected thing Acquiring data from the environment Today, I've split things up so there's a bit of theory to get you familarised with the stack and some fundamental electronics you're going to need to know and then really the majority of the time will be building stuff in a guided way with a focus on building something that is in the physical environment and is being actuated from a digital source and then reversing that and taking data from our environment and doing things with it.

Where are the droids?

(CC) Flickr ⣫⣤⣇⣤

Now, for those that might know a bit about nodebots or have been to a nodebots session before, whilst we're using the nodebots stack (and I'll get into that in a moment), we won't be building full scale robots today due to not much time. As such I felt that given there's some other topics at DDD around things like APIs, Microservices and IoT that this would be a great opportunity to show you that not only can you build robots with JS, but you can build IoT devices too and build them quickly and easily. So if you were here for the robotics and you're a bit disappointed we're not making battle bots this morning you've still got some time to go check out Troy's security workshop or learn about APIs.

Electronics intro

(CC) ajfisher

Okay so let's get cracking. We'll start with some basic electronics. Enough to get you by. Who here as done any electronics recently? A handful okay, so we'll quickly touch on the simple bits you need to know for today and where to find out more.

Voltage, Current, Resistance

(C) Tinkernow

The easiest way to think about electronics is like water and pipes. The wires are pipes, the electrons or electricity is like water going through the pipes. Voltage then is like the pressure. So if you imagine I have a big tank or I turn on a mains tap there's a lot of pressure. So that's like having a powerful battery or plugging in the powerpoint. This is measured in volts. All the stuff we'll use today is 5V which you can run from USB on your computer so won't kill you or really probably blow anything up. Current is the rate of flow of the electricity through the circuit. This is measured in Amps. If you have a big motor attached to the circuit you can imagine it would need more energy to turn it than a little LED. As such we say it draws a lot of current - thus makes a lot of flow of electricity. Finally we have resistance. Think of this like the width of the pipe. If it's narrow maybe you can't draw much electricity through it but if it's fat then you can draw a lot. Some components may draw too much current so you use a resistor to restrict the flow.

Microcontrollers

(CC) Phil Farugia

Okay - that's great, that's how electronics works in a circuit how do we affect it? So we typically use a microcontroller. A microcontroller is like a really old computer which you program in C and you can interact very directly with the circuit you wire up to it. Today, the micro we'll use is called an Arduino which is open source hardware and very inexpensive. You can program it in C but you can interact with it in JS and we'll come to that in a moment.

Breadboard

(CC) ajfisher

So when you are prototyping it's a real drag to solder all the time. As such we use one of these, it's called a breadboard and it allows you to plug wires into it and make connections. It's not as secure as soldering but good enough and allows you to make mistakes.

Sensors and actuators (LEDs)

(CC) ajfisher

Now a microcontroller is just a tiny little computer, you need to plug things into it to do meaningful stuff. So the things we'll be playing around with today are things like this. LEDs emit light. They come in different colours and one of them is even an RGB one which we'll use in the example. Note that LEDs are polar so the long leg is the anode or the positive side.

Sensors and actuators (Motors)

(CC) ajfisher

Next up we have motors, and specifically servos which are used to move things normally thorugh 180° using a digital signal.

Sensors and actuators (Temp)

(CC) ajfisher

We'll be using a temperature sensor like this to record the temperature here in the space and use it. These are very useful as they are inexpensive and remarkably accurate.

Sensors and actuators (Light)

(CC) ajfisher

And finally we have a light sensor which we'll use to measure light intensity.

Resources

  • Arduino Experimenters Kit (ARDX)
  • Make: Electronics (C. Platt)
  • Wikipedia (every component)
There are a few resources you can go to to learn more about the basic electronics but if you're interested, the Arduino Experimenters kit is a great place to start as is the Make electronics book by Platt. Also Wikipedia has a frightening amount of info on every component ever made.

JS ❤ Robotics

(CC) Flickr hiperbolica

Okay so we're all software peeps so that's enough hardware to get you going. So how do we get JS working with this microcontroller that I said a moment ago can only use C.

The NodeBots stack

There are a few different projects that can use JavaScript on hardware now, however the one we're going to talk about is called nodebots as it's very much aimed at a NodeJS implementation with hardware. At the core of nodebots are transport layers to deal with things like talking over USB or wireless or serial connections and then wrapped around that is a framework called Johnny Five.

Johnny Five

(C) Joanne Daudier

Johnny Five was started by this guy - Rick Waldron, and there are now about 30 core project members, nearly 100 contributors and over 2000 commits to the codebase in the last couple of years. It's a very active and expanding project and we're always looking for more contributors to help out. Johnny Five is a hardware abstraction framework so instead of writing code that is specific to a chip you can talk about components that behave in different ways and leave the implementation details up to the people who write the board level interfaces whereupon you can then use it.

The stack

  • Controller board (sensors and actuators)
  • IO Plugin (communications protocol)
  • Johnny Five / NodeJS (application logic)
  • WS/HTTP (networking and security protocols)
  • Clients (UI, input, visualisation)
So this is what the typical JS hardware stack looks like. We have a board which could have sensors and actuators. Actuators is just a fancy word for something that does something in the real world - like a motor or an LED etc. Most controller boards can't run JS yet so we normally need to put some firmware on them to do what we want. This talks via a communications protocol to what is called an IO Plugin. IO plugins are a Johnny Five idea that tries to get hardware to behave in consistent ways via a protocol. Think of this sort of like HTTP requests and responses - the client doesn't really care what the server does as long as it responds properly. Johnny Five gives us hardware abstraction so we can turn motors and LEDs into JavaScript objects and interact with them. As a side effect we get all of NodeJS as well so that means we can start doing interesting things like linking up with our normal web protocols. And then finally we can add clients for things like UI, input and what not.

Common implementation

  • Controller board (Arduino)
  • IO Plugin (Firmata over USB)
  • Johnny Five / NodeJS (application logic)
  • WS/HTTP (networking and security protocols)
  • Clients (UI, input, visualisation)
So in practice this is what a specific implementation of this stack looks like. You can see we've got an arduino board in this case and the IO Plugin is a firmware called Firmata which provides us the interface to the board for Johnny Five. This is about the most basic and most common stack you can use but you can see that the bit we are concerned about - being the bit in the middle pretty much stays the same all the time.

NodeBots hardware

  • Servos, Motors, ESCs, Stepper motors
  • Accelerometers, Gyroscopes, Compasses, IMUs
  • Temperature, Proxitimity, Pressure sensors
  • LEDs, NeoPixels, Pixel matrices
  • Switches, Joysticks, Buttons
  • LCDs
In terms of hardware - there is a lot covered in Johnny Five and more core components are still being added. The intent is to have the majority of the most common electronics components you're likely to come across available in the framework and then you can use then to compose bigger objects that then represent your thing that you're making.

Installation

  • Board development environment (eg Arduino)
  • Flash board with protocol (eg Firmata)
  • npm install johnny-five
  • Write code
  • ...
  • Make an awesome JS Hardware thing
So to get up and running, it's pretty much just a case of getting the board dev environment going. For arduino that's prerry much just download the arduino IDE and install it. You then put the IO protocol on the board that you need - for an arduinon that just means using Firmata and then it's an npm install and you are then writing code.

Examples and applications

Glasses (C) Andy Gelme | Image (CC) Matthew Bergman

We're going to build some things in a second but here's a couple of things that people have been making which I thought I'd show you in order to hopefully inspire some further thinking on this front.

Node Skirt

Skirt (C) Kassandra Perch | Image (CC) Matthew Bergman

This skirt, made by Kassandra Perch is fully contained running javascript on a little board embedded into it. It has an accelerometer and as you move around the LEDs inside it light up different colour. So you can even use JavaScript in your clothing!!

Tetris

(C) Adrian Catalan

Here is an example of using nodeJS to make a physical game. This is made by Adrian Catalan and uses nodebots and node-pixel to make a tetris game on LED panels.

Exercises:

github.com/ajfisher/dddworkshop

If you haven't already, please make sure you have downloaded or cloned this repo as we're about to get cracking in it for the rest of the session. Each of the 3 exercises we'll do are in folders 1, 2 and 3 respectively in this repo. There's a readme in every folder, please follow along with that if you don't keep up for whatever reason.

Ex 1: Hello World

(CC) Flickr Daniel Novta

Okay so enough theory, it's time to get stuck in. The first exercise we are going to do is to just make sure you understand the stack and have it all working. Hardware often doesn't have a screen so hello world is blinking an LED.

Ex 1: Circuit

So the first thing I want you to do is grab an LED from your kit and you're going to put it into Pin 13 and ground like this circuit here. The long leg is the anode and it goes in Pin 13 and the short leg goes to ground.
Plug in your arduino and navigate to tools board and select Uno and then port and select something that looks like this. If you're on windows you'll need to check device manager. After that, select the firmware in the repo and hit upload from the sketch menu. That should all load as you can see me doing here.

Ex 1: JS Code

var five = require("johnny-five");

var board = new five.Board();

board.on("ready", function() {

    var led = five.Led({pin:13});

    led.blink(1000);

});
Now we have that, we need to talk to it from Johnny Five. You can see the code in the repo. Explain code here.

Ex 1: Run

node 1_hello_world/led.js
Now run node and you should get a nice blinking LED.

Ex 2: Information radiators

Now everyone has done that we're going to work through a couple more slightly self directed exercises for the remainder of the time. The first is creating an information radiator. This is a class of device that takes inforamtion from a service and then radiates it outwards into the environment. For example taking weather data and displaying a light like this. There are heaps of things you can make and it's really a case of what api can you connect to and what can you make it do.

Ex 2: Examples

  • Gmail notifier
  • Twitter keyword light
  • Weather forecast
In the repo in exercise 2 there are 3 examples I've made you can play with or, if you know an API really well then you can build your own. The Gmail notifier goes and counts your undread email and uses a servo to indicate if you have lots or few unread threads. The twitter light pulses every time a keyword comes up in the public stream And the weather forecast looks at the BOM and then displays a coloured light to tell you how warm or cold the next several hours are going to be.

Ex 2: Weather code

var five = require("johnny-five");
var Twitter = require("twitter");

var twitter_creds = require ("./access.js");
var board = new five.Board();
var led;
var keyword = "robot";

if (process.argv[2] == undefined) {
    console.log("Using keyword 'robot', pass a keyword next time");
} else {
    keyword = process.argv[2];
    console.log("Tracking keyword: %s", keyword);
}

board.on("ready", function() {
    led = new five.Led({pin: 9});
});

var client = new Twitter({
    consumer_key: twitter_creds.TWITTER_CONSUMER_KEY,
    consumer_secret: twitter_creds.TWITTER_CONSUMER_SECRET,
    access_token_key: twitter_creds.TWITTER_ACCESS_TOKEN_KEY,
    access_token_secret: twitter_creds.TWITTER_ACCESS_TOKEN_SECRET,
});

client.stream('statuses/filter', {track: keyword }, function(stream) {

    stream.on("data", function(tweet) {
        if (board.isReady) {
            led.fade({
                easing: "linear",
                duration: 1000,
                cuePoints: [0, 0.7, 1],
                keyFrames: [0, 255, 0],
            });
            console.log("---");
            console.log(tweet.text);
        }
    });

    stream.on("error", function(error) {
        console.log(error);
    });
});
This is the twitter example as it's pretty tiny. As you can see it creates a board does the twitter authentication and then basically tracks a keyword and every time the data event fires, it then does a fade animation which lasts a second and fades the LED in from off to on and off again. So we'll spend the next 30 minutes playing with these so choose one you want to do. Twitter and Gmail are good if you use those services as you'll need to auth them. Weather is good if you don't. Build the circuits then play with them a bit and see what you can do.

Ex 3: Data Acquisition

// examples

Okay, now we're going to flip the focus around and look at how we connect a thing and push data to the internet. Obviously a huge part of IoT is getting data out of the environment.

Ex 3: Examples

  • Light
  • Temperature
So in this case we have two examples, the light sensor records data and pushes it out to a visualisation in realtime using D3. The temperature sensor uses a nodejs library called phant which records data for retrieval later. Again, jump into the examples and there's circuit diagrams and code examples in the folders.

Resources

  • johnny-five.io
  • node-ardx.org
  • nodebotsau.io
  • @nodebotsau
So if you want to do more and look for more info, here's some places to do so.

Get involved

  • NodeBots nights - 1st Wednesday every month
  • CCHS / Hack Melbourne - across the road
  • gitter.im/rwarldon/johnny-five

Workshop: Web Connected Physical things with JavaScript

DDD, August 8, 2015

Andrew Fisher @ajfisher

Workshop: Web Connected Physical things with JavaScript DDD, August 8, 2015 Andrew Fisher @ajfisher Press 'S' for full notes Hi, my name is Andrew Fisher and I'm an interaction developer and I also build hardware using JavaScript. Our workshop today is going to go for the two sessions, so just under two hours and the aim is that by the end of it all of you will have gone away having built something that interacts with the physical world using JS.