Node-Red - Getting Started with Dashboards

What Will I Learn?

In this tutorial, the following will be covered:

Prerequisites to work with Node-Red
Node-Red installation
Integration of UI in Node-Read using dashboard

Requirements

Before getting started, a user should have installed the following module:

NodeJs which can be downloaded at https://nodejs.org/en/download/

Do not worry if you have not installed Nodejs in your environment, it will be covered in this tutorial.

Difficulty

Basic

Tutorial Contents

Installing Nodejs

To get started with this tutorial, you should have Nodejs installed in your environment. So, the first thing is to open the following website: https://nodejs.org/en/download/

Windows Users
Click on the Windows Installer option and the download will start automatically.

macOS Users
Click on the macOS Installer option and the download will start automatically.

Screen Shot 2018-01-18 at 3.22.23 AM.png

Once the file is already downloaded, open the file and a windows like the following will appear:

Screen Shot 2018-01-18 at 3.26.11 AM.png

In this windows, click on the continue button and the following step will appear:

Screen Shot 2018-01-18 at 3.27.20 AM.png

Take your time to read the license agreement and when you are ready, click on Continue and the following windows will appear:

Screen Shot 2018-01-18 at 3.28.58 AM.png

So, they are making sure you read the license agreement. So, click on Agree if you are ready. When you click in the Agree button, the next step will appear to choose where Nodejs will be installed. By default, it is recommended leave it as it and click on Continue:

Screen Shot 2018-01-18 at 3.30.15 AM.png

After clicking on Continue, the next step appears and you are ready to install. Click on the Install button and the installation will begin. Note: If it ask for your password, introduce it.

Screen Shot 2018-01-18 at 3.32.19 AM.png

Once it is done, it will tell you that it is finished and you will click in the Close button:

Screen Shot 2018-01-18 at 3.32.51 AM.png

And to make sure that NodeJs was installed correctly, run a command line and run the following command:

node -v

And the version of the currently version of NodeJs installed should appear:

Screen Shot 2018-01-18 at 3.35.18 AM.png

Installing Node-Red

Now, we are able to install Node-red. To do so, in a command line run the following command:

For Windows users:

npm install -g --unsafe-perm node-red

For macOS users:

sudo npm install -g --unsafe-perm node-red

Screen Shot 2018-01-18 at 3.39.40 AM.png

Once this process is done, proceed to run a Node-Red instance by running the following command:

node-red

Screen Shot 2018-01-18 at 3.41.36 AM.png

It start running in http://127.0.0.1:1880/. Open this url and you will expect a windows like the following:

Screen Shot 2018-01-18 at 3.43.24 AM.png

Integrating dashboard UI

To install the dashboard UI, we need to install the dashboard dependencies. To do so, click in the hamburger menu in the right corner:

Screen Shot 2018-01-18 at 3.45.19 AM.png

Then click into the "Manage Palette" item.

Screen Shot 2018-01-18 at 3.46.00 AM.png

This windows will appear, so click into the Install tab and write dashboard into the searcher:

Screen Shot 2018-01-18 at 3.46.50 AM.png

Find the one named: node-red-dashboard and click on install:

Screen Shot 2018-01-18 at 3.47.04 AM.png

Then, close this windows by clicking the red "Close" button in node-red.

Now, if you scroll down in the left side menu, you will see dashboard items:

Screen Shot 2018-01-18 at 3.48.56 AM.png

In this tutorial, we will create something simple, a Gauge controlled by an slider. So, from this list, drag and drop a Slider and a Gauge to the workflow:

Screen Shot 2018-01-18 at 3.50.05 AM.png

Then connect both:

Screen Shot 2018-01-18 at 3.50.59 AM.png

Now, double click the slider item and click where it says: Default [Unassigned] then click in Add new ui_group:

Screen Shot 2018-01-18 at 3.52.07 AM.png

And click into the edit icon and the following windows will appear:

Screen Shot 2018-01-18 at 3.53.09 AM.png

And you should click on add since the default settings are fine for testing. Then the previous windows will appear and click in the "Done" button.

Screen Shot 2018-01-18 at 3.54.16 AM.png

Then, double click into the Gauge item and click where it says: Default [Unassigned] then click in Default [Tab 1]:

Screen Shot 2018-01-18 at 3.55.21 AM.png

Then click on the Done button.

Now, we are ready to deploy the changes to see the dashboard! To do so, click on the Deploy button in the header (it is in the left side of the hamburger menu icon):

Screen Shot 2018-01-18 at 3.56.17 AM.png

To see the dashboard, open the following url http://127.0.0.1:1880/ui and you will get the same exact windows:

Screen Shot 2018-01-18 at 3.57.18 AM.png

Move the Slider and you will see the changes reflected into the Gauge:

Screen Shot 2018-01-18 at 3.57.55 AM.png

And this is all! We have our first Node-Red dashboard ready! In the next set of tutorial I will be discussing the following:

Using the Utopian API to display insight data into the dashboard
Deploying to Heroku
Rest API endpoints

Posted on Utopian.io - Rewarding Open Source Contributors