Hardware with Arduino & JavaScript

Porting Blinking Light to JavaScript

Steve Kinney

Steve Kinney

Hardware with Arduino & JavaScript

Check out a free preview of the full Hardware with Arduino & JavaScript course

The "Porting Blinking Light to JavaScript" Lesson is part of the full, Hardware with Arduino & JavaScript course featured in this preview video. Here's what you'd learn in this lesson:

Steve loads Firmata onto the Arduino, allowing the board to be controlled by JavaScript. A basic JavaScript program is written to blink the LED. The code is executed with Node.js, and the commands are sent to the Arduino.


Transcript from the "Porting Blinking Light to JavaScript" Lesson

>> Let's see if we can do the same thing now from JavaScript. One thing that we need to do first is, we need to load on what's called standard Firmata, right? You saw that, the base level we have serial port, then there was Firmata.js, and then there was Johnny-Five, right?

Standard Firmata is basically, you're loading a sketch onto the Arduino that tells it about the instructions that a standardized library called Firmata talks to devices with, right? So we're gonna load that on, which will stop my LED from blinking, do not panic, because we will be removing the code that makes the LED blink and replacing it with the code that lets us control the board from JavaScript.

So we'll go back in here. And in here you can go to examples, and then Firmata, and then you should see Standard Firmata. And I'm gonna just hover over here for a second, so you can kind of follow along. And just clicking this will actually open up the sketch, it will not load it on just yet.

But you can find it in File, Examples, Firmata, Standard Firmata. I'll open that sketch. You can read the comments, read all about it. But for the most part, it's a whole bunch of code that you don't need to read, but it loads on the ability for a standard protocol for talking to it from a host computer, which is exactly what we're doing.

So we load that on as well. You can see my LED stops blinking. It's blinking as the loading, but in the one second on, one second off sense. Awesome, that should now be uploading. So we have that repo that we saw earlier, which is just basically everything we need along in here to follow along with a whole bunch of examples.

And we'll kinda pick and choose which ones we want to use today, depending on how timing and our spirits and interests guide us. But again, the hello world of anything is, can we get that LED to blink now from JavaScript instead of Arduino? So I'm gonna open that up.

So in source, blinking LED. We've got some code, or we don't have some code. We have the beginnings of where we can write some code forward is formed, it wouldn't hurt to do an npm install right now as well cuz, yeah, you will need some packages in a moment.

And so what we can do in this case is, we can pull in the Johnny-Five library, right? So in this case, we'll do import. Five from Johnny-five. And we can go ahead, and we'll kind of instantiate a new board. And out of the box, in the same way that the Arduino software, we kind of looked at the list of different serial ports that were available.

Johnny-Five will do the same, and it will seek to find the correct board, which will almost always, unless you have four Arduinos, or two, really, plugged in, which point you have to be a little more specific, but in this case it will find the board that is plugged in.

So we don't need to worry. If you are gonna use the Tehsil will tell you might be like, okay but like use the Tehsil 2 adapter here or use the Raspberry Pi or whatever set but for an Arduino it is the standard built in lingua franca here. And then we've got a ready event, so has to go connect to the board, everything along those lines and set everything else, so we say board on ready and you can do a 500, you can do 1000.

Let's do 1000 cuz it will feel very similar to what we had before. So we'll go ahead and we'll say we've got a new LED on pin 13. And we're gonna make that LED blink. So if you think about before we had the Arduino code that would, we sent a high signal, waited a second sent a low signal, we sent a high signal, we sent a low signal, we waited in between each time.

We could do something very similar but like I said before, Johnny Five comes with a bunch of fun ways to just make this easier for us as well. And to make it like very similar to us as JavaScript developers to kind of like grok what's going on? So just explain one more time before we run it.

We are pulling in the Johnny Five library from our npm install. We are instantiating a new Johnny-Five board. And when that board is ready, when it triggers its ready event, kinda like DOM content loaded, we say, cool, I've got an LED on pin 13, which gives us an LED object, which has a bunch of methods that we'll explore in a second, and we can go ahead and tell it to blink.

And this is roughly should have the same effect as what we did earlier. And if you look at my terminal, it's initiated and it drops me actually into a REPL. My LED is once again blinking just as it did before. Because effectively this code seeks to be the same, right?

So now we have the ability to control this board completely from JavaScript. Let's talk about some of the other things that we can do kind of like while we're in here. One of the things that can sometimes be, I don't know, helpful, fun, it's up to you is I can do, Well, there's all the other ones we had before.

This.repl, I'm gonna do board.repl. Inject, I'm gonna inject the LED. And what this does is we have that REPL that started up when Johnny Five was connected to the board but like this basically just puts it in scope so you can access the LED from there as well.

So I'm going to exit out of it you can hit CTRL+C twice or type .exit, whatever makes you happier. My muscle memory from working with web servers all day every day is just slam on CTRL+C until everything gets happier for me. You wanna type .exit? I love it.

You're probably a better person than me. So now I've got the LED in here. And a lot of things, there are, you see all the methods in this case, but some of the interesting ones here, we can see this connected to pin 13. I'm trying to think if there's anything, it's running Firmata, the ports, but you can theoretically say, if it wasn't already blinking, you could start it blinking, you could stop it from blinking.

Let's say you could say the LED itself, you can get basic control. I don't do a lot in here but sometimes for especially for a button, it might be useful to like say something along those lines as well, now our blinking code is going to like you serve a lot of what we have here, right?

Because it's effectively sending it a digital write for on and off over and over and over again. But you theoretically, if you were trying to figure stuff out, you can pass it into the REPL and see a bunch of information about that particular LED's code and the methods available for it as well.

But also in a world that like JS Doc exists, it is a lot of times useful to also just see that we have a bunch of different options here. We're using blink, you can just literally set the brightness, you can have it fade in over time, fade out, and these are a bunch of options you can check.

You can also have methods to see, like, okay, is it on, what mode is it, you can literally turn it on and off. Let's do that for a second. I'm going to take out this Blink code for a moment and just inject it into the REPL. And again, I'm gonna kill it.

I'm going to start it up again. And now we look over my board, the LED is off, and then I do LED on. And now my LED is on. And then I can type LED off. And what do you think that's gonna do? It's gonna turn it off. And so now I have full control of this board from Node.JS in this case.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now