Realtime Monitoring of Arduino Inputs on a Webpage using Node RED

This video tutorial demonstrates how to use Node-RED to create a webpage which updates in realtime to show data sent from an Arduino over a USB serial cable. The data contains four values representing the state of four Reed switches, which is a commonly used method for an object-placement puzzle in an Escape Room.
The Arduino sends the four values as a comma-separated string (CSV). A Node-RED Serial In node receives this value, it is split using a Function node, and then passed to four Text nodes to display on a dashboard UI. I then add some Change nodes to format the output - changing the 0/1 values to words, and colouring them green/red. This webpage could be displayed on a monitor in a control room, where a gamesmaster is able to see in real-time the state of any puzzle, and provide appropriate guidance for players.
This video is part of a series of how to use Node-RED as Escape Room control software, and was made possible by the generous donations of my Patreon donors: www.patreon.com/playfultech
Timings
---
00:00-01:51 Introduction and Demonstration
01:52-09:06 Sending Serial data using Arduino
09:07-19:05 Receiving Serial data with Node-RED

[@adaminsanoff]

As my first Node-Red project, I was able to display the output of a triple axis acceleration sensor. Great! Thank you very much!

[@KK-fh1ds]

Truly amazing channel man. Thank you so much for your work

[@ziomalZparafii]

Also small tips for all that are starting with Node-RED: 1) 14:35 you don't have to delete the lines and then reconnect them to the inserted node - you can drop new node on the line and it will be inserted automatically - a bit faster; 2) 13:33 also, with lots of dashboard nodes, you can quicker assign them to particular groups on the side panel just by drag and drop

[@AzeusSindi]

Dude thank you, your a legend!!!

[@JoorgeJunior]

Thank you very much for you help!! You are a legend!

[@syaduinotech3681]

Very good sharing and smooth coding experience for the function side. I was discover the way to do it in simplified manner, using the switch > switch (insert the argument, example sensor1=) and read from that angle. However, I really appreciate the knowledge you share about array applications. Thanks sir

[@OthmanAlikhan]

Thanks for the video =)

[@prabugnanaraj]

Thanks for the video. Would like to introduce millis () to eliminate debounce to avoid harmonics in industrial application.

[@TekGeekDad]

Loving your channel as a maker for ideas and solutions. Interested in the remote nature of seeing status and control. Have you tried a trully wireless remote management interface like with the arduino iot cloud now as an example. Keep the awesome videos coming.

[@ziomalZparafii]

12:20 - the whole code could be written in a shorthand version as oneliner ;-) >> return msg.payload.trim().split(',').map(v => ({payload: v}));

[@seanporter2687]

Great job as always! I’m hoping to see how you take this further... for example, you have your 4 reed switches, once correctly placed it shows on your node screen, but how do we then get it to action say a mag lock? Would this have to be programmed into the Arduino or can node control the mag lock? This would allow for the games master to manually trigger a mag lock if they wished... also, if we wanted 4 puzzles, how would we link these up to the node at the same time (is it even possible) :) look forward to more videos and hopefully you can cover my questions :)

[@tatianavelasquezcastaneda8733]

Thanks for the video!! you are amazing!! I saw some other videos from you, and it would be cool to create AR from RFID tags!!!!!!! is it possible??? Thanks!

[@aihysp]

there are nodes for split set payload. its very cool that you are doing it by function node but missing the all point of noob red :)
the serial node is new to me so very cool :) i have allot of Arduino laying around i will make use of it :)

[@PlayfulTechnology]

If you'd rather use one or more of the built-in (or contributed) Node-RED nodes, that's fine! I'm a programmer, so I find the function nodes the easiest and most flexible to use.

[@amirtelecom6898]

Hello sir,
can I add a temperature and humidity sensor ?

[@paulm5873]

can you do the opposite, have node red control arduino outputs?

[@duartecancela]

It's possible to read and write data at same time?

[@jasondevine6014]

I would have liked a link to source code. I checked your GitHub but couldn't see it there... I know it is simple but syntax and all ....