-
-
Notifications
You must be signed in to change notification settings - Fork 85
Create gauges using the canvas gauges library
The canvas-gauges library allows you to create a nice-looking gauge (dial or linear) using vanilla HTML and JavaScript. Here is an example.
Add a uibuilder node by importing from the Node-RED examples - the "blank" example is fine. Change the inject node, add a topic and change the payload to be a JSONata expression field containing $formatInteger($random() * 100, "0")
so that you get a new random number each time you press the input button. Set it to auto-repeat if you prefer.
Once the uibuilder node has been given a url and deployed, you can now edit your front-end code like so:
<!doctype html>
<html lang="en"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Canvas Gauges Example - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Canvas Gauges Example">
<link rel="icon" href="./images/node-blue.ico">
<!-- Your own CSS (defaults to loading uibuilders css)-->
<link type="text/css" rel="stylesheet" href="./index.css" media="all">
<!-- #region Supporting Scripts. These MUST be in the right order. Note no leading / - socket.io no longer needed -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/[email protected]/gauge.min.js"></script>
<script defer src="./index.js">/* OPTIONAL: Put your custom code in that */</script>
<!-- #endregion -->
</head><body class="uib">
<h1>uibuilder Canvas Gauges Example</h1>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
<canvas id="gauge-radial-1"></canvas>
<pre id="msg" class="syntax-highlight">Waiting for a message from Node-RED</pre>
</body></html>
// @ts-nocheck
'use strict'
// https://github.com/Mikhus/canvas-gauges
var gauge = new RadialGauge({
renderTo: 'gauge-radial-1',
highlights: [
{ "from": 0, "to": 60, "color": "rgba(0,255,0)" },
{ "from": 60, "to": 80, "color": "rgba(255,255,0)" },
{ "from": 80, "to": 100, "color": "rgba(255,0,0)" }
],
width: 300,
height: 300,
units: "°C",
minValue: 0,
maxValue: 100,
majorTicks: [0,10,20,30,40,50,60,70,80,90,100],
minorTicks: 10,
strokeTicks: true,
colorPlate: "#fff",
borderShadowWidth: 0,
borders: false,
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needlCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "linear",
valueBox: true,
valueInt: 2,
valueDec: 2,
}).draw()
// var gauge = new LinearGauge({
// renderTo: 'gauge-radial-1'
// }).draw()
// Listen for incoming messages from Node-RED
uibuilder.onChange('msg', function(msg) {
// Dump the msg as text to the "msg" html element
const eMsg = $('#msg')
if (eMsg) eMsg.innerHTML = uibuilder.syntaxHighlight(msg)
gauge.value = msg.payload
gauge.update({
title: msg.topic
})
})
Note that while the gauge value can be dynamically updated, most of the gauge does not dynamically update (for efficiency - this is part of the gauge design, not uibuilder). To update other parts of the gauge dynamically, you need to use the gauge.update
function. See the canvas-gauges documentation for details.
See the canvas-gauge documentation for details on how to customise the display.
Note that this WIKI entry was written using uibuilder v6.
Please feel free to add comments to the page (clearly mark with your initials & please add a commit msg so we know what has changed). You can contact me in the Discourse forum, or raise an issue here in GitHub! I will make sure all comments & suggestions are represented here.
-
Walkthrough 🔗 Getting started
-
In Progress and To Do 🔗 What's coming up for uibuilder?
-
Awesome uibuilder Examples, tutorials, templates and references.
-
How To
- How to send data when a client connects or reloads the page
- Send messages to a specific client
- Cache & Replay Messages
- Cache without a helper node
- Use webpack to optimise front-end libraries and code
- How to contribute & coding standards
- How to use NGINX as a proxy for Node-RED
- How to manage packages manually
- How to upload a file from the browser to Node-RED
-
Vanilla HTML/JavaScript examples
-
VueJS general hints, tips and examples
- Load Vue (v2 or v3) components without a build step (modern browsers only)
- How to use webpack with VueJS (or other frameworks)
- Awesome VueJS - Tips, info & libraries for working with Vue
- Components that work
-
VueJS v3 hints, tips and examples
-
VueJS v2 hints, tips and examples
- Dynamically load .vue files without a build step (Vue v2)
- Really Simple Example (Quote of the Day)
- Example charts using Chartkick, Chart.js, Google
- Example Gauge using vue-svg-gauge
- Example charts using ApexCharts
- Example chart using Vue-ECharts
- Example: debug messages using uibuilder & Vue
- Example: knob/gauge widget for uibuilder & Vue
- Example: Embedded video player using VideoJS
- Simple Button Acknowledgement Example Thanks to ringmybell
- Using Vue-Router without a build step Thanks to AFelix
- Vue Canvas Knob Component Thanks to Klaus Zerbe
-
Examples for other frameworks (check version before trying)
- Basic jQuery example - Updated for uibuilder v6.1
- ReactJS with no build - updated for uibuilder v5/6
-
Examples for other frameworks (may not work, out-of-date)
-
Outdated Pages (Historic only)
- v1 Examples (these need updating to uibuilder v2/v3/v4/v5)