ui-level.html

<!--
MIT License

Copyright (c) 2019 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'>
    RED.nodes.registerType('ui_level', {
        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: '' },
            label: { value: '' },
            colorHi: { value: '#e60000' },
            colorWarn: { value: '#ff9900' },
            colorNormal: { value: '#00b33c' },
            colorOff: { value: '#595959' },
            min: { value: 0, required: true, validate: RED.validators.number() },
            max: { value: 100, required: true, validate: RED.validators.number() },
            segWarn: { value: '' },
            segHigh: { value: '' },
            unit: { value: '' },
            layout: { value: 'sh' },
            channelA: { value: '' },
            channelB: { value: '' },
            decimals: { value: 0, required: false, validate: RED.validators.number() },
            animations: { value: 'soft' },
            shape: { value: 2 },
            colorschema: { value: 'fixed' },
            textoptions: { value: 'default' },
            colorText: { value: '#eeeeee' },
            fontLabel: { value: '' },
            fontValue: { value: '' },
            fontSmall: { value: '' },
            colorFromTheme: { value: true },
            textAnimations: { value: false },
            hideValue: { value: false },
            tickmode: { value: 'off' },
            peakmode: { value: false },
            property: { value: "payload", required: true },
            peaktime: {
                value: 3000, required: false, validate: function (v) {
                    if ($("#node-input-peakmode").prop('checked') == false) {
                        return true
                    }
                    var mi = 800;
                    var ma = 10000;
                    if (v === 'infinity') {
                        return true
                    }
                    return (parseInt(v) >= mi && parseInt(v) <= ma)
                }
            },
        },
        inputs: 1,
        outputs: 0,
        icon: 'uilevel.png',
        paletteLabel: 'level',
        label: function () {
            return this.name || 'Level';
        },
        oneditprepare: function () {
            $('#node-input-size').elementSizer({
                width: '#node-input-width',
                height: '#node-input-height',
                group: '#node-input-group'
            });
            if (this.property === undefined) {
                $("#node-input-property").val("payload");
            }
            $("#node-input-property").typedInput({ default: 'msg', types: ['msg'] });
            $('#node-input-min').change(function () {
                $('#seg-min').text($(this).val());
            });
            $('#node-input-max').change(function () {
                $('#seg-max').text($(this).val());
            });
            if (this.layout === undefined) {
                this.layout = 'sh';
                $('#node-input-layout').val('sh');
            }
            if (this.animations === undefined) {
                this.animations = 'soft';
                $('#node-input-animations').val('soft');
            }
            if (this.shape === undefined) {
                this.shape = 2;
                $('#node-input-shape').val('Fine');
            }
            if (this.unit === undefined) {
                this.unit = '';
                $('#node-input-unit').val('');
            }
            if (this.tickmode === undefined) {
                this.tickmode = 'off';
                $('#node-input-tickmode').val('off');
            }
            if (this.colorschema === undefined) {
                this.colorschema = fixed;
                $('#node-input-colorschema').val('Multiple segments');
            }
            if (this.textoptions === undefined) {
                this.textoptions = 'default';
                this.colorText = '#eeeeee';
                $('#node-input-textoptions').val('default');
                $('#node-input-fontcolor').hide();
            }
            if (this.hideValue === undefined) {
                $("#node-input-hideValue").prop('checked', false);
            }
            if (this.peakmode === undefined) {
                $("#node-input-peakmode").prop('checked', false);
            }
            if (this.peaktime === undefined) {
                $("#node-input-peaktime").val(3000);
            }
            $('#node-input-peakmode').change(function () {
                if (this.checked == true) {
                    $('#node-input-peaktime').show();
                    $('#node-input-peaktimeSpan').show();
                }
                else {
                    $('#node-input-peaktime').hide();
                    $('#node-input-peaktimeSpan').hide();

                }
            });
            $('#node-input-textoptions').change(function () {
                if ($(this).val() === 'default') {
                    $('#node-input-fontsizes').hide();
                    $('#node-input-fontcolor').hide();
                }
                else {
                    $('#node-input-fontsizes').show();
                    $('#node-input-fontcolor').show();
                    if ($('#node-input-colorFromTheme').is(':checked')) {
                        $('#node-input-colorText').hide();
                        $('#node-input-colorTextSpan').hide();
                    }
                    else {
                        $('#node-input-colorText').show();
                        $('#node-input-colorTextSpan').show();
                    }
                }
            });

            $('#node-input-colorschema').change(function () {
                if ($(this).val() === 'fixed') {
                    $('#peakOptions').show();
                }
                else {
                    if ($("#node-input-peakmode").prop('checked') == true) {
                        $("#node-input-peakmode").prop('checked', false);
                        $('#node-input-peaktime').hide();
                        $('#node-input-peaktimeSpan').hide();

                    };
                    $('#peakOptions').hide();
                }
            });

            $('#node-input-colorFromTheme').change(function () {
                if (this.checked == true) {
                    $('#node-input-colorText').hide();
                    $('#node-input-colorTextSpan').hide();
                }
                else {
                    $('#node-input-colorText').show();
                    $('#node-input-colorTextSpan').show();
                }
            });
            $('#node-input-layout').change(function () {
                if ($(this).val() === 'sh') {
                    $('#node-input-el-label').show();
                    $('#node-input-el-channels').hide();
                    $('#node-input-fontLabel').attr('placeholder', '1');
                    $('#node-input-fontValue').attr('placeholder', '1');
                    $('#node-input-fontSmall').attr('placeholder', '0.65');
                }
                else if ($(this).val() === 'sv') {
                    $('#node-input-el-label').show();
                    $('#node-input-el-channels').hide();
                    $('#node-input-fontLabel').attr('placeholder', '1');
                    $('#node-input-fontValue').attr('placeholder', '2.5');
                    $('#node-input-fontSmall').attr('placeholder', '0.65');
                }
                else {
                    $('#node-input-el-label').hide();
                    $('#node-input-el-channels').show();
                    $('#node-input-fontLabel').attr('placeholder', '1');
                    $('#node-input-fontValue').attr('placeholder', '1.2');
                    $('#node-input-fontSmall').attr('placeholder', '0.65');
                }
            });
        },
        oneditsave: function () {
            $('input[name=foo]').attr('checked', this.colorFromTheme);
        }
    });
</script>
<script type='text/x-red' data-template-name='ui_level'>
    <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'>
        <label for='node-input-layout'><i class='fa fa-list'></i> Layout</label>
        <select id='node-input-layout' style='width:200px !important'>
            <option value='sh'>Single Horizontal</option>
            <option value='ph'>Pair Horizontal</option>
            <option value='sv'>Single Vertical</option>           
        </select>
    </div>
    <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='Level'>
    </div>
    <div class='form-row' id='node-input-el-channels'>
        <label for='node-input-channels'><i class='icon-tag'></i> Channels</label>
        <span for='node-input-channelA'>Top </span>
        <input type='text' id='node-input-channelA' style='width:80px' placeholder='A' dir=''>
        <span for='node-input-channelB' style='margin-left:20px;'>Bottom </span>
        <input type='text' id='node-input-channelB' style='width:80px' placeholder='B' dir=''>
    </div>
</br>
    <div class='form-row'>
        <label for='node-input-colorHi'><i class='fa fa-paint-brush'></i> High</span></label>
        <input type='color' id='node-input-colorHi' style='width:80px'/>
    </div>
    <div class='form-row'>
        <label for='node-input-colorWarn'><i class='fa fa-paint-brush'></i> Warn</span></label>
        <input type='color' id='node-input-colorWarn' style='width:80px'/>
    </div>
    <div class='form-row'>
        <label for='node-input-colorNormal'><i class='fa fa-paint-brush'></i> Normal</span></label>
        <input type='color' id='node-input-colorNormal' style='width:80px'/>
    </div>
    <div class='form-row'>
        <label for='node-input-colorOff'><i class='fa fa-paint-brush'></i> Off</span></label>
        <input type='color' id='node-input-colorOff' style='width:80px'/>
    </div>
    <div class='form-row'>
        <label for='node-input-colorschema'><i class='fa fa-star-half-o'></i> Show</label>
        <select id='node-input-colorschema' style='width:200px !important'>
            <option value='fixed'>Multiple segments</option>
            <option value='valuedriven'>Single color bar</option>
            <option value='rainbow'>Interpolated colors</option>            
        </select>
    </div>
    <div class='form-row' id='peakOptions'>        
        <label for='node-input-peakmode'><i class='fa fa-star-half-o'></i> Peak mode</label>
        <input type="checkbox" id="node-input-peakmode" 
        style="display:inline-block; width:auto; vertical-align:baseline; 
        margin-right:5px;margin-left:5px;">Hold peak 
        <span for='node-input-peaktime'  id='node-input-peaktimeSpan' style='margin-left:20px;'>time (ms)</span>
        <input type='text' id='node-input-peaktime' style='width:140px' placeholder='800...10000 or infinity' dir=''>  
    </div>        
</br>
    <div class='form-row'>
        <label for='node-input-textoptions'><i class='fa fa-font'></i> Text options</label>
        <select id='node-input-textoptions' style='width:200px !important'>
            <option value='default'>default</option>
            <option value='custom'>custom</option>      
        </select>
    </div>
    <div class='form-row' id='node-input-fontsizes'>
        <label for='node-input-font-sizes'><i class='fa fa-text-height'></i> Font sizes</label>
        <span for='node-input-fontLabel'>Label</span>
        <input type='text' id='node-input-fontLabel' style='width:50px' dir='' placeholder='1'>
        <span for='node-input-fontValue' style='margin-left:20px;'>Value</span>
        <input type='text' id='node-input-fontValue' style='width:50px' dir='' placeholder='1' >
        <span for='node-input-fontSmall' style='margin-left:20px;'>Small</span>
        <input type='text' id='node-input-fontSmall' style='width:50px' dir='' placeholder='0.65'>
    </div>
    
    <div class='form-row' id='node-input-fontcolor'>
        <label for='node-input-colorText'><i class='fa fa-paint-brush'></i> Font color</span></label>
        <input type="checkbox" id="node-input-colorFromTheme" checked style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;">Use theme color
        <span for='node-input-colorText' id='node-input-colorTextSpan' style='margin-left:20px;'>Custom color</span>
        <input type='color' id='node-input-colorText' style='width:80px'/>
    </div>
</br>    
    <div class='form-row'>
        <label for='node-input-min'><i class='fa fa-gear'></i> Range</label>
        <span for='node-input-min'>min</span>
        <input type='text' id='node-input-min' style='width:80px' dir=''>
        <span for='node-input-max' style='margin-left:20px;'>max</span>
        <input type='text' id='node-input-max' style='width:80px' dir=''>
    </div>
    <div class='form-row' id='ui-gauge-segments'>
        <label><i class='fa fa-gear'></i> Sectors</label>
        <span id='seg-min' style='display:inline-block; width:40px;'>0</span>...
        <input type='text' id='node-input-segWarn' style='text-align:center; width:87px;' placeholder='optional' dir=''> ...
        <input type='text' id='node-input-segHigh' style='text-align:center; width:87px;' placeholder='optional' dir=''> ...
        <span id='seg-max' style='display:inline-block; width:40px; text-align:right'>10</span>
    </div>
</br>
    <div class='form-row'>
        <label for='node-input-unit'><i class='fa fa-gear'></i> Format</label>
        <span for='node-input-unit'>Unit</span>
        <input type='text' id='node-input-unit' style='width:80px' placeholder='units' dir=''>
        <span for='node-input-decimals' style='margin-left:20px;'>decimals</span>
        <input type='text' id='node-input-decimals' style='width:80px' placeholder='0' dir=''>
    </div>
    <div class='form-row' id='node-input-valuefield'>
        <label for='node-input-valuefield'><i class='fa fa-eye-slash'></i> Value field</span></label>
        <input type="checkbox" id="node-input-hideValue" style="display:inline-block; width:auto; vertical-align:baseline; margin-right:5px;">Hide value field        
    </div>
</br>    
    <div class='form-row'>
        <label for='node-input-shape'><i class='fa fa-list'></i> Stripe shape</label>
        <select id='node-input-shape' style='width:200px !important'>
            <option value=1>Superfine</option>
            <option value=2>Fine</option>
            <option value=3>Normal</option>
        </select>
    </div>
    <div class='form-row'>
        <label for='node-input-tickmode'><i class='fa fa-list'></i> Tick values</label>
        <select id='node-input-tickmode' style='width:200px !important'>
            <option value='off'>Off</option>
            <option value='segments'>Segments</option>
            <option value='auto'>Auto</option>
        </select>
    </div>
    <div class='form-row'>
        <label for='node-input-animations'><i class='fa fa-list'></i> Animations</label>
        <select id='node-input-animations' style='width:200px !important'>
            <option value='soft'>Soft</option>
            <option value='reactive'>Reactive</option>
            <option value='rocket'>Rocket</option>
            <option value='off'>No animations</option>
        </select>
        <input type="checkbox" id="node-input-textAnimations" 
            style="display:inline-block; width:auto; vertical-align:baseline; 
            margin-right:5px;margin-left:5px;">Animate value
    </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/html' data-help-name='ui_level'>
    <p>Adds a linear Level type widget to the user interface</p>    
    <p>Configured input property (default is msg.payload) should carry single numeric value. 
    <p>For Pair Horizontal layout the <code>msg.payload</code> is expected to be an <code>array</code></p>   
    <p>Widget takes the value of configured input property and displays that value near the level graphics.</p>
    <p>Widget has 3 different layouts: Single Horizontal, Pair Horizontal and Single Vertical</p>    
    <p>The node's <code>Label</code> is displayed near the value. Leave the label field empty to show value only</p>
    <p>The Label can be changed on fly by using <code>msg.control = {label:"New Label"}</code>.</p>
    <p>For Pair Horizontal layout the <code>Label</code> is not displayed but both <code>Channels</code> can be labelled independently</p>
    <p>All four colors for stripes can be customized. In adition there is three options to show the colors. <code>'Multiple segments'</code> - Colors tied to stripes 
        according to sector values. <code>'Single color bar'</code> - Single value based color for all active stripes. <code>'Interpolated colors'</code> - Colors intrpolated from normal to high color</p>
    <p>If you choose <code>Multiple segments</code> for your stripe colors, you can optionally use the <code>Peak mode</code>. By selecting the <code>Peak mode</code>, you can adjust <code>peak hold</code> time (in milliseconds, validated to be in between 800 ... 100000) or <code>infinity</code> to hold peak until node receives <code>msg.peakreset = true</code>
    <p>The node's <code>Unit</code> will be displayed near the current value. Exact position of the unit depends on choosed layout. The unit can be any <code>string</code>, for example: <code>lbs psi F°</code></p>    
    <p>The min and max values are customizable within the configuration or you can change them on fly via <code>msg.control = {min:10, max:80}</code></p>
    <p>The segments's values also customizable within the configuration or by using <code>msg.control = {seg1:30, seg2:60}</code>.</p>
    <p>You can choose between 3 different stripe resolutions. <code>Normal</code>, <code>Fine</code> and <code>Superfine</code></p>   
    <p>You can choose anmations to be <code>Soft</code>, <code>Reactive</code> or <code>Rocket</code> represending speed of animations (800ms, 300ms and 100ms). Animations can be turned <code>off</code> completely.</p>
    <p>Animation of value text is turned off by default. You can turn it on but be aware, text animation affects performance significantly!</p>
    <p>You have option to show intermediate tick values. By choosing <code>Segments</code>, tick values placed at segment positions, with <code>Auto</code> the tick values will be spread evenly.
    <p>Texts sizes and color in widget can be customized within the configuration only. Color applies for all texts in widget. There is 3 different sizes for text elements in use. Values represent font relative size with unit <code>"em"</code></p>

    <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>