INTRODUCTION
Would you like to get the most out of Node-RED by creating a complete Node-RED Dashboard?
Follow this Node-RED tutorial and add all of the Dashboard nodes to your Node-RED user interface!
Latest Posts
NODE-RED-DASHBOARD NODES
INSTALLATION
First of all, let's install the node-red-dashboard nodes.
Once in Node-RED, check that your have Internet connection, and then go to the Node-RED menu > Manage Palette > Install > And type: node-red-dashboard.
NODES
Once installed, these are the nodes that will appear on your nodes section, with whom we will be working.
NODE-RED DASHBOARD EXAMPLE
ADDING A BUTTON NODE TO THE FLOW
Now, let's test these nodes in order set a first configuration, so that you can start playing from this point.
1- Drag the button node, and drop it to the flow.
2- Double-click on the button node in order to do the setup. For adding a new ui group, just click on the pen, change the tab and name if you want, and click on add.
3- Set a size for the widget to display it in the node-red dashboard. I.e: 3x1. If by default is set as auto, you will not be able to change it in the layout. If you set a size now, you will be able to change it later on.
4- Add a label to display to your UI dashboard. For example: ON.
5- And one of the most important things in this node is what you want to send, so, in the option:
When clicked, send:Payload: {string, number, boolean, JSON, buffer, timestamp, flow., global.}
Set the type and the payload that you want to send, once the button node is clicked.
In this case, we will set the payload type: number. And we are going to set the payload to 1.
So, when we click the button node in the UI dashboard from Node-RED, we will be sending a number 1.
6- Click on Done.
7- Deploy.
8- Do the same by adding an OFF button, with all parameters to 0.
CONNECT A GAUGE NODE TO THE BUTTONS
In order to make the values of the button useful, let's add a gauge node to display them.
1- Drag the gauge node and drop it to the flow. Wire it to the button nodes.
2- Double-click to change the parameters.
3- Add a size: like 6x4.
4- Change the type to Donut.
5- Set a label.
6- Set a range. In our case: min: 0 max: 1
7- Finally, either set a colour gradient or leave it by default.
8- Click on Done.
9- Deploy.
SETTING A WIDGET LAYOUT
Go to the right menu > Dashboard > Layout > Hover on your tab. In our case: Home > Layout. And in the layout editor, set a width depending on your screen size, and display the widgets as you want.
NODE-RED DASHBOARD
Finally, click on Done and Deploy. Click on this button, and start monitoring your Dashboard.
TESTING
Now, it is your turn! Start testing the opportunities that Node-RED offers you.
1- Simply drag & drop the dashboard nodes.
2- Configure them with the colours and layouts that you prefer.
3- Get the data from your sensors.
And based on that, create a full Dashboard to display all the data that you wish to monitor!
GET THE FLOW
Go to the menu of your Node-RED, go to Import, paste this JSON below, and import our little program to compare it with yours!
[{"id":"df93bc2e.84af5","type":"tab","label":"Industrial Shields","disabled":false,"info":""},{"id":"370cc075.95e99","type":"ui_tab","name":"Home","icon":"dashboard","disabled":false,"hidden":false},{"id":"9b345c1a.1d50e","type":"ui_base","theme":{"name":"theme-dark","lightTheme":{"default":"#0094CE","baseColor":"#0094CE","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"darkTheme":{"default":"#097479","baseColor":"#097479","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif","edited":true,"reset":false},"customTheme":{"name":"Untitled Theme 1","default":"#4B7930","baseColor":"#4B7930","baseFont":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"},"themeState":{"base-color":{"default":"#097479","value":"#097479","edited":false},"page-titlebar-backgroundColor":{"value":"#097479","edited":false},"page-backgroundColor":{"value":"#111111","edited":false},"page-sidebar-backgroundColor":{"value":"#333333","edited":false},"group-textColor":{"value":"#0eb8c0","edited":false},"group-borderColor":{"value":"#555555","edited":false},"group-backgroundColor":{"value":"#333333","edited":false},"widget-textColor":{"value":"#eeeeee","edited":false},"widget-backgroundColor":{"value":"#097479","edited":false},"widget-borderColor":{"value":"#333333","edited":false},"base-font":{"value":"-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif"}},"angularTheme":{"primary":"indigo","accents":"blue","warn":"red","background":"grey","palette":"light"}},"site":{"name":"Node-RED Dashboard","hideToolbar":"false","allowSwipe":"false","lockMenu":"false","allowTempTheme":"true","dateFormat":"DD/MM/YYYY","sizes":{"sx":48,"sy":48,"gx":6,"gy":6,"cx":6,"cy":6,"px":0,"py":0}}},{"id":"e0bb0cc5.a214f","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":1,"width":1,"height":1},{"id":"8d78289a.07f5f8","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":3,"width":17,"height":1},{"id":"f8c8af2a.1eb2b","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":4,"width":1,"height":1},{"id":"c0efb76a.fd24b8","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":5,"width":17,"height":1},{"id":"d8d15dc2.13e1e","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":6,"width":1,"height":1},{"id":"d7805eb1.a8f4e","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":7,"width":17,"height":1},{"id":"e3f78709.1c14f8","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":8,"width":1,"height":1},{"id":"9ae0e15d.9364e","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":9,"width":17,"height":1},{"id":"65e51c3a.7ea864","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":10,"width":1,"height":1},{"id":"be4a7a82.e1a678","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":12,"width":1,"height":1},{"id":"e121ea75.3ca078","type":"ui_spacer","name":"spacer","group":"9d731610.1cf498","order":14,"width":17,"height":1},{"id":"a5d3c52e.1b2358","type":"ui_group","name":"Default1","tab":"370cc075.95e99","order":1,"disp":true,"width":"25","collapse":false},{"id":"268c9638.c41dda","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":2,"width":1,"height":1},{"id":"5c821141.8305b","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":4,"width":2,"height":1},{"id":"d9ebb747.f02e88","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":6,"width":3,"height":1},{"id":"63343dcd.587e54","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":7,"width":1,"height":1},{"id":"2606fb3a.8c5284","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":8,"width":2,"height":1},{"id":"bd79d7f0.d8ed48","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":9,"width":3,"height":1},{"id":"d98b1286.0f5ca","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":10,"width":1,"height":1},{"id":"b9c39bba.a91568","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":11,"width":2,"height":1},{"id":"5be65878.01dc28","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":12,"width":3,"height":1},{"id":"c35dc643.2d8b48","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":13,"width":1,"height":1},{"id":"2639e97d.de3c56","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":14,"width":2,"height":1},{"id":"ed26ce10.98005","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":17,"width":3,"height":1},{"id":"333105f1.295d4a","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":20,"width":1,"height":1},{"id":"54f0e916.79aaf8","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":21,"width":11,"height":1},{"id":"1b170cfa.9290c3","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":22,"width":16,"height":1},{"id":"a9d23bcc.c22168","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":25,"width":3,"height":1},{"id":"8e5d9c79.a3866","type":"ui_spacer","name":"spacer","group":"a5d3c52e.1b2358","order":27,"width":19,"height":1},{"id":"4d378d6f.b169c4","type":"ui_button","z":"df93bc2e.84af5","name":"","group":"a5d3c52e.1b2358","order":18,"width":3,"height":1,"passthru":false,"label":"ON","tooltip":"It sends a number 1","color":"white","bgcolor":"#2E9348","icon":"","payload":"1","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":60,"wires":[["cdc300a7.c174"]]},{"id":"cdc300a7.c174","type":"ui_gauge","z":"df93bc2e.84af5","name":"","group":"a5d3c52e.1b2358","order":1,"width":6,"height":4,"gtype":"donut","title":"MyLabel","label":"","format":"{{value}}","min":0,"max":"1","colors":["#ff0000","#e6e600","#2e9348"],"seg1":"","seg2":"","x":640,"y":100,"wires":[]},{"id":"584cf30b.9c66cc","type":"ui_button","z":"df93bc2e.84af5","name":"","group":"a5d3c52e.1b2358","order":19,"width":3,"height":1,"passthru":false,"label":"OFF","tooltip":"It sends a number 0","color":"white","bgcolor":"red","icon":"","payload":"0","payloadType":"num","topic":"topic","topicType":"msg","x":390,"y":100,"wires":[["cdc300a7.c174"]]},{"id":"ca9fd8d6.2d71c8","type":"ui_slider","z":"df93bc2e.84af5","name":"","label":"Slider","tooltip":"","group":"a5d3c52e.1b2358","order":15,"width":5,"height":1,"passthru":true,"outs":"all","topic":"topic","topicType":"msg","min":0,"max":10,"step":1,"x":390,"y":280,"wires":[["113afc57.3c75f4","1808a023.bca5d","c61f7280.bd066"]]},{"id":"20cfff70.02bca","type":"ui_switch","z":"df93bc2e.84af5","name":"","label":"Switch","tooltip":"","group":"a5d3c52e.1b2358","order":23,"width":3,"height":1,"passthru":true,"decouple":"false","topic":"topic","topicType":"msg","style":"","onvalue":"10","onvalueType":"num","onicon":"","oncolor":"","offvalue":"0","offvalueType":"num","officon":"","offcolor":"","animate":false,"x":390,"y":200,"wires":[["113afc57.3c75f4","1808a023.bca5d","ca9fd8d6.2d71c8"]]},{"id":"5197479b.43d4a8","type":"ui_chart","z":"df93bc2e.84af5","name":"","group":"a5d3c52e.1b2358","order":3,"width":7,"height":5,"label":"MyChart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":true,"ymin":"0","ymax":"10","removeOlder":"1","removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"useDifferentColor":false,"x":640,"y":360,"wires":[[]]},{"id":"d6cf5408.f71e58","type":"random","z":"df93bc2e.84af5","name":"","low":1,"high":10,"inte":"true","property":"payload","x":400,"y":360,"wires":[["5197479b.43d4a8"]]},{"id":"1c3fefd4.c7fa7","type":"inject","z":"df93bc2e.84af5","name":"","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"1","crontab":"","once":true,"onceDelay":0.1,"topic":"","payload":"","payloadType":"date","x":150,"y":360,"wires":[["d6cf5408.f71e58"]]},{"id":"4d843376.8b075c","type":"ui_dropdown","z":"df93bc2e.84af5","name":"","label":"","tooltip":"","place":"Select option","group":"a5d3c52e.1b2358","order":26,"width":6,"height":1,"passthru":true,"multiple":false,"options":[{"label":"Connected","value":1,"type":"num"},{"label":"Not connected","value":0,"type":"num"}],"payload":"","topic":"topic","topicType":"msg","x":400,"y":140,"wires":[["cdc300a7.c174"]]},{"id":"113afc57.3c75f4","type":"ui_gauge","z":"df93bc2e.84af5","name":"","group":"a5d3c52e.1b2358","order":5,"width":6,"height":3,"gtype":"wave","title":"MyGauge","label":"","format":"{{value}}","min":0,"max":10,"colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","x":640,"y":200,"wires":[]},{"id":"1808a023.bca5d","type":"ui_text","z":"df93bc2e.84af5","group":"a5d3c52e.1b2358","order":16,"width":1,"height":1,"name":"","label":"","format":"{{msg.payload}}","layout":"row-center","x":630,"y":280,"wires":[]},{"id":"c61f7280.bd066","type":"ui_numeric","z":"df93bc2e.84af5","name":"","label":"","tooltip":"","group":"a5d3c52e.1b2358","order":24,"width":3,"height":1,"wrap":false,"passthru":true,"topic":"topic","topicType":"msg","format":"{{value}}","min":0,"max":10,"step":1,"x":140,"y":280,"wires":[["ca9fd8d6.2d71c8"]]}]