4 Ways to Create a Node Red Dashboard
Node Red is a browser based programming tool that allows you to connect code blocks that accomplish tasks. It uses nodes and flows to easily write code that can connect to APIs, hardware, or online services. A node is a predefined code block and a flow is a connection of nodes, usually an input, processing, and output node. Node Red can be run locally on your computer, on a device like a Raspberry Pi, or even in the cloud.
Node Red has been popular among anyone who builds IoT projects since it has an easy to use user interface and flows to visualize the data movement instead of having to write a lot of code. If a node doesn’t exist for what you want to do, you can even create it yourself. Node Red’s nodes and Initial State’s dashboard UI make them a great pair for those who want something easy to use.
This is exactly what Tom Gidden did two years ago. He created an Initial State node that would allow data to be pushed to a bucket to create a Node Red dashboard. The msg.topic is the signal name and the msg.payload is the signal value if it is a string or value. All you need to do to configure the Initial State node is input an Initial State access key and bucket key. This node allows for easy streaming of data from Node Red to Initial State but what kind of nodes can you use as input? There are a lot of nodes in Node Red so I will detail four input node examples that can be used and how to configure them.
Values & Strings
The easiest piece of data you can send is a value or a string. The inject input node allows you to send strings and numbers (and other things) manually or at a repetitive interval. All you have to do is add an inject node, set the payload to string or number and input the value, set the topic to the value name you want, and setup the time intervals if needed. Connect the output to your Initial State node and now you have values and strings streaming to your dashboard.
Twitter’s API makes it easy to get access to tweets. The Twitter node can output tweets by a certain user, all tweets related to a search term, DM’s received by your account, or tweets from users you follow. All you need to do to get started is go to Twitter’s developer website and create an app. This will give you a Consumer API key, Access Token, and Access Token secret needed to use their API. Enter these into the credential section of the Twitter node.
Now you can decide what kind of Twitter data you want to stream. You can choose tweets of a specific user and enter their username in the for box. Or you can choose all public tweets and enter the word you want to search for in the for box (be careful because this can produce a LOT of data). Or choose tweets of people I follow and every time someone you follow tweets, it will send as a data stream to Initial State. Or you can choose all my DM’s and your private messages will be sent. Set your preferences and connect your output to Initial State. Now you’ve got all the tweets streaming all the time.
DarkSky node
If you’ve ever used Initial State, you’ve likely heard of the DarkSky API. It is a great (and free) weather API that gives you access to weather data from around the world. We have created tutorials on how to stream this data via Python to Initial State to build a super weather dashboard. There is a DarkSky node within Node Red that polls the DarkSky API every 15 minutes for the weather forecast and outputs when a change is detected. We will use this to send weather data to Initial State.
Once you have installed the DarkSky node to your palette, you’ll need to input parameters to get it working. You’ll enter your DarkSky API secret key, longitude, latitude, and choose tomorrow’s forecast or a specific date. What this will return is a JSON output with values pairs which detail humidity, temperature, weather summary, etc. You need to use a function node to modify the payload to send data to Initial State.
A change node will allow the payload and topic to be changed so we can send values pairs to Initial State via the Initial State node. You need to change the topic to the signal name and the payload to the signal value. This will need done for each value pair you want to send to Initial State. You’ll set the message payload to payload.[value name] via an expression. The value name can be any data name in the JSON from the DarkSky node (maxtemp, mintemp, clouds, details, etc.).
Once you have created a change node for each value you want to send, connect those node outputs to the Initial State node and deploy. Now you have weather data streaming to an Initial State dashboard.
HTTP request
There is a large number of APIs on the internet that are free to use. That means you have a wealth of data at your fingertips. We have a lot of examples of how easy it is to interact with APIs. Node Red makes it just as easy with the http request node.
This node will send a request to an API and output the response. The first step is to find the URL of the API you want to use, which goes into the URL box. The method should be GET and the return should be set to a parsed JSON object. A change node can then be used, like in the Dark Sky example, to set the topic to a signal name and the payload from the JSON output via expression. A debug node is good to use for the output of the http request node so you can see what the JSON object returned has in it.
Once you have your nodes set, connect the output of the change nodes to the Initial State node. A timestamp node can be used as an input to the http request node so that the API can be requested on a timed interval. Once your data is sent you can change your dashboard layout with background images and tile types. Now you can have any API data to your Node Red dashboard.
While I have detailed four ways to send data, there are a lot more options out there. Node Red has a large amount of nodes and more are being created all the time. If you can’t find what you need, you can just create it.
