node-red-node-ui-duallineargauge/dual_linear_gauge.html

A Node-RED ui node to display a linear dual gauge on the dashboard.

<!--
  Copyright 2018, Seth350
  Licensed under the Apache License, Version 2.0 (the "License");
  you may not use this file except in compliance with the License.
  You may obtain a copy of the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS,
  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  See the License for the specific language governing permissions and
  limitations under the License.
-->

<script type="text/javascript">
    RED.nodes.registerType('ui_lineargaugedual',{    // type MUST start with ui_
        category: 'dashboard',
        color: 'rgb( 63, 173, 181)',
        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: ''},            
            color1: {value: '#000000'},
            color1: {value: '#0BA2A7'},
            backcolor: {value: '#FAFAFA'},
            text1: {value: ''},
            unit: {value:''},

        },
        inputs:1,
        outputs:0,
        icon: "debug.png",
        paletteLabel: "dual linear gauge",
        label: function() {
            return this.name||"dual linear gauge";
        },
        labelStyle: function() {
            return this.name?"node_label_italic":"";
        },
        oneditprepare: function() {
            $("#node-input-size").elementSizer({
                width: "#node-input-width",
                height: "#node-input-height",
                group: "#node-input-group"
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="ui_lineargaugedual">

    <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>
    </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>
    <div class="form-row">
        <label for="node-input-text1"><i class="icon-tag" aria-hidden="true"></i> Text</span></label>
        <input type="text" id="node-input-text1"/>
    </div>
    <div class="form-row">
        <label for="node-input-unit"><i class="fa fa-asterisk" aria-hidden="true"></i> Unit</span></label>
        <input type="text" id="node-input-unit"/>
    </div>
    <br>
    <div class="form-row">
        <label for="node-input-color1"><i class="fa fa-paint-brush"></i> Color 1</span></label>
        <input type="color" id="node-input-color1"/>
    </div>
    <div class="form-row">
        <label for="node-input-color2"><i class="fa fa-paint-brush"></i> Color 2</span></label>
        <input type="color" id="node-input-color2"/>
    </div>
    <div class="form-row">
        <label for="node-input-backcolor"><i class="fa fa-paint-brush"></i> BackColor</span></label>
        <input type="color" id="node-input-backcolor"/>
    </div>
    
    
</script>

<script type="text/x-red" data-help-name="ui_lineargaugedual">
    <p>A Node Red dashboard ui node to display a linear gauge with high & low limit areas.</p>
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>payload<span class="property-type">number</span></dt>
        <dd>The value to display.</dd>
        <dt>highlimit<span class="property-type">number</span></dt>
        <dd>The high limit - default 100.</dd>
        <dt>lowlimit<span class="property-type">number</span></dt>
        <dd>The low limit - default 00</dd>
    </dl>
    <h3>Details</h3>
    <p>Takes the <code>msg.payload</code> and displays the value at the top of the gauge and slides the pointer up/down the gauge.</p>
    <p>The node's <code>Name</code> is displayed at the bottom of the gauge for indication of what the gauge is for. I.E., "Tank #1 Temperature"</p>
    <p>The node's <code>Unit</code> will be displayed at the trailing end of the current value. A unit can be anything, for example: <code>lbs psi F°</code></p>
    <p>The node's <code>Unit2</code> will be displayed at the trailing end of the current value. A unit2 can be anything, for example: <code>lbs psi F°</code></p>
    <p>The node's <code>Text</code> will be displayed at the trailing end of the current value. A Text1 can be anything, for example: <code>lbs psi F°</code></p>
    <p>The area's color is also customizable within the configuration but cannot be set with a msg.</p>
    <p>There is also a tooltip provided that will display the High Limit, Low Limit, and Setpoint value.</p>
</script>