Node-RED Dashboard with VNC as a control for a Raspberry Pi

Node-RED Dashboard

I am using a Raspberry Pi as a headless computer through VNC. A particular interest is learning Node-RED flow programming and within that exploration having the ability to display debugging and program execution results. I looked at LCD and OLED panels with various degrees of success and failure. The complication being executing the display coding from within a Node-RED flow.

The discovery of node-red-dashboard eliminated the need for the hardware display panel. Furthermore, the dashboard is a widget driven within Node-RED and is native to the whole concept of the object driven flow.

Using a simple LED and a Raspberry Pi, I have described building a demonstration Pi Control dashboard in Node-RED Dashboard – Pi Control.

Copy the following Dashboard Pi Control JSON flow to your clipboard and then import it into Node-RED using the Import From > Clipboard (Ctrl-I) menu option

[{"id":"506f6eb5.83671","type":"tab","label":"Pi Control"},{"id":"ac0a78e6.585068","type":"function","z":"506f6eb5.83671","name":"Toggle Global.LogSw","func":"\nif (msg.payload === 1){\n    global.set(\"LogSw\",1);    \n} \n\nif (msg.payload === 0){\n    global.set(\"LogSw\",0);    \n} \nreturn msg;","outputs":1,"noerr":0,"x":440,"y":240,"wires":[[]]},{"id":"c82e7955.6f1f88","type":"ui_switch","z":"506f6eb5.83671","name":"Log Switch","label":"Log Off/On","group":"dc750d48.9b06","order":0,"width":"3","height":"1","passthru":true,"decouple":"false","topic":"Log Enabled?","style":"","onvalue":"1","onvalueType":"num","onicon":"fa-toggle-on","oncolor":" #008000","offvalue":"0","offvalueType":"num","officon":"fa-toggle-off","offcolor":"#800080","x":130,"y":220,"wires":[["ac0a78e6.585068","f4d8cbae.46d1f8"]]},{"id":"f4d8cbae.46d1f8","type":"function","z":"506f6eb5.83671","name":"Record Events","func":"// initialise the counter to 0 if it doesn't exist already\nvar dashboardLog = context.get('dashboardLog')|| [];\n\n// stop flow when LogSw Off\nif (global.get(\"LogSw\") === 0){\n    return null;\n} \n\ndashboardLog.push(msg);\nif (dashboardLog.length > 12){\n    // Delete oldest message if > 12\n    dashboardLog.shift();\n    dashboardLog.length = 12;\n} \n// store the value back\ncontext.set('dashboardLog',dashboardLog);\n// make it part of the outgoing msg object\nmsg = {};\nmsg.payload = dashboardLog;\nreturn msg;","outputs":"1","noerr":0,"x":420,"y":180,"wires":[["4ceb65be.6b2f4c"]]},{"id":"4ceb65be.6b2f4c","type":"ui_template","z":"506f6eb5.83671","group":"8fea87c1.691648","name":"Event Log","order":1,"width":"6","height":"9","format":"<ul>\n <li ng-repeat=\"x in msg.payload\">\n <font size=\"2\" color=\"green\">{{x.topic}}</font>\n    <ul>\n        <li>\n            <font size=\"2\" color=\"black\">{{x.payload}}</font>\n        </li>\n    </ul>\n </li>\n</ul>","storeOutMessages":true,"fwdInMessages":true,"x":630,"y":180,"wires":[[]]},{"id":"f68258c3.4bb8c8","type":"ui_switch","z":"506f6eb5.83671","name":"LED Switch","label":"LED @ Pin 11","group":"dc750d48.9b06","order":0,"width":"3","height":"1","passthru":true,"decouple":"false","topic":"LED @ pin 11","style":"","onvalue":"1","onvalueType":"num","onicon":"radio_button_checked","oncolor":"#008000","offvalue":"0","offvalueType":"num","officon":"radio_button_unchecked","offcolor":"#FF0000","x":130,"y":120,"wires":[["2e2afd18.03f8e2","f4d8cbae.46d1f8"]]},{"id":"2e2afd18.03f8e2","type":"rpi-gpio out","z":"506f6eb5.83671","name":"","pin":"11","set":true,"level":"0","out":"out","x":390,"y":120,"wires":[]},{"id":"ecea6154.a1751","type":"comment","z":"506f6eb5.83671","name":"rpi-gpio LED Off/On","info":"rpi-gpio out controls a LED wired at Pin 11 on the Pi.","x":430,"y":60,"wires":[]},{"id":"ae8f99e2.7304d8","type":"config","z":"506f6eb5.83671","name":"","properties":[{"p":"LogSw","pt":"global","to":"0","tot":"num"}],"active":true,"x":130,"y":60,"wires":[]},{"id":"dc750d48.9b06","type":"ui_group","z":"","name":"Control","tab":"7b28ce76.8d16c","order":1,"disp":true,"width":"4"},{"id":"8fea87c1.691648","type":"ui_group","z":"506f6eb5.83671","name":"Log","tab":"7b28ce76.8d16c","order":3,"disp":true,"width":"6"},{"id":"7b28ce76.8d16c","type":"ui_tab","z":"","name":"Home","icon":"home","order":1}]

This is a very simple demonstration of Node-RED Dashboard. Play with the other widgets – add audio out (text to speech) , other switches, sliders, or charts!

For myself, the project outcome clearly demonstrated I did not need an LCD or OLED display. The web served Dashboard User Interface more than fulfilled my needs. Have fun!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s