heater-controller.html

<script type="text/html text/x-red" data-template-name="ui_heater_controller">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="heater_controller.label.name"></span></label>
        <input type="text" id="node-input-name">
    </div>
    <div class="form-row" id="template-row-group">
        <label for="node-input-group"><i class="fa fa-table"></i> <span data-i18n="heater_controller.label.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> <span data-i18n="heater_controller.label.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-topic"><i class="fa fa-tasks"></i> <span data-i18n="heater_controller.label.topic"></span></label>
        <input type="text" id="node-input-topic">
    </div>
    <div class="form-row">
        <label for="Unit"><i class="fa fa-thermometer-empty"></i> <span data-i18n="heater_controller.label.unit"></span></label>
        <select id="unit">
            <option value="C" id="cUnit"><span data-i18n="heater_controller.label.celsiusUnit"></span>x</option>
            <option value="F" id="fUnit"><span data-i18n="heater_controller.label.fahrenheitUnit"></span>x</option>
            <option value="K" id="kUnit"><span data-i18n="heater_controller.label.kelvinUnit"></span>xs</option>
        </select>
    </div>
    <div class="form-row">
        <label style="width:95%; border-bottom: 1px solid #eee;"><span data-i18n="heater_controller.label.slider"> </span></label>
    </div>
    <div class="ident">
        <div class="form-row">
            <label for="node-input-sliderMinValue"><i class="fa fa-step-forward" aria-hidden="true"></i> <span data-i18n="heater_controller.label.min"></span></label>
            <input type="number" step="1" id="node-input-sliderMinValue" data-i18n="[placeholder]heater_controller.placeholder.value" style="width: 280px" >
        </div>
        <div class="form-row">
            <label for="node-input-sliderMaxValue"><i class="fa fa-step-backward" aria-hidden="true"></i> <span data-i18n="heater_controller.label.min"></span></label>
            <input type="number" step="1" id="node-input-sliderMaxValue" data-i18n="[placeholder]heater_controller.placeholder.value" style="width: 280px" >
        </div>
        <div class="form-row">
            <label for="node-input-sliderStep"> <span data-i18n="heater_controller.label.step"></span></label>
            <input type="number" min="0.1" step="0.1" list="stepSliderValues" id="node-input-sliderStep" data-i18n="[placeholder]heater_controller.placeholder.value" style="width: 280px" >
        </div>
        <datalist id="stepSliderValues">
                <option value="0.1">
                <option value="0.5">
                <option value="1">
                <option value="1.5">
                <option value="2">
                <option value="2.5">
                <option value="3">
        </datalist>
    </div>
    <div class="form-row">
        <label style="width:95%; border-bottom: 1px solid #eee;"><i class="fa fa-arrows-v"></i> <span data-i18n="heater_controller.label.hysteresis"></label>
    </div>
    <div class="ident">
        <div class="form-row" style="display: block;">
            <label style="width: 140px !important" for="node-input-thresholdRising"><i class="fa fa-level-up"></i> <span data-i18n="heater_controller.label.upThreshold"></label>
            <input type="number" min="0" max="100" step="0.5" list="defaultNumbers" id="node-input-thresholdRising" data-i18n="[placeholder]heater_controller.placeholder.value" style="width: 280px" dir="">
        </div>
        <div class="form-row" style="display: block;">
            <label style="width: 140px !important" for="node-input-thresholdFalling"><i class="fa fa-level-down"></i> <span data-i18n="heater_controller.label.lowerThreshold"></label>
            <input type="number" min="0" max="100" step="0.5" list="defaultNumbers" id="node-input-thresholdFalling"  data-i18n="[placeholder]heater_controller.placeholder.value" style="width: 280px" dir="">
        </div>
        <datalist id="defaultNumbers">
                <option value="0">
                <option value="0.5">
                <option value="1">
                <option value="1.5">
                <option value="2">
        </datalist>
    </div>
    <div class="form-row">
        <label id="node-input-calendarEditorLabel" style="width:95%; border-bottom: 1px solid #eee;">
            <i class="fa fa-calendar"></i> 
            <span data-i18n="heater_controller.label.calendar"></span>
            <button id="node-input-json-format" class="editor-button editor-button-small" style="float: right"><span data-i18n="editor:jsonEditor.format"></span></button>
        </label>
    </div>
    <div class="ident">
        <div class="form-row">
            <input type="hidden" id="node-input-calendar">
        </div>
        <div class="form-row node-text-editor-row">
            <div style="height:650px; min-height:100px" class="node-text-editor" id="node-input-calendarEditor" ></div>
        </div>        
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType("ui_heater_controller", {
        category: 'dashboard',
        color: 'rgb( 63, 173, 181)',
        defaults: {
            name: { value: 'heater' },
            group: {
                type: 'ui_group', required: true,
                validate: function (v) {
                    return v && RED.nodes.node(v) && RED.nodes.node(v).type === 'ui_group';
                }
            },
            unit: {
                value: "C",
                required: true
            },
            order: { value: 0 },
            width: {
                value: 8,
                required: true,
                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: 3 },
            topic: { value: '' },
            sliderMinValue: {
                value: 10,
                required: true,
                validate: function (v) {
                    var max = $('#node-input-sliderMaxValue').val() || this.sliderMaxValue;
                    return RED.validators.number(v)(v) && v > 0 && max > v;
                }
            },
            sliderMaxValue: {
                value: 35,
                required: true,
                validate: function (v) {
                    var min = $('#node-input-sliderMinValue').val() || this.sliderMinValue;
                    return RED.validators.number(v)(v) && v > 0 && min < v;
                }
            },
            sliderStep: {
                value: 0.5,
                required: true,
                validate: function (v) {
                    return RED.validators.number(v)(v) && v > 0;
                }
            },
            thresholdRising: {
                value: 0.5,
                validate: function (v) {
                    return RED.validators.number(v)(v) && v >= 0 && v <= 100;
                }
            },
            thresholdFalling: {
                value: 0.5,
                validate: function (v) {
                    return RED.validators.number(v)(v) && v >= 0 && v <= 100;
                }
            },
            calendar: {
                required: true,
                validate: function (v) {
                    var valid = true;
                    var calendar = {};
                    try {
                        calendar = JSON.parse(v);
                    } catch (e) {
                        valid = false;
                        console.log("Invalid JSON in Heater calendar ", e);
                    }
                    var wd = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'].sort();
                    if (valid && wd.length != Object.keys(calendar).sort().length) {
                        valid = false;
                    }

                    for (var i = 0; valid && i < wd.length; i++) {
                        if (Object.keys(calendar[wd[i]]).length <= 0) {
                            valid = false;
                        }
                    }
                    $("#node-input-calendarEditorLabel").toggleClass("input-error", !valid);
                    $("#node-input-calendarEditor").toggleClass("input-error", !valid);
                    return valid;
                },
                value: JSON.stringify(
                    {
                        "Monday": {
                            "00:00": 19,
                            "06:20": 22,
                            "08:00": 19,
                            "16:40": 22,
                            "23:59": 19
                        },
                        "Tuesday": {
                            "00:00": 19,
                            "06:20": 22,
                            "08:00": 19,
                            "16:40": 22,
                            "23:59": 19
                        },
                        "Wednesday": {
                            "00:00": 19,
                            "06:20": 22,
                            "08:00": 19,
                            "16:40": 22,
                            "23:59": 19
                        },
                        "Thursday": {
                            "00:00": 19,
                            "06:20": 22,
                            "08:00": 19,
                            "16:40": 22,
                            "23:59": 19
                        },
                        "Friday": {
                            "00:00": 19,
                            "06:20": 23,
                            "08:00": 19,
                            "16:40": 22,
                            "23:59": 19
                        },
                        "Saturday": {
                            "00:00": 19,
                            "08:00": 20,
                            "20:00": 22,
                            "23:59": 19
                        },
                        "Sunday": {
                            "00:00": 19,
                            "08:00": 20,
                            "20:00": 22,
                            "23:59": 19
                        }
                    }, null, 4)
            }
        },
        inputs: 1,
        outputs: 1,
        align: "left",
        icon: "heater.png",
        paletteLabel: "heater",
        label: function () { return this.name || "heater"; },
        oneditprepare: function () {
            $('#node-input-topic').val(this.topic);
            $('#cUnit').text(RED._("node-red-contrib-heater-controller/ui_heater_controller:heater_controller.label.celsiusUnit"));
            $('#fUnit').text(RED._("node-red-contrib-heater-controller/ui_heater_controller:heater_controller.label.fahrenheitUnit"));
            $('#kUnit').text(RED._("node-red-contrib-heater-controller/ui_heater_controller:heater_controller.label.kelvinUnit"));
            $("#node-input-size").elementSizer({
                width: "#node-input-width",
                height: "#node-input-height",
                group: "#node-input-group"
            });
            this.editor = RED.editor.createEditor({
                id: 'node-input-calendarEditor',
                mode: 'ace/mode/json',
                value: $("#node-input-calendar").val()
            });
            var editor = this.editor;
            $("#node-input-json-format").on('click', function (e) {
                e.preventDefault();
                try {
                    editor.getSession().setValue(JSON.stringify(JSON.parse(editor.getSession().getValue()), null, 4));
                } catch (e) {
                    console.log("Invalid JSON in Heater calendar ")
                }
            });
            $('#unit').val(this.unit || "C");
            this.editor.focus();
        },
        oneditsave: function () {
            $("#node-input-calendar").val(this.editor.getValue());
            this.editor.destroy();
            delete this.editor;
            this.topic = $('#node-input-topic').val();
            this.sliderMaxValue = Number.parseFloat(this.sliderMaxValue);
            this.sliderMinValue = Number.parseFloat(this.sliderMinValue);
            this.sliderStep = Number.parseFloat(this.sliderStep)
            this.thresholdFalling = Number.parseFloat(this.thresholdFalling);
            this.thresholdRising = Number.parseFloat(this.thresholdRising);
            this.unit = $('#unit').val();
            try {
                this.calendar = JSON.parse(this.calendar);
            } catch (e) {
                console.log("Invalid JSON in Heater calendar ", e);
            }
        },
        oneditcancel: function () {
            this.editor.destroy();
            delete this.editor;
        },
        oneditresize: function (size) {
            this.editor.resize();
        }
    });
</script>
<script type="text/html text/x-red" data-help-name="ui_heater_controller">
    <p>A dashboard ui interface node for controlling a heater;</p>
    <h3>Properties</h3>
    <dl class="message-properties">
        <dt>Topic <span class="property-type">string</span></dt>
        <dd>Topic sent with all messages; this cannot be taken from input since it expects a fixed topic</dd>
    </dl>
    <dl class="message-properties">
        <dt>Unit <span class="property-type">Celsius/Fahrenheit/Kelvin</span></dt>
        <dd>Display unit</dd>
    </dl>
    <dl class="message-properties">
        <dt>Min <span class="property-type">integer</span></dt>
        <dd>Minimum vale selectable using slider</dd>
    </dl>
    <dl class="message-properties">
        <dt>Max <span class="property-type">boolean</span></dt>
        <dd>Maximum vale selectable using slider</dd>
    </dl>
    <dl class="message-properties">
        <dt>Step <span class="property-type">integer</span></dt>
        <dd>Step value selectable from slider</dd>
    </dl>
    <dl class="message-properties">
        <dt>Upper threshold<span class="property-type">float</span></dt>
        <dd>Hysteresis upper threshold limit. This value is added to the target temperature to determinate the point of setting the heater to off</dd>
    </dl>
    <dl class="message-properties">
        <dt>Lower threshold<span class="property-type">float</span></dt>
        <dd>Hysteresis Lower threshold limit. This value is added to the target temperature to determinate the point of setting the heater to on</dd>
    </dl>
    <dl class="message-properties">
        <dt>Calendar<span class="property-type">json</span></dt>
        <dd>The calendar which will be apply in automatic mode. Needs to be a valid JSON with float values for temperature.<br>
            Is important to cover the entire interval of 24/7, otherwise will keep the temperature untill next sice or next week day</dd>
        <dd>For example:</dd>
        <pre>
{
    "Monday" : {
        "00:00" : 19,
        "06:20" : 22,
        "08:00" : 19,
        "16:40" : 22,
        "23:59" : 19
    },
    "Tuesday" : {
        "00:00" : 19,
        "06:20" : 22,
        "08:00" : 19,
        "16:40" : 22,
        "23:59" : 19
    }
}
        </pre>
    </dl>    
    <h3>Inputs</h3>
    <p>This controller accepts one main input which has to have topic as "currentTemp" and payload needs to be a float</p>
    <p style="color: #AD1625;">The entire control is not functional untill this message is received</p>
    <p>The heater status is recalculated when this message recived, or when the user is changing the target temperature.</p>
    <dd>Message example:</dd>
        <pre>
{
    "topic" : "currentTemp",
    "payload" : "22.5"
}
        </pre>
    <h3>Output</h3>
    <p>A message is emited when the status is recalculated (when the user is changing the target temperature or a new input message is received)</p>
    
    <dd>For example:</dd>
    <pre>
{
    "currentTemp":25,
    "targetValue":20,
    "currentSchedule":{
        temp: 19,
        day: "Wednesday",
        time: "00:00"
    },
    "nextSchedule":{
        temp: 22,
        day: "Wednesday",
        time: "06:20"
    },
    "currentHeaterStatus":"off",
    "userTargetValue":20,
    "isUserCustom":true
}
    </pre>       
    <dl class="message-properties">
        <dt>currentTemp<span class="property-type">float</span></dt>
        <dd>The last current temperature received</dd>
    </dl>
    <dl class="message-properties">
        <dt>targetValue<span class="property-type">float</span></dt>
        <dd>Target temperature displyed in front-end. Coul be user custom value, if is changed by the user, or calendar current temperature value set by calendar</dd>
    </dl>
    <dl class="message-properties">
        <dt>currentSchedule<span class="property-type">float</span></dt>
        <dd>Current calendar schedule. The value which would be set if the controller is set on calendar and some aditional information like day of the week and time</dd>
    </dl>
    <dl class="message-properties">
        <dt>nextSchedule<span class="property-type">float</span></dt>
        <dd>Next calendar schedule. The value which will be set if the controller is set on calendar and some aditional information when this will like happen like day of the week and time</dd>
    </dl>
    <dl class="message-properties">
        <dt>currentHeaterStatus<span class="property-type">string (on|off)</span></dt>
        <dd>Calculated the heater status based on the difference between target value and current temperature</dd>
    </dl>
    <dl class="message-properties">
        <dt>userTargetValue<span class="property-type">float</span></dt>
        <dd>The current target temperature set by user. This value will be the target until the next schedule if the isUserCustomLocked is false.</dd>
    </dl>
    <dl class="message-properties">
        <dt>isUserCustom<span class="property-type">boolean</span></dt>
        <dd>True if current target temperature is set by the user</dd>
    </dl>
    <dl class="message-properties">
        <dt>isUserCustomLocked<span class="property-type">boolean</span></dt>
        <dd>True if current target temperature is locked; if is true, the calendar value will not become targetValue, if is false and the user has set a custom value that value will be available until next schedule change</dd>
    </dl>
</script>