4 Ways to Create a Node Red Dashboard

Initial State
May 14, 2019 · 6 min read
Image for post
Image for post

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.

Image for post
Image for post

Values & Strings

Twitter

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

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.).

Image for post
Image for post
Max Temperature Change Node

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

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.

Image for post
Image for post
HTTP request node

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.

Initial State

IoT Dashboards for Real-Time Data

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store