ui-artless-gauge.html

<!--
MIT License

Copyright (c) 2020 hotNipi

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the 'Software'), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
-->
<script type='text/javascript'>
    var ARTLESS_ERR_MINMAX = "MIN should be less than MAX!"
    var ARTLESS_ERR_UNIQUE = "All values must be unique!"
    var ARTLESS_ERR_SOME_NAN = "Bad sector configuration!"
    var ARTLESS_ERR_SOME_OVER = "Sector out of range!"
    RED.nodes.registerType('ui_artlessgauge', {
        category: 'dashboard',
        color: 'rgb( 63, 173, 181)',
        configError: '',
        defaults: {
            group: { type: 'ui_group', required: true },
            order: { value: 0 },
            width: {
                value: 0,
                validate: function (v) {
                    var valid = true
                    var width = v || 0;
                    var currentGroup = $('#node-input-group').val() || this.group;
                    var groupNode = RED.nodes.node(currentGroup);
                    valid = !groupNode || +width <= +groupNode.width;
                    $('#node-input-size').toggleClass('input-error', !valid);
                    return valid;
                }
            },
            height: { value: 0 },
            name: { value: '' },
            icon: { value: '' },
            label: { value: 'Gauge' },
            unit: { value: '' },
            layout: { value: 'linear' },
            decimals: { value: 0, required: false, validate: RED.validators.number() },
            differential: { value: false },
            minmax: { value: false },
            colorTrack: { value: '#555555' },
            style: { value: '' },
            colorFromTheme: { value: true },
            property: { value: "payload", required: true },
            secondary: { value: "secondary", required: false },
            inline:{value:false},
            animate:{value:true, required: true},
            sectors: {
                value: [{ val: 0, col: '#ff9900', t: "min", dot: 0 }, { val: 10, col: '#ff9900', t: "max", dot: 0 }],
                validate: function (v) {
                    configError = ""
                    var unique = [...new Set(v.map(s => s.val))]
                    var valid = true
                    var mi = v.find(el => el.t == 'min')
                    var ma = v.find(el => el.t == 'max')
                    if (mi.val > ma.val) {
                        configError = ARTLESS_ERR_MINMAX
                        valid = false
                    } else if (v.length != unique.length) {
                        configError = ARTLESS_ERR_UNIQUE
                        valid = false
                    } else if (v.some(el => isNaN(el.val))) {
                        configError = ARTLESS_ERR_SOME_NAN
                        valid = false
                    } else if (v.some(el => el.val > ma.val)) {
                        configError = ARTLESS_ERR_SOME_OVER
                        valid = false
                    }
                    return valid                    
                }
            },
            lineWidth: { value: 3 },
            bgcolorFromTheme: { value: true },
            diffCenter: { value: '', required: false }
        },
        inputs: 1,
        outputs: 0,
        icon: 'artlessgauge.png',
        paletteLabel: 'artless-gauge',
        label: function () {
            return this.name || 'artless-gauge';
        },
        oneditprepare: function () {
            var typedefinitions = {
                min: {
                    value: "min",
                    label: "Min ",
                    validate: RED.validators.number()
                },
                max: {
                    value: "max",
                    label: "Max ",
                    validate: RED.validators.number()
                },
                sec: {
                    value: "sec",
                    label: "Sec ",
                    validate: RED.validators.number()
                },
            }

            function getTypeDef(type) {
                return typedefinitions[type]
            }

            function getColor(idx) {
                var colors = ['#009933', '#999999', '#ff6666', '#009999', '#cccc00', '#ff33cc', '#cc6600',
                    '#99ff66', '#660033'
                ]
                if (idx > colors.length - 1) {
                    return colors[Math.floor(Math.random() * colors.length)]
                }
                return colors[idx]
            }

            function defaultRule(idx) {
                return {
                    val: 5,
                    col: getColor(idx),
                    t: "sec"
                }
            }

            function ruleInfo(error) {
                $('#error-ruleinfo').text(error);
                $('.red-ui-editableList-border').toggleClass('input-error', (error != ""));
            }

            function checkLineOptions() {               
                var opts = [3,5,7]
                if($('#node-input-layout').val() == 'radial'){
                    var m = Math.min($('#node-input-width').val(),$('#node-input-height').val())                    
                    if(m > 3){
                        opts = [3,5,7,9,11,13,15]
                    }
                }
                else{
                    if($('#node-input-height').val() == 2){
                        opts = [3,5,7,9,11,13,15,17,19,21,23,25]
                    }
                }
                var last = $('#node-input-lineWidth').val()
                
                if(last == null){
                   last = this.lineWidth || 3
                }
                              
                $('#node-input-lineWidth').children().remove();
                $.each(opts, function(key,value) {
                    $('#node-input-lineWidth')
                        .append($("<option></option>")
                        .attr("value",value)
                        .text(value+"px"));
                });
                if ($("#node-input-lineWidth option[value="+last+"]").length > 0 ){
                    $("#node-input-lineWidth").children("[value="+last+"]").attr('selected', true);
                    this.lineWidth = last;
                }
                else{
                    $("#node-input-lineWidth").children("[value=3]").attr('selected', true);
                    this.lineWidth = 3;
                }
            }

            $('#node-input-size').elementSizer({
                width: '#node-input-width',
                height: '#node-input-height',
                group: '#node-input-group'
            });
            if (this.layout === undefined) {
                this.layout = 'linear';
                $('#node-input-layout').val('Linear');
            }
            if (this.style === undefined) {
                this.style = '';
                $('#node-input-style').val('');
            }
            if (this.inline === undefined) {
                this.inline = false; 
                $("#node-input-inline").prop('checked', false);               
            }
            if (this.animate === undefined) {
                this.animate = true; 
                $("#node-input-animate").prop('checked', true);               
            }
            if (this.property === undefined) {
                $("#node-input-property").val("payload");
            }
            if (this.secondary === undefined) {
                $("#node-input-secondary").val("secondary");
            }
            $("#node-input-property").typedInput({ default: 'msg', types: ['msg'] });
            $("#node-input-secondary").typedInput({ default: 'msg', types: ['msg'] });

            if (this.differential === undefined) {
                $("#node-input-differential").prop('checked', false);
            }
            $('#node-input-layout').change(function(){
                if($('#node-input-layout option:selected').text() == 'Linear'){
                    $('#secondary-container').hide();
                }else {
                    if($('#node-input-inline').is(":checked")){
                        $('#secondary-container').show();
                    }           
                }
            })
            $('#node-input-inline').change(function () {
                if (this.checked == false) {
                    $('#secondary-container').hide();
                   
                } else {
                    if($('#node-input-layout option:selected').text() != 'Linear'){
                        $('#secondary-container').show();  
                    }
                                   
                }
            });

            $('#node-input-differential').change(function () {
                if (this.checked == false) {
                    $('#node-input-diffCenter').hide();
                    $('#node-input-diffCenterSpan').hide();
                } else {
                    $('#node-input-diffCenter').show();
                    $('#node-input-diffCenterSpan').show();
                }
            });

            if (this.diffCenter === undefined) {
                this.diffCenter = '';
                $('#node-input-diffCenter').val('');
            }

            if (this.minmax === undefined) {
                $("#node-input-minmax").prop('checked', false);
            }
            
            if (this.lineWidth === undefined) {
                this.lineWidth = 3;
                $('#node-input-lineWidth').val('3px');
            }

            $('#node-input-colorFromTheme').change(function () {
                if (this.checked == true) {
                    $('#node-input-colorLine').hide();
                    $('#node-input-colorLineSpan').hide();
                } else {
                    $('#node-input-colorLine').show();
                    $('#node-input-colorLineSpan').show();
                }
            });
            $('#node-input-bgcolorFromTheme').change(function () {
                if (this.checked == true) {
                    $('#node-input-colorTrack').hide();
                    $('#node-input-colorTrackSpan').hide();
                } else {
                    $('#node-input-colorTrack').show();
                    $('#node-input-colorTrackSpan').show();
                }
            });

            $("#node-input-rule-container").editableList({
                removable: true,
                sortable: true,
                header: $("<div>").css({
                    padding: "6px"
                }).append($.parseHTML(`
                    <div style='width:140px; text-align:center; display: inline-grid'><b>Value</b></div> 
                    <div style='width:90px; text-align:center; display: inline-grid'><b>Color</b></div>
                    <div style='width:60px; text-align:center; display: inline-grid'><b>Dot</b></div>
                    <div id='error-ruleinfo' style='width:auto; color:red; text-align:center; font-weight:bold; display:inline-grid'></div>  
                    `)),
                addItem: function (container, index, rule) {
                    if (!rule.hasOwnProperty('t')) {
                        rule = defaultRule(index)
                    }
                    container.css({
                        overflow: 'hidden',
                        whiteSpace: 'nowrap'
                    });
                    var row = $('<div/>').appendTo(container);
                    var valField
                    var colorField
                    var dotField
                    var dotSuffix
                    valField = $('<input/>', {
                        class: "node-input-rule-value",
                        style: "width:120px;",
                        type: "text"
                    })
                        .appendTo(row)
                        .typedInput({
                            types: [getTypeDef(rule.t)]
                        });
                    colorField = $('<input/>', {
                        value: rule.col,
                        disabled: (rule.t == 'max'),
                        class: "node-input-rule-color",
                        style: "width:80px; margin-left:8px;",
                        type: "color"
                    })
                        .appendTo(row)
                    dotField = $('<input/>', {
                        value: rule.dot || 0,
                        class: "node-input-rule-dot",
                        style: "width:60px; margin-left:8px;",
                        type: "number",
                        min: '0',
                        max: '12',
                        size: '1'
                    })
                        .appendTo(row)
                    $("<div style='width:20px; text-align:center; display: inline-grid'>px</div>").appendTo(row);


                    valField.typedInput('type', getTypeDef(rule.t));
                    valField.typedInput('value', rule.val);
                    sortList()

                    colorField.on('change', function (type, value) {
                        if (configError != '') {
                            configError = ""
                            ruleInfo(configError)
                        }
                        sortList()
                    });

                    valField.typedInput().on('change', function (type, value) {
                        if (configError != '') {
                            configError = ""
                            ruleInfo(configError)
                        }
                        sortList()
                    });


                },
                removeItem: function (data) {
                    if (data.t == 'min' || data.t == 'max') {
                        $("#node-input-rule-container").editableList('addItem', data);
                    }
                    configError = ""
                    ruleInfo(configError)
                    sortList()
                },
                sort: function (dataA, dataB) {
                    return dataA.val - dataB.val;
                }
            });

            function setColorForMax() {
                var list = $("#node-input-rule-container").editableList('items');
                var sum = Number.MIN_SAFE_INTEGER
                var col = ''
                var rule, t, v, c
                list.each(function (i) {
                    rule = $(this);
                    t = rule.find(".node-input-rule-value").typedInput('type')
                    if (t == 'min' || t == 'sec') {
                        v = parseFloat(rule.find(".node-input-rule-value").typedInput('value'))
                        c = rule.find(".node-input-rule-color").val();
                        if (sum < v) {
                            sum = v
                            col = c
                        }
                    }
                });
                if (col != '') {
                    list.each(function (i) {
                        rule = $(this);
                        t = rule.find(".node-input-rule-value").typedInput('type')
                        if (t == 'max') {
                            rule.find(".node-input-rule-color").val(col)
                        }
                    });
                }
            }

            function sortList() {
                $("#node-input-rule-container").editableList('sort');
                setColorForMax()
            }

            if (!this.sectors) {
                var min = {
                    val: 0,
                    col: '#ff9900',
                    t: "min",
                    dot: 0
                };
                var max = {
                    val: 10,
                    col: '#ff9900',
                    t: "max",
                    dot: 0
                };
                this.sectors = [min, max];
            }

            function revalidate(v) {
                configError = ""
                var unique = [...new Set(v.map(s => s.val))]
                var mi = v.find(el => el.t == 'min')
                var ma = v.find(el => el.t == 'max')
                if (mi.val > ma.val) {
                    configError = ARTLESS_ERR_MINMAX
                } else if (v.length != unique.length) {
                    configError = ARTLESS_ERR_UNIQUE
                } else if (v.some(el => isNaN(el.val))) {
                    configError = ARTLESS_ERR_SOME_NAN
                } else if (v.some(el => el.val > ma.val)) {
                    configError = ARTLESS_ERR_SOME_OVER
                }
            }
            revalidate(this.sectors)
            $("#node-input-rule-container").editableList('addItems', this.sectors);
            ruleInfo(configError)

            $('#node-input-layout').change(function(){
                window.setTimeout(checkLineOptions,20)
            })
            $('#node-input-width').change(function(){
                window.setTimeout(checkLineOptions,30)
            })
            $('#node-input-height').change(function(){
                window.setTimeout(checkLineOptions,40)
            })
            $("#node-input-decimals").spinner({
                min:0,
                max:8,
            })

        },
        oneditsave: function () {
            var list = $("#node-input-rule-container").editableList('items');
            var node = this;
            node.sectors = [];
            var convert = function (rule) {
                rule.val = parseFloat(rule.val)
                rule.dot = parseInt(rule.dot)
                return rule
            }
            list.each(function (i) {
                var rule = $(this);
                var t = rule.find(".node-input-rule-value").typedInput('type')
                var v = rule.find(".node-input-rule-value").typedInput('value')
                var c = rule.find(".node-input-rule-color").val();
                var d = rule.find(".node-input-rule-dot").val()

                var r = convert({
                    val: v,
                    col: c,
                    t: t,
                    dot: d
                })
                node.sectors.push(r);
            });
        }
    });
</script>
<script type='text/x-red' data-template-name='ui_artlessgauge'>
    <div class='form-row' id='template-row-group'>
        <label for='node-input-group'><i class='fa fa-table'></i> Group</span></label>
        <input type='text' id='node-input-group'>
    </div>
    <div class='form-row' id='template-row-size'>
        <label><i class='fa fa-object-group'></i> Size</span></label>
        <input type='hidden' id='node-input-width'>
        <input type='hidden' id='node-input-height'>
        <button class='editor-button' id='node-input-size'></button>
    </div> 
    <div class="form-row">
        <label for="node-input-property"><i class="fa fa-arrow-right"></i> Input</label>
        <input type="text" id="node-input-property" style="width:70%;"/>
    </div>
</br> 
    <div class='form-row' id='node-input-el-label'>
        <label for='node-input-label'><i class='icon-tag'></i> Label</label>
        <input type='text' id='node-input-label' placeholder='Gauge'>
    </div>
    <div class='form-row' id='node-input-el-icon'>
        <label for='node-input-icon'><i class='icon-tag'></i> Icon</label>
        <input type='text' id='node-input-icon' placeholder='fa-fire'>
    </div>
    <div class='form-row'>
        <label for='node-input-layout'><i class='fa fa-list'></i> Layout</label>
        <select id='node-input-layout' style='width:200px !important'>
            <option value='linear'>Linear</option>
            <option value='radial'>Radial</option>           
        </select>
    </div> 
    <div class='form-row' id='node-input-diffmode'>
        <label for='node-input-differential'><i class='fa fa-gear'></i> Mode</span></label>
        <input type="checkbox" id="node-input-differential" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;">differential
        <span for='node-input-diffCenter' id='node-input-diffCenterSpan' style='margin-left:20px;'>center</span>
        <input type='text' id='node-input-diffCenter' style='width:80px' placeholder='' dir=''>       
    </div>   
    
    <div class='form-row'>
        <label><i class='fa fa-gear'></i> Range</label>       
    </div>
    <div class="form-row node-input-rule-container-row">
        <ol id="node-input-rule-container"></ol>    
    </div>
</br>
    <div class='form-row'>
        <label for='node-input-animate'><i class='fa fa-gear'></i> Animate</label>      
        <input type="checkbox" id="node-input-animate" checked style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;"></input>    
                
    </div>  
    <div class='form-row'>
        <label for='node-input-lineWidth'><i class='fa fa-list'></i> Line width</label>
        <select id='node-input-lineWidth' style='width:70px !important'>
            <option value=3>3px</option>
            <option value=5>5px</option>
            <option value=7>7px</option>
            <option value=9>9px</option>
            <option value=11>11px</option>
            <option value=13>13px</option>
            <option value=15>15px</option>            
            <option value=17>17px</option>            
            <option value=19>19px</option>            
            <option value=21>21px</option>            
            <option value=23>23px</option>            
            <option value=25>25px</option>            
        </select>
    </div>
    <div class='form-row'>
        <label for='node-input-style'><i class='fa fa-paint-brush'></i> Line style</label>        
        <input type='text' id='node-input-style' style='width:120px' placeholder='2, 2' dir=''>        
    </div>  
    <div class='form-row' id='node-input-linebgcolor'>
        <label for='node-input-bgcolorFromTheme' style='padding-top:6px; padding-bottom:6px'><i class='fa fa-paint-brush'></i> Track color</span></label>
        <input type="checkbox" id="node-input-bgcolorFromTheme" checked style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;">Use theme color
        <span for='node-input-colorTrack' id='node-input-colorTrackSpan' style='margin-left:20px;'>Custom color</span>
        <input type='color' id='node-input-colorTrack' style='width:80px'/>
    </div> 
    <div class='form-row' id='node-input-minmaxshow'>
        <label for='node-input-minmax'><i class='fa fa-gear'></i> Tickmarks</span></label>
        <input type="checkbox" id="node-input-minmax" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;">Show for min and max (and center)    
    </div> 
    <div class='form-row'>
        <label for='node-input-decimals'><i class='fa fa-gear'></i> Round value</label>
        <input type='text' id='node-input-decimals' style='width:50px ;border:none' placeholder='0'>
        <span for='node-input-decimals'> decimals</span>
    </div>  
    <div class='form-row'>
        <label for='node-input-unit'><i class='fa fa-gear'></i> Unit</label>      
        <input type='text' id='node-input-unit' style='width:120px' placeholder='units' dir=''>
        <input type="checkbox" id="node-input-inline" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;"></input>
        <label id="node-input-inline-label" for='node-input-inline'> Inline with value</label>
                
    </div>
    <div class="form-row" id="secondary-container">
        <label for="node-input-secondary" style="font-size:11px;"><i class="fa fa-arrow-right"></i> Secondary input</label>
        <input type="text" id="node-input-secondary" style="width:70%;"/>
    </div>
     
</br>
    <div class='form-row'>
        <label for='node-input-name'><i class='icon-tag'></i> Name</label>
        <input type='text' id='node-input-name' placeholder='Name'>
    </div>
</script>
<script type='text/x-red' data-help-name='ui_artlessgauge'>
    <p>Artless gauge is gauge with minimal design. Gauge has two layouts - linear and radial. 
        Both layouts support regular mode and differential mode. 
        With differential mode, the indicating colored track is drawn from center to side. 
        
<h2>> Configuration</h2>
<h3> Size</h3>
For linear layout the supported height is 1 unit.
For radial mode the minimal size is 2x2 units. 
Supported size configuration for radial layout is square (3x3, 4x4, ...). 
Widget forces different size combinations to be square based on shortest side.

<h2> Input </h2>
Configured input property (default is msg.payload) should carry single numeric value.

<h3> Label</h3>
Label can be any string. Label field does not support any html for color or size adjustments.


<h3> Icon</h3>
Supported icons are same as for dashboard: 
<a href="https://fontawesome.com/v4.7.0/icons/">Font Awesome 4.7</a>, 
<a href="https://material.io/resources/icons/?style=baseline">Material Icons</a> and 
<a href="https://github.com/Paul-Reed/weather-icons-lite">Weather icons lite</a>. 
<p>If your setup has internet connection, you can also use <a href="https://iconify.design/">Iconify icons</a>.
To use Iconify icons, use prefix <code>iconify-</code> and you'll need to add the iconify API to the dashboard site head.

<p>Any type of icon accepts additional classes. For example you can animate <code>iconify-mdi:fan</code> by adding <code>fa-spin</code>.

<h3> Layout</h3>
Choose layout type. Layout can be linear or radial.

<h3> Mode</h3>
Option to turn on differential mode. With this option selected, the colored track has 
center point from which the value is shown.Value of center point can be adjusted. 
If center value is not defined, the center point is exactly between configured min and max.

<h3> Range</h3>
Configure minimum and maximum expected values and adjust line color. 
Add segments and configure colors for them if needed. 
Note that Min and Max options can not be removed.
<p>A small dot with segment color can be drawn at the point of segment. 
To show dot for segment, configure size for dot bigger that zero.

<h3>Animate</h3>
You can turn on or off the animations of the colored bar.

<h3>Line width</h3>
You can adjust thickness of the colored bar. The range of possible values depends on layout and configured size.

<h3>Line style</h3>
You can make the colored bar to be dashed line. Provided comma separated list of numbers makes pattern of dash-array.
First number represents dash width, second number represents gap width.
<p>
<code>
    2, 2
</code> 

<p>In addition there is option to make dash ends to be round by adding the word "round" to the end of list. 
To get perfetly round dots, configure dash width to 0 and gap width equal or a bit larger than Line width. 
<p>
<code>
    0, 8, round
</code> 

<p>See more about <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray">stroke dash-array</a>


<h3> Track color</h3>
Color of track background line can be configured. By default, the site colors used.

<h3> Tickmarks</h3>
Min and max values can be shown near the track.
For differential mode, also the center value is shown.
<p>With radial layout the tickmarks can be shown only if layout size is 3x3 units or more.


<h3>Round value</h3> 
Value is always rounded according to the configured decimals. 
Default is zero so value presented as integer. 
    
<h3>Unit</h3> 
Unit is displayed near the value field. Unit can be any string. 
For radial layout by default the unit is shown below the value field. 
The unit can be shown inline with the value. By using this option, there 
will be secondary value field available to show any string below the main value field.
    
<h3>Secondary input</h3>
Secondary input is available only for radial layout and if uint is placed inline with value field.
Value for configured secondary input property 
(default is msg.secondary) should be string or number.


<h2> Change the configuration at runtime</h2>

Many options of widget configuration can be overrided at runtime using the <code>msg.control</code> property.
You can send options one by one, or all together. Note, that min and max must be part of sectors property.
Change of min or max will not affect sectors if they were configured. 
But any sector update clears all previously configured sectors except the min and max.
There is no validation on top of incoming sectors configuration. 

<h3>Configurable options and value types</h3>
<code>
    sectors - Array of Object´s<br>
    unit - String<br>
    label - String<br>
    icon - String<br>
    center - Number<br>
    decimals - Number<br>
</code>
<h3>Example</h3>    
<code style="white-space:unset" >
    var newSectors = [{t:"min",val:5,col:"#00ff00",dot:3},{t:"sec",val:8,col:"#ff0000",dot:3},{t:"max",val:30,col:"#0000ff",dot:3}]
    msg.control = {unit:"degrees",label:"Temperature",icon:"fa-thermometer",center:4, decimals:1, sectors:newSectors}
</code>

<h2> Licence</h2>
This node uses GreenSock animation library GSAP licenced with Standard GreenSock License for non-commercial use <a href="https://greensock.com/standard-license/"">https://greensock.com/standard-license</a>
   
</script>