Nodebots / Hardware Controlling RGB LED from a Browser

Transcript from the "Controlling RGB LED from a Browser" Lesson

[00:00:00]
>> Steve Kinney: So I think we've played with some colors. Does anyone have a favorite CSS color that they tried?
>> Steve Kinney: No, no favorites? All pretty much the same? All right, so we've been playing with some hardware, and we've been programming it, but I have been alluding to the fact that JavaScript's kind of cool because the web.

[00:00:20] So we're gonna switch our attention to server JS. In server JS, I have some of these basic boiler play code that we saw earlier. I have path which we'll see in a second. I brought over the RGB code that we just previously wrote. And I just have some of the basics of an express server as well as socket io, which we'll get to in a second.

[00:00:46] So there is a public directory that has a index.html, a script for client side JavaScript, and a style.css which is very empty right now. I had big hopes and dreams of styling this very pretty, then I just decided not to. And when they go to the root directory, it will load up public dot index dot html.

[00:01:06] We're gonna write some code and do some things. The first thing I want you to do is, you're gonna be able to connect to your, since we are starting a web server, on our Tessle. It would be super cool to actually be able to visit said website. To do that you need to know what it's going to, because it's not going to be local host.

[00:01:25] Local host is your computer. This is not running on your computer, this is running on your Tessle. So what we'll do is, we'll go ahead and do t2 wifi. And that's what we used to configure the wifi earlier, but what we're doing in this case is just get us some information about it.

[00:01:45]
>> Steve Kinney: If anyone needs a new name for their Tessle, Tesslerun could be a good one too. I don't know why I didn't have that helpful suggestion earlier, but here we are. So mine is 192.168.3.182, yours is obviously gonna be different, hopefully it's gonna be different. If not,t hat is problematic for our router.

[00:02:05] Cool, so we've got that in place. So we are actually going to run the default, like unless you pass an environment fail I'm saying that's port 80 which is the default port for HTTP. Which means if we go to it in the browser, we don't ncessasarily have to define a port.

[00:02:24] Usually it's like, local host port 3000, this will just be our IP address, that'll just work. All right, so we're sending that public.index.html, and right now, all it has is a input field with a type color, which I believe is supported in chrome, I'm not quite sure, if you see just a input field at one point, then you're not in chrome.

[00:02:48] You might want to switch over. At the top of my head, I forget what the browser support for the tab color is An input where you can pick a color. It's very, very cool. And so what we wanna do is when the user has picked a color, we will go ahead and change the color of the LED.

[00:03:08] So before we iterated through an array, it went red, green, blue, or blanched almond, rebecca purple, salmon. Right [LAUGH] whatever you decided to do. In this case, when we do an .post.
>> Steve Kinney: And I'm just gonna post to slash. And that will deal with a request. Get a response.

[00:03:38]
>> Steve Kinney: And we'll grab the color property,
>> Steve Kinney: Out of that request, but I will look at the JavaScript on the client in a second. Actually, there's no JavaScript, but we'll look at the index.html in a second. But we'll grab the color property. And let's just for our own sanity in case we have any issues.

[00:04:00] We'll console.log that we are setting the color to some string that will just be the color. All right, neat. And then we'll do led.color is whatever color we got from the server. And then we'll actually just respond by sending them back the index.html file.
>> Steve Kinney: All right, so just a little simple endpoint that's just gonna take our form submission.

[00:04:31] and change the color of the led. So basically, the cool thing that we are doing, because we are a bunch of fun engineers right? We are basically building a web front end for our hardware, right? The nice thing about doing this stuff in JavaScript is that we can blend.

[00:04:48] Like we wrote a web server that is going to take HTTP requests and change the color of an led. I'm excited, I don't know about the rest of you. I'm going to briefly just look inside the public directory at the index at HTML. Just so you can see that the name is color and it is a very, very boring HTML form that's just going to send other day.

[00:05:15] Yeah, no JavaScript. [LAUGH] Just regular old HTML forms that's gonna send it along. And with a Submit button, cool. So that's where we got that color in the request body earlier. That wasn't a magical property. It's magical through the magic of HTML. But there it is. So I'll go ahead and I'm gonna deploy to my tassel.

[00:05:35] This time it's gonna be t2 run server.js. We'll go ahead and we'll deploy that. I'm gonna wait a second because I want to pull it up in the browser.
>> Steve Kinney: While that's deploying, I just want to point out one more thing in the code. I, just because of

[00:06:07]
>> Steve Kinney: Variable scope. I am, actually. This is all happening in board on ready. Like once the board is ready, then I start up the server. Because I need access to that LED variable, right? So that's why it's in there. You might be like, wow, he's waiting to be inside a function?

[00:06:22] I just need it for variable access. Could I, theoretically do a led and set stuff totally. But that's why I chose to do it this way. Right, we'll go back over. We are starting to run server.js. You can see it's going and then.
>> Steve Kinney: Great, server's up and running on port 80.

[00:06:48] So earlier, I saw that IP address that I had. Let's see if this will make up for it. It is not, so I'm gonna go ahead and run that one more time. So did anyone memorize my IP address from before?
>> Steve Kinney: It is literally still in my terminal.

[00:07:24]
>> Steve Kinney: Cool, so I have this really beautiful HTML form. This is my design skills in action.
>> Steve Kinney: And I'm gonna go ahead and try it out for a second. I'm gonna pick a color. Let me go with red.
>> Steve Kinney: And submit the form. And I'm looking down at my LED right now And it has changed color.

[00:07:49] So what I'm gonna do, is I'm gonna go back over and we'll look at my LED. And I will, can't see both at the same time. But you can see your LED and your screen at the same time. And we'll go ahead and look at it. So I can change the color through my web UI.

[00:08:03] So I just sent green over so you can see the LED turn green. I will dictate you what will happen next. I will go ahead and let's change it to blue. I can change the LED tto blu. I can now change my hardware from a very plain HTML form because this is running the web server.

[00:08:23] All of this is happening on the device. So it receives the HTTP request. And it goes ahead and changes the color of the LED. If you really want to, it's not technically great web practices, but you can actually move the line where we send the index and HTML again and just leave the HTTP request open.

[00:08:43] And then you can start dragging around the different color and see it change automatically.