Abstract: Node-Red is an open source visual interface development tool based on Node.js. It can complete data visualization by dragging and dropping without having to master Node.js.

1. First take a look at how Node-Red renders the data

You might think you have to be good at the front end to make a page like this, but it’s really just a few drag-and-drop operations

Node-red itself is born for MQTT, so it is very suitable for Internet of Things data display, support database operation, MQTT protocol, and users can also use HTML and other front-end interface modification on the basis of it. If you want to display your data quickly and beautifully, try Node-Red. Of course, you want to install it, also very simple ~~

2. Install

You first need to install nodejs (there are many examples on baidu, also pretty simple, does not explain), and then in the console input NPM install – g – the unsafe – perm node – red;

To keep Node-red running in the background, use this command: nohup node-red &

The complete installation steps are as follows

  • Install the NodeJS environment
sudo apt-get install nodejs
Copy the code
  • Installation node – red
sudo apt-get install npm
sudo npm install -g node-red
Copy the code
  • Normal operation
node-red
Copy the code
  • Background running
nohup node-red &
Copy the code

3. Example

Show me my own display of temperature and humidity page

Nede-red this tool, easy to use and simple, very suitable for beginners. To share with you my data show, attached source code (page to make an appearance, only for exchange learning) including connection MQTT server, data insert mysql database

Data display page

In the following interface, I have displayed two temperature and two humidity data. When the subscribed topic receives the message, it parses the JSON data format to obtain the temperature and humidity data and displays it in the front end

Layout:

Notice that in this layout, the database is used. I use mysql, just a simple insert data, for reference only.

  • The purple squares are the subscribed MQTT messages that need to be configured

  • Green indicates debugging information.

  • The blue square is the display of the layout, different parts, the display effect is different

  • Yellow square for information format conversion, mainly for the convenience of line chart display;

  • Orange square is database operation, need to connect to their own database;

In fact, the implementation is very simple, just drag and drop, and then set the corresponding parameters, basically no programming ability. And, as long as there is data, it can be displayed by Nodered.

Click to follow, the first time to learn about Huawei cloud fresh technology ~