smart-nodes/counter/counter.html

Smart Nodes

<script type="text/javascript">
    RED.nodes.registerType("smart_counter", {
        category: "Smart Nodes",
        paletteLabel: "Counter",
        color: "#E2D96E",
        defaults: {
            name: { value: "" },
            start: { value: 0 },
            step: { value: 1 },
            min: { value: 0 },
            max: { value: 10 },
            out_message: { value: '{"topic": ""}' },
            out_message_type: { value: 'json' },
            save_state: { value: false },
            resend_on_start: { value: false }
        },
        inputs: 1,
        outputs: 1,
        icon: "counter.png",
        label: function ()
        {
            return this.name || "Counter";
        },
        oneditprepare: function ()
        {
            let node = this;

            $("#node-input-start")
                .css("max-width", "4rem")
                .spinner({
                    change: function (event, ui)
                    {
                        var value = parseFloat(this.value);
                        value = isNaN(value) ? 0 : value;
                        if (value !== this.value) $(this).spinner("value", value);
                    },
                });

            $("#node-input-step")
                .css("max-width", "4rem")
                .spinner({
                    change: function (event, ui)
                    {
                        var value = parseFloat(this.value);
                        value = isNaN(value) ? 0 : value;
                        if (value !== this.value) $(this).spinner("value", value);
                    },
                });

            $("#node-input-min")
                .css("max-width", "4rem")
                .spinner({
                    change: function (event, ui)
                    {
                        var value = parseFloat(this.value);
                        value = isNaN(value) ? 0 : value;
                        if (value !== this.value) $(this).spinner("value", value);
                    },
                });

            $("#node-input-max")
                .css("max-width", "4rem")
                .spinner({
                    change: function (event, ui)
                    {
                        var value = parseFloat(this.value);
                        value = isNaN(value) ? 0 : value;
                        if (value !== this.value) $(this).spinner("value", value);
                    },
                });


            $("#node-input-out_message")
                .css("max-width", "70%")
                .typedInput({
                    type: "json",
                    types: ["json", {
                        value: "NOTHING",
                        label: node._("counter.ui.default"),
                        icon: "fa fa-times",
                        hasValue: false,
                    }],
                    typeField: "#node-input-out_message_type"
                });

            $("#node-input-save_state").on("change", ev =>
            {
                if (ev.target.checked)
                    $("#resend_on_start_row").show();
                else
                    $("#resend_on_start_row").hide();
            });
            $("#node-input-save_state").trigger("change");

            // Backward compatibility
            if (this.out_message_type == "null")
            {
                this.out_message_type = "NOTHING";
                $("#node-input-out_message_type").val("NOTHING");
            }
        }
    });
</script>

<script type="text/html" data-template-name="smart_counter">
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> <span data-i18n="counter.ui.name"></span></label>
        <input type="text" id="node-input-name" data-i18n="[placeholder]counter.ui.name">
    </div>
    <div class="form-row">
        <label for="node-input-start"><i class="fa fa-cog"></i> <span data-i18n="counter.ui.start"></label>
        <input id="node-input-start"  data-i18n="[placeholder]counter.ui.start">
    </div>
    <div class="form-row">
        <label for="node-input-step"><i class="fa fa-forward"></i> <span data-i18n="counter.ui.step"></label>
        <input id="node-input-step"  data-i18n="[placeholder]counter.ui.step">
    </div>
    <div class="form-row">
        <label for="node-input-min"><i class="fa fa-arrow-down"></i> <span data-i18n="counter.ui.min"></label>
        <input id="node-input-min"  data-i18n="[placeholder]counter.ui.min">
    </div>
    <div class="form-row">
        <label for="node-input-max"><i class="fa fa-arrow-up"></i> <span data-i18n="counter.ui.max"></label>
        <input id="node-input-max"  data-i18n="[placeholder]counter.ui.max">
    </div>
    <hr/>
    <h4 style="margin: 0.5rem 0;"><span data-i18n="counter.ui.output_messages"></span></h4>
    <div class="form-row">
        <label for="node-input-out_message"><i class="fa fa-check-circle"></i> <span data-i18n="counter.ui.message"></span></label>
        <input type="text" id="node-input-out_message"/>
        <input type="hidden" id="node-input-out_message_type">
    </div>
    <div class="form-row">
        <div><strong data-i18n="counter.ui.note"></strong></div>
        <div data-i18n="[html]counter.ui.note_text"></div>
    </div>
    <hr/>
    <h4 style="margin: 0.5rem 0;"><span data-i18n="counter.ui.system_start"></span></h4>
    <div class="form-row">
        <input type="checkbox" id="node-input-save_state" style="width: 20px;" />
        <label for="node-input-save_state" style="width: calc(100% - 30px);"><span data-i18n="counter.ui.save_state"></span></label>
    </div>
    <div class="form-row" id="resend_on_start_row">
        <input type="checkbox" id="node-input-resend_on_start" style="width: 20px;" />
        <label for="node-input-resend_on_start" style="width: calc(100% - 30px);"><span data-i18n="counter.ui.send_after_start"></span></label>
    </div>
</script>