Node-RED Dashboard on Raspberry Pi 4: Live Gauges and GPIO Switches

Node-RED is a flow-based programming tool that runs in your browser. Instead of writing a full program, you connect nodes: an input that produces messages, functions that transform them, and outputs that display or act on them. On a Raspberry Pi 4 it is a fast way to build monitoring panels, home automation logic and IoT gateways, and you can still drop into JavaScript whenever a node does not do exactly what you need.

In this tutorial you will install Node-RED, add the FlowFuse Dashboard 2.0 user interface nodes, build a dashboard that shows CPU temperature on a gauge and a history chart, and add a switch that turns an LED on GPIO17 on and off from any phone or PC on your network.

How Node-RED Flows Work

Every node passes a JavaScript object called msg to the next node. The main value travels in msg.payload, and optional properties such as msg.topic label it. A flow runs whenever its first node emits a message, for example on a timer, when a GPIO pin changes or when a dashboard button is pressed.

Node	Palette	Role in this project
inject	common	Fires every 5 seconds to start a reading
exec	function	Runs the shell command vcgencmd measure_temp
function	function	Extracts the number from the command output
ui-gauge	dashboard 2	Shows the current temperature
ui-chart	dashboard 2	Plots temperature against time
ui-switch	dashboard 2	On/off control in the browser
rpi - gpio out	Raspberry Pi	Drives GPIO17 high or low

Installing Node-RED

The Node-RED project maintains an install script for Debian-based systems including Raspberry Pi OS. It installs a supported Node.js version, Node-RED itself, and optionally the Raspberry Pi GPIO nodes. Answer yes when it asks about Pi-specific nodes.

bash <(curl -sL https://github.com/node-red/linux-installers/releases/latest/download/update-nodejs-and-nodered-deb)

sudo systemctl enable nodered.service   # start at every boot
sudo systemctl start nodered.service
node-red-log                             # watch the log; Ctrl+C to exit

Open http://pi4lab.local:1880 in a browser to reach the editor. Then open the menu, choose Manage palette, Install, search for @flowfuse/node-red-dashboard and install it. The new dashboard nodes appear in the left palette.

Wiring the LED

Connect GPIO17 (physical pin 11) through a 330 ohm resistor to the LED's anode and the cathode to GND (pin 9), the same circuit used in the GPIO basics article.

Building the Flow

Drag in an inject node. Set Repeat to interval, every 5 seconds, and tick Inject once after 0.1 seconds.
Add an exec node. Set the command to vcgencmd measure_temp and untick Append msg.payload. Connect the inject node to it.
Add a function node named Parse temp, paste the code below, and connect it to the exec node's first (stdout) output.
Add a ui-gauge. Create a new ui-group and ui-page when prompted (for example page Pi 4, group System). Set the range 30 to 90, units C, and colour segments at 60 and 75.
Add a ui-chart of type line in the same group, and connect both the gauge and chart to the function node.
Add a ui-switch labelled LED with on payload 1 and off payload 0 (number type), and connect it to an rpi - gpio out node set to pin 11 / GPIO17, digital output, initialised low.
Click Deploy, then open http://pi4lab.local:1880/dashboard.

Function node 'Parse temp' - turns vcgencmd output into a number

// Input from the exec node, e.g.  "temp=52.6'C\n"
const text = String(msg.payload).trim();

// Pull out the first number (allowing a decimal point)
const match = text.match(/[0-9]+(\.[0-9]+)?/);
if (!match) {
    // Report bad output in the debug sidebar and stop this message
    node.warn('Unexpected output: ' + text);
    return null;
}

const temp = parseFloat(match[0]);

// Show the value under the node in the editor
node.status({
    fill: temp > 75 ? 'red' : 'green',
    shape: 'dot',
    text: temp + ' C'
});

// Remember the highest reading since deploy in node context
const peak = Math.max(context.get('peak') || 0, temp);
context.set('peak', peak);

msg.payload = temp;          // gauge and chart read msg.payload
msg.topic = 'CPU temp';      // chart series name
msg.peak = peak;
return msg;

Protecting the Editor

By default anyone on your network can open the editor and run shell commands through an exec node. Generate a password hash with node-red admin hash-pw, then edit ~/.node-red/settings.js, uncomment the adminAuth block, and paste the hash in place of the example. Restart with sudo systemctl restart nodered. The dashboard itself stays viewable, while editing requires a login.

Setting in settings.js	Purpose
adminAuth	Username and password for the flow editor
uiPort	Port for the editor and dashboard, 1880 by default
credentialSecret	Key used to encrypt stored node credentials

Troubleshooting

Exec node returns 'vcgencmd: not found': give the full path /usr/bin/vcgencmd, since the service may have a shorter PATH than your shell.
Gauge shows nothing: the payload is a string, not a number. Check the function node's output in a debug node.
GPIO node shows an error status: the Pi nodes were not installed. Install node-red-node-pi-gpio from Manage palette and make sure the Node-RED user is in the gpio group.
Dashboard URL returns 404: no ui-page exists yet, or you have not deployed since adding the dashboard nodes.
Editor slow on a 1 GB board: close unused browser tabs on the Pi or run Node-RED on the Lite image and use the editor from your PC.

Summary

Node-RED's installer sets up Node.js, the Node-RED service and the Pi GPIO nodes. With Dashboard 2.0 installed, an inject, exec and function chain turns vcgencmd output into a live gauge and chart, and a ui-switch wired to a gpio out node controls hardware from any browser. Secure the editor with adminAuth before leaving it running, and the same pattern scales to sensors, MQTT and home automation.