crownstone-switch-crownstone.html

<script type="text/javascript">
    RED.nodes.registerType('crownstone switch crownstone', {
        category: 'Crownstone',
        color: '#FFFFFF',
        defaults: {
            name: { value: "" },
            crownstoneId: { value: "" },
            onOff: { value: false },
            dimPercentage: { value: 0, validate: function (v) { return v !== "" && !isNaN(v) && (v >= 0 && v <= 100); } } // Validation function for percentages
        },
        inputs: 1,
        outputs: 0,
        icon: "icons/crownstone_logo_black.svg",
        label: function () {
            return this.name || "Crownstone switch Crownstone";
        },
        labelStyle: function () {
            return this.name ? "node_label_italic" : "";
        },
        oneditprepare: function () {
            var nodeId = this.id;
            var requestData;

            // Function to show or hide the corresponding input fields
            function updateInputTypeDimming(dimming) {
                if (dimming) {
                    $("#input-onOff").hide();
                    $("#input-dimPercentage").show();
                }
                else {
                    $("#input-onOff").show();
                    $("#input-dimPercentage").hide();
                }
            }

            $.getJSON('crownstones/' + nodeId, function (data) {
                requestData = data;

                // Generate drop-down list
                for (let crownstone of data) {
                    $('#node-input-crownstoneName').append(`<option value="${crownstone.id}" title="${crownstone.location}">${crownstone.name}</option>`);
                }
                // Highlight selected item
                $('#node-input-crownstoneName').val($('#node-input-crownstoneId').val());

                // Show dimming or switching input field on start
                var crownstoneId = $('#node-input-crownstoneId').val();
                var crownstone = requestData.find(a => a.id === crownstoneId);
                if (crownstone !== undefined) {
                    updateInputTypeDimming(crownstone.dimming);
                }
                // Show dimming or switching input field on change
                $('#node-input-crownstoneName').on("change", function () {
                    var crownstoneId = $(this).val();
                    var crownstone = requestData.find(a => a.id === crownstoneId);
                    if (crownstone !== undefined) {
                        updateInputTypeDimming(crownstone.dimming);
                    }
                });
            }).fail(function (jqXHR, textStatus, errorThrown) {
                if (jqXHR.status === 400) {
                    // Show the tip to Deploy the code
                    $('#tip-deploy').show();
                }
                else if (jqXHR.status === 401) {
                    // Show the tip to add the Crownstone authenticate node
                    $('#tip-authenticate').show();
                }
            });
        },
        oneditsave: function () {
            // Put the chosen Crownstone in the hidden field
            $('#node-input-crownstoneId').val($('#node-input-crownstoneName').val());
        }
    });
</script>

<script type="text/html" data-template-name="crownstone switch crownstone">
    <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 form-row-crownstoneId" id="input-crownstoneId" hidden>
        <input type="text" id="node-input-crownstoneId">
    </div>
    <div class="form-row form-row-crownstoneName">
        <label for="node-input-crownstoneName"><i class="fa fa-plug"></i> Crownstone name</label>
        <select type="text" id="node-input-crownstoneName" style="width: 250px;">
        </select>
    </div>

    <div class="form-row form-row-onOff" id="input-onOff" hidden>
        <label for="node-input-onOff"><i class="fa fa-toggle-on"></i> New State</label>
        <input type="checkbox" id="node-input-onOff" style="display: inline-block; width: auto; vertical-align: top;">
        <label for="node-input-onOff" style="width: 70%;">On/Off</label>
    </div>
    <div class="form-row form-row-dimPercentage" id="input-dimPercentage" hidden>
        <label for="node-input-dimPercentage"><i class="fa fa-percent"></i> Dim percentage</label>
        <input type="text" id="node-input-dimPercentage" placeholder="%">
    </div>

    <div class="form-tips" id="tip-authenticate" hidden><b>Tip:</b> Add the Crownstone authenticate node to the flow to authenticate the user and make use of this node.</div>
    <div class="form-tips" id="tip-deploy" hidden><b>Tip:</b> Deploy the flow first before the list can be created.</div>
</script>

<script type="text/html" data-help-name="crownstone switch crownstone">
    <p>Switch Crownstones with the Crownstone cloud.</p>

    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt class="optional">crownstoneId<span class="property-type">string</span></dt>
        <dd>The id of the Crownstone.</dd>
        <dt class="optional">onOff<span class="property-type">boolean</span></dt>
        <dd>The new state of a non-dimmable Crownstone.</dd>
        <dt class="optional">dimPercentage<span class="property-type">number</span></dt>
        <dd>The new dim percentage of a dimmable Crownstone.</dd>
    </dl>

    <h3>Outputs</h3>
    <ol class="node-ports">
        <li>Authorization required error
            <dl class="message-properties">
                <dt>payload<span class="property-type">object</span></dt>
                <dd>The standard error of the command.</dd>
            </dl>
        </li>
        <li>Standard error
            <dl class="message-properties">
                <dt>payload<span class="property-type">object</span></dt>
                <dd>The standard error of the command.</dd>
            </dl>
        </li>
    </ol>

    <h3>Details</h3>
    <p>This node can be used to switch or dim a Crownstone.</p>
    <p>The new state is dependent on if the Crownstone is dimmable or not.
        If the Crownstone is dimmable, the new state is set with a boolean checkbox.
        If the Crownstone is not dimmable, the dim percentage is set with a percentage value.
    </p>
    <p>The Crownstone and new state can be configured with the properties menu.
        To change the Crownstone on the go, the id of the Crownstone can be set with <code>msg.crownstoneId</code>.
        If the Crownstone is not dimmable, set the new state with <code>msg.onOff</code>.
        If the Crownstone is dimmable, set the percentage with <code>msg.dimPercentage</code>.
        These two properties can be used interchanged without problem. If the suposed message property is not present, The other message property will be used as value.
    </p>
    <p>This node is dependent on the Crownstone authenticate node.
        Import the Crownstone authenticate node in the project to make use of the features of this node.
    </p>

    <h3>References</h3>
    <ul>
        <li><a href="https://crownstone.rocks/">Crownstone</a> - Crownstone website</li>
        <li><a href="https://github.com/Danielvdd1/node-red-contrib-crownstone-cloud/">GitHub</a> - The nodes GitHub repository</li>
    </ul>
</script>