I have the need to introduce a gauge into my UIbuilder dashboard, so looked at several options, but found that the justgage library both looks good, with plenty of options to personalise, so if anyone is interested this is how I use it in UIbuilder.
- Link the justgage & raphael libraries in the head section of your index.html file above the link for
uibuilder.iife.min.js
;
<script defer src="https://cdn.jsdelivr.net/npm/raphael@2.3.0/raphael.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/justgage@1.7.0/justgage.min.js"></script>
..and add this in the <body>
section - <div id="gauge-temp" class="gauge"></div>
to draw the gauge.
- In
index.css
, add this;
.gauge {
width: 325px;
height: 200px;
display: inline-block;
}
Those settings determine the height & width of the gauge in the dashboard.
- In
index.js
add the following;
document.addEventListener('DOMContentLoaded', () => {
// Create just one gauge up front
const tempGauge = new JustGage({
id: 'gauge-temp',
value: 0,
min: 0,
max: 100,
symbol: '°C',
pointer: true,
pointerOptions: {
toplength: -15,
bottomlength: 10,
bottomwidth: 12,
color: '#8e8e93',
stroke: '#ffffff',
stroke_width: 3,
stroke_linecap: 'round'
},
title: 'Temperature (°C)',
label: 'Temperature',
labelMinFontSize: 14,
valueFontColor: '#a2a2a2'
});
// Handle incoming data via uibuilder
uibuilder.onChange('msg', (msg) => {
if (msg.topic === 'sensorTemp') {
tempGauge.refresh(Number(msg.payload));
} else {
console.warn('Unhandled topic', msg.topic, msg.payload);
}
});
});
Those entries determine the look and feel of the gauge, see justgage docs for further details.
- To pass the data feed from node-RED to the gauge, pass a msg into the uibuilder node, comprising of a payload containing the data feed (must be a number!!), and a topic which matches the topic listed in
index.js
{"payload":37,"topic":"sensorTemp"}