linear_gauge.html

<!--
  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_lineargauge',{
        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: ''},
            colorLowArea: {value: '#ffffc0'},
            colorMidArea: {value: '#99ff99'},
            colorHighArea: {value: '#ff8080'},
            unit: {value:'units'}

        },
        inputs:1,
        outputs:1,
        icon: "gauge.png",
        paletteLabel: "linear gauge",
        label: function() {
            return this.name||"Linear Gauge";
        },
        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_lineargauge">
    <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-colorHighArea"><i class="fa fa-paint-brush"></i> High Area Color</span></label>
        <input type="color" id="node-input-colorHighArea"/>
    </div>
    <div class="form-row">
        <label for="node-input-colorMidArea"><i class="fa fa-paint-brush"></i> Middle Area Color</span></label>
        <input type="color" id="node-input-colorMidArea"/>
    </div>
    <div class="form-row">
        <label for="node-input-colorLowArea"><i class="fa fa-paint-brush"></i> Low Area Color</span></label>
        <input type="color" id="node-input-colorLowArea"/>
    </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-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_lineargauge">
    <p>A Node Red dashboard ui node to display a linear gauge with high & low limit areas.</p>
    <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 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>
    <p>You can pass the following in from a msg.</p>
    <p>High Limit: <code>msg.highlimit</code></p>
    <p>Setpoint: <code>msg.setpoint</code></p>
    <p>Low Limit: <code>msg.lowlimit</code></p>
    <p>Actual Value: <code>msg.payload</code></p>

</script>