Realtime Monitoring of Arduino Inputs on a Webpage using Node RED

hi I'm Alistair in my last video I showed how you could use no dread to create a web page that updated in real time to show the values sent from an Arduino now in that example the Arduino just had a single input which was a read switch and that read high or low depending on whether a magnet was close to the Arduino or not now in this example I want to kind of take that idea a bit further so I've now got four reed switches connected to an arduino nano up here and then they go right onto ground again and if you follow my channel a lot you'll know that i do a lot with escape room puzzles this is a very typical setup for an escaping puzzle where you've got four items with magnets in them and you'd have to place them against all of the reads which is to solve the puzzle so in the corner of the screen you'll see I've got the output for my node red dash board again this time reading all four sensors so if I take a magnet and I just pass it in front of each sensor in turn you'll see that I can see on my web page in real time which one has a magnet up next to it now these are actually pretty strong magnets and I've got these sensors quite close together on the board so if you were doing this in a real puzzle you probably want to spread these out slightly more to make sure you didn't accidentally trigger more than once but hopefully if I can get that to stay there and then I do this one here so what you can imagine using this in is let's say for a games master in a control room of an escape room this is the puzzle that players are trying to solve by looking at this web page you get a real-time update of which parts of the puzzle the players have done and which bits are still remaining so here's the Arduino code it's almost identical logic to what I used in the previous example with the single reads which it's just that I've extended it to account for four reads which is in this case so right at the top of the code we've got some constants we define four senses I mean these could be any senses these could be buttons levers swiftly as I'm you Reed switches again but I called them sensors just as a generic input and we also define an array of the pins that those sensors are connected to so that's going to have the same number of elements in it as we have sensors and these are the pins which I've got my Reed's which is connected to two so I've got pins four five six and seven on the Arduino and then they're all connected to ground on the other side well then record a global variable now we're using this to record what the last known state of each sensor was so we initialize all of them at zero and then depending on whether a magnet is touched to each one so if the magnet has touch to the second model long for example this value might change to a one or if we've got magnet too connected to the last one and then this one more gentle one instead so this records the the previous known state of all of the sensors and we'll compare the new state to that to see whether any of them has changed then we have our set up function so this is what we run when the sketch first starts we initialize a serial connection at 9600 board so this is so that we are able to send the values back to node read through the USB cable which we've got connected and we loop over all of the pins so all of those sensor pins in that array and we loop over them and we define them all as input pull-ups so again I covered this last time but because when the reed switch is not in the presence so a magnet is just an open switch so the pin isn't connected to anything it won't read high although it will kind of flip between them so what we do is we define an input pull-up that's going to pull it up to a high value of 5 volts until the read switch is activated and when it is that will connect the pin through the ground which will pull it down to 0 votes or low instead so that's the setup now what I've done here is I've actually separated out the function that sends the state over USB from the loop fences what we'll do is well have a look at loop first and I'll come back to look at sin state in a minute so this is the loop function which just loops over and over while the program is running well define a boolean variable so true or false variable and we'll call it has changed so what this is going to keep track of us have any of the readings of any of the sensors changed in this frame compared to the last known stage of them and we'll assume that they happen so we'll give it a false value initially just assume that they haven't tanked and then what we'll do is well actually go and read them all and find out if they have changed or not so once again we'll loop over every sensor so however many sensors we'll go we'll loop over them and we will do a digital read of the sensor pin assigned to this sensor so if this is the first time through the loop we'll take the first pen second time through the loop go to the second pin and the third pin etc etc until we've been through all the sensors will read what the current reading is so this is going to read low if there is a magnet close to the read switch and it's going to read high otherwise and then we'll actually invert that value just because a lot of people find it easier to think of highly meaning that a button has been activated and low being it hasn't that just seems to be a bit more common sense we'll compare that reading to the previous reading that we knew about for this sensor and if it's different so that that bit there means if it's not the same we'll set the house paint variable to true and we'll also update the last state array to to store the new value here so we'll loop over every sensor in turn will read it compare it to what we last me about the sensor and if any at least one of them has James value then we'll say house changed is true okay so house came to me in the code and anyone change the doesn't mean that they all have to change but at least one and once we've done all that so we've looped over ever since it if that has changed variable has been set then we know that something is different about the state of the puzzle and we'll call this send state function instead and then we loop over that and that again each time we assume that nothing has changed until we find otherwise and then if it has we'll call so instead okay so let's go back and see what's end state does and this is not too bad either so once again you'll get pretty familiar this we loop over all the senses and we're going to call the serial dot print command now a cyril de 'print you may be familiar with using to send values to a serial monitor and that's generally what it's used for so it's quite useful for debugging arduino code because you can look at the value that any variable has on the arduino motor but what we'll be doing in a moment is will be picking up that value in node red instead so we'll loop over each sensor and then what we want to do because we're sending multiple values this time we need a way of separating them so well this time we'll only loop up to number of sensors miners one because what we're going to do is we're going to insert a comma between every value and the next one but we don't need to put a comma right at the end of the list so that's why there's a miner's one there because we don't want to put one after every element we want to put them after every element except for the last one so do minus one and then we'll put a comma and finally after the end cyril print line that means that will we'll insert a line break so we'll go on to the next line before sending the next eight so if I show you what that looks like let me load up the serial on so for example so this you might be familiar with and let me also put on my display again you can see so if I show you the serial output as I hold my magnets up so you'll see I've got 0 0 0 1 there because counting from the bottom up actually so I'm holding my board the other way around that I lost maybe flipped that round so you're starting from the top down so your 0 0 1 when I hold the magnet there and if I try to hold the 1 so this will be 1 0 0 0 0 1 0 0 0 0 one zero and so on and so on so one means that the that sensor does have a magnet in front of it and a zero means it doesn't okay now it's look how we can get that in turn a dread okay so I've got the node-red editor loaded up and the first thing I want to start my flow is to insert a serial in node like this double-click on it to configure it and now if I flip back to my Arduino again what we'll see is that this time the comport that I was using to upload my sketch to was calm v say I need to make sure I'm using the same serial port in node-red socom v there we go if that's not right you can click here and change it to something else but come far is the correct one for me so there we go this is my start of my flow is when a messages been received on that serial port connection so sent from the Audrina now in the previous example the next thing I did was sent that value straight to a text node in the dashboard so I just did that now that's not going to work in this case because this serial valid that I'm receiving is a comma separated list it's only got four values so I need to kind of split them up into four different text nodes so to do that I'm going to insert a function node instead so here we have a function mode and I'm going to connect my Cyril so this is going to send the serial data into the function though I didn't double click to the function laid we get to write a little script here so what I'm going to do is declare a new variable which I'll call output messages let's say and this is going to be an array because it's going to contain the split values from that combined value gets received so we'll save an is so we'll take our message payload so this is the comet this is the whole common list that which we received from the Arduino first of all we're going to trim it because we're going to get rid of any trailing newline characters or carriage returns which is sent on the end and then we're going to split it by the comma so the split command here this is going to take a string and it's going to split it into an array based on whatever delimiter you specify here so if we'd used let's say a semi colon separated list or if we put a space or something else in between to separate our characters you would just specify the delimiter used there instead so that's created an array called of values so now let's loop over values so we'll take each value in turn we'll call it V and we're going to put into our output array we're going to send payload which is going to equal two values I think right yeah check so so we've created an array called values we're looping over values and we're taking each one in turn calling it V and then we're going to take whatever V was and we're going to send that as a payload to output messages one at a time so output messages is going to become an array of messages in which each element contains the value that we split out based on the comma that's not very well explained to me but hopefully that makes sense and then instead of returning the single message what we're going to return instead is the array yeah I think is probably right so we'll click done on that oh no hang on one thing I've just realized is I need to increase the number of outputs because we're going to have four outputs coming out of here like that that looks a bit better okay so we've now got a four outputs corresponding to the floor split element so it split on comma now let's go back to our text data for element here say let me just copy and paste that a few times we're gonna have four of those and we're going to create each one connected to one of the outputs from our function node like that where we're going to put these let's put these in the default in the default dashboard group you see I've got a couple of already existing ones there but you can ignore those okay I let's try now let's just try to plying that and we'll see what happens okay so it's connected we got there we've got our text elements we go to our dashboard and then let me just put on my camera again okay so here we've got the Bourdon if I take my magnets you can see that we've got our zeros and ones appearing in node right now okay well that's all very well but we could probably do with making that a little bit nicer format it so let's see what else we can do with it we go back to the editor again and what we need to do now is we're going to insert a little bit of extra formatting between where the frontal node splits the message up and where they're sent to the text output so let's actually break these lines here and what we'll do instead is to add a change node which is up here and we'll connect that to the output so this top one here will just do this one to start with and what we're going to do is we're going to maybe we'll we'll make the message appear in a different color depending on whether the whether the read switch is on or off so we're going to create an expression and the expression is going to be if the message payload arriving at this node is a one so that means that the the read switch has been activated will say that the color is green and if it's not we'll say the color is red there we go and maybe maybe as well as instead of just having the value one and zero maybe we'll make that a bit friendlier as well so we'll actually change the message payload based on the received values if the payload coming into this node was a one before let's actually give it a nice name instead so we'll say I don't know true or false but you could write connected or not connected or activated or or whatever you want there so we're setting two different properties of the message the first one they're both based on whether the received value was was one or not but this one sets green and red this one sets true and false and remember the way that node red works is that the message flow gets passed long from from left to right generally the flow so we started off this was our array of values then we split it based on the delimiter which was a comma now we're modifying the payload so instead of a 1 and a 0 we're changing it to a true or false and we're also adding a new property which is going to be the colors we call it message little color and now when this node receives the value it can access the color which was set here so let's go into our text and we'll change this as well so will will actually label this so we know it on the talked about so we talked about the read one and now instead of just displaying the payload like that let's display the payload in the color that was set in the previous node in the flow so this kind of double squiggle brackets here this is how you insert an expression so MSG dot color is what we we set in the change node there and then let's just close the font at the end there okay done and in fact what I could have done let me just copy and paste that and we'll put that into all of the reads so it appears so this is read - this is read 3 and this is 3 4 and then we also want to copy and paste these rules a few times and we don't need to change anything about the rules because there's nothing here that's specific to the message every message needs to get processed the same way basically so we're going to just drag that is there like that drag those there like that and then having made those changes let's try deploying again and then we'll go to the dashboard so you'll see that the labels have been updated with those new labels read one read two we've now got colored words false because at the moment none of them are connected but if I take my magnets again I just try and secure them onto these reed switches you'll see that as they change valleys we've not got zeros and ones we've got trues and falses and they are in green and red so that's how you can create a node red dashboard which receives multiple values from an Arduino they were sent as a comma separated list we've split them out in node red sent them to different labels and we've also applied a little bit of conditional formatting just to make it easier to see what those values are and that's it thanks very much for watching

Channel: Playful Technology

Views: 26,955

Keywords: Arduino, Node-RED, Arduino Webpage, Arduino Dashboard, Web Dashboard, Escape Room Software

Id: hlc5dpv4A_A

Length: 19min 5sec (1145 seconds)

Published: Fri Nov 15 2019