@automatacontrols/automata-thermostat/nodes/thermostat.html

Professional-grade thermostat UI widget for Node-RED Dashboard 2.0 with comprehensive HVAC controls

<script type="text/html" data-template-name="automata-thermostat">
    <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">
        <label for="node-input-group"><i class="fa fa-object-group"></i> Group</label>
        <input type="text" id="node-input-group">
    </div>
    <div class="form-row">
        <label for="node-input-order"><i class="fa fa-sort"></i> Order</label>
        <input type="number" id="node-input-order" min="0">
    </div>
    <div class="form-row">
        <label for="node-input-theme"><i class="fa fa-paint-brush"></i> Theme</label>
        <select id="node-input-theme">
            <option value="dark">Dark</option>
            <option value="light">Light</option>
        </select>
    </div>
    <div class="form-row">
        <label for="node-input-height"><i class="fa fa-arrows-v"></i> Height</label>
        <input type="number" id="node-input-height" min="1" max="45">
    </div>
    <div class="form-row">
        <label for="node-input-units"><i class="fa fa-thermometer-half"></i> Units</label>
        <select id="node-input-units">
            <option value="F">Fahrenheit</option>
            <option value="C">Celsius</option>
        </select>
    </div>
</script>

<script type="text/javascript">
    RED.nodes.registerType('automata-thermostat', {
        category: 'dashboard',
        color: '#F0056B',
        defaults: {
            name: { value: "" },
            group: { type: "ui_group", required: true },
            order: { value: 0 },
            width: { value: 30 },
            height: { value: 45 },
            theme: { value: "dark" },
            units: { value: "F" }
        },
        inputs: 1,
        outputs: 1,
        icon: "thermostat.png",
        label: function () {
            return this.name || "Automata Thermostat";
        },
        paletteLabel: "Thermostat",
        inputLabels: "HVAC Control Input",
        outputLabels: ["Control Output"],
        oneditprepare: function () {
            // Any preparation code needed
        },
        oneditsave: function () {
            // Any save handling needed
        }
    });
</script>

<!-- Your existing thermostat template -->
<script type="text/html" data-help-name="automata-thermostat">
    <p>A professional-grade thermostat UI widget for Node-RED Dashboard 2.0</p>
    
    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>payload.setpoint
            <span class="property-type">number</span>
        </dt>
        <dd>Temperature setpoint</dd>
        
        <dt>payload.supply
            <span class="property-type">number</span>
        </dt>
        <dd>Supply air temperature</dd>
        
        <!-- Add other input properties -->
    </dl>

    <h3>Outputs</h3>
    <dl class="message-properties">
        <dt>topic <span class="property-type">string</span></dt>
        <dd>Control type (setpoint, mode, etc.)</dd>
        
        <dt>payload <span class="property-type">various</span></dt>
        <dd>Control value</dd>
    </dl>

    <h3>Details</h3>
    <p>Advanced thermostat UI with comprehensive HVAC control features including:</p>
    <ul>
        <li>Multiple operation modes (Heat, Cool, Fan, Off)</li>
        <li>Real-time temperature monitoring</li>
        <li>Advanced control modes</li>
        <li>Building automation features</li>
    </ul>
</script>