Using Node-Red with Water Level Monitoring from prior recipe

I'm attempting to follow this Water Level Monitoring recipe and it's my first experience with Node-Red:

I've put together everything with the raspberry pi and am stuck at the following code that if I understand correctly gets places within the node "calculate percentage"

How is this parsed? Do the id's refer to nodes?

Any links that would help me understand how to connect this last bit?

Thanks so much!


[{“id”:”14bf53f7.3fe83c”,”type”:”rpi-srf”,”z”:”368819c8.13b4b6″,”name”:”Sensor”,”pins”:”13,11″,”x”:66,”y”:104,”wires”:[[“c25630c9.c2d08”]]},{“id”:”c25630c9.c2d08″,”type”:”function”,”z”:”368819c8.13b4b6″,”name”:”Calculate Percentage”,”func”:”var distance = parseInt(msg.payload);
var EmptyDist = 108 – distance;
msg.payload = parseInt((EmptyDist/108)*100);
//msg.payload =(100- parseInt((temp/125)*100));
return msg;”,”outputs”:1,”noerr”:0,”x”:267,”y”:104,”wires”:[[“cd8cf3db.151e4″,”c3900b65.a67de8”]]},{“id”:”cd8cf3db.151e4″,”type”:”debug”,”z”:”368819c8.13b4b6″,”name”:””,”active”:false,”console”:”false”,”complete”:”false”,”x”:621,”y”:145,”wires”:},{“id”:”c3900b65.a67de8″,”type”:”ui_gauge”,”z”:”368819c8.13b4b6″,”name”:””,”group”:”f8c28556.6c7c98″,”order”:0,”width”:0,”height”:0,”gtype”:”gage”,”title”:”Tank Filled”,”label”:”Percentage”,”format”:”{{value}}”,”min”:0,”max”:”100″,”colors”:[“#b52100″,”#e6e600″,”#42ca38″],”seg1″:””,”seg2″:””,”x”:606,”y”:55,”wires”:},{“id”:”f8c28556.6c7c98″,”type”:”ui_group”,”z”:””,”name”:”Default”,”tab”:”8caefc37.2e2b3″,”disp”:true,”width”:”6″},{“id”:”8caefc37.2e2b3″,”type”:”ui_tab”,”z”:””,”name”:”Home”,”icon”:”dashboard”}]

What you see right after the formula is the Node-RED flow in JSON format. Normally you would just copy this text and import it into Node-RED however the text is bad formatted (smart quotes have been inserted).

Please try to import the code below instead:

I did not test since I dont want to install the sensor node node-red-node-pisrf in my pi

[{"id":"133dcbd1.26b674","type":"tab","label":"Flow 2","disabled":false,"info":""},{"id":"f1845280.b91f7","type":"rpi-srf","z":"133dcbd1.26b674","name":"Sensor","pins":"13,11","x":200,"y":240,"wires":[["b4188623.fbd5e8"]]},{"id":"b4188623.fbd5e8","type":"function","z":"133dcbd1.26b674","name":"Calculate Percentage","func":"var distance = parseInt(msg.payload);\nvar EmptyDist = 108 - distance;\nmsg.payload = parseInt((EmptyDist/108)*100);\n//msg.payload =(100- parseInt((temp/125)*100));\nreturn msg;","outputs":1,"noerr":0,"x":440,"y":240,"wires":[["67589046.21737","5d584b1c.d31134"]]},{"id":"67589046.21737","type":"debug","z":"133dcbd1.26b674","name":"","active":false,"console":"false","complete":"false","x":755,"y":281,"wires":[]},{"id":"5d584b1c.d31134","type":"ui_gauge","z":"133dcbd1.26b674","name":"","group":"60bf657f.d286dc","order":0,"width":0,"height":0,"gtype":"gage","title":"Tank Filled","label":"Percentage","format":"{{value}}","min":0,"max":"100","colors":["#b52100","#e6e600","#42ca38"],"seg1":"","seg2":"","x":740,"y":191,"wires":[]},{"id":"60bf657f.d286dc","type":"ui_group","z":"","name":"Default","tab":"9b9e293e.9325c8","disp":true,"width":"6"},{"id":"9b9e293e.9325c8","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

So if I'm understanding correctly, the square brackets are defining arrays of the various objects contained within the curly brackets.

A couple of questions:
For code clarity, are '//' supported as comments?
Would line breaks affect JSON parsing in other words does node-red need the JSON array as a single line of code?
How are the "id" 's derived? Do they point to a particular node-red object?

Thank you so much!

That is a JSON string, which represents a node red flow. To use it do not try to understand it directly, just mark and copy the whole thing to the clipboard, then in node-red click the hamburger menu in the top right, then Import > Clipboard. Paste the text into the import window and click Import. That will import the flow (which may be a complete tab in which case it might not be obvious anything has happened, you will have to go to that tab).

Edit Have you read the node-red documentation? There is a link at the top of this page.

1 Like

Thank you. I've deployed this code into my flow. I appreciate your help.

Perhaps you could guide me where to look next.

My flow has a gauge widget. However when I reboot my rpi, restart node red and point my browser to
I get a blank screen with a watermark prompting me to add some UI nodes to my dashboard. Is there an additional widget that the guage is dependent upon?

As you redeployed the flow (clicked on the red deploy button) and your flow is not disabled then it should work.

Let´s try using this modified flow. I replaced the contrib node that triggers the flow by an inject node. The purpose is to verify your dashboard.

New flow to import and test:

[{"id":"f074609f.b53e1","type":"tab","label":"Flow 3","disabled":false,"info":""},{"id":"372f3834.7790e8","type":"function","z":"f074609f.b53e1","name":"Calculate Percentage","func":"var distance = parseInt(msg.payload);\nvar EmptyDist = 108 - distance;\nmsg.payload = parseInt((EmptyDist/108)*100);\n//msg.payload =(100- parseInt((temp/125)*100));\nreturn msg;","outputs":1,"noerr":0,"x":440,"y":240,"wires":[["61d5bc5c.47a184","6a954079.7549a"]]},{"id":"61d5bc5c.47a184","type":"debug","z":"f074609f.b53e1","name":"","active":false,"console":"false","complete":"false","x":755,"y":281,"wires":[]},{"id":"6a954079.7549a","type":"ui_gauge","z":"f074609f.b53e1","name":"","group":"ce6e41c8.cc14b","order":0,"width":0,"height":0,"gtype":"gage","title":"Tank Filled","label":"Percentage","format":"{{value}}","min":0,"max":"100","colors":["#b52100","#e6e600","#42ca38"],"seg1":"","seg2":"","x":740,"y":191,"wires":[]},{"id":"9d30e32d.43048","type":"inject","z":"f074609f.b53e1","name":"","topic":"","payload":"30","payloadType":"num","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":210,"y":240,"wires":[["372f3834.7790e8"]]},{"id":"ce6e41c8.cc14b","type":"ui_group","z":"","name":"Default","tab":"55d65684.88fa78","disp":true,"width":"6"},{"id":"55d65684.88fa78","type":"ui_tab","z":"","name":"Home","icon":"dashboard"}]

This is what you will see in the editor:

This is what you should see in the dashboard after you click in the inject node


Ok, added this new flow and deployed but still the same result in:


Which is my rpi. Do I have to stop and restart node-red on the pi with each redeploy? Also should I delete the prior flow or can there be multiple flow tabs?

So you get a screen like the one below when you point your browser to the dahsboard endpoint ?


I confirm there is no need to restart Node-RED after you deploy / redeploy a flow.

Also there is no need to delete other existing flows in the editor. We can have several flow tabs at the same time.

Yes, that is the screen I get after following all instructions to date.

This is not bad at all as it means you are hitting Node-RED runtime, but of course, there is something to understand and fix.

Do you see any error message in the initialization log ?

Looking at your log what is the version of Node-RED, Node.JS and Dashboard that you see in the screen ?


The rest of the initialization loads fine.

I appreciate your help a lot. However the coffeeshop I'm working out is shutting down and I'll pick up tomorrow with any suggestions that you might have. This node-red stuff is super interesting!

1 Like

@phreshsprout - So you are doing this work at a coffee house, correct?
Do you have a laptop? if so what os/version is it running?
Is the RPi in the coffeeshop with you?
How are you connecting to the RPi?
If using WiFi, how did you include the coffee house's ssid/passcode into the RPi?
Are you running Node-RED on the laptop or on the RPi?
Have you setup any security in Node-red?

I'm concerned that the coffee house's network may be blocking something and that working on an open network may leave you vunnerable to getting hacked.

Yes, working at a coffeeshop on a mbp osx 10.10.5
The rpi is here at the coffeeshop, I'm connecting via wifi.
I configured /etc/wpa_supplicant/wpa_supplicant.conf with the network credentials via eth0 with my mbp and rpi first, then disconnected the ethernet cable and used lanscan to find my rpi on the coffeeshop network.

I'm running node red on the rpi. (ip address):1880
I have not setup node red security yet.

I understand your considerations, I can harden the security after getting things to work. I can log in my rpi over wifi, connect to node-red on the rpi but the sticking point currently is getting prompted for a UI node when I believe I have one in my flow.

Is a guage node sufficient as a UI? Or is there another dependency I need?

Although I'm a noob, it looks like the JSON string parsed correctly into the Guage Node.

And here the flow is enabled, (I think)

Ok, In rereading some instructions, I failed to "click" on the the inject node. After doing so, I get a guage!


Ok, now after importing Andrei's code, and changing the GPIO pins (from 13,11 to 16,18 ) detailed here:
(I hope this is considered as referenced material and not considered spam)

I was able to get it working and updating in real-time! This is so exciting !!

I so appreciative of Andrei's, Colin's and zenofmud attention and input, this is so great !!
Yay! Success !!


Hello, ive tried to import all the codes into my clipboard, all to no avail. However, I really need to see what's inside the function node- a screenshot of it would be appreciated, or a link to the github repository. And, if there is anyone here that can put us through on how to upload this flow to the cloud.
Please, contact me on "GIDEONBUSAYO@GMAIL.COM". Thank you.

Thanks, it's my browser- I've gotten around it. But, I still need someone to put me through on how to upload this on a cloud server. Thanks in anticipation.

Hello, I really appreciate what you've done here. I'm a newbie in coding- thanks to nodered, I've deployed some projects successfully. I'm currently working on a smart water level detector- where I would get the value of water in a tank, using ultrasonic sensor. The sensor is placed on top of the tank. I used dashboard guage for the readings. The sensor works with distance; the farther the distance, the higher the sensor value. This case should be the otherwise in the project I'm working on. I want it to be in a way such that: the closer the water is to the sensor ( in this case, when the tank is getting filled up) I would like the sensor value to increase, in stead of decreasing.
How do I invert the ultrasonic sensor reading output on the dashboad- guage of node red?

as long as you have a very recent version of dashboard you can set the the min to be 100 (for example) and the max to 0... but then the numbers would "look" wrong - you would probably be best using a range node to change the number range for you before the gauge node.