smart-nodes/multi-press/multi-press.html

Smart Nodes

<script type="text/javascript">
    RED.nodes.registerType("smart_multi-press-control", {
        category: "Smart Nodes",
        paletteLabel: "Multi press control",
        color: "#FF8080",
        defaults: {
            name: { value: "" },
            press_delay_ms: { value: 200 },
            max_presses: { value: 2 },
            outputs: { value: 2 },
            output_mode: { value: "2" },
            out1: { value: '{"topic": ""}' },
            out2: { value: '{"topic": ""}' },
            out3: { value: '{"topic": ""}' },
            out4: { value: '{"topic": ""}' },
        },
        inputs: 1,
        outputs: 1,
        outputLabels: function (index)
        {
            return "Pressed " + (index + 1) + " time" + (index == 0 ? "" : "s");
        },
        icon: "font-awesome/fa-bullseye",
        label: function ()
        {
            return this.name || "Multi press control";
        },
        oneditprepare: function ()
        {
            let node = this;

            $("#node-input-max_presses")
                .css("max-width", "4rem")
                .spinner({
                    min: 2,
                    max: 4,
                    change: function (event, ui)
                    {
                        var value = parseInt(this.value, 10);
                        value = isNaN(value) ? 2 : value;
                        value = Math.max(value, parseInt($(this).attr("aria-valuemin"), 10));
                        value = Math.min(value, parseInt($(this).attr("aria-valuemax"), 10));
                        if (value !== this.value)
                            $(this).spinner("value", value);

                        node.outputs = node.output_mode == "1" ? 1 : node.max_presses;

                        showNeededMessages(value);
                    }
                });
            $("#node-input-max_presses").trigger("change");

            $("#node-input-press_delay_ms")
                .css("max-width", "4rem")
                .spinner({
                    min: 1,
                    change: function (event, ui)
                    {
                        var value = parseInt(this.value, 10);
                        value = isNaN(value) ? 0 : value;
                        value = Math.max(value, parseInt($(this).attr("aria-valuemin"), 10));
                        // value = Math.min(value, parseInt($(this).attr("aria-valuemax")));
                        if (value !== this.value)
                            $(this).spinner("value", value);
                    }
                });

            $("#node-input-out1")
                .css("max-width", "70%")
                .typedInput({
                    type: "json",
                    types: ["json"]
                });

            $("#node-input-out2")
                .css("max-width", "70%")
                .typedInput({
                    type: "json",
                    types: ["json"]
                });

            $("#node-input-out3")
                .css("max-width", "70%")
                .typedInput({
                    type: "json",
                    types: ["json"]
                });

            $("#node-input-out4")
                .css("max-width", "70%")
                .typedInput({
                    type: "json",
                    types: ["json"]
                });

            $("#node-input-output_mode")
                .css("max-width", "70%")
                .typedInput({
                    type: "num",
                    types: [{
                        value: "output_mode",
                        options: [
                            { value: "1", label: node._("multi-press.ui.common_output") },
                            { value: "2", label: node._("multi-press.ui.separate_output") },
                        ]
                    }]
                }).on("change", function (event, type, value)
                {
                    node.outputs = value == "1" ? 1 : node.max_presses;
                });

            // Update node to newest config
            if (!node.max_presses)
            {
                node.max_presses = node.outputs;
                $("#node-input-output_mode").typedInput("value", "2");
                $("#node-input-max_presses").val(node.outputs);
                $("#node-input-output_mode").trigger("change");
            }

            showNeededMessages(node.max_presses);
        }
    });

    let showNeededMessages = value =>
    {
        // Hide not used rows
        if (value < 3)
            $("#form-row-three-click").hide();
        else
            $("#form-row-three-click").show();

        if (value < 4)
            $("#form-row-four-click").hide();
        else
            $("#form-row-four-click").show();
    }
</script>

<script type="text/html" data-template-name="smart_multi-press-control">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="multi-press.ui.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]multi-press.ui.name" />
    </div>
    <div class="form-row">
        <label for="node-input-max_presses" style="vertical-align: middle"><i class="fa fa-hand-o-up"></i> <span data-i18n="multi-press.ui.count_presses"></span></label>
        <input id="node-input-max_presses" data-i18n="[placeholder]multi-press.ui.count_presses_placeholder" placeholder="" />
    </div>
    <div class="form-row">
        <label for="node-input-press_delay_ms"><i class="fa fa-clock-o"></i> <span data-i18n="multi-press.ui.time_interval"></span></label>
        <input id="node-input-press_delay_ms" data-i18n="[placeholder]multi-press.ui.time_interval_placeholder" placeholder="" />
        <span> ms</span>
   </div>
    <hr/>
    <h4 style="margin: 0.5rem 0;" data-i18n="multi-press.ui.output_messages"></h4>
    <div class="form-row">
        <label for="node-input-out1"><i class="fa fa-hand-o-up"></i> 1x</label>
        <input type="text" id="node-input-out1" />
    </div>
    <div class="form-row">
        <label for="node-input-out2"><i class="fa fa-hand-o-up"></i> 2x</label>
        <input type="text" id="node-input-out2" />
    </div>
    <div class="form-row" id="form-row-three-click">
        <label for="node-input-out3"><i class="fa fa-hand-o-up"></i> 3x</label>
        <input type="text" id="node-input-out3" />
    </div>
    <div class="form-row" id="form-row-four-click">
        <label for="node-input-out4"><i class="fa fa-hand-o-up"></i> 4x</label>
        <input type="text" id="node-input-out4" />
    </div>
    <div class="form-row">
        <label for="node-input-output_mode"><i class="fa fa-hashtag"></i> <span data-i18n="multi-press.ui.outputs"></span></label>
        <input id="node-input-output_mode" />
    </div>
</script>