Kassian's IoT Hour

All right. Good afternoon, morning, evening, wherever you are. I'm Kassian and this is Kassian's IoT Hour. So for the last two episodes, we've been building a little weather station here for the lab. We've got a Raspberry Pi connected to a climate, humidity and temperature sensor. And we built we used Argo Tunnel to control this LED here. But what we're doing this week is we're building an IoT dashboard using worker sites that collects data from workers that collect this temperature and humidity data. And so we'll hopefully be able to display a graph of temperature and humidity via worker sites. So I'm going to start by sharing my screen so you can see what I'm doing. Okay, you should be able to see what I'm doing here. We've got Visual Studio Code. We've also got Chrome here where we're showing our IoT dashboard. And we've got our workers this there. So we've got show temperature, which shows the latest should be 50. But it's kind of in a little temperamental about showing 50. And I had it running earlier. So it should hear at the bottom have some temperature data from today, which does seven, six, all the way up to 617 universal time. So we've got our data here. And we've got here in our IoT dashboard. Last time we had some trouble with cores, and I managed to fix that. And so now we've got a JSON object of all the relative humidity, temperatures and times. So let's start playing with that. We're going to do pardon me, wrong key. We're going to go into here. And we're going to go to our app.js. And so we've got console .log JSON data. Now, the first thing I'm going to do is I'm actually going to trim this to the last 50 items. So we're not showing too much data. So I'm going to say that JSON data.slice equals JSON data.slice. We're going to say JSON data.length minus 50. And then JSON data.length. Okay. So now we're going to deploy this and make sure it works. So we're going to go into IoT dashboard. And we'll say Wrangler publish. Okay. Ready. This is not implemented. Either no data object can be found or an incomplete integration was provided. Oh, right. That's the chart. Let me go back to here and comment that out. We're not going to do that. There we go. And then go back to terminal and publish again. It is only valid in async function. It is an async function, though. Oh, I think I'm missing yes, that needs to be commented out, too. Here. One more time with the publish. Okay. Browser. Okay. I think we're good. Okay. So that treats it like a string. That's not quite what we're looking for. Okay. So we'll say JSON data equals JSON .parse data. Oh, here we go. Cool. So now we've got 50 items of the latest time and temperature and humidity data. Sweet. Awesome. So now what we're going to do is we're going to actually up here and git commit this. So this is available on GitHub under the username node botanist and the repository Cassian's IoT hour. I keep this out there so if anybody else wants to replicate this, they can. Now we're going to go back to the code here. We're going to start massaging the data a little bit. Not showing an accurate picture, but to get it into this format where we have points. So we want to create a humidity array and we'll create a temperature array where X is date and Y is humidity and temperature. And then that way when we create our chart here and so what we're going to do here is we're going to look for a time chart. Configuration line bar. So we want a line chart. And what we're looking for is a time information time. Up here. So we want the data to look like this, except instead of 1 and 10, we're going to have the temperature for each one. So providing data for time scale charts supports all at cool. X axis data points may visually be specified with T or X attribute when using time scale. Okay. X axis. Okay. So we want to do here our line chart. Okay. Cool. First, let's get this data set. So what we're going to do is we're going to get rid of this. And then what we're going to do is we're going to say temp data or temperature data. So we don't think it's temporary data. Humidity data. And then we will JSON data for each. And then we'll get the function. Item. And then index. And we'll start our function. Key. Okay. And so here we've got, okay. So we've got temp, relative humidity, and time. So T is item .time. And Y is item.temp. And then we'll want to do humidity data. And then T is item.time. And Y is item .relative humidity. And then after all of this, console temperature data. Do this. Go into our terminal. Deploy it. Publish it. Back to browser. Back to IoT. Okay. JSON data for each is not a function. Oh, that's not what I wanted. Make sure I've got this right. Okay. There we go. Okay. So we've got 50 items. Okay. And cool. We've got T and Y. And we've got T and Y with the relative humidity. Fantastic. So we've got the data that we want. Now we need to figure out how to get it into a line graph. So I'm going here. I'm going to actually take this and copy it into the lower part of the graph. Right here. There we go. And then we'll uncomment it. And then no, that's not what I wanted. Why? Oh, because it's not all commented. Okay. Here. No, that's not what I wanted. There we go. All right. And then everything can get shift tab over one. Okay. Fantastic. So now we've got all this set up. And the data instead of this array is going to be temperature data. Let's see if this causes any errors. Oh, that's not the first page. I need to refresh. It's this page. You know what data can be found? An inquiry in creation was provided. And that is at app JS 27. It doesn't like the new chart. Let me make sure the canvas element is in here. Okay. So we have our chart. Our canvas element. So let's try getting rid of this options and see if that's what's causing it. Feel free to ask questions about what I'm doing. They'll make sure they get to me. Oh, hey, look at that. Okay. So we've got a graph going now. Inspect. It's not actually showing any lines, though. So puzzle. Okay. Okay. Now we got to see why it's not showing the time. So let's try to get this out of the way and see if that's what causes it. Okay. And I'm going to go back here. Paragraph is gone. And so that is where the problem lies is when we say X axis equals time. So let's go back to the time here. We're going to see what the available strings are and make sure that we're on the correct track. Here. Okay, so GTC. Okay, so GTC. Okay, so GTC. Okay, so... Let's also make sure these are X, just to... And then get rid of this time series. Oh, no, that's not what I wanted, just X. Uncomment this, and then uncomment this. Uncomment this. Uncomment... Okay, we've got the graph again, but it's not showing any real data. I'm going to do... Is there examples in here? Okay, I want to see the code for this, though. I don't want to just do the... Oh, this is the chart.js source. Is there samples? Okay, where's time? Oh, there we go. I'm getting more of the same information, but not enough information. Okay. Okay, so what we can do here is we can set the parser... I think the parser is the problem. It's really just having an issue here. Is it pigments? No, it's not. Okay. Okay. Okay. Okay. Now I can find out where that is. Scale options. Good timing here. Scales time. Okay. Okay. There we go. Okay. Okay. Okay. Okay, so we probably should include a parser. That looks like to be the way to do it. So to do that, I'm going to... I'm going to comment this out. And then we're going to say parser. This is going to be a string. And before is to make it look like this. And then a T. And then hour, minute, second, millisecond. Okay. And then... Okay. So HH colon MM colon SS. And then... Dot milliseconds Z. Okay. Let's see. Let's see if this makes a difference. Oh. Forgot a comma, didn't I? I did. I did. I think I fixed that. I did. So that's all. There you go. That's what it's on. But I didn't either know it had to be found or incomplete. All right. Okay. I'm going to open a new tab. I'm going to pull this off to the other screen so I can search the problem. Okay. That's not it. Wait. Okay. So we have to include moment ourselves it looks like. All right. Hang on. There we go. Okay. There we go. It's just not showing the line. But it is showing data. Oh. It's because it's set to 1.0. And the temperature data is in the 20 floors. So okay. We can work with this stuff. Okay. All right. All right. I don't know why it's not showing our data. One thing I will do is I will try to take out our parser and see if that helps. Nope. Still not showing any data. Nope. Still not showing any data. Okay. All right. All right. Okay. So now we're going to modify the Y axis. Make this an object. And then clean this up a little bit. And then type linear mix. Zone objects. And then we're going to put in 0, max, 30. Let's say 40. Okay. Let's go here. Let's go here. Identifier. Oh. Again. Again. Okay. Okay. Okay. Okay. It's showing us right again. And it's showing our axis correctly. But it's not showing any data still. Okay. Okay. Okay. Hmm. Let me try setting the unit to minute and see what we get here. Comma. Okay. Cool. Making progress. Okay. These are all different minutes, though. Hmm. Hmm. I don't see any sets and labels coming from either. It's really strange. Okay. What we're going to do is we're going to style this in the other chart. And I will try to solve this off stream. So first we're going to style some stuff and get these charts. Even though they don't quite fit the bill for here. Okay, we're going to create a second chart. And so it's going to be culture, too. We'll call this, actually, we'll change the name a little bit here. We'll say humidity chart. And CTX2. Go in here. Temperature data. We're going to have humidity data. Get rid of this display. Formats. Formats. CTX2 is not defined. Oh, that's why. Come on. You can do it. There it is. Okay, so now I've got two graphs. I'm showing the last data point it looks like, which is interesting. We can figure that out later. And this needs to be a max of, we'll say, 90. If it's above 90% humidity in here, then I don't know what I'm going to do. So now our graphs are getting there. I don't know why it's not showing. Oh, it's showing the current minute. Okay. I wonder. I have an idea. So we're going to go to our pie here. And we're going to do a pseudo index. Oh, that's not what I meant to do. Oh, it's not. That's why. Okay. CD into pie code. And we're going to pseudo node index. Yes. Okay. Now we're going to go back to our. Okay, it's only showing the current time when it should be showing. Okay. Hmm. Let's try getting rid of the units. And recommenting in the parser. Both of these. Save it. And then publish it. Okay. That goes back to 12 a.m. and things. I don't know why. Data sets and labels to my. I don't know why. Oh, here we go. Scale bounds. Data. Let's see if this works before we add it to the next one. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. I'm going to try changing this. Copy this line here. And save format. That's not how that works. I think it's just not getting the time in there correctly and that's why it's putting it where it is. There it is. Okay. Yeah, I think that's the problem here. So we're going to tweak the string until we can get it in there. What we're going to do is, hmm, go back into code here. And we push item.time. Not dot time, dot replace. Capital Z with nothing. Get rid of the Z here at the end. There we go. There we go. There we go. There we go. There we go. Let's make sure this is doing this correctly. Okay, it is getting rid of the Z. Now we'll see if it gets rid of the T. It does, okay. We're formatting our dates correctly. We're still not getting what we want out of the cursor. Okay. Okay. Still nothing. Okay, we're going to try something here. Cancel this out. What we're going to do with our time is make sure that this isn't a problem by saying new date. Save that. Put a comma in there so it doesn't error out. They're all going to be at the same time with this, but we'll see if that allows us to show the data. Let's see what date it is. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Okay. Let's try something here. We know it's something that will be accepted by moment. We could just say... Not what I wanted. Push. Push. Okay. That's not what we're looking for either. We're making movement. Okay. We're about out of time, so what I'm going to do is stop here. We're going to continue working on this next week. We may have an interview, actually. We'll see. I may be interviewing someone who's been working with IoT, but if not, we'll be working on this some more. And, yeah. So I will be continuing on with this project. I'll be looking at chart.js time. We're going to do this. We're going to use that index. We're almost out of time here. Does that work? Okay. It's working. I did put in a number, but it's still not showing anything in the graph, so I'm going to look into that. Other than that, yeah. Thanks so much for joining me, and hopefully you enjoy the rest of your day and the next Cloudflare TV segment. And thanks. Have a good one. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye-bye. Bye -bye. Bye-bye.