node-red-dashboard-2-t86/src/nodes/ui-dimm-light.html

Set of Node-RED nodes to controll home automation based on Unipi Patron and DALI.

<script type="text/javascript" id="ui-dimm-light">
  RED.nodes.registerType('ui-dimm-light', {
    category: 'Foxtron DALI',
    color: '#a0e6ec',
    inputs: 1,
    outputs: 1,
    icon: 'font-awesome/fa-lightbulb-o',
    defaults: {
      name: { value: ''},
      label: { value: ''},
      group: { type: 'ui-group', required: true },
      order: { value: 0 },
      width: {
        value: 0,
        validate: function (v) {
          const width = v || 0
          const currentGroup = $('#node-input-group').val() || this.group
          const groupNode = RED.nodes.node(currentGroup)
          const valid = !groupNode || +width <= +groupNode.width
          $('#node-input-size').toggleClass('input-error', !valid)
          return valid
        }
      },
      height: { value: 0 },
      brightnessMin: { 
        value: 0,
        validate: function(v) {
          v = parseInt(v)
          if (isNaN(v)) return true
          const maxEl = $("#node-input-brightnessMax")
          const max = parseInt(maxEl ? maxEl.val() : '')
          return v > 0 && v < 255 && (isNaN(max) || v > max)
        }
      },
      brightnessMax: { 
        value: 254,
        validate: function(v) {
          v = parseInt(v)
          if (isNaN(v)) return true
          const minEl = $("#node-input-brightnessMin")
          const min = parseInt(minEl ? minEl.val() : '')
          return v > 0 && v < 255 && (isNaN(min) || v > min)
        }
      },
      wtype: { value: 'dimm' },
      passthru: { value: true }
    },
    paletteLabel: 'Dimm Light',
    label: function () {
      return this.name || 'Dimm Light'
    },
    oneditprepare: function () {
      $('#node-input-size').elementSizer({
        width: '#node-input-width',
        height: '#node-input-height',
        group: '#node-input-group'
      })
    }
  })
</script>

<script type="text/html" data-template-name="ui-dimm-light">
  <div class="form-row flex-form-row">
    <label class="flex-label" for="node-input-name"><i class="fa fa-tag"></i> Name</label>
    <input class="flex-input" type="text" id="node-input-name" placeholder="Name" />
    <div class="flex-form-row-end-gap">&nbsp;</div>
  </div>

  <!-- Dashboard config -->
  <div class="form-row flex-form-row">
    <label class="flex-label" for="node-input-group"><i class="fa fa-table"></i> Group</label>
    <input class="flex-input" type="text" id="node-input-group">
    <div class="flex-form-row-end-gap">&nbsp;</div>
  </div>
  <div class="form-row flex-form-row">
    <label class="flex-label"><i class="fa fa-object-group"></i> Size</label>
    <input type="hidden" id="node-input-width">
    <input type="hidden" id="node-input-height">
    <button class="editor-button" id="node-input-size"></button>
  </div>
  <div class="form-row flex-form-row">
    <label class="flex-label long" for="node-input-passthru"><i class="fa fa-tag"></i> If msg arrives on input, emulate a button click</label>
    <div class="checkbox-right">
      <input class="flex-input" type="checkbox" id="node-input-passthru" />
    </div>
    <div class="flex-form-row-end-gap">&nbsp;</div>
  </div>
  <div class="form-row flex-form-row">
    <label class="flex-label" for="node-input-label"><i class="fa fa-tag"></i> Label</label>
    <input class="flex-input" type="text" id="node-input-label" placeholder="Label on Dashboard" />
    <div class="flex-form-row-end-gap">&nbsp;</div>
  </div>

  <!-- Type -->
  <div class="form-row flex-form-row">
    <label class="flex-label" for="node-input-faderate"><i class="fa fa-tag"></i> Type</label>
    <select type="text" id="node-input-wtype" style="height: 34px;" class="flex-input" value="dimm">
      <option value="onoff">On/Off</option>
      <option value="dimm">Dimming</option>
      <option value="dimm.temp">Dimming + Temperature</option>
    </select>
    <div class="flex-form-row-end-gap">&nbsp;</div>
  </div>

  <!-- Bounds -->
  <div class="form-row flex-form-row">
    <div class="flex-label top"><i class="fa fa-arrows-v"></i> Brightness</div>
    <div class="flex-table-input-cell">
      <span class="flex-table-label">Min</span>
      <input class="flex-table-input" type="number" id="node-input-brightnessMin" step="1" min="0" placeholder="Min. Level" />
    </div>
    <div class="flex-table-input-cell">
      <span class="flex-table-label">Max</span>
      <input class="flex-table-input" type="number" id="node-input-brightnessMax" step="1" min="0" placeholder="Max. Level" />
    </div>
    <div class="flex-form-row-end-gap">&nbsp;</div>
  </div>

  <style>
    .flex-form-row {
      display: flex; 
      flex-direction: row; 
      flex-wrap: nowrap; 
      gap: 4px;
      align-items: center;
    }

    .red-ui-editor .form-row label.flex-label, 
    .red-ui-editor .form-row div.flex-label {
      width: 120px;
      flex-grow: 0;
      flex-shrink: 0;
      margin-bottom: 0;
    }

    .red-ui-editor .flex-label.top {
      align-self: flex-start;
    }

    .red-ui-editor .form-row .flex-label.long {
      width: auto;
      flex-grow: 1;
    }

    .red-ui-editor .flex-label i {
      min-width: 14px;
    }

    .flex-input {
      flex-grow: 1;
      flex-shrink: 0;
    }

    .flex-table-input-cell {
      display: flex; 
      flex-direction: column;
      flex-grow: 1;
      flex-shrink: 0;
      flex-basis: 20%;
    }

    .flex-table-label {
      flex-grow: 1;
    }

    .red-ui-editor .flex-form-row input.flex-table-input, 
    .red-ui-editor .flex-form-row select.flex-table-input {
      flex-grow: 1;
      width: 100%;
    }

    .flex-form-row-end-gap {
      width: calc(30% - 128px);
      flex-grow: 0;
      flex-shrink: 0;
    }

    .checkbox-right {
      text-align: right;
      width: 20px;
      margin-right: 4px;
    }
  </style>
</script>