victron-nodes.html

<script type="text/template" id="input-edit-template">
    <div class="victron-form">
        <div class="hidden" id="custominfo">
            <div class="info-text">
                Note that there is no guarantee that used services and paths will remain existent with firmware updates for custom nodes.</i>
            </div>
            <hr />
        </div>
        <div class="form-row" id="stored-settings">
            <div class="info-text">
            </div>
        </div>
        <div class="form-row" id="service-row">
            <label for="node-input-service">Device</label>
            <select id="node-input-service"></select>
        </div>
        <div class="form-info hidden" id="duplicatesinfo"></div>
        <div class="form-row" id="path-row">
            <label for="node-input-path">Measurement</label>
            <select id="node-input-path"></select>
        </div>
        <div class="form-warning hidden" id="warningmessage"></div>
        <div class="form-warning hidden" id="statusmessage"></div>
        <div class="form-tips hidden" id="enuminfo">
            <p class="enuminfo--header">Value types</p>
            <p id="enuminfo-text"></p>
        </div>
        <div class="form-row hidden" id="initial-row">
            <hr />
            <label for="node-input-initial">Initial value</label>
            <select id="node-input-initial"></select>
            <div class="info-text">
                The initial value is sent to the device whenever the node is deployed.
            </div>
        </div>
        <div class="form-row" id="name-row">
            <hr />
            <label for="node-input-name">Node label</label>
            <input type="text" id="node-input-name">
            <div class="info-text">
                <i>The node can be given an arbitrary label that is shown instead of device name and service.</i>
            </div>
        </div>
        <div class="hidden" id="outputinfo">
            <hr />
            <div class="info-text">
                The value for the controlled output should be set in incoming message's <code>msg.payload</code> property.
                Please refer to 'Value Types' box above for adjustable settings.</i>
            </div>
        </div>
        <div class="form-row hidden" id="roundValues">
            <label style="min-width:190px" for="node-input-roundValues"><i class="fa fa-minus-circle"></i>Rounding</label>
            <select id="node-input-roundValues">
                <option value="no">Do not round</option>
                <option value="0">Zero digits</option>
                <option value="1">1 digit</option>
                <option value="2">2 digits</option>
                <option value="3">3 digits</option>
            </select>
                <div class="info-text">
                Round values to less digits.
            </div>
        </div>
        <div class="form-row hidden" id="onlyChanges">
            <label style="min-width:190px" for="node-input-onlyChanges"><i class="fa fa-bell"></i>Only changes</label>
                <input type="checkbox" checked id="node-input-onlyChanges" style="max-width:30px">
                <div class="info-text">
                Only send output on (initially not rounded) value changes and not every 5 seconds. 
            </div>
        </div>
    </div>
</script>

<script type="text/javascript">
    // Polyfills. Mainly for IE.

    if (!Array.prototype.find) {
        Array.prototype.find = function(predicate) {
            if (this == null) {
                throw new TypeError('Array.prototype.find called on null or undefined');
            }
            if (typeof predicate !== 'function') {
                throw new TypeError('predicate must be a function');
            }
            var list = Object(this);
            var length = list.length >>> 0;
            var thisArg = arguments[1];
            var value;

            for (var i = 0; i < length; i++) {
                value = list[i];
                if (predicate.call(thisArg, value, i, list)) {
                    return value;
                }
            }
            return undefined;
        };
    }

    if (!Object.entries) {
        Object.entries = function (obj) {
            var ownProps = Object.keys(obj),
                i = ownProps.length,
                resArray = new Array(i);
            while (i--)
                resArray[i] = [ownProps[i], obj[ownProps[i]]];

            return resArray;
    };
}

</script>

<script type="text/javascript">
    "use strict";

    var serviceRoot = (RED.settings.httpNodeRoot || RED.settings.httpAdminRoot || "").replace(/\/$/, "") + '/victron/services/';

    function buildEditPanel(node, serviceUrl, isOutputNode, isCustomNode, nodeLabel) {
        var serviceElem = $('#node-input-service');
        var pathElem = $('#node-input-path');
        var initialValueElem = $('#node-input-initial');
        var serviceDataAvailable = null;
        var nodeLabelLower = nodeLabel.toLowerCase();

        var buildOption = function buildOption(service) {
            return $('<option/>').val(service.service || service.path).text(service.name).data(service);
        };

        var populateSelect = function populateSelect(selector, services) {
            selector[0].options.length = 0;
            services.forEach(function (service) {
                selector.append(buildOption(service));
            });
            selector.trigger('change');
        };

        var updatePaths = function updatePaths() {
            var serviceData = serviceElem.find(':selected').data();
            if (serviceData && serviceData.paths) populateSelect(pathElem, serviceData.paths);
            pathElem.val($('#selectedpath').text());
            updateEnums();
        };

        var updateEnums = function updateEnums() {
            var pathData = pathElem.find(':selected').data();

            if (pathData) {
                pathData.warning && serviceDataAvailable ? changeStatusText($('#warningmessage'), 'fa-exclamation-circle', pathData.warning) : $('#warningmessage').hide();
            }

            if (pathData && pathData.type === 'enum') {
                var valueTypesEnum = pathData.enum;
                showEnumInfo(valueTypesEnum);
                var selectOptions = Object.keys(valueTypesEnum).map(function (key) {
                    return {
                        service: key,
                        name: "".concat(key, " - ").concat(valueTypesEnum[key])
                    };
                });
                selectOptions.unshift({
                    service: null,
                    name: "Don't set initial value"
                });
                populateSelect(initialValueElem, selectOptions);
                if (node.initial) initialValueElem.val(node.initial);
                if (isOutputNode) $('#initial-row').show();
            } else {
                hideEnumInfo();

                // unset and hide initialValue
                $('#initial-row').hide();
                initialValueElem.val(null);
            }
            if (typeof pathData !== 'undefined' && (pathData.type === 'float' || pathData.type === 'number') && !isOutputNode) {
                $('#roundValues').show()
            } else {
                $('#roundValues').hide()
            }
        };

        var showStatusMessage = function showStatusMessage(msg) {
            serviceElem.attr('disabled', 'disabled');
            pathElem.attr('disabled', 'disabled');
            initialValueElem.attr('disabled', 'disabled');
            changeStatusText($('#statusmessage'), 'fa-exclamation-circle', msg);
        };

        var changeStatusText = function changeStatusText(selector, iconClass, message) {
            // fa-info-circle fa-exclamation-circle
            selector.html("<i class=\"fa ".concat(iconClass, " fa-2x\"></i><i>").concat(message, "</i>")).show();
        };

        var showEnumInfo = function showEnumInfo(enumObj) {
            var msg = Object.entries(enumObj).map(function (item, key) {
                return "".concat(item[0], " - ").concat(item[1]);
            }).join('<br/>');
            $('#enuminfo-text').html(msg);
            $('#enuminfo').show();
        };

        var hideEnumInfo = function hideEnumInfo() {
            $('#enuminfo').hide();
        };

        /*  If a node was previously deployed, update the edit based on the old data */
        var appendSavedService = function appendSavedService(data) {
            if (node.service) {
                // if the service not present anymore, still add it to the select list
                if (!data.find(function (s) {
                    return s.service === node.service;
                })) {
                    buildOption(node.serviceObj).text(node.serviceObj.name + " [disconnected]").appendTo(serviceElem);
                    changeStatusText($('#statusmessage'), 'fa-exclamation-circle', "The device is no longer available via the stored service path. Please (re)select the device from the dropdown and deploy again.");
                }

                if (node.serviceObj && node.pathObj) {
                    $('#stored-settings').html('Currently stored selection:<br /><ul><li>'+node.serviceObj.name+'</li><li>'+node.pathObj.name+'</li></ul><div class="hidden" id="selectedpath">'+node.pathObj.path+'</div><hr />')
                }
                serviceElem.val(node.service);
            }
        };

        if (isCustomNode) {
            $('#custominfo').show()
        } else {
            $('#custominfo').hide()
        }

        // Upon receiving data, populate the edit form
        $.ajax(serviceRoot + serviceUrl, {
            beforeSend: function(jqXHR) {
                var auth_tokens = RED.settings.get("auth-tokens");
                if (auth_tokens) {
                    jqXHR.setRequestHeader("Authorization","Bearer "+auth_tokens.access_token);
                }
            }
        })
        .done(data => {
            serviceDataAvailable = data.length;

            // in case any services are available, populate the service and path dropdowns
            if (data.length !== 0) {
                populateSelect(serviceElem, data);

                function containsDuplicates(array) {
                    return array.sort().some(function (item, i, items) {
                        return item === items[i + 1];
                    });
                }

                // check for duplicate options in order to show an info message on setting a custom name
                var hasDuplicateNames = containsDuplicates(data.map(function (s) {
                    return s.name;
                }));

                if (hasDuplicateNames) {
                    var msg = "Multiple ".concat(nodeLabelLower, "s were found with the same name. You can set a custom name for the device in Venus settings.");
                    changeStatusText($('#duplicatesinfo'), 'fa-info-circle', msg);
                }
            } else { // otherwise, disable inputs and show a pretty statusmessage
                node.serviceObj ? showStatusMessage("There are no ".concat(nodeLabelLower, " services available. Please check that the selected ").concat(node.serviceObj.name, " is properly connected.")) : showStatusMessage("There are no ".concat(nodeLabelLower, " services available. Please check that a ").concat(nodeLabelLower, " is connected or try a different node."));
            }

            // append old service data, if we have a service and path saved to the node
            appendSavedService(data);

            // a change on serviceElem dropdown triggers updatePaths()
            // which renders new options for the selected service
            updatePaths();
            serviceElem.change(updatePaths);
            if (node.path) pathElem.val(node.path);

            // a change on pathElem dropdown triggers updateEnums()
            // which renders the enum value info box on demand
            updateEnums();
            pathElem.change(updateEnums); // show the information text on using 'msg.payload' to trigger settings for output nodes

            if (isOutputNode) {
                $('#outputinfo').show()
            } else {
                if (typeof(node.onlyChanges) === 'undefined') {
                    $('#node-input-onlyChanges').removeAttr("checked");
                }
                $('#onlyChanges').show()
            }
        }).fail(function () {
            return showStatusMessage("Unable to access the service endpoint.");
        });
    }

    function saveEditPanel(node) {
        // save the current service and path objects
        node.serviceObj = $('#node-input-service').find(':selected').data();
        delete(node.serviceObj.paths)
        delete(node.serviceObj.deviceInstance)
        node.pathObj = $('#node-input-path').find(':selected').data();
    }

    function buildNodeLabel(node, nodeName) {
        var altName = nodeName;

        if (node.serviceObj && node.path) {
            var svc = node.serviceObj.name;
            var path = node.pathObj.name;
            altName = "".concat(svc, " | ").concat(path);
        }

        return node.name || altName;
    }

    // Builds the edit panel form dynamically for each input node
    function buildEditForm(nodeType, serviceName) {
        // Clone the edit form template
        var editForm = $("#input-edit-template").clone().html();
        var scriptTag = $("<script>").attr("type", "text/x-red").attr("data-template-name", nodeType).append(editForm); // Edit template data

        scriptTag.find('#service-row > label').text(serviceName); // Append to the document body

        $('body').append(scriptTag.prop('outerHTML'));
    }

    // Creates an input-node config and registers it with
    // the Node-RED Node API
    function registerNode(nodeType, nodeLabel, serviceType, isOutputNode, isCustomNode) {
        // Copy the edit form template to the html body
        buildEditForm(nodeType, nodeLabel);
        var nodePaletteLabel = isOutputNode ? nodeLabel + ' Control' : nodeLabel;

        RED.nodes.registerType(nodeType, {
            category: 'Victron Energy',
            paletteLabel: nodePaletteLabel,
            defaults: {
                service: { value: "", required: true },
                path: { value: "", required: true },
                serviceObj: { value: undefined },
                pathObj: { value: undefined },
                initial: { value: undefined },
                name: { value: "" },
                "onlyChanges": { value: false },
                "roundValues": { value: undefined }
            },
            color: isCustomNode ? "#f7ab3e" : "#4790d0",
            inputs: isOutputNode ? 1 : 0,
            outputs: isOutputNode ? 0 : 1,
            icon: "victronenergy.svg",
            label: function label() {
                return buildNodeLabel(this, nodePaletteLabel);
            },
            oneditprepare: function oneditprepare() {
                buildEditPanel(this, serviceType, isOutputNode, isCustomNode, nodeLabel);
            },
            oneditsave: function oneditsave() {
                saveEditPanel(this);
            },
            onadd: function() {
                let hasClient = false
                RED.nodes.eachConfig(function (n) {
                    if (n.id === 'victron-client-id')
                        hasClient = true
                });

                if ( !hasClient ) {
                    var victronClientNode = {
                        id: "victron-client-id",
                        _def: RED.nodes.getType("victron-client"),
                        type: "victron-client",
                        users: []
                    };
                    RED.nodes.add(victronClientNode);
                    RED.nodes.dirty(true);
                }
            }
        });
    }

    function registerInputNode(nodeType, nodeLabel, serviceType) {
        registerNode(nodeType, nodeLabel, serviceType, false, false);
    }

    function registerOutputNode(nodeType, nodeLabel, serviceType) {
        registerNode(nodeType, nodeLabel, serviceType, true, false);
    }

    registerInputNode('victron-input-accharger', 'AC Charger', 'input-accharger');
    registerInputNode('victron-input-acload', 'AC Load', 'input-acload');
    registerInputNode('victron-input-alternator', 'Alternator', 'input-alternator');
    registerInputNode('victron-input-battery', 'Battery Monitor', 'input-battery');
    registerInputNode('victron-input-dcdc', 'DC-DC', 'input-dcdc');
    registerInputNode('victron-input-dcload', 'DC Load', 'input-dcload');
    registerInputNode('victron-input-dcsource', 'DC Source', 'input-dcsource');
    registerInputNode('victron-input-dcsystem', 'DC System', 'input-dcsystem');
    registerInputNode('victron-input-digitalinput', 'Digital Input', 'input-digitalinput');
    registerInputNode('victron-input-genset', 'Energy Meter', 'input-genset');
    registerInputNode('victron-input-ess', 'ESS', 'input-ess');
    registerInputNode('victron-input-evcharger', 'EV Charger', 'input-evcharger');
    registerInputNode('victron-input-fuelcell', 'Fuel cell', 'input-fuelcell');
    registerInputNode('victron-input-generator', 'Generator', 'input-generator');
    registerInputNode('victron-input-gps', 'GPS', 'input-gps');
    registerInputNode('victron-input-gridmeter', 'Grid Meter', 'input-gridmeter');
    registerInputNode('victron-input-inverter', 'Inverter', 'input-inverter');
    registerInputNode('victron-input-meteo', 'Meteo', 'input-meteo');
    registerInputNode('victron-input-motordrive', 'Motordrive', 'input-motordrive');
    registerInputNode('victron-input-multi', 'Multi RS', 'input-multi');
    registerInputNode('victron-input-pulsemeter', 'Pulsemeter', 'input-pulsemeter');
    registerInputNode('victron-input-pump', 'Pump', 'input-pump');
    registerInputNode('victron-input-pvinverter', 'PV Inverter', 'input-pvinverter');
    registerInputNode('victron-input-relay', 'Relay', 'input-relay');
    registerInputNode('victron-input-settings', 'Settings', 'input-settings');
    registerInputNode('victron-input-solarcharger', 'Solar Charger', 'input-solarcharger');
    registerInputNode('victron-input-system', 'System', 'input-system');
    registerInputNode('victron-input-tank', 'Tank Sensor', 'input-tank');
    registerInputNode('victron-input-temperature', 'Temperature Sensor', 'input-temperature');
    registerInputNode('victron-input-vebus', 'VE.Bus System', 'input-vebus');

    registerOutputNode('victron-output-accharger', 'AC Charger', 'output-accharger');
    registerOutputNode('victron-output-battery', 'Battery Monitor', 'output-battery');
    registerOutputNode('victron-output-charger', 'Charger', 'output-charger');
    registerOutputNode('victron-output-dcdc', 'DC-DC', 'output-dcdc');
    registerOutputNode('victron-output-ess', 'ESS', 'output-ess');
    registerOutputNode('victron-output-evcharger', 'EV Charger', 'output-evcharger');
    registerOutputNode('victron-output-generator', 'GX Generator', 'output-generator');
    registerOutputNode('victron-output-inverter', 'Inverter', 'output-inverter');
    registerOutputNode('victron-output-multi', 'Multi RS', 'output-multi');
    registerOutputNode('victron-output-pump', 'Pump', 'output-pump');
    registerOutputNode('victron-output-pvinverter', 'PV Inverter', 'output-pvinverter');
    registerOutputNode('victron-output-relay', 'Relay', 'output-relay');
    registerOutputNode('victron-output-settings', 'Settings', 'output-settings');
    registerOutputNode('victron-output-solarcharger', 'Solar Charger', 'output-solarcharger');
    registerOutputNode('victron-output-vebus', 'VE.Bus System', 'output-vebus');

    // Custom input and output nodes:
    registerNode('victron-input-custom', 'Custom Input', 'input-custom', false, true)
    registerNode('victron-output-custom', 'Custom', 'output-custom', true, true);

</script>

<style>
    .victron-form div {
        width: 450px;
    }
    .victron-form label, .enuminfo--header {
        font-weight: 500;
    }
    .victron-form input, select {
        width: 300px;
    }
    .victron-form .hidden {
        display: none;
    }
    .victron-form .form-tips {
        padding: 16px;
        margin-bottom: 12px;
        width: 410px;
    }
    .victron-form .form-warning, .form-info {
        padding-bottom: 8px;
        max-width: 450px;
    }
    .victron-form .form-info {
        font-style: italic;
        padding-bottom: 8px;
        max-width: 450px;
    }
    .victron-form .fa {
        float: left;
        margin: 5px 10px 0px 0px;
    }
    .victron-form .form-info .fa {
        color: #00BCFF;
    }
    .victron-form .form-warning .fa {
        color: #d6615f;
    }
    .victron-form .form-row label {
        min-width: 140px;
    }
    .victron-form .info-text {
        padding: 8px 0px;
        font-style: italic;
    }
    .victron-form .hr {
        margin: 8px 0;
    }
</style>