node-red-contrib-dmx-for-ha 0.1.0

package/nodes/ha-mqtt-dmx.html

@@ -0,0 +1,547 @@
+<!-- ============================================================
+     ha-mqtt-dmx — DMX Node Editor
+     Package: node-red-contrib-dmx-for-ha
+     Author:  DeSwaggy — Discord: @deswaggy
+     ============================================================ -->
+
+<script type="text/javascript">
+
+    // ── Areas and Sub-areas ────────────────────────────────────────
+    const HA_DMX_AREAS = [
+        { v: 'Area 52',             l: 'TBC' },
+        { v: 'Attic Roof',          l: 'Attic Roof' },
+        { v: 'Backyard',            l: 'Backyard' },
+        { v: 'Balcony',             l: 'Balcony' },
+        { v: 'Bathroom',            l: 'Bathroom' },
+        { v: 'Bedroom 1',           l: 'Bedroom 1' },
+        { v: 'Bedroom 2',           l: 'Bedroom 2' },
+        { v: 'Bedroom 3',           l: 'Bedroom 3' },
+        { v: 'Bedroom 4',           l: 'Bedroom 4' },
+        { v: 'Carport',             l: 'Carport' },
+        { v: 'Cellar',              l: 'Cellar' },
+        { v: 'Dining',              l: 'Dining' },
+        { v: 'Driveway',            l: 'Driveway' },
+        { v: 'Entry',               l: 'Entry' },
+        { v: 'Garage',              l: 'Garage' },
+        { v: 'Gym',                 l: 'Gym' },
+        { v: 'Hallway',             l: 'Hallway' },
+        { v: 'Kitchen',             l: 'Kitchen' },
+        { v: 'Laundry',             l: 'Laundry' },
+        { v: 'Link Bridge (Upper)', l: 'Link Bridge Upper' },
+        { v: 'Link Bridge (Lower)', l: 'Link Bridge Lower' },
+        { v: 'Living',              l: 'Living' },
+        { v: 'Media',               l: 'Media' },
+        { v: 'Office',              l: 'Office' },
+        { v: 'Pantry',              l: 'Pantry' },
+        { v: 'Pass Over',           l: 'Pass Over' },
+        { v: 'Pass Under',          l: 'Pass Under' },
+        { v: 'Passageway',          l: 'Passageway' },
+        { v: 'Pool',                l: 'Pool' },
+        { v: 'Portico',             l: 'Portico' },
+        { v: 'PowderRoom',          l: 'PowderRoom' },
+        { v: 'Reading',             l: 'Reading' },
+        { v: 'Rumpus',              l: 'Rumpus' },
+        { v: 'Spa',                 l: 'Spa' },
+        { v: 'Stairs',              l: 'Stairs' },
+        { v: 'Store',               l: 'Store' },
+        { v: 'SubFloor',            l: 'SubFloor' },
+        { v: 'Terrace',             l: 'Terrace' },
+    ];
+
+    const HA_DMX_SUB_AREAS = [
+        { v: '',              l: 'None' },
+        { v: 'Balcony',       l: 'Balcony' },
+        { v: 'Bed (North)',   l: 'Bed North' },
+        { v: 'Bed (South)',   l: 'Bed South' },
+        { v: 'Bed (East)',    l: 'Bed East' },
+        { v: 'Bed (West)',    l: 'Bed West' },
+        { v: 'Ceiling',       l: 'Ceiling' },
+        { v: 'Dress',         l: 'Dress' },
+        { v: 'Ensuite',       l: 'Ensuite' },
+        { v: 'Exterior',      l: 'Exterior' },
+        { v: 'Ground Floor',  l: 'Ground Floor' },
+        { v: '1st Floor',     l: '1st Floor' },
+        { v: 'Landing',       l: 'Landing' },
+        { v: 'Office',        l: 'Office' },
+        { v: 'Stairs',        l: 'Stairs' },
+        { v: 'WIR',           l: 'WIR' },
+        { v: '(North)',        l: 'North' },
+        { v: '(South)',        l: 'South' },
+        { v: '(East)',         l: 'East' },
+        { v: '(West)',         l: 'West' },
+        { v: 'Void',          l: 'Void' },
+    ];
+
+    // ── Helper — populate a select from an array of {v, l} ────────
+    function populateSelect(selectId, items, currentVal) {
+        const sel = $('#' + selectId);
+        sel.empty();
+        items.forEach(function (item) {
+            sel.append($('<option>')
+                .val(item.v)
+                .text(item.l)
+                .prop('selected', item.v === currentVal));
+        });
+    }
+
+    // ── Show/hide DMX channel rows based on colour mode ─────────────
+    function updateChannelVisibility(mode) {
+        const show = function (id) { $('#dmx-ch-row-' + id).show(); };
+        const hide = function (id) { $('#dmx-ch-row-' + id).hide(); };
+
+        // Hide all first
+        ['red','green','blue','white','warmWhite'].forEach(hide);
+
+        switch (mode) {
+            case 'rgbw':
+                show('red'); show('green'); show('blue'); show('white');
+                break;
+            case 'rgbww':
+                show('red'); show('green'); show('blue');
+                show('white'); show('warmWhite');
+                break;
+            case 'rgb':
+                show('red'); show('green'); show('blue');
+                break;
+            case 'color_temp':
+                show('white'); show('warmWhite');
+                break;
+            case 'brightness':
+                show('white'); // single channel — use white as master
+                break;
+            case 'onoff':
+                show('white'); // single channel
+                break;
+        }
+    }
+
+    // ── Node Registration ──────────────────────────────────────────
+    RED.nodes.registerType('ha-mqtt-dmx', {
+        category:    'DMX for HA',
+        color:       '#ae45ff',
+        icon:        'font-awesome/fa-lightbulb-o',
+        inputs:      1,
+        outputs:     0,
+        paletteLabel: 'DMX',
+
+        defaults: {
+            name:           { value: '' },
+            config:         { value: '', type: 'ha-mqtt-config', required: true },
+            // Fixture identity
+            colorMode:      { value: 'rgbw',       required: true },
+            deviceType:     { value: 'Downlight',  required: true },
+            uidPrefix:      { value: 'L',          required: true },
+            uid:            { value: '',           required: true },
+            uidPostfix:     { value: '' },
+            // Location
+            area:           { value: 'Area 52' },
+            situation:      { value: 'in' },
+            subLocation:    { value: '' },
+            // DMX channels
+            chRed:          { value: '' },
+            chGreen:        { value: '' },
+            chBlue:         { value: '' },
+            chWhite:        { value: '' },
+            chWarmWhite:    { value: '' },
+            // DMX controller
+            controllerNum:  { value: '1' },
+            universe:       { value: '1' },
+            // Options
+            haIcon:         { value: 'mdi:lightbulb' },
+            showEffects:    { value: true },
+            transitions:    { value: true },
+            groupSync:      { value: false },
+            defaultState:   { value: 'OFF' },
+            // Advanced
+            dmxLimiter:     { value: '255' },
+            minOutput:      { value: '1' },
+            brightBump:     { value: '50' },
+            ticksPerSec:    { value: '31' },
+        },
+
+        label: function () {
+            if (this.name) return this.name;
+            const prefix  = this.uidPrefix  || 'L';
+            const id      = this.uid        || '?';
+            const postfix = this.uidPostfix || '';
+            return prefix + '-' + id + postfix;
+        },
+
+        labelStyle: function () {
+            return this.name ? 'node_label_italic' : '';
+        },
+
+        outputLabels: [],
+        inputLabels:  ['Input'],
+
+        oneditprepare: function () {
+            const node = this;
+
+            // Populate area dropdown
+            populateSelect('node-input-area', HA_DMX_AREAS, node.area);
+
+            // Populate sub-area dropdown
+            populateSelect('node-input-subLocation', HA_DMX_SUB_AREAS, node.subLocation);
+
+            // Set colour mode and update channel visibility
+            $('#node-input-colorMode').val(node.colorMode || 'rgbw');
+            updateChannelVisibility(node.colorMode || 'rgbw');
+
+            // Update channel visibility on colour mode change
+            $('#node-input-colorMode').on('change', function () {
+                updateChannelVisibility($(this).val());
+            });
+        },
+
+        oneditsave: function () {
+            // Sanitise UID — digits only
+            const uid = $('#node-input-uid').val().replace(/[^0-9]/g, '');
+            $('#node-input-uid').val(uid);
+        },
+    });
+
+</script>
+
+<!-- ============================================================
+     Editor Panel Template
+     ============================================================ -->
+<script type="text/html" data-template-name="ha-mqtt-dmx">
+
+    <!-- NAME (optional — defaults to fixture ID on canvas) -->
+    <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="Optional — defaults to fixture ID e.g. L-992-A" />
+    </div>
+
+    <!-- CONFIG NODE PICKER -->
+    <div class="form-row">
+        <label for="node-input-config">
+            <i class="fa fa-cog"></i> Config
+        </label>
+        <input type="text" id="node-input-config" />
+    </div>
+
+    <hr/>
+
+    <!-- ── FIXTURE (* Required) ──────────────────────────────── -->
+    <div class="form-row">
+        <label style="width:100%; font-weight:bold; color:#999; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em;">
+            <i class="fa fa-lightbulb-o"></i> Fixture &nbsp;<span style="color:#e74c3c">* Required</span>
+        </label>
+    </div>
+
+    <!-- Colour Mode -->
+    <div class="form-row">
+        <label for="node-input-colorMode">
+            <i class="fa fa-sliders"></i> Colour Mode
+        </label>
+        <select id="node-input-colorMode" style="width:55%">
+            <option value="rgbw">RGBW</option>
+            <option value="rgbww">RGBWW</option>
+            <option value="rgb">RGB</option>
+            <option value="color_temp">Colour Temperature (CCT)</option>
+            <option value="brightness">Brightness only</option>
+            <option value="onoff">On/Off only</option>
+        </select>
+    </div>
+
+    <!-- Device Type -->
+    <div class="form-row">
+        <label for="node-input-deviceType">
+            <i class="fa fa-lightbulb-o"></i> Device Type
+        </label>
+        <input type="text" id="node-input-deviceType"
+               placeholder="e.g. Downlight, Strip light, Panel"
+               style="width:55%" />
+    </div>
+
+    <!-- Prefix / ID / Postfix on one row -->
+    <div class="form-row">
+        <label for="node-input-uidPrefix">
+            <i class="fa fa-tv"></i> Fixture ID
+        </label>
+        <select id="node-input-uidPrefix" style="width:55px">
+            <option value="L">L</option>
+            <option value="P">P</option>
+        </select>
+        &nbsp;-&nbsp;
+        <input type="text" id="node-input-uid"
+               placeholder="992" style="width:70px"
+               title="Cable/plan ID number from electrical drawing" />
+        &nbsp;
+        <select id="node-input-uidPostfix" style="width:65px">
+            <option value="">(none)</option>
+            <option value="-A">-A</option>
+            <option value="-B">-B</option>
+            <option value="-C">-C</option>
+            <option value="-D">-D</option>
+        </select>
+        <span style="margin-left:8px; color:#999; font-size:0.85em;">
+            Prefix — Plan ID — Channel
+        </span>
+    </div>
+
+    <!-- Area -->
+    <div class="form-row">
+        <label for="node-input-area">
+            <i class="fa fa-map-marker"></i> Area
+        </label>
+        <select id="node-input-area" style="width:55%"></select>
+    </div>
+
+    <!-- Situation -->
+    <div class="form-row">
+        <label for="node-input-situation">
+            <i class="fa fa-compass"></i> Situation
+        </label>
+        <select id="node-input-situation" style="width:55%">
+            <option value="in">in</option>
+            <option value="above">above</option>
+            <option value="below">below</option>
+            <option value="outside">outside</option>
+            <option value="throughout">throughout</option>
+            <option value="under">under</option>
+            <option value="over">over</option>
+        </select>
+    </div>
+
+    <!-- Sub-Area -->
+    <div class="form-row">
+        <label for="node-input-subLocation">
+            <i class="fa fa-map-marker"></i> Sub-Area
+        </label>
+        <select id="node-input-subLocation" style="width:55%"></select>
+    </div>
+
+    <hr/>
+
+    <!-- ── DMX CHANNELS ──────────────────────────────────────── -->
+    <div class="form-row">
+        <label style="width:100%; font-weight:bold; color:#999; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em;">
+            <i class="fa fa-sort-numeric-asc"></i> DMX Channels
+        </label>
+    </div>
+
+    <div class="form-row" id="dmx-ch-row-red">
+        <label for="node-input-chRed">
+            <i class="fa fa-circle" style="color:#e74c3c"></i> Red
+        </label>
+        <input type="number" id="node-input-chRed"
+               min="1" max="512" style="width:80px" placeholder="e.g. 201" />
+    </div>
+
+    <div class="form-row" id="dmx-ch-row-green">
+        <label for="node-input-chGreen">
+            <i class="fa fa-circle" style="color:#2ecc71"></i> Green
+        </label>
+        <input type="number" id="node-input-chGreen"
+               min="1" max="512" style="width:80px" placeholder="e.g. 202" />
+    </div>
+
+    <div class="form-row" id="dmx-ch-row-blue">
+        <label for="node-input-chBlue">
+            <i class="fa fa-circle" style="color:#3498db"></i> Blue
+        </label>
+        <input type="number" id="node-input-chBlue"
+               min="1" max="512" style="width:80px" placeholder="e.g. 203" />
+    </div>
+
+    <div class="form-row" id="dmx-ch-row-white">
+        <label for="node-input-chWhite">
+            <i class="fa fa-circle" style="color:#ecf0f1; text-shadow:0 0 1px #999"></i> White
+        </label>
+        <input type="number" id="node-input-chWhite"
+               min="1" max="512" style="width:80px" placeholder="e.g. 204" />
+    </div>
+
+    <div class="form-row" id="dmx-ch-row-warmWhite">
+        <label for="node-input-chWarmWhite">
+            <i class="fa fa-circle" style="color:#f39c12"></i> Warm White
+        </label>
+        <input type="number" id="node-input-chWarmWhite"
+               min="1" max="512" style="width:80px" placeholder="e.g. 205" />
+    </div>
+
+    <hr/>
+
+    <!-- ── DMX CONTROLLER ────────────────────────────────────── -->
+    <div class="form-row">
+        <label style="width:100%; font-weight:bold; color:#999; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em;">
+            <i class="fa fa-sort-numeric-asc"></i> DMX Controller
+        </label>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-controllerNum">
+            <i class="fa fa-sort-numeric-asc"></i> Controller
+        </label>
+        <input type="number" id="node-input-controllerNum"
+               min="1" style="width:70px" />
+        &nbsp;&nbsp;
+        <label for="node-input-universe" style="width:auto">
+            Universe
+        </label>
+        <input type="number" id="node-input-universe"
+               min="1" style="width:70px" />
+    </div>
+
+    <hr/>
+
+    <!-- ── OPTIONS ───────────────────────────────────────────── -->
+    <div class="form-row">
+        <label style="width:100%; font-weight:bold; color:#999; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em;">
+            <i class="fa fa-sliders"></i> Options
+        </label>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-haIcon">
+            <i class="fa fa-image"></i> HA Icon
+        </label>
+        <input type="text" id="node-input-haIcon"
+               placeholder="mdi:lightbulb" style="width:55%" />
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-defaultState">
+            <i class="fa fa-toggle-off"></i> Default state
+        </label>
+        <select id="node-input-defaultState" style="width:100px">
+            <option value="OFF">OFF</option>
+            <option value="ON">ON</option>
+        </select>
+    </div>
+
+    <div class="form-row">
+        <label>&nbsp;</label>
+        <input type="checkbox" id="node-input-showEffects"
+               style="width:auto; margin-right:8px" />
+        <label for="node-input-showEffects" style="width:auto">
+            Show effects in HA
+        </label>
+    </div>
+
+    <div class="form-row">
+        <label>&nbsp;</label>
+        <input type="checkbox" id="node-input-transitions"
+               style="width:auto; margin-right:8px" />
+        <label for="node-input-transitions" style="width:auto">
+            Enable transitions
+        </label>
+    </div>
+
+    <div class="form-row">
+        <label>&nbsp;</label>
+        <input type="checkbox" id="node-input-groupSync"
+               style="width:auto; margin-right:8px" />
+        <label for="node-input-groupSync" style="width:auto">
+            Sync effects via Group Node
+        </label>
+    </div>
+
+    <hr/>
+
+    <!-- ── ADVANCED ──────────────────────────────────────────── -->
+    <div class="form-row">
+        <label style="width:100%; font-weight:bold; color:#999; font-size:0.85em; text-transform:uppercase; letter-spacing:0.05em;">
+            <i class="fa fa-wrench"></i> Advanced
+        </label>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-dmxLimiter">
+            <i class="fa fa-sort-numeric-asc"></i> DMX limiter
+        </label>
+        <input type="number" id="node-input-dmxLimiter"
+               min="0" max="255" style="width:70px" />
+        <span style="margin-left:8px; color:#999; font-size:0.85em;">0–255</span>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-minOutput">
+            <i class="fa fa-sort-numeric-asc"></i> Min output when ON
+        </label>
+        <input type="number" id="node-input-minOutput"
+               min="0" max="255" style="width:70px" />
+        <span style="margin-left:8px; color:#999; font-size:0.85em;">0 = pure gamma</span>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-brightBump">
+            <i class="fa fa-sort-numeric-asc"></i> Brightness bump
+        </label>
+        <input type="number" id="node-input-brightBump"
+               min="0" max="255" style="width:70px" />
+        <span style="margin-left:8px; color:#999; font-size:0.85em;">Initial ON value (0–255)</span>
+    </div>
+
+    <div class="form-row">
+        <label for="node-input-ticksPerSec">
+            <i class="fa fa-clock-o"></i> Transition ticks/sec
+        </label>
+        <input type="number" id="node-input-ticksPerSec"
+               min="1" max="100" style="width:70px" />
+        <span style="margin-left:8px; color:#999; font-size:0.85em;">Default 31</span>
+    </div>
+
+</script>
+
+<!-- ============================================================
+     Help Panel
+     ============================================================ -->
+<script type="text/html" data-help-name="ha-mqtt-dmx">
+    <p>
+        Controls a single DMX fixture via Home Assistant and MQTT.
+        Supports RGBW, RGBWW, RGB, CCT, brightness and on/off colour modes.
+        Handles HA MQTT discovery, state reporting, transitions, and effects.
+    </p>
+
+    <h3>Setup</h3>
+    <ol>
+        <li>Select your <strong>Config</strong> node (site and zone settings)</li>
+        <li>Choose <strong>Colour Mode</strong> — channel fields update automatically</li>
+        <li>Set <strong>Fixture ID</strong> — Prefix, Plan ID number, and Channel letter if applicable</li>
+        <li>Enter <strong>DMX Channels</strong> matching your fixture's DMX start address</li>
+        <li>Set <strong>Controller</strong> and <strong>Universe</strong> numbers</li>
+        <li>Deploy — the fixture appears in HA automatically</li>
+    </ol>
+
+    <h3>Fixture ID</h3>
+    <p>
+        Matches your electrical plan cable ID. <code>L-992-A</code> = Light fixture,
+        cable 992, channel A. The entity ID in HA is locked to this ID and
+        survives friendly name changes in the HA dashboard.
+    </p>
+
+    <h3>Inputs</h3>
+    <dl class="message-properties">
+        <dt>device:add <span class="property-type">msg.device = "add"</span></dt>
+        <dd>Run MQTT discovery. Wire from SYSTEM node inject.</dd>
+        <dt>device:remove <span class="property-type">msg.device = "remove"</span></dt>
+        <dd>Remove entity from HA and clear memory.</dd>
+        <dt>HA command <span class="property-type">msg.payload.state</span></dt>
+        <dd>Handled internally via MQTT — no wiring needed.</dd>
+        <dt>Group cascade <span class="property-type">msg.dmx_trace</span></dt>
+        <dd>Command forwarded from a DMX Group Node via its Link output.</dd>
+    </dl>
+
+    <h3>DMX output format</h3>
+    <p>
+        Publishes to <code>{siteId}/{zone}/dmx/{universe}</code><br/>
+        Payload: <code>"{channel3digits}{value3digits}"</code>
+        e.g. <code>"212255"</code> = channel 212, value 255.
+    </p>
+
+    <h3>Colour modes</h3>
+    <ul>
+        <li><strong>RGBW</strong> — Red, Green, Blue, White channels</li>
+        <li><strong>RGBWW</strong> — Red, Green, Blue, White, Warm White</li>
+        <li><strong>RGB</strong> — Red, Green, Blue only</li>
+        <li><strong>Colour Temperature</strong> — White + Warm White (CCT)</li>
+        <li><strong>Brightness</strong> — Single channel dimmer</li>
+        <li><strong>On/Off</strong> — Binary switching via DMX</li>
+    </ul>
+</script>