Skip to content

Latest commit

 

History

History
91 lines (72 loc) · 3.46 KB

README.md

File metadata and controls

91 lines (72 loc) · 3.46 KB
Raw

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