Awesome

gauge-hotnipi

A nice looking gauge W3C component gifted by hotnipi for use with Node-RED, uibuilder and other uses

HTML Attributes

"min" - (number, mandatory) min value
"max" - (number, mandatory) max value
"shape" - (string, optional) shape of the gauge. "round" makes gauge round shape and removes rivets, "rect" is default
"platehue" - (number, optional) for dark theme, the plate color hue can be changed
"multiplier" - (number, optional) multiplier for all values. scale numbers and value are divided by that, gauge shows multiplier on plate (fe: x100)
"measurement" - (string, optional) the name of the measurement (temperature, humidity ...)
"unit" - (string, optional) the unit of the measurement
"rivets" - (boolean, optional) show/hide rivets. defaults to true
"digits" - (json string, optional) size and placement of the scale digits. '{"size":100,"distance":14}' size is treated as percentage, distance is arbitrary number around 15.
"led" - (boolean, optional) shows small led which blinks couple of times when update is received.
"zones" - (json string, optional) configuration of zones. An array of objects where:
- "type" (string) - color choice. acceptable values "low", "normal", "warn", "high"
- "cover" (number) - size of zone. acceptable values 1, 2 3. (1 covers space between major ticks)
- "rotate" (number) - to find correct value, try with 0 and manually rotate to desired position using browser developer tools. When position found, adjust the code.
- "size" - (CSS size string) - Optional. Defines the outer size (width/height). If supplied, no outer div is required to set the size. If omitted, the outer elements must set a size somewhere.

Overridable CSS

The following CSS variables can be used to override the defaults.

--needle-color
--zone-color-high
--zone-color-warn
--zone-color-normal
--zone-color-low

Also - originally from the UIBUILDER uib-brand.css:

/* Background colours */
--surface1, --surface2, --surface3, --surface4, --surface5
/* Text colour */
--text3

Example - Change attributes in JavaScript

Forces a redraw.

document.getElementById('gauge').setAttribute('digits',JSON.stringify({size:80,distance:15}))
document.getElementById('gauge').setAttribute('max',1200)

Example - Node-RED Dashboard

Add this to a ui_template node:

<script src="/js/gauge-hotnipi.js"></script>
<template>
    <gauge-hotnipi ref="hotgauge" min="0" max="100" size="180px" platehue="220" digits='{"size":80,"distance":14}'></gauge-hotnipi>
</template>

<script>
    export default {
        methods: {
            getElement: function(name,base){
                if(base){
                    return this.$refs[name][0]                    
                }
                return this.$refs[name]                
            }
        },
        
        watch: {
            msg: function(){
                if(this.msg.payload != undefined){
                    this.getElement("hotgauge").update(this.msg.payload)                    
                }
            }
        }
    }
</script>

References

Node-RED Forum