This example shows how you can build a nice online dashboard of your sensor data using node-red that can be displayed on any browser. It assumes you have already managed to get sensor data into node-red from the previous example here.

First, make sure the dashboard is installed in node-red. On recent builds it should be default, but if you’re using an older version of node-red, you may have to installed it via npm install node-red-dashboard. Once installed, you should see the dashboard tab next to the debug console on the right side:

screen-shot-2016-10-11-at-2-55-37-pm

Under the “Tabs” setting, press + to add a tab, and then hover over the tab to add a “Group”. UI elements must be placed inside these “groups”, which allow you to organize them. IN the end, you should have at least one tab and one group inside:

screen-shot-2016-10-11-at-2-59-29-pm

Now you’re ready to place a UI object. Go to the node palette on the left side, and scroll down until you see the dashboard nodes:

screen-shot-2016-10-11-at-2-51-36-pm

For the basic example, we will attach a gauge graph display to a single channel of analog input. To do so, drag and drop a gauge node into your flow:

screen-shot-2016-10-11-at-2-53-56-pm

Double click the node to bring up its settings:

screen-shot-2016-10-11-at-3-00-59-pm

Make sure we place it in the right group (in this case, Tab 1 Group 1), and also set the min max to go from 0 to 1023 (this is the range of values the sensors take, if you recall from the previous example). The Label field will show up in your flow, and you can name it whatever you like.

Now, deploy the node, and your dashboard is now active! To see it, append “/ui” to the end of the address in the browser. For example,

http://192.168.1.102:1880/ui or http://raspberrypi.local:1880/ui

screen-shot-2016-10-11-at-3-06-36-pm

And there you have it! There are a number of different UI elements that you can use in the dashboard to create really nice looking interfaces. For more information check out the dashboard documentation to get some ideas of the kind of things you can build with it.