Nodebots / Hardware Visualizing Sensor Data Using Barcli

[00:00:00]
>> Steve Kinney: One thing I'm going to do real quick is I'm going to get this under control. Because for instance, if I wanted to update a web server with this information, the rate that it's coming in right now is slightly problematic [LAUGH], right? I'm running the risk of de-dossing my own server, which I'm not interested in doing.

[00:00:18] So we'll just do a little bit of clean up to this code. Also, it was really hard to read that data. It was coming in pretty fast. But there are ways that we can handle that, right? We are JavaScript developers. We have tools that will make this work.

[00:00:35] So one of the things I'm gonna do is I'm gonna take this and I'm gonna pull out into its own function. And I'll just call it const handleChange because I write a lot of react and I don't know how to name functions other than on change and handle change these days.

[00:00:52] So I'll call it handle change and I'm going to pull in some helper libraries. I'll say const throttle = loddash/throttle and so what throttle does, is it basically makes it so that a function that's called repeatedly will only actually be executed every some numbers of milliseconds. So you can basically use it, it will take a function and make it so it's a function that's called every 500 milliseconds, 1,000 milliseconds, whatever you choose.

[00:01:23] So it's a way to stop that fireose of data. We don't need it. We want relatively up to date data. But if I get data every half second, that's probably good enough. I don't know if I need it rapidly. The other thing and I actually learned about this library from the Johnny-5 Experimenter's Guide, it's quite fun, is our Barcli, which is a library for just bar charts in the terminal.

[00:01:49] So we'll actually pull that in. Because ideally, my hope is that you start playing around with the other sensors in there later and you want to see this data more than a stream of console logs. It would be cool to actually see it in a little bit more of a useful way, so I will show you that as well.

[00:02:04] And you're gonna notice the fun play on words here. Cuz it's for a CLI. Do you get it? It's cute, right?
>> Speaker 2: [LAUGH]
>> Steve Kinney: You're like, I'm not impressed. The other thing is just calling throttle a string is not going to do the trick.
>> Steve Kinney: Go ahead and use it yet but that would have been embarrassing.

[00:02:30] So then we'll also require Barcli. I don't like calling command linen interfaces or CLIs, clis. That's a thing that I do not like. But I understand that is a thing that people do. So, all right, cool. So, the first thing we're do is let's throttle this handle change function.

[00:02:53] And so with lodash's throttle, this is fairly easy to do.
>> Steve Kinney: We'll just pass the function to the throttle function and how often do we want to update? 500 milliseconds? 1,000? 470 milliseconds?
>> Speaker 2: 470
>> Steve Kinney: 470, all right, into it. So we will only call this method every 470 milliseconds, all right?

[00:03:23] Cool. And so now, instead of console logging, we're gonna actually create some graphs in Barcli.
>> Steve Kinney: So we'll make a const graphs.
>> Steve Kinney: Cool. And we'll take temperature.
>> Steve Kinney: Which will be a new Barcli.
>> Steve Kinney: The logo is worth looking up at a break, too. It's a very cute dog.

[00:03:54]
>> Steve Kinney: We'll give it the label of temperature.
>> Steve Kinney: And we'll give it a range for the bar chart. We're indoors. It could get cold in here. We'll say somewhere between 0 and 120 because if it gets over 120 degrees in here, I'm leaving. So then we'll make the next one not semicolon, definitely comma.

[00:04:25]
>> Steve Kinney: All right, cool. Make the next one pressure.
>> Steve Kinney: We'll change it to pressure. And we'll go between one in a hundred. The relative humidity being that it's a percentage, it's very easy to come up with our range.
>> Steve Kinney: It should be between 1 and 100. So this will be created, basically three bars.

[00:04:57] We're going to have to update those bars whenever we're handling a change event. Instead of constant logging, we'll just update these graphs. Cool. So instead of console log now, what I'm going to do is I'm going to say graph.temperature.update method with the new temperature.
>> Steve Kinney: We'll do the same for pressure.

[00:05:36] Do the same for relative humidity. All right, so now, there's two major changes to this code right now. The first major change [LAUGH] is that we're only gonna do it every 470 milliseconds. And the second major change is that instead of just a stream of console logs, we'll get some pretty bars that go across the terminal.

[00:05:59] And they're like, it's just gonna update those bars in place, so we'll actually be able to kind of like see and monitor a little more easily. What I'll do real quick is I'm gonna make a new branch
>> Steve Kinney: I don't know, I'm trying it this way again. I'm actually gonna do it from the command line.

[00:06:16]
>> Speaker 2: Does your graph match graph, needed the?
>> Steve Kinney: Good catch, good catch. I called it plural in one case, the singular in the other. Good catch before I do get a push too.
>> Steve Kinney: With Barcli. Cool, so push that up and let's start the deploy process and I'll put the code back on the screen in case you're looking at it.

[00:06:57] So I'll do t2 run playground. And as that goes, I'll put this back on the screen.
>> Speaker 3: You don't put handle change?
>> Steve Kinney: Yeah, line 21 is just monitor.on('change'), you don't do anything.
>> Speaker 3: Yep
>> Steve Kinney: Fixed. [LAUGH] I was wrong. This wasn't some magical secret JavaScript engine move.

[00:07:25] It was simply, I made a boo-boo. [LAUGH] I think that was around the time we realized that I had also misspelled graphs and I got very distracted. Cool. Let's not treat ourselves for pushing that up as well. Oops, we have a problem. Cool, so I figured out what the problem was with the help of the audience.

[00:07:46] I had done the monitor on change handleChange before I actually defined the handleChange function, so at that point, it was in fact, undefined. That const got changed to var in the minifier and so with variable hoisting, it was undefined, mostly because for all the web socket, hardware, fanciness that we're doing, I forgot to put my variables in the right order.

[00:08:12] So, easy fix luckily, which is simply define your functions before you use them. It's a good idea. And so we're gonna flip over now and we can see my very pretty graphs. And just to validate, I am going to again, do the tried and true and very scientific method of putting my finger on the sensor.

[00:08:39]
>> Steve Kinney: And we can see the temperature rise.
>> Steve Kinney: Cuz it is not 85 degrees in here.