Hi all, Some of you may have already used @hotnipi's lovely looking gauge before. Search results for 'hotnipi gauge' - Node-RED Forum (nodered.org).
But recently he very kindly gifted a W3C web component version of the gauge into my care. So I've made a couple of tweaks and uploaded it to GitHub so that others can start to play with it and find any rough corners that might need further tweaks. I'll likely also be adding some uibuilder specific features so that it fits in nicely with the zero-/low-code features of uibuilder and shouldn't need any front-end code once complete.
But for now, the component works OK and can be used with or without Node-RED as a standard web component that will work with any modern browser. With Node-RED, you can use it with uibuilder (the easiest way of course! 
), http-in/-out and a template or with Dashboard via the ui_template node.
Not much documentation right now - check out the comments at the top of the gauge-hotnipi.js file in the repo. You can also see hotnipi's original version with some uibuilder index files in the original folder and you can use that version of course if you prefer.
There are certainly a few more tweaks needed around colour where the contrast is a little low in places and the text shadow a little strong. Please do give feedback on your experiences and needs though and we will see what can be improved.
When I've matured the component a little more - mostly adding some documentation - I will also publish to npmjs.
For use with uibuilder, if using the main version, here is some simple code and steps to use.
- As always, add a uibuilder node, set the url and deploy.
- In the uibuilder node settings panel, go to the library tab and add the following
TotallyInformation/gauge-hotnipiwhich should install from GitHub. - Then replace the index files with the following.
index.html
<!doctype html>
<html lang="en" class="dark"><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" href="../uibuilder/images/node-blue.ico">
<title>Testing hotnipi gauges - Node-RED uibuilder</title>
<meta name="description" content="Node-RED uibuilder - Testing hotnipi gauges">
<!-- 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 / -->
<script defer src="../uibuilder/uibuilder.iife.min.js"></script>
<script defer src="../uibuilder/vendor/gauge-hotnipi/gauge-hotnipi.iife.min.js"></script>
<!-- <script defer src="../uibuilder/vendor/gauge-hotnipi/original/hotnipi-gauge.js">/* this is the orgininal version */</script> -->
<script defer src="./index.js"></script>
<!-- #endregion -->
</head><body class="uib">
<h1 class="with-subtitle">Testing hotnipi gauges</h1>
<div role="doc-subtitle">Using the uibuilder IIFE library.</div>
<div id="more"><!-- '#more' is used as a parent for dynamic HTML content in examples --></div>
<!-- size attribute only available on the new version not original -->
<!-- platehue attribute can only be a number in original version, can also be a CSS var in the new -->
<div style="position:relative;margin:0.5em;width:20em;height:20em;">
<!-- If using the old version or not using the size attrib with the new, you must wrap in a sized element -->
<gauge-hotnipi id="gauge1" min="0" max="100" multiplier="10"
zones='[{"type":"warn","cover":1,"rotate":55},{"type":"high","cover":2,"rotate":82}]'
measurement="Pressure" digits='{"size":100,"distance":14.5}' unit="PSI" rivets="true" led="true"
platehue="180"
></gauge-hotnipi>
</div>
<gauge-hotnipi id="gauge2" min="0" max="100" multiplier="10"
zones='[{"type":"warn","cover":1,"rotate":55},{"type":"high","cover":2,"rotate":82}]'
measurement="Pressure" digits='{"size":100,"distance":14.5}' unit="PSI" rivets="true" led="true"
size="15em"
platehue="--success-hue"
></gauge-hotnipi>
</body></html>
index.js
/* hotnipi gauge tests - update all gauges together */
// Gets all instances of the gauge component
const gauges = uibuilder.$$('gauge-hotnipi')
console.log('# gauges found: ', gauges.length)
// Listen for incoming messages from Node-RED and action
uibuilder.onChange('msg', (msg) => {
// console.log('Msg.payload: ', msg.payload, typeof msg.payload, isNaN(msg.payload))
// Make sure that the input is a number - if not, just ignore
if (isNaN(msg.payload)) return
// Update all instances of the gauge
gauges.forEach(function (el) {
// console.log(el)
el.update(msg.payload)
})
})
Note: Change <html lang="en" class="dark"> to <html lang="en" class="light"> if you prefer light mode rather than dark. Remove the class completely if you want light/dark to be set by the browser preference (this is a feature of uibuilder's uib-brand.css file).
