@janart19/node-red-fusebox/nodes/flow/utils-tools/triple-status/triple-status.html

A comprehensive collection of custom nodes for interfacing with Fusebox automation controllers - data streams, energy management, and utilities

<script type="text/javascript">
    RED.nodes.registerType("fusebox-triple-status", {
        category: "fusebox utils",
        color: "#E2D96E",
        icon: function () {
            const L = (this.iconLetter || "A").toUpperCase().slice(0, 1);
            return `icons/letter-${L}.svg`; // served from this node's ./icons/
        },
        inputs: 1,
        outputs: 0,
        align: "left",
        defaults: {
            name: { value: "" },
            // topics (empty means disabled)
            tItem1: { value: "" },
            tItem2: { value: "" },
            tItem3: { value: "" },
            // precision & width
            pItem1: { value: 1 },
            pItem2: { value: 1 },
            pItem3: { value: 0 },
            wItem1: { value: 6 },
            wItem2: { value: 6 },
            wItem3: { value: 4 },
            // status prefix
            prefixSpaces: { value: 2 },
            prefixText: { value: "" },
            // icon letter
            iconLetter: { value: "A" },
            // debug
            debugLog: { value: false }
        },
        label: function () {
            const raw = this.name || "item1  item2  item3";
            return raw.replace(/ /g, "\u00A0"); // keep multiple spaces
        },
        paletteLabel: "triple status",
        labelStyle: function () {
            return "node_label_italic";
        }
    });
</script>

<style>
    .ts-grid {
        display: grid;
        grid-template-columns: 90px 160px 80px 80px;
        gap: 6px 10px;
        align-items: center;
    }

    .ts-grid .h {
        font-weight: 600;
    }
</style>

<script type="text/html" data-template-name="fusebox-triple-status">
    <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="item1  item2  item3" />
    </div>

    <div class="form-row ts-grid">
        <div></div>
        <div class="h">topic</div>
        <div class="h">precision</div>
        <div class="h">width</div>

        <label for="node-input-tItem1">Item 1</label>
        <input type="text" id="node-input-tItem1" placeholder="(empty=disabled)" />
        <input type="number" id="node-input-pItem1" min="0" max="6" />
        <input type="number" id="node-input-wItem1" min="2" max="12" />

        <label for="node-input-tItem2">Item 2</label>
        <input type="text" id="node-input-tItem2" placeholder="(empty=disabled)" />
        <input type="number" id="node-input-pItem2" min="0" max="6" />
        <input type="number" id="node-input-wItem2" min="2" max="12" />

        <label for="node-input-tItem3">Item 3</label>
        <input type="text" id="node-input-tItem3" placeholder="(empty=disabled)" />
        <input type="number" id="node-input-pItem3" min="0" max="6" />
        <input type="number" id="node-input-wItem3" min="2" max="12" />
    </div>

    <div class="form-row">
        <label for="node-input-prefixSpaces">Left pad (figure-spaces)</label>
        <input type="number" id="node-input-prefixSpaces" min="0" max="20" style="width:80px" />
        <label for="node-input-prefixText" style="margin-left:10px">Prefix text</label>
        <input type="text" id="node-input-prefixText" placeholder="(optional)" />
    </div>

    <div class="form-row">
        <label for="node-input-iconLetter">Icon letter</label>
        <input type="text" id="node-input-iconLetter" maxlength="1" style="width:60px" placeholder="A" />
    </div>

    <div class="form-row">
        <label for="node-input-debugLog"><i class="fa fa-bug"></i> Debug logging</label>
        <input type="checkbox" id="node-input-debugLog" style="width:auto" />
        <span style="margin-left:10px;color:#666;font-size:90%">Log all received messages</span>
    </div>
</script>

<script type="text/html" data-help-name="fusebox-triple-status">
    <p>Shows up to three aligned numeric values under the node (status). Update via <code>msg.topic</code> (exact match).</p>
    <p>Empty topic means that item is disabled and will show "—" placeholder.</p>
    <p>Green flash appears on any matching topic, even if the value hasn't changed.</p>
    <p>Icon uses <code>icons/letter-&lt;L&gt;.svg</code> from this node's folder.</p>
</script>