With the rapid development of automation control and Internet of Things (IoT) technology, the design of Human Machine Interface (HMI) systems is increasingly favouring intuitive and easy-to-use touch graphical control interfaces. Compared with traditional control elements such as buttons, knobs and levers, the use of touchscreens to manipulate/monitor the production process of machines has the following advantages:
Easy to update: You can add new elements to the software-based GUI at any time, making it easy to adapt the functions to the needs of the production line.
Greater safety: The traditional HMI uses keys to enable manipulations, whereas the Touch Graphical Interface can be controlled by software, including warning messages, double input confirmation or password unlocking, to provide greater security control over machine operation.
Although touch HMI design is a professional subject, using Raspberry Pi and the freeware Node-RED to design a touch graphical interface is simple and easy to learn. Without requiring too much programming knowledge, people can quickly develop a small touch HMI at home using Node-RED. Follow us now to create the Smart Home Touch HMI!
1. Install Node-RED
Node-RED is a visual programming software developed by IBM based on Node.js. By dragging and dropping node icons, you can create process code, which greatly reduces the burden of writing programs for developers. Because the software is free and easy to learn, it is widely used in IoT application development.
Raspberry Pi OS 32bits has the Node-RED application built in. Click on the Raspberry Pi menu and you will find Node-RED in the Programming folder.
If you use a different version of the Raspberry Pi operating system, you can install Node-RED manually. Open [Terminal] and type in the following commands （Node-RED Installation instructions）
bash <(curl -sL https://raw.githubusercontent.com/node-red/linux-installers/master/deb/update-nodejs-and-nodered)
⏺ Run Node-RED ① Click the Node-RED icon to run Node-RED
② Run Chromium ⇨ key in the local ip:1880 ( the example is 192.168.101.251:1880 ) (The default connection port of Node-RED is 1880)
🎁 Note：How to check the local IP of RPI Run Terminal ⇨ Input " hostname -I "
2. Add more Node-RED nodes
The installed Node-RED only contains some basic nodes. If you want to develop the flows of controlling Raspberry Pi GPIO devices, you need to load more nodes.
⏺ Add nodes of GUI dashboard：Click the menu icon on the up-right corner⇨click [manage palette] ⇨ click [install] ⇨ input ”dashboard＂to search ⇨ select [node-red-dashboard] to install
⏺ Add RPI gpio nodes：input ”gpio” to search ⇨ select [node-red-node-pi-gpio] to install (Remark：this set of nodes is included Raspberry Pi dedicated version of Node-RED has included this set of nodes)
⏺ Add node of DHT sensor ：enter ”dht” to search ⇨ select [node-red-contrib-dht-sensor] to install (Remark：DHT-11 is used in this example)
⏺ Add UI-LED node：enter ”ui-led” to search ⇨ select [ node-rede-contrib-ui-led] to install
⏺ Add timer node ：enter ”timer” to search ⇨ select [node-red-contrib-timer] to install
🎁 Note: More useful nodes can be found on Node-RED website https://flows.nodered.org/search?type=node
3. Control GPIO Device on/off
We can design the switch button on Node-RED dashboard to turn on and off the LEDs connected to the GPIO pins of the Raspberry Pi. ⏺ Hardware Installation Connect the red LED onto GPIO and GND pins on Raspberry Pi. ⏺ Software Settings Follow the following steps to design a flow for controlling the red LED on/off in Node-RED. ① In the left column, look for the 'button' node inside dashboard and drag it onto flow 1 page.
② Double click 'button' to open the settings. Add a new dashboard group first. Enter the label name and set the payload as number=1.
③ Drag a 'rpi-gpio out node' to the page, set its BCM GPIO pin, and check the default value as 0. Connect the two nodes.
④ Refer to step ① to add a button with LED OFF and connect it to PIN 10; in addition, drag the LED node from the dashboard to the page and connect it to the two button nodes. Set the LED node. Let it display red when receiving number=1, and display grey when receiving number=0.
⑤ Design the layout of the dashboard: Click the menu icon in the upper right corner ⇨ click [Dashboard] ⇨ click the [Layout] button to open the design page of the dashboard.
Set the width of the dashboard by the [Width] item in the upper right corner. Drag or zoom the nodes to the desired position. (Note: If the node size is default auto, then you can't drag/zoom, you need to set a size first.)
⑥ After the dashboard layout is done, click the [Deploy] button at the upper right corner to adopt the settings. Tap the dashboard button to go to the dashboard, you can see the buttons and LED li
4. Read and Display Data of GPIO Sensor
Node-RED can read the sensors on the GPIO and display the data as gauge or chart. Take DHT-11, a temperature and humidity sensor, as an example, design a dashboard to observe/record the temperature and humidity of a room.
⏺ Hardware Installation Connect the power pin of DHT-11 to 3.3V pin on RPI Connect the ground pin of DHT-11 to GND pin on RPI Connect the signal pin of DHT-11 to GPIO 04 pin on RPI
⏺ Software Settings
Drag and connect the nodes as the following flow.
① Drag a [timestamp] node inside common, and set it as interval of every 3 seconds.
② Drag and drop a [ rpi-dht22 ] node inside Raspberry Pi, set the signal pin to GPIO 04.
③ Set data function: Leave blank for temperature and set humidity function as msg.payload=msg.humidity
④ Set the display of gauges：Set the label, range, unit and colors.
⑤ Set the display of charts：set the range and unit of x-y-axis
⑥ Click [layout] ⇨ arrange the dashboard layout
⑦ After clicking [Deploy], go to dashboard to check the temperature and humidity charts.
5. Set a Timer for GPIO Device
A timer can be quickly created by using the timer node. Clicking the button on the Node-RED dashboard to start the timer and turn on the GPIO device, which will be automatically turned off at the end of the time.
⏺ Hardware Installation
Connect the blue LED to the Raspberry Pi GND pin and GPIO24 pin.
⏺ Software Setting
Build a flow as shown on the right：
① Drag a 'button' node and set its payload as true.
② Set the timer node as 60 seconds and send out 1 or 0 as on / off.
③ Set the pin of GPIO device and check the initial value as 0.
④ Set the display colors and value of the LED node.
⑤ Set the gauge node as compass to countdown the reading of the timer.
⑥ Click [layout] button to design the dashboard layout ⇨ click [Deploy] to apply
⑦ Tap the button to turn on the blue LED and timer, and the Led is turned off after 60 seconds.
6. Control the Brightness of LED with Slider
The slider node of the Dashboard is a slider control item, which can be used to control the input of GPIO current. Design a slider to control the brightness of the LED light.
⏺ Hardware Installation
Connect the green LED to the GND and GPIO 12 pins on RPI.
⏺ Software Settings
Build a flow as shown on the right：
① Drag the [timestamp] node and set the payload as 0.
② Drag a node ⇨ set the label and the range as 0~255
③ Set the pin of gpio out node as GPIO 12, and select the type as PWM output.
④ Set the display of gauge node.
⑤ Set all these nodes into a new group – slider. Click [layout] to arrange the dashboard layout.
⑥ After clicking [Deploy], tap and move the slider to modify the brightness of the green LED.
7. Wrap Up
After the Norde-RED flows has been developed, remember to input the following command in Terminal to set Node-RED to run automatically on boot.
sudo systemctl enable nodered.service
After booting up, just open your browser and click on the Node-RED website to view the sensing data and control device on/off immediately.
Developing a touch graphical user interface with Node-RED is easy and fun. Try it out and let the professional touch GUI dashboard be a plus for your maker projects!
