@gravypower/node-red-franklinwh/nodes/set/switches/franklinwh-set-switches.html

Node-RED node to control FranklinWH gateway

<script type="text/javascript">
    RED.nodes.registerType('franklinwh-set-switches',{
        category: 'FranklinWH',
        color: '#a6bbcf',
        defaults: {
            name: {value:""},
            server: {type:"franklinwh-config", required:true},
            usePayload: {value: true},
            sw1enabled: {value: false},
            sw1state: {value: false},
            sw2enabled: {value: false},
            sw2state: {value: false},
            sw3enabled: {value: false},
            sw3state: {value: false}
        },
        inputs:1,
        outputs:1,
        icon: "font-awesome/fa-toggle-on",
        label: function() {
            if (this.name) return this.name;
            let label = "set switches";
            if (!this.usePayload) {
                const switches = [];
                if (this.sw1enabled) switches.push(this.sw1state ? "SW1:ON" : "SW1:OFF");
                if (this.sw2enabled) switches.push(this.sw2state ? "SW2:ON" : "SW2:OFF");
                if (this.sw3enabled) switches.push(this.sw3state ? "SW3:ON" : "SW3:OFF");
                if (switches.length > 0) {
                    label += ` (${switches.join(", ")})`;
                }
            }
            return label;
        },
        oneditprepare: function() {
            const usePayload = $("#node-input-usePayload");
            const switchesRow = $("#node-switches-row");
            const switchStates = $(".switch-state");
            const switchEnabled = $(".switch-enabled");

            usePayload.on("change", function() {
                switchesRow.toggle(!$(this).is(":checked"));
            });

            // Enable/disable state checkboxes based on enabled status
            switchEnabled.on("change", function() {
                const num = $(this).data("switch");
                $(`#node-input-sw${num}state`).prop("disabled", !$(this).is(":checked"));
            });

            // Set initial states
            usePayload.trigger("change");
            switchEnabled.each(function() {
                $(this).trigger("change");
            });
        },
        oneditsave: function() {
            // Ensure states are false if switches are disabled
            for (let i = 1; i <= 3; i++) {
                if (!$(`#node-input-sw${i}enabled`).is(":checked")) {
                    $(`#node-input-sw${i}state`).prop("checked", false);
                }
            }
        }
    });
</script>

<script type="text/html" data-template-name="franklinwh-set-switches">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
    <div class="form-row">
        <label for="node-input-server"><i class="fa fa-globe"></i> Server</label>
        <input type="text" id="node-input-server">
    </div>
    <div class="form-row">
        <label for="node-input-usePayload"><i class="fa fa-random"></i> Use Payload</label>
        <input type="checkbox" id="node-input-usePayload" style="width: auto;">
        <span class="form-tips">&nbsp;Use msg.payload to set switch states</span>
    </div>
    <div id="node-switches-row">
        <div class="form-row">
            <label><i class="fa fa-toggle-on"></i> Switch 1</label>
            <input type="checkbox" id="node-input-sw1enabled" class="switch-enabled" data-switch="1" style="width: auto; margin-right: 5px;">
            <span>Enable</span>
            <input type="checkbox" id="node-input-sw1state" class="switch-state" style="width: auto; margin-left: 20px;">
            <span>ON</span>
        </div>
        <div class="form-row">
            <label><i class="fa fa-toggle-on"></i> Switch 2</label>
            <input type="checkbox" id="node-input-sw2enabled" class="switch-enabled" data-switch="2" style="width: auto; margin-right: 5px;">
            <span>Enable</span>
            <input type="checkbox" id="node-input-sw2state" class="switch-state" style="width: auto; margin-left: 20px;">
            <span>ON</span>
        </div>
        <div class="form-row">
            <label><i class="fa fa-toggle-on"></i> Switch 3</label>
            <input type="checkbox" id="node-input-sw3enabled" class="switch-enabled" data-switch="3" style="width: auto; margin-right: 5px;">
            <span>Enable</span>
            <input type="checkbox" id="node-input-sw3state" class="switch-state" style="width: auto; margin-left: 20px;">
            <span>ON</span>
        </div>
        <div class="form-tips">Enable switches and set their default states</div>
    </div>
</script>

<script type="text/html" data-help-name="franklinwh-set-switches">
    <p>Controls the smart switches of the FranklinWH system. These switches can be used to manage various loads and devices connected to the system.</p>

    <h3>Properties</h3>
    <dl class="message-properties">
        <dt>Name
            <span class="property-type">string</span>
        </dt>
        <dd>Name of the node</dd>

        <dt>Server
            <span class="property-type">config</span>
        </dt>
        <dd>FranklinWH server configuration</dd>

        <dt>Use Payload
            <span class="property-type">boolean</span>
        </dt>
        <dd>If enabled, switch states will be taken from msg.payload. If disabled, the configured default states will be used.</dd>

        <dt class="optional">Switch Configuration
            <span class="property-type">object</span>
        </dt>
        <dd>
            For each switch (1-3):
            <ul>
                <li><strong>Enable:</strong> Include this switch in the configuration</li>
                <li><strong>ON/OFF:</strong> Default state for the switch</li>
            </ul>
        </dd>
    </dl>

    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>payload
            <span class="property-type">array | object</span>
        </dt>
        <dd>
            When "Use Payload" is enabled, accepts:
            <ul>
                <li>Single switch object: <code>{ id: "sw1", state: true }</code></li>
                <li>Array of switch objects: <code>[{ id: "sw1", state: true }, { id: "sw2", state: false }]</code></li>
            </ul>
            Where:
            <ul>
                <li><code>id</code>: Switch identifier ("sw1", "sw2", or "sw3")</li>
                <li><code>state</code>: Boolean switch state (true = ON, false = OFF)</li>
            </ul>
        </dd>
    </dl>

    <h3>Outputs</h3>
    <dl class="message-properties">
        <dt>payload
            <span class="property-type">object</span>
        </dt>
        <dd>
            An object containing:
            <ul>
                <li><code>switches</code> - Array of switch states with details:
                    <ul>
                        <li><code>id</code> - Switch identifier</li>
                        <li><code>name</code> - Human-readable name</li>
                        <li><code>state</code> - Boolean state</li>
                        <li><code>status</code> - String status ("ON"/"OFF")</li>
                    </ul>
                </li>
                <li><code>timestamp</code> - ISO timestamp of the change</li>
                <li><code>summary</code> - Human-readable summary of changes</li>
            </ul>
        </dd>
    </dl>

    <h3>Details</h3>
    <p><strong>Switch Control Methods:</strong></p>
    <ol>
        <li><strong>Configuration:</strong> Set default states in the node configuration</li>
        <li><strong>Payload:</strong> Send switch states via msg.payload for dynamic control</li>
    </ol>

    <h3>Status</h3>
    <dl>
        <dt>Grey ring</dt>
        <dd>Waiting for input or no switches configured</dd>

        <dt>Blue dot</dt>
        <dd>Showing configured switch states</dd>

        <dt>Yellow dot</dt>
        <dd>Setting switch states</dd>

        <dt>Green dot</dt>
        <dd>Switches successfully set</dd>

        <dt>Red ring</dt>
        <dd>Error occurred or missing configuration</dd>
    </dl>

    <h3>Example Flow</h3>
    <pre>
[{
    "id": "n1",
    "type": "inject",
    "payload": [
        {"id": "sw1", "state": true},
        {"id": "sw2", "state": false}
    ]
},
{
    "id": "n2",
    "type": "franklinwh-set-switches"
},
{
    "id": "n3",
    "type": "debug"
}]
    </pre>

    <h3>References</h3>
    <ul>
        <li><a href="https://www.franklinwh.com/support" target="_blank">FranklinWH Documentation</a></li>
    </ul>
</script>