npm - node-red-contrib-knx-ultimate - Versions diffs - 6.3.5 → 6.3.7 - Mend

node-red-contrib-knx-ultimate 6.3.5 → 6.3.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (17) hide show

package/resources/hueControllerProfiles.js CHANGED Viewed

@@ -520,7 +520,11 @@
                   const shouldShowTabs = knxSelected && hueDeviceSelected;
                   if (shouldShowTabs) {
-                    $tabs.show();
+                    // jQuery.show() restores a hidden div as display:block, which
+                    // overrides the vertical tab widget's flex layout after the KNX
+                    // gateway goes none -> selected. Restore the intended layout
+                    // explicitly so the navigation remains beside its active panel.
+                    $tabs.css('display', 'flex');
                     try { $tabs.tabs('refresh'); } catch (error) { /* tabs may not be initialized yet */ }
                   } else {
                     $tabs.hide();
@@ -952,33 +956,47 @@
                   // DPT Switch command
                   // ########################
                   const prefixes = Array.isArray(_dpt) ? _dpt : [_dpt];
-                  $(_destinationWidget).empty();
+                  const $destination = $(_destinationWidget);
+                  const fieldKey = String(_destinationWidget).replace(/^#node-input-/, '');
+                  const currentValue = $destination.val();
+                  const storedValue = node[fieldKey];
+                  const valueToRestore = currentValue !== undefined && currentValue !== null && String(currentValue) !== ''
+                    ? String(currentValue)
+                    : (storedValue === undefined || storedValue === null ? '' : String(storedValue));
                   if (!hasKnxServerSelected()) {
                     return;
                   }
                   const serverId = resolveKnxServerValue();
                   $.getJSON(`knxUltimateDpts?serverId=${serverId}&_=${Date.now()}`, (data) => {
+                    // A late response from the previous gateway must not overwrite
+                    // the mappings kept in the editor after selecting none or a
+                    // different gateway.
+                    if (resolveKnxServerValue() !== serverId) return;
+                    $destination.empty();
                     data.forEach((dpt) => {
                       if (prefixes.some((prefix) => prefix === "" || dpt.value.startsWith(prefix))) {
                         // Adjustment for HUE Temperature
                         if (dpt.value.startsWith("7.600")) {
-                          $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - KNX Kelvin range 2000-6535k (Homeassistant color_temperature_mode: absolute)"));
+                          $destination.append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - KNX Kelvin range 2000-6535k (Homeassistant color_temperature_mode: absolute)"));
                         } else if (dpt.value.startsWith("9.002")) {
-                          $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - HUE Kelvin range 2000-6535k (Homeassistant color_temperature_mode: absolute_float)"));
+                          $destination.append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - HUE Kelvin range 2000-6535k (Homeassistant color_temperature_mode: absolute_float)"));
                         } else if (dpt.value.startsWith("5.001")) {
-                          $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - Homeassistant color_temperature_mode: relative"));
+                          $destination.append($("<option></option>").attr("value", dpt.value).text(dpt.text + " - Homeassistant color_temperature_mode: relative"));
                         } else {
-                          $(_destinationWidget).append($("<option></option>").attr("value", dpt.value).text(dpt.text));
+                          $destination.append($("<option></option>").attr("value", dpt.value).text(dpt.text));
                         }
                       }
                     });
-                    // Eval
-                    const format = "node." + _destinationWidget.replace("#node-input-", "");
-                    try {
-                      if (format !== undefined) $(_destinationWidget).val(eval(format).toString());
-                    } catch (error) { }
+                    if (valueToRestore !== '') {
+                      const valueIsAvailable = $destination.find('option').toArray()
+                        .some((option) => option.value === valueToRestore);
+                      if (!valueIsAvailable) {
+                        $destination.append($("<option></option>").attr("value", valueToRestore).text(valueToRestore));
+                      }
+                      $destination.val(valueToRestore);
+                    }
                     if (_destinationWidget === '#node-input-dptLightEffect') {
-                      $(_destinationWidget).trigger('change');
+                      $destination.trigger('change');
                     }
                   });
                 }
@@ -1119,10 +1137,26 @@
                 updateTabsVisibility();
-                $knxServerInput.on('change.knxUltimateHueLight', () => {
-                  refreshKnxBindings();
-                  updateTabsVisibility();
-                });
+                $(document)
+                  .off('change.knxUltimateHueLightGateway', '#node-input-server')
+                  .on('change.knxUltimateHueLightGateway', '#node-input-server', function () {
+                    const selectedValue = $(this).val();
+                    const normalizedValue = selectedValue === undefined || selectedValue === null
+                      ? ''
+                      : String(selectedValue).trim();
+                    node.server = KNX_EMPTY_VALUES.has(normalizedValue.toLowerCase()) ? '' : normalizedValue;
+                    // Selecting none is a visibility change only. Keep every GA,
+                    // DPT option and name mounted exactly as-is so selecting the
+                    // gateway again cannot expose a half-empty mapping editor.
+                    if (node.server !== '') {
+                      try {
+                        refreshKnxBindings();
+                      } catch (error) {
+                        notifyEditorError(error, 'KNX mappings');
+                      }
+                    }
+                    updateTabsVisibility();
+                  });
                 $hueDeviceInput.on('change.knxUltimateHueLight input.knxUltimateHueLight', updateTabsVisibility);
@@ -1238,14 +1272,7 @@
                   $hueDeviceInput.val(initialHueDeviceRaw);
                   updateTabsVisibility();
                   if (getJsonPromise !== undefined) getJsonPromise.abort();
-                  // HUE Controller temporarily selects Node-RED's `_ADD_` sentinel
-                  // while it bootstraps this mature editor. Reading the select here
-                  // would therefore query an inexistent bridge and return `{}` even
-                  // though the selected light has dimming, colour or tunable-white
-                  // capabilities. Resolve the real persisted config-node ID through
-                  // the same helper used by resource discovery and Locate instead.
-                  const capabilityServerId = resolveHueServerValue({ allowStored: true });
-                  const capabilityResourceId = initialHueDeviceRaw.split("#")[0];
+                  const selectedHueResourceType = String(initialHueDeviceRaw.split("#")[1] || '').trim().toLowerCase();
                   const applyHueCapabilities = (data) => {
                     let oLight = data || {};
                     const effects = (oLight && oLight.effects && Array.isArray(oLight.effects.status_values))
@@ -1380,20 +1407,35 @@
                     $("#node-input-specifySwitchOnBrightness").val(node.specifySwitchOnBrightness).trigger('change');
                     $("#node-input-enableDayNightLighting").val(node.enableDayNightLighting).trigger('change');
                   };
-                  getJsonPromise = $.getJSON(`knxUltimateGetLightObject?id=${encodeURIComponent(capabilityResourceId)}&serverId=${encodeURIComponent(capabilityServerId)}&_=${Date.now()}`, (data) => {
-                    try {
-                      applyHueCapabilities(data);
-                    } catch (error) {
-                      notifyEditorError(error, 'capabilities');
-                    }
-                  }).fail((xhr, textStatus, errorThrown) => {
-                    if (textStatus === 'abort') return;
-                    const detail = xhr && xhr.responseJSON && xhr.responseJSON.error
-                      ? xhr.responseJSON.error
-                      : (errorThrown || textStatus || 'Unable to load Hue capabilities');
-                    notifyEditorError(new Error(detail), 'capabilities request');
-                  });
-                  setTimeout(function () { if (getJsonPromise !== undefined) getJsonPromise.abort(); }, 10000);
+                  if (selectedHueResourceType === "grouped_light") {
+                    // A Hue group represents an aggregate control surface. Its
+                    // editor must remain complete and deterministic regardless of
+                    // the capabilities exposed by its current child lights.
+                    applyHueCapabilities({ type: "grouped_light" });
+                  } else {
+                    // HUE Controller temporarily selects Node-RED's `_ADD_` sentinel
+                    // while it bootstraps this mature editor. Reading the select here
+                    // would therefore query an inexistent bridge and return `{}` even
+                    // though the selected light has dimming, colour or tunable-white
+                    // capabilities. Resolve the real persisted config-node ID through
+                    // the same helper used by resource discovery and Locate instead.
+                    const capabilityServerId = resolveHueServerValue({ allowStored: true });
+                    const capabilityResourceId = initialHueDeviceRaw.split("#")[0];
+                    getJsonPromise = $.getJSON(`knxUltimateGetLightObject?id=${encodeURIComponent(capabilityResourceId)}&serverId=${encodeURIComponent(capabilityServerId)}&_=${Date.now()}`, (data) => {
+                      try {
+                        applyHueCapabilities(data);
+                      } catch (error) {
+                        notifyEditorError(error, 'capabilities');
+                      }
+                    }).fail((xhr, textStatus, errorThrown) => {
+                      if (textStatus === 'abort') return;
+                      const detail = xhr && xhr.responseJSON && xhr.responseJSON.error
+                        ? xhr.responseJSON.error
+                        : (errorThrown || textStatus || 'Unable to load Hue capabilities');
+                      notifyEditorError(new Error(detail), 'capabilities request');
+                    });
+                    setTimeout(function () { if (getJsonPromise !== undefined) getJsonPromise.abort(); }, 10000);
+                  }
                 }
                 // Show/Hide the div of the color at swich on
                 if (node.specifySwitchOnBrightness === "yes") {
@@ -1650,6 +1692,7 @@
             },
             oneditsave: function () {
+              $(document).off('change.knxUltimateHueLightGateway', '#node-input-server');
               // Return to the info tab
               try {
                 RED.sidebar.show("info");
@@ -1699,6 +1742,7 @@
               this.__locateSessionInfo = null;
             },
             oneditcancel: function () {
+              $(document).off('change.knxUltimateHueLightGateway', '#node-input-server');
               // Return to the info tab
               try {
                 RED.sidebar.show("info");
@@ -1723,6 +1767,7 @@
               }
             },
             oneditclose: function () {
+              $(document).off('change.knxUltimateHueLightGateway', '#node-input-server');
               if (typeof this.__stopHueLocateSession === 'function') {
                 try { this.__stopHueLocateSession(); } catch (error) { /* empty */ }
               }
@@ -9116,7 +9161,7 @@
   // Form fragments are mounted inside #hue-controller-profile-editor. The two
   // config-node fields remain owned by the outer Controller template.
   const PROFILE_TEMPLATES = {
-    "light": "<!-- Canonical private HUE Controller template: light. -->\n<div class=\"form-row hue-legacy-controller-notice\" role=\"note\" style=\"box-sizing:border-box; padding:10px 12px; margin-bottom:14px; border-left:4px solid #d79b00; background:#fff8df; color:#4d3a00;\">\n    <i class=\"fa fa-exclamation-triangle\" aria-hidden=\"true\" style=\"color:#a15c00; margin-right:6px;\"></i>\n    <span data-i18n=\"node-red-contrib-knx-ultimate/knxUltimateHueController:knxUltimateHueController.legacy_node_notice\"></span>\n  </div>\n  <div class=\"form-row\" style=\"margin-bottom:10px;\">\n    <span style=\"color:#ff0000\"><i class=\"fa fa-youtube\"></i></span>&nbsp;<a target=\"_blank\" href=\"https://www.youtube.com/playlist?list=PL9Yh1bjbLAYrU8PsVhW4xzEug2WtVFv3E\"><b>KNX-Ultimate video tutorials (YouTube playlist)</b></a>\n  </div>\n  <div id=\"mainWindow\">\n    <div class=\"form-row\">\n      <b><span data-i18n=\"knxUltimateHueLight.title\"></span></b>&nbsp&nbsp<span style=\"color:red\" &nbsp &nbsp<i class=\"fa fa-youtube\"></i></span>&nbsp<a\n        target=\"_blank\" href=\"https://youtu.be/jjEUI1J8bkA\"><u><span data-i18n=\"common.youtube_sample\"></span></u></a>\n      <br />\n      <br />\n      <label for=\"node-input-server\">\n        <img\n          src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAKnRFWHRDcmVhdGlvbiBUaW1lAEZyIDYgQXVnIDIwMTAgMjE6NTI6MTkgKzAxMDD84aS8AAAAB3RJTUUH3gYYCicNV+4WIQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAACUSURBVHjaY2CgFZg5c+Z/ZEyWAZ8+f/6/ZsWs/xoamqMGkGrA6Wla/1+fVARjEBuGsSoGmY4eZSCNL59d/g8DIDbIAHR14OgFGQByKjIGKX5+6/T///8gGMQGiV1+/B0Fg70GIkD+RMYgxf/O5/7//2MSmAZhkBi6OrgB6Bg5DGB4ajr3f2xqsYYLSDE2THJUDg0AAAqyDVd4tp4YAAAAAElFTkSuQmCC\"></img>\n        <span data-i18n=\"common.knx_gw\"></span>\n      </label>\n      <input type=\"text\" id=\"node-input-server\" />\n    </div>\n\n    <div class=\"form-row\">\n      <label for=\"node-input-serverHue\">\n        <img\n          src=\"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg==\" />\n        <span data-i18n=\"common.hue_bridge\"></span>\n      </label>\n      <input type=\"text\" id=\"node-input-serverHue\" />\n    </div>\n\n    <br />\n    <p>\n      <b><span data-i18n=\"common.philips_hue\"></span></b>\n    </p>\n\n    <div class=\"form-row\">\n      <label for=\"node-input-name\">\n        <i class=\"fa fa-play-circle\"></i> <span data-i18n=\"common.name\"></span>\n      </label>\n      <input type=\"text\" id=\"node-input-name\" placeholder=\"Enter your hue device name\"\n        style=\"flex:1 1 240px; min-width:240px; max-width:240px;\" />\n      <button type=\"button\" class=\"red-ui-button hue-refresh-devices\"\n        style=\"margin-left:6px; color:#1b7d33; border-color:#1b7d33;\" title=\"Refresh Hue devices\">\n        <i class=\"fa fa-sync\"></i>\n      </button>\n      <button type=\"button\" class=\"red-ui-button hue-locate-device\"\n        style=\"margin-left:6px; color:#ff9800; border-color:#ff9800;\" title=\"Locate selected Hue device\">\n        <i class=\"fa fa-play\"></i>\n      </button>\n      <span class=\"hue-devices-loading\" style=\"margin-left:6px; display:none; color:#1b7d33;\">\n        <i class=\"fa fa-circle-notch fa-spin\"></i>\n      </span>\n      <input type=\"hidden\" id=\"node-input-hueDevice\" />\n    </div>\n\n    <br />\n\n    <div id=\"tabs\" style=\"display:none; width: 900px;\">\n      <ul>\n        <li><a href=\"#tabs-1\"><i class=\"fa-solid fa-toggle-on\"></i> <span data-i18n=\"knxUltimateHueLight.tabs.switch\"></span></a></li>\n        <li><a href=\"#tabs-2\"><i class=\"fa-solid fa-arrow-up-wide-short\"></i> <span data-i18n=\"knxUltimateHueLight.tabs.dim\"></span></a></li>\n        <li><a href=\"#tabs-3\"><i class=\"fa-solid fa-temperature-quarter\"></i> <span data-i18n=\"knxUltimateHueLight.tabs.tunable_white\"></span></a></li>\n        <li><a href=\"#tabs-4\"><i class=\"fa-solid fa-palette\"></i> <span data-i18n=\"knxUltimateHueLight.tabs.rgb_hsv\"></span></a></li>\n        <li><a href=\"#tabs-5\"><i class=\"fa-solid fa-heart-circle-check\"></i> <span data-i18n=\"knxUltimateHueLight.tabs.effects\"></span></a></li>\n        <li><a href=\"#tabs-6\"><i class=\"fa-solid fa-code-merge\"></i> <span data-i18n=\"knxUltimateHueLight.tabs.behaviour\"></span></a></li>\n      </ul>\n      <div id=\"tabs-1\">\n        <p>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightSwitch\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> <span data-i18n=\"knxUltimateHueLight.control\"></span></label>\n\n          <label for=\"node-input-GALightSwitch\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightSwitch\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightSwitch\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightSwitch\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightSwitch\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightSwitch\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> <span data-i18n=\"knxUltimateHueLight.status\"></span></label>\n\n          <label for=\"node-input-GALightState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightState\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightState\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        </p>\n      </div>\n      <div id=\"tabs-2\">\n        <p>\n          <img src=\"resources/node-red-contrib-knx-ultimate/dim.png\" style=\"width: 900px;\">\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightDIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control dim</label>\n\n          <label for=\"node-input-GALightDIM\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightDIM\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightDIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightDIM\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightDIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightDIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightBrightness\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n            %</label>\n\n          <label for=\"node-input-GALightBrightness\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightBrightness\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightBrightness\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightBrightness\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightBrightness\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightBrightness\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightBrightnessState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status %</label>\n\n          <label for=\"node-input-GALightBrightnessState\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightBrightnessState\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightBrightnessState\"\n            style=\"width:40px; margin-left: 0px; text-align: right;\">DPT</label>\n          <select id=\"node-input-dptLightBrightnessState\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightBrightnessState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightBrightnessState\"\n            style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-dimSpeed\" style=\"width:260px\">\n            <i class=\"fa fa-bolt\"></i> Dim Speed (ms)\n          </label>\n          <input type=\"text\" id=\"node-input-dimSpeed\" placeholder='Default is 5000' style=\"width:210px\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-minDimLevelLight\" style=\"width:260px;\">\n            <i class=\"fa fa-clone\"></i> Min Dim Brightness\n          </label>\n          <select id=\"node-input-minDimLevelLight\">\n            <option value=\"useHueLightLevel\" data-i18n=\"knxUltimateHueLight.use_min_brightness\"></option>\n          </select>\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-maxDimLevelLight\" style=\"width:260px;\">\n            <i class=\"fa fa-clone\"></i> Max Dim Brightness\n          </label>\n          <select id=\"node-input-maxDimLevelLight\"></select>\n        </div>\n        </p>\n      </div>\n      <div id=\"tabs-3\">\n        <p>\n          <img src=\"resources/node-red-contrib-knx-ultimate/tunablewhite.png\" style=\"width: 900px;\">\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightKelvinDIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control dim</label>\n\n          <label for=\"node-input-GALightKelvinDIM\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightKelvinDIM\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightKelvinDIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightKelvinDIM\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightKelvinDIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightKelvinDIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightKelvinPercentage\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n            %</label>\n\n          <label for=\"node-input-GALightKelvinPercentage\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightKelvinPercentage\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightKelvinPercentage\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightKelvinPercentage\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightKelvinPercentage\"\n            style=\"width:50px; margin-left: 0px; text-align: right;\">Name</label>\n          <input type=\"text\" id=\"node-input-nameLightKelvinPercentage\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightKelvinPercentageState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status\n            %</label>\n\n          <label for=\"node-input-GALightKelvinPercentageState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightKelvinPercentageState\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightKelvinPercentageState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightKelvinPercentageState\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightKelvinPercentageState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightKelvinPercentageState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightKelvin\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n            Kelvin</label>\n\n          <label for=\"node-input-GALightKelvin\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightKelvin\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightKelvin\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightKelvin\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightKelvin\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightKelvin\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightKelvinState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status\n            Kelvin</label>\n          <label for=\"node-input-GALightKelvinState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightKelvinState\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightKelvinState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightKelvinState\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightKelvinState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightKelvinState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label style=\"width:170px\" for=\"node-input-invertDimTunableWhiteDirection\">\n            <i class=\"fa fa-shuffle\"></i> Invert dim direction\n          </label>\n          <input type=\"checkbox\" id=\"node-input-invertDimTunableWhiteDirection\"\n            style=\"display:inline-block; width:auto; vertical-align:top;\" />\n        </div>\n        </p>\n      </div>\n      <div id=\"tabs-4\">\n        <p>\n          <img src=\"resources/node-red-contrib-knx-ultimate/rgb.png\" style=\"width: 900px;\">\n          <p><b> RGB section</b></p>\n          <div class=\"form-row\">\n          <label for=\"node-input-nameLightColor\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control rgb</label>\n\n          <label for=\"node-input-GALightColor\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightColor\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightColor\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightColor\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightColor\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightColor\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightColorState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status rgb</label>\n\n          <label for=\"node-input-GALightColorState\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightColorState\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightColorState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightColorState\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightColorState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightColorState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n\n        <p><b> HSV section</b></p>\n        <!-- // HSV Color change\n        // nameLightHSV_H_DIM: { value: \"\" },\n        // GALightHSV_H_DIM: { value: \"\" },\n        // dptLightHSV_H_DIM: { value: \"\" }, -->\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightHSV_H_DIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control H dim</label>\n\n          <label for=\"node-input-GALightHSV_H_DIM\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightHSV_H_DIM\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightHSV_H_DIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightHSV_H_DIM\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightHSV_H_DIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightHSV_H_DIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightHSV_H_State\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status H %</label>\n\n          <label for=\"node-input-GALightHSV_H_State\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightHSV_H_State\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightHSV_H_State\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightHSV_H_State\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightHSV_H_State\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightHSV_H_State\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n\n        <!-- // HSV Saturation change\n        nameLightHSV_S_DIM: { value: \"\" },\n        GALightHSV_S_DIM: { value: \"\" },\n        dptLightHSV_S_DIM: { value: \"\" },\n        nameLightHSV_S_State: { value: \"\" },\n        GALightHSV_S_State: { value: \"\" },\n        dptLightHSV_S_State: { value: \"\" }, -->\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightHSV_S_DIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control S dim</label>\n\n          <label for=\"node-input-GALightHSV_S_DIM\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightHSV_S_DIM\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightHSV_S_DIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightHSV_S_DIM\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightHSV_S_DIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightHSV_S_DIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightHSV_S_State\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status S %</label>\n\n          <label for=\"node-input-GALightHSV_S_State\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightHSV_S_State\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightHSV_S_State\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightHSV_S_State\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightHSV_S_State\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightHSV_S_State\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n\n        <!-- // HSV V Brightness change\n        nameLightHSV_V_DIM: { value: \"\" },\n        GALightHSV_V_DIM: { value: \"\" },\n        dptLightHSV_V_DIM: { value: \"\" },\n        nameLightHSV_V_State: { value: \"\" },\n        GALightHSV_V_State: { value: \"\" },\n        dptLightHSV_V_State: { value: \"\" }, -->\n        <div class=\"form-row\">\n          <label for=\"node-input-HSVDimSpeed\" style=\"width:260px\">\n            <i class=\"fa fa-bolt\"></i> Dim Speed (ms)\n          </label>\n          <input type=\"text\" id=\"node-input-HSVDimSpeed\" placeholder='Default is 5000' style=\"width:210px\">\n        </div>\n\n        </p>\n      </div>\n      <div id=\"tabs-5\">\n        <p>\n        <div class=\"form-tips\" style=\"margin-bottom:6px;\">\n          <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n          <span data-i18n=\"knxUltimateHueLight.effect_base_label\"></span>\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightBlink\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Blink</label>\n\n          <label for=\"node-input-GALightBlink\" style=\"width:20px;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightBlink\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightBlink\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightBlink\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightBlink\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightBlink\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n\n        <div id=\"divColorCycle\">\n          <div class=\"form-row\">\n            <label for=\"node-input-nameLightColorCycle\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Color\n              Cycle</label>\n\n            <label for=\"node-input-GALightColorCycle\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n            <input type=\"text\" id=\"node-input-GALightColorCycle\" placeholder=\"Ex: 1/1/1\"\n              style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n            <label for=\"node-input-dptLightColorCycle\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n            <select id=\"node-input-dptLightColorCycle\" style=\"width:140px;\"></select>\n\n            <label for=\"node-input-nameLightColorCycle\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n            <input type=\"text\" id=\"node-input-nameLightColorCycle\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n          </div>\n        </div>\n\n        <hr style=\"margin:12px 0;\">\n\n        <div id=\"divHueEffectsContainer\">\n          <div class=\"form-tips\" style=\"margin-bottom:6px;\">\n            <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n            <span data-i18n=\"knxUltimateHueLight.effect_native_label\"></span>\n          </div>\n          <div id=\"divHueEffectsNoSupport\" class=\"form-tips\" data-i18n=\"knxUltimateHueLight.effect_not_supported\" style=\"display:none;\"></div>\n          <div id=\"divHueEffectsContent\" style=\"display:none;\">\n            <div class=\"form-row\">\n              <label for=\"node-input-nameLightEffect\" style=\"width:110px;\"><i class=\"fa fa-wand-magic-sparkles\"></i> <span data-i18n=\"knxUltimateHueLight.effect_command\"></span></label>\n\n              <label for=\"node-input-GALightEffect\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n              <input type=\"text\" id=\"node-input-GALightEffect\" placeholder=\"Ex: 1/1/1\"\n                style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n              <label for=\"node-input-dptLightEffect\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n              <select id=\"node-input-dptLightEffect\" style=\"width:140px;\"></select>\n\n              <label for=\"node-input-nameLightEffect\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                  data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n              <input type=\"text\" id=\"node-input-nameLightEffect\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n            </div>\n\n            <div class=\"form-row\">\n              <label for=\"node-input-nameLightEffectStatus\" style=\"width:110px;\"><i class=\"fa fa-circle-info\"></i> <span data-i18n=\"knxUltimateHueLight.effect_status\"></span></label>\n\n              <label for=\"node-input-GALightEffectStatus\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n              <input type=\"text\" id=\"node-input-GALightEffectStatus\" placeholder=\"Ex: 1/1/1\"\n                style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n              <label for=\"node-input-dptLightEffectStatus\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n              <select id=\"node-input-dptLightEffectStatus\" style=\"width:140px;\"></select>\n\n              <label for=\"node-input-nameLightEffectStatus\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                  data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n              <input type=\"text\" id=\"node-input-nameLightEffectStatus\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n            </div>\n\n            <div class=\"form-row\" id=\"divEffectMappings\">\n              <label style=\"width:110px;\"><i class=\"fa fa-list-check\"></i> <span data-i18n=\"knxUltimateHueLight.effect_mapping\"></span></label>\n              <div style=\"margin-left:5px; width: calc(100% - 120px);\">\n                <input type=\"hidden\" id=\"node-input-effectRules\">\n                <ol id=\"node-input-effect-rule-container\" style=\"margin:0; padding:0;\"></ol>\n                <div style=\"margin-top:5px;\">\n                  <button type=\"button\" id=\"node-input-effect-autofill\" class=\"red-ui-button\"><span data-i18n=\"knxUltimateHueLight.effect_autofill\"></span></button>\n                </div>\n                <div class=\"form-tips\">\n                  <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n                  <span data-i18n=\"knxUltimateHueLight.effect_tip\"></span>\n                </div>\n                <div class=\"form-tips\">\n                  <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n                  <span data-i18n=\"knxUltimateHueLight.effect_tip_status\"></span>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n        </p>\n      </div>\n      <div id=\"tabs-6\">\n        <p>\n        <div class=\"form-row\">\n          <label style=\"width:260px;\" for=\"node-input-readStatusAtStartup\"><i class=\"fa fa-question-circle\"></i> <span data-i18n=\"knxUltimateHueLight.read_status_startup\"></span></label>\n          <select id=\"node-input-readStatusAtStartup\">\n            <option value=\"no\" data-i18n=\"knxUltimateHueLight.opt_no\"></option>\n            <option value=\"yes\" data-i18n=\"knxUltimateHueLight.opt_yes_emit\"></option>\n          </select>\n        </div>\n        <div class=\"form-row\" id=\"divUpdateKNXBrightnessStatusOnHUEOnOff\">\n          <label style=\"width:260px;\" for=\"node-input-updateKNXBrightnessStatusOnHUEOnOff\">\n            <i class=\"fa fa-tag\"></i> <span data-i18n=\"knxUltimateHueLight.knx_brightness_status\"></span>\n          </label>\n          <select id=\"node-input-updateKNXBrightnessStatusOnHUEOnOff\">\n            <option value=\"onhueoff\" data-i18n=\"knxUltimateHueLight.knx_brightness_onhueoff\"></option>\n            <option value=\"no\" data-i18n=\"knxUltimateHueLight.knx_brightness_no\"></option>\n          </select>\n        </div>\n        <div class=\"form-row\">\n          <label style=\"width:260px;\" for=\"node-input-updateLocalStateFromKNXWrite\">\n            <i class=\"fa fa-database\"></i> <span data-i18n=\"knxUltimateHueLight.update_local_state_from_knx_write\"></span>\n          </label>\n          <input type=\"checkbox\" id=\"node-input-updateLocalStateFromKNXWrite\" style=\"display:inline-block; width:auto; vertical-align:top;\" />\n        </div>\n        <div class=\"form-tips\" style=\"margin-left:260px;\" data-i18n=\"knxUltimateHueLight.update_local_state_from_knx_write_hint\"></div><br/>\n        <div id =\"divBehaviourBrightness\">\n          <div class=\"form-row\">\n            <label for=\"node-input-specifySwitchOnBrightness\" style=\"width:260px;\">\n              <i class=\"fa fa-tag\"></i> <span data-i18n=\"knxUltimateHueLight.switch_on_behaviour\"></span>\n            </label>\n            <select id=\"node-input-specifySwitchOnBrightness\">\n              <option value=\"no\" data-i18n=\"knxUltimateHueLight.none\"></option>\n              <option value=\"temperature\" data-i18n=\"knxUltimateHueLight.select_temperature_brightness\"></option>\n              <option value=\"yes\" data-i18n=\"knxUltimateHueLight.select_color\"></option>\n            </select>\n          </div>\n\n          <div class=\"form-row\" id=\"divColorsAtSwitchOn\">\n            <label for=\"node-input-colorAtSwitchOnDayTime\" style=\"width:260px\">\n            </label>\n            <input type=\"hidden\" id=\"node-input-colorAtSwitchOnDayTime\">\n            <input type=\"color\" id=\"colorPickerDay\" style=\"width:260px\">\n            <button id=\"getColorAtSwitchOnDayTimeButton\" type=\"button\" class=\"red-ui-button\"><span data-i18n=\"knxUltimateHueLight.get_current\"></span></button>\n          </div>\n          <div class=\"form-row\" id=\"divTemperatureAtSwitchOn\" hidden>\n            <label for=\"node-input-colorAtSwitchOnDayTime\" style=\"width:260px\">\n            </label>\n            <select style=\"width:12%;\" id=\"comboTemperatureAtSwitchOn\"></select>\n            <select  style=\"width:25%;\" id=\"comboBrightnessAtSwitchOn\"></select>\n          </div>\n\n          <div id=\"divCCSBoxAtNightLighting\">\n            <div class=\"form-row\">\n              <label for=\"node-input-enableDayNightLighting\" style=\"width:260px;\">\n                <i class=\"fa fa-clone\"></i> <span data-i18n=\"knxUltimateHueLight.night_lighting\"></span>\n              </label>\n              <select id=\"node-input-enableDayNightLighting\">\n                <option value=\"no\" data-i18n=\"knxUltimateHueLight.no_night_lighting\"></option>\n                <!-- <option value=\"temperature\">Select temperature and brightness</option>\n                <option value=\"yes\">Select color</option> -->\n              </select>\n            </div>\n\n            <div id=\"divEnableDayNightLighting\">\n\n              <div class=\"form-row\" id=\"divColorsAtSwitchOnNightTime\">\n                <label for=\"node-input-colorAtSwitchOnNightTime\" style=\"width:260px\"></label>\n                <input type=\"hidden\" id=\"node-input-colorAtSwitchOnNightTime\">\n                <input type=\"color\" id=\"colorPickerNight\" style=\"width:260px\">\n                <button id=\"getColorAtSwitchOnNightTimeButton\" type=\"button\" class=\"red-ui-button\"><span data-i18n=\"knxUltimateHueLight.get_current\"></span></button>\n              </div>\n              <div class=\"form-row\" id=\"divTemperatureAtSwitchOnNightTime\" hidden>\n                <label for=\"node-input-colorAtSwitchOnNightTime\" style=\"width:260px\"></label>\n                <select style=\"width:25%;\" id=\"comboTemperatureAtSwitchOnNightTime\"></select>\n                <select style=\"width:25%;\" id=\"comboBrightnessAtSwitchOnNightTime\"></select>\n              </div>\n\n              <div class=\"form-row\">\n                <label for=\"node-input-nameDaylightSensor\" style=\"width:110px;\"><i class=\"fa fa-clock-o\"></i>\n                  <span data-i18n=\"knxUltimateHueLight.day_night\"></span></label>\n                <label for=\"node-input-GADaylightSensor\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n                <input type=\"text\" id=\"node-input-GADaylightSensor\" placeholder=\"Ex: 1/1/1\"\n                  style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n                <label for=\"node-input-dptDaylightSensor\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n                <select id=\"node-input-dptDaylightSensor\" style=\"width:140px;\"></select>\n\n                <label for=\"node-input-nameDaylightSensor\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                    data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n                <input type=\"text\" id=\"node-input-nameDaylightSensor\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n              </div>\n              <div class=\"form-row\">\n                <label style=\"width:170px\" for=\"node-input-invertDayNight\">\n                  <i class=\"fa fa-shuffle\"></i> <span data-i18n=\"knxUltimateHueLight.invert_day_night\"></span>\n                </label>\n                <input type=\"checkbox\" id=\"node-input-invertDayNight\"\n                  style=\"display:inline-block; width:auto; vertical-align:top;\" />\n              </div>\n              <div class=\"form-row\">\n                <label for=\"node-input-restoreDayMode\" style=\"width:260px;\">\n                  <i class=\"fa fa-circle\"></i> <span data-i18n=\"knxUltimateHueLight.override_night_mode\"></span>\n                </label>\n                <select id=\"node-input-restoreDayMode\">\n                  <option value=\"no\" data-i18n=\"knxUltimateHueLight.override_no\"></option>\n                  <option value=\"setDayByFastSwitchLightSingle\" data-i18n=\"knxUltimateHueLight.override_set_day_fast_this\"></option>\n                  <option value=\"setDayByFastSwitchLightALL\" data-i18n=\"knxUltimateHueLight.override_set_day_fast_all\"></option>\n                </select>\n              </div>\n            </div>\n          </div>\n          <br/>\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-enableNodePINS\" style=\"width:260px;\">\n            <i class=\"fa fa-circle\"></i> <span data-i18n=\"knxUltimateHueLight.node_pins\"></span>\n          </label>\n          <select id=\"node-input-enableNodePINS\">\n            <option value=\"no\" data-i18n=\"knxUltimateHueLight.node_pins_hide\"></option>\n            <option value=\"yes\" data-i18n=\"knxUltimateHueLight.node_pins_show\"></option>\n          </select>\n        </div>\n        </p>\n      </div>\n    </div>\n  </div>\n<br />",
+    "light": "<!-- Canonical private HUE Controller template: light. -->\n<div class=\"form-row hue-legacy-controller-notice\" role=\"note\"\n  style=\"box-sizing:border-box; padding:10px 12px; margin-bottom:14px; border-left:4px solid #d79b00; background:#fff8df; color:#4d3a00;\">\n  <i class=\"fa fa-exclamation-triangle\" aria-hidden=\"true\" style=\"color:#a15c00; margin-right:6px;\"></i>\n  <span\n    data-i18n=\"node-red-contrib-knx-ultimate/knxUltimateHueController:knxUltimateHueController.legacy_node_notice\"></span>\n</div>\n<div class=\"form-row\" style=\"margin-bottom:10px;\">\n  <span style=\"color:#ff0000\"><i class=\"fa fa-youtube\"></i></span>&nbsp;<a target=\"_blank\"\n    href=\"https://www.youtube.com/playlist?list=PL9Yh1bjbLAYrU8PsVhW4xzEug2WtVFv3E\"><b>KNX-Ultimate video tutorials\n      (YouTube playlist)</b></a>\n</div>\n<div id=\"mainWindow\">\n  <div class=\"form-row\">\n    <b><span data-i18n=\"knxUltimateHueLight.title\"></span></b>&nbsp&nbsp<span style=\"color:red\" &nbsp &nbsp<i\n      class=\"fa fa-youtube\"></i></span>&nbsp<a target=\"_blank\" href=\"https://youtu.be/jjEUI1J8bkA\"><u><span\n          data-i18n=\"common.youtube_sample\"></span></u></a>\n    <br />\n    <br />\n    <label for=\"node-input-server\">\n      <img\n        src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAKnRFWHRDcmVhdGlvbiBUaW1lAEZyIDYgQXVnIDIwMTAgMjE6NTI6MTkgKzAxMDD84aS8AAAAB3RJTUUH3gYYCicNV+4WIQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAACUSURBVHjaY2CgFZg5c+Z/ZEyWAZ8+f/6/ZsWs/xoamqMGkGrA6Wla/1+fVARjEBuGsSoGmY4eZSCNL59d/g8DIDbIAHR14OgFGQByKjIGKX5+6/T///8gGMQGiV1+/B0Fg70GIkD+RMYgxf/O5/7//2MSmAZhkBi6OrgB6Bg5DGB4ajr3f2xqsYYLSDE2THJUDg0AAAqyDVd4tp4YAAAAAElFTkSuQmCC\"></img>\n      <span data-i18n=\"common.knx_gw\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-server\" />\n  </div>\n\n  <div class=\"form-row\">\n    <label for=\"node-input-serverHue\">\n      <img\n        src=\"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg==\" />\n      <span data-i18n=\"common.hue_bridge\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-serverHue\" />\n  </div>\n\n  <div class=\"hue-controller-knx-flow-only-notice\" role=\"note\" style=\"display:none;\"></div>\n\n  <div class=\"form-row\">\n    <label for=\"node-input-name\">\n      <i class=\"fa fa-play-circle\"></i> <span data-i18n=\"common.name\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-name\" placeholder=\"Enter your hue device name\"\n      style=\"flex:1 1 240px; min-width:240px; max-width:240px;\" />\n    <button type=\"button\" class=\"red-ui-button hue-refresh-devices\"\n      style=\"margin-left:6px; color:#1b7d33; border-color:#1b7d33;\" title=\"Refresh Hue devices\">\n      <i class=\"fa fa-sync\"></i>\n    </button>\n    <button type=\"button\" class=\"red-ui-button hue-locate-device\"\n      style=\"margin-left:6px; color:#ff9800; border-color:#ff9800;\" title=\"Locate selected Hue device\">\n      <i class=\"fa fa-play\"></i>\n    </button>\n    <span class=\"hue-devices-loading\" style=\"margin-left:6px; display:none; color:#1b7d33;\">\n      <i class=\"fa fa-circle-notch fa-spin\"></i>\n    </span>\n    <input type=\"hidden\" id=\"node-input-hueDevice\" />\n  </div>\n\n  <div id=\"tabs\" style=\"display:none; width: 900px;\">\n    <ul>\n      <li><a href=\"#tabs-1\"><i class=\"fa-solid fa-toggle-on\"></i> <span\n            data-i18n=\"knxUltimateHueLight.tabs.switch\"></span></a></li>\n      <li><a href=\"#tabs-2\"><i class=\"fa-solid fa-arrow-up-wide-short\"></i> <span\n            data-i18n=\"knxUltimateHueLight.tabs.dim\"></span></a></li>\n      <li><a href=\"#tabs-3\"><i class=\"fa-solid fa-temperature-quarter\"></i> <span\n            data-i18n=\"knxUltimateHueLight.tabs.tunable_white\"></span></a></li>\n      <li><a href=\"#tabs-4\"><i class=\"fa-solid fa-palette\"></i> <span\n            data-i18n=\"knxUltimateHueLight.tabs.rgb_hsv\"></span></a></li>\n      <li><a href=\"#tabs-5\"><i class=\"fa-solid fa-heart-circle-check\"></i> <span\n            data-i18n=\"knxUltimateHueLight.tabs.effects\"></span></a></li>\n      <li><a href=\"#tabs-6\"><i class=\"fa-solid fa-code-merge\"></i> <span\n            data-i18n=\"knxUltimateHueLight.tabs.behaviour\"></span></a></li>\n    </ul>\n    <div id=\"tabs-1\">\n      <p>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightSwitch\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> <span\n            data-i18n=\"knxUltimateHueLight.control\"></span></label>\n\n        <label for=\"node-input-GALightSwitch\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightSwitch\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightSwitch\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightSwitch\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightSwitch\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightSwitch\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> <span\n            data-i18n=\"knxUltimateHueLight.status\"></span></label>\n\n        <label for=\"node-input-GALightState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightState\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightState\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      </p>\n    </div>\n    <div id=\"tabs-2\">\n      <p>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightDIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n          dim</label>\n\n        <label for=\"node-input-GALightDIM\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightDIM\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightDIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightDIM\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightDIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightDIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightBrightness\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n          %</label>\n\n        <label for=\"node-input-GALightBrightness\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightBrightness\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightBrightness\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightBrightness\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightBrightness\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightBrightness\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightBrightnessState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i>\n          Status %</label>\n\n        <label for=\"node-input-GALightBrightnessState\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightBrightnessState\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightBrightnessState\"\n          style=\"width:40px; margin-left: 0px; text-align: right;\">DPT</label>\n        <select id=\"node-input-dptLightBrightnessState\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightBrightnessState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightBrightnessState\"\n          style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-dimSpeed\" style=\"width:260px\">\n          <i class=\"fa fa-bolt\"></i> Dim Speed (ms)\n        </label>\n        <input type=\"text\" id=\"node-input-dimSpeed\" placeholder='Default is 5000' style=\"width:210px\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-minDimLevelLight\" style=\"width:260px;\">\n          <i class=\"fa fa-clone\"></i> Min Dim Brightness\n        </label>\n        <select id=\"node-input-minDimLevelLight\">\n          <option value=\"useHueLightLevel\" data-i18n=\"knxUltimateHueLight.use_min_brightness\"></option>\n        </select>\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-maxDimLevelLight\" style=\"width:260px;\">\n          <i class=\"fa fa-clone\"></i> Max Dim Brightness\n        </label>\n        <select id=\"node-input-maxDimLevelLight\"></select>\n      </div>\n      </p>\n    </div>\n    <div id=\"tabs-3\">\n      <p>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightKelvinDIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n          dim</label>\n\n        <label for=\"node-input-GALightKelvinDIM\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightKelvinDIM\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightKelvinDIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightKelvinDIM\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightKelvinDIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightKelvinDIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightKelvinPercentage\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i>\n          Control\n          %</label>\n\n        <label for=\"node-input-GALightKelvinPercentage\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightKelvinPercentage\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightKelvinPercentage\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightKelvinPercentage\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightKelvinPercentage\"\n          style=\"width:50px; margin-left: 0px; text-align: right;\">Name</label>\n        <input type=\"text\" id=\"node-input-nameLightKelvinPercentage\"\n          style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightKelvinPercentageState\" style=\"width:110px;\"><i\n            class=\"fa fa-question-circle\"></i> Status\n          %</label>\n\n        <label for=\"node-input-GALightKelvinPercentageState\" style=\"width:20px;\"><span\n            data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightKelvinPercentageState\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightKelvinPercentageState\"\n          style=\"width:40px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightKelvinPercentageState\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightKelvinPercentageState\"\n          style=\"width:50px; margin-left: 0px; text-align: right;\"><span data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightKelvinPercentageState\"\n          style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightKelvin\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n          Kelvin</label>\n\n        <label for=\"node-input-GALightKelvin\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightKelvin\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightKelvin\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightKelvin\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightKelvin\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightKelvin\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightKelvinState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status\n          Kelvin</label>\n        <label for=\"node-input-GALightKelvinState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightKelvinState\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightKelvinState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightKelvinState\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightKelvinState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightKelvinState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label style=\"width:170px\" for=\"node-input-invertDimTunableWhiteDirection\">\n          <i class=\"fa fa-shuffle\"></i> Invert dim direction\n        </label>\n        <input type=\"checkbox\" id=\"node-input-invertDimTunableWhiteDirection\"\n          style=\"display:inline-block; width:auto; vertical-align:top;\" />\n      </div>\n      </p>\n    </div>\n    <div id=\"tabs-4\">\n      <p>\n      <p><b> RGB section</b></p>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightColor\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control\n          rgb</label>\n\n        <label for=\"node-input-GALightColor\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightColor\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightColor\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightColor\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightColor\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightColor\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightColorState\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status\n          rgb</label>\n\n        <label for=\"node-input-GALightColorState\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightColorState\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightColorState\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightColorState\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightColorState\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightColorState\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n\n      <p><b> HSV section</b></p>\n      <!-- // HSV Color change\n        // nameLightHSV_H_DIM: { value: \"\" },\n        // GALightHSV_H_DIM: { value: \"\" },\n        // dptLightHSV_H_DIM: { value: \"\" }, -->\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightHSV_H_DIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control H\n          dim</label>\n\n        <label for=\"node-input-GALightHSV_H_DIM\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightHSV_H_DIM\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightHSV_H_DIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightHSV_H_DIM\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightHSV_H_DIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightHSV_H_DIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightHSV_H_State\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status H\n          %</label>\n\n        <label for=\"node-input-GALightHSV_H_State\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightHSV_H_State\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightHSV_H_State\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightHSV_H_State\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightHSV_H_State\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightHSV_H_State\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n\n      <!-- // HSV Saturation change\n        nameLightHSV_S_DIM: { value: \"\" },\n        GALightHSV_S_DIM: { value: \"\" },\n        dptLightHSV_S_DIM: { value: \"\" },\n        nameLightHSV_S_State: { value: \"\" },\n        GALightHSV_S_State: { value: \"\" },\n        dptLightHSV_S_State: { value: \"\" }, -->\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightHSV_S_DIM\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Control S\n          dim</label>\n\n        <label for=\"node-input-GALightHSV_S_DIM\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightHSV_S_DIM\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightHSV_S_DIM\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightHSV_S_DIM\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightHSV_S_DIM\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightHSV_S_DIM\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightHSV_S_State\" style=\"width:110px;\"><i class=\"fa fa-question-circle\"></i> Status S\n          %</label>\n\n        <label for=\"node-input-GALightHSV_S_State\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightHSV_S_State\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightHSV_S_State\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightHSV_S_State\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightHSV_S_State\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightHSV_S_State\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n\n      <!-- // HSV V Brightness change\n        nameLightHSV_V_DIM: { value: \"\" },\n        GALightHSV_V_DIM: { value: \"\" },\n        dptLightHSV_V_DIM: { value: \"\" },\n        nameLightHSV_V_State: { value: \"\" },\n        GALightHSV_V_State: { value: \"\" },\n        dptLightHSV_V_State: { value: \"\" }, -->\n      <div class=\"form-row\">\n        <label for=\"node-input-HSVDimSpeed\" style=\"width:260px\">\n          <i class=\"fa fa-bolt\"></i> Dim Speed (ms)\n        </label>\n        <input type=\"text\" id=\"node-input-HSVDimSpeed\" placeholder='Default is 5000' style=\"width:210px\">\n      </div>\n\n      </p>\n    </div>\n    <div id=\"tabs-5\">\n      <p>\n      <div class=\"form-tips\" style=\"margin-bottom:6px;\">\n        <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n        <span data-i18n=\"knxUltimateHueLight.effect_base_label\"></span>\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-nameLightBlink\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Blink</label>\n\n        <label for=\"node-input-GALightBlink\" style=\"width:20px;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-GALightState\"></span></label>\n        <input type=\"text\" id=\"node-input-GALightBlink\" placeholder=\"Ex: 1/1/1\"\n          style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n        <label for=\"node-input-dptLightBlink\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptLightBlink\" style=\"width:140px;\"></select>\n\n        <label for=\"node-input-nameLightBlink\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n            data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameLightBlink\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n      </div>\n\n      <div id=\"divColorCycle\">\n        <div class=\"form-row\">\n          <label for=\"node-input-nameLightColorCycle\" style=\"width:110px;\"><i class=\"fa fa-play-circle-o\"></i> Color\n            Cycle</label>\n\n          <label for=\"node-input-GALightColorCycle\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n          <input type=\"text\" id=\"node-input-GALightColorCycle\" placeholder=\"Ex: 1/1/1\"\n            style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n          <label for=\"node-input-dptLightColorCycle\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"common.dpt\"></span></label>\n          <select id=\"node-input-dptLightColorCycle\" style=\"width:140px;\"></select>\n\n          <label for=\"node-input-nameLightColorCycle\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n              data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n          <input type=\"text\" id=\"node-input-nameLightColorCycle\"\n            style=\"width:190px;margin-left: 5px; text-align: left;\">\n        </div>\n      </div>\n\n      <hr style=\"margin:12px 0;\">\n\n      <div id=\"divHueEffectsContainer\">\n        <div class=\"form-tips\" style=\"margin-bottom:6px;\">\n          <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n          <span data-i18n=\"knxUltimateHueLight.effect_native_label\"></span>\n        </div>\n        <div id=\"divHueEffectsNoSupport\" class=\"form-tips\" data-i18n=\"knxUltimateHueLight.effect_not_supported\"\n          style=\"display:none;\"></div>\n        <div id=\"divHueEffectsContent\" style=\"display:none;\">\n          <div class=\"form-row\">\n            <label for=\"node-input-nameLightEffect\" style=\"width:110px;\"><i class=\"fa fa-wand-magic-sparkles\"></i> <span\n                data-i18n=\"knxUltimateHueLight.effect_command\"></span></label>\n\n            <label for=\"node-input-GALightEffect\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n            <input type=\"text\" id=\"node-input-GALightEffect\" placeholder=\"Ex: 1/1/1\"\n              style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n            <label for=\"node-input-dptLightEffect\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n                data-i18n=\"common.dpt\"></span></label>\n            <select id=\"node-input-dptLightEffect\" style=\"width:140px;\"></select>\n\n            <label for=\"node-input-nameLightEffect\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n            <input type=\"text\" id=\"node-input-nameLightEffect\" style=\"width:190px;margin-left: 5px; text-align: left;\">\n          </div>\n\n          <div class=\"form-row\">\n            <label for=\"node-input-nameLightEffectStatus\" style=\"width:110px;\"><i class=\"fa fa-circle-info\"></i> <span\n                data-i18n=\"knxUltimateHueLight.effect_status\"></span></label>\n\n            <label for=\"node-input-GALightEffectStatus\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n            <input type=\"text\" id=\"node-input-GALightEffectStatus\" placeholder=\"Ex: 1/1/1\"\n              style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n            <label for=\"node-input-dptLightEffectStatus\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n                data-i18n=\"common.dpt\"></span></label>\n            <select id=\"node-input-dptLightEffectStatus\" style=\"width:140px;\"></select>\n\n            <label for=\"node-input-nameLightEffectStatus\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n            <input type=\"text\" id=\"node-input-nameLightEffectStatus\"\n              style=\"width:190px;margin-left: 5px; text-align: left;\">\n          </div>\n\n          <div class=\"form-row\" id=\"divEffectMappings\">\n            <label style=\"width:110px;\"><i class=\"fa fa-list-check\"></i> <span\n                data-i18n=\"knxUltimateHueLight.effect_mapping\"></span></label>\n            <div style=\"margin-left:5px; width: calc(100% - 120px);\">\n              <input type=\"hidden\" id=\"node-input-effectRules\">\n              <ol id=\"node-input-effect-rule-container\" style=\"margin:0; padding:0;\"></ol>\n              <div style=\"margin-top:5px;\">\n                <button type=\"button\" id=\"node-input-effect-autofill\" class=\"red-ui-button\"><span\n                    data-i18n=\"knxUltimateHueLight.effect_autofill\"></span></button>\n              </div>\n              <div class=\"form-tips\">\n                <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n                <span data-i18n=\"knxUltimateHueLight.effect_tip\"></span>\n              </div>\n              <div class=\"form-tips\">\n                <i class=\"fa fa-circle-info\" style=\"color:forestgreen; margin-right:4px;\"></i>\n                <span data-i18n=\"knxUltimateHueLight.effect_tip_status\"></span>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      </p>\n    </div>\n    <div id=\"tabs-6\">\n      <p>\n      <div class=\"form-row\">\n        <label style=\"width:260px;\" for=\"node-input-readStatusAtStartup\"><i class=\"fa fa-question-circle\"></i> <span\n            data-i18n=\"knxUltimateHueLight.read_status_startup\"></span></label>\n        <select id=\"node-input-readStatusAtStartup\">\n          <option value=\"no\" data-i18n=\"knxUltimateHueLight.opt_no\"></option>\n          <option value=\"yes\" data-i18n=\"knxUltimateHueLight.opt_yes_emit\"></option>\n        </select>\n      </div>\n      <div class=\"form-row\" id=\"divUpdateKNXBrightnessStatusOnHUEOnOff\">\n        <label style=\"width:260px;\" for=\"node-input-updateKNXBrightnessStatusOnHUEOnOff\">\n          <i class=\"fa fa-tag\"></i> <span data-i18n=\"knxUltimateHueLight.knx_brightness_status\"></span>\n        </label>\n        <select id=\"node-input-updateKNXBrightnessStatusOnHUEOnOff\">\n          <option value=\"onhueoff\" data-i18n=\"knxUltimateHueLight.knx_brightness_onhueoff\"></option>\n          <option value=\"no\" data-i18n=\"knxUltimateHueLight.knx_brightness_no\"></option>\n        </select>\n      </div>\n      <div class=\"form-row\">\n        <label style=\"width:260px;\" for=\"node-input-updateLocalStateFromKNXWrite\">\n          <i class=\"fa fa-database\"></i> <span data-i18n=\"knxUltimateHueLight.update_local_state_from_knx_write\"></span>\n        </label>\n        <input type=\"checkbox\" id=\"node-input-updateLocalStateFromKNXWrite\"\n          style=\"display:inline-block; width:auto; vertical-align:top;\" />\n      </div>\n      <div class=\"form-tips\" style=\"margin-left:260px;\"\n        data-i18n=\"knxUltimateHueLight.update_local_state_from_knx_write_hint\"></div><br />\n      <div id=\"divBehaviourBrightness\">\n        <div class=\"form-row\">\n          <label for=\"node-input-specifySwitchOnBrightness\" style=\"width:260px;\">\n            <i class=\"fa fa-tag\"></i> <span data-i18n=\"knxUltimateHueLight.switch_on_behaviour\"></span>\n          </label>\n          <select id=\"node-input-specifySwitchOnBrightness\">\n            <option value=\"no\" data-i18n=\"knxUltimateHueLight.none\"></option>\n            <option value=\"temperature\" data-i18n=\"knxUltimateHueLight.select_temperature_brightness\"></option>\n            <option value=\"yes\" data-i18n=\"knxUltimateHueLight.select_color\"></option>\n          </select>\n        </div>\n\n        <div class=\"form-row\" id=\"divColorsAtSwitchOn\">\n          <label for=\"node-input-colorAtSwitchOnDayTime\" style=\"width:260px\">\n          </label>\n          <input type=\"hidden\" id=\"node-input-colorAtSwitchOnDayTime\">\n          <input type=\"color\" id=\"colorPickerDay\" style=\"width:260px\">\n          <button id=\"getColorAtSwitchOnDayTimeButton\" type=\"button\" class=\"red-ui-button\"><span\n              data-i18n=\"knxUltimateHueLight.get_current\"></span></button>\n        </div>\n        <div class=\"form-row\" id=\"divTemperatureAtSwitchOn\" hidden>\n          <label for=\"node-input-colorAtSwitchOnDayTime\" style=\"width:260px\">\n          </label>\n          <select style=\"width:12%;\" id=\"comboTemperatureAtSwitchOn\"></select>\n          <select style=\"width:25%;\" id=\"comboBrightnessAtSwitchOn\"></select>\n        </div>\n\n        <div id=\"divCCSBoxAtNightLighting\">\n          <div class=\"form-row\">\n            <label for=\"node-input-enableDayNightLighting\" style=\"width:260px;\">\n              <i class=\"fa fa-clone\"></i> <span data-i18n=\"knxUltimateHueLight.night_lighting\"></span>\n            </label>\n            <select id=\"node-input-enableDayNightLighting\">\n              <option value=\"no\" data-i18n=\"knxUltimateHueLight.no_night_lighting\"></option>\n              <!-- <option value=\"temperature\">Select temperature and brightness</option>\n                <option value=\"yes\">Select color</option> -->\n            </select>\n          </div>\n\n          <div id=\"divEnableDayNightLighting\">\n\n            <div class=\"form-row\" id=\"divColorsAtSwitchOnNightTime\">\n              <label for=\"node-input-colorAtSwitchOnNightTime\" style=\"width:260px\"></label>\n              <input type=\"hidden\" id=\"node-input-colorAtSwitchOnNightTime\">\n              <input type=\"color\" id=\"colorPickerNight\" style=\"width:260px\">\n              <button id=\"getColorAtSwitchOnNightTimeButton\" type=\"button\" class=\"red-ui-button\"><span\n                  data-i18n=\"knxUltimateHueLight.get_current\"></span></button>\n            </div>\n            <div class=\"form-row\" id=\"divTemperatureAtSwitchOnNightTime\" hidden>\n              <label for=\"node-input-colorAtSwitchOnNightTime\" style=\"width:260px\"></label>\n              <select style=\"width:25%;\" id=\"comboTemperatureAtSwitchOnNightTime\"></select>\n              <select style=\"width:25%;\" id=\"comboBrightnessAtSwitchOnNightTime\"></select>\n            </div>\n\n            <div class=\"form-row\">\n              <label for=\"node-input-nameDaylightSensor\" style=\"width:110px;\"><i class=\"fa fa-clock-o\"></i>\n                <span data-i18n=\"knxUltimateHueLight.day_night\"></span></label>\n              <label for=\"node-input-GADaylightSensor\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n              <input type=\"text\" id=\"node-input-GADaylightSensor\" placeholder=\"Ex: 1/1/1\"\n                style=\"width:70px;margin-left: 5px; text-align: left;\">\n\n              <label for=\"node-input-dptDaylightSensor\" style=\"width:40px; margin-left: 0px; text-align: right;\"><span\n                  data-i18n=\"common.dpt\"></span></label>\n              <select id=\"node-input-dptDaylightSensor\" style=\"width:140px;\"></select>\n\n              <label for=\"node-input-nameDaylightSensor\" style=\"width:50px; margin-left: 0px; text-align: right;\"><span\n                  data-i18n=\"knxUltimateHueLight.node-input-name\"></span></label>\n              <input type=\"text\" id=\"node-input-nameDaylightSensor\"\n                style=\"width:190px;margin-left: 5px; text-align: left;\">\n            </div>\n            <div class=\"form-row\">\n              <label style=\"width:170px\" for=\"node-input-invertDayNight\">\n                <i class=\"fa fa-shuffle\"></i> <span data-i18n=\"knxUltimateHueLight.invert_day_night\"></span>\n              </label>\n              <input type=\"checkbox\" id=\"node-input-invertDayNight\"\n                style=\"display:inline-block; width:auto; vertical-align:top;\" />\n            </div>\n            <div class=\"form-row\">\n              <label for=\"node-input-restoreDayMode\" style=\"width:260px;\">\n                <i class=\"fa fa-circle\"></i> <span data-i18n=\"knxUltimateHueLight.override_night_mode\"></span>\n              </label>\n              <select id=\"node-input-restoreDayMode\">\n                <option value=\"no\" data-i18n=\"knxUltimateHueLight.override_no\"></option>\n                <option value=\"setDayByFastSwitchLightSingle\"\n                  data-i18n=\"knxUltimateHueLight.override_set_day_fast_this\"></option>\n                <option value=\"setDayByFastSwitchLightALL\" data-i18n=\"knxUltimateHueLight.override_set_day_fast_all\">\n                </option>\n              </select>\n            </div>\n          </div>\n        </div>\n        <br />\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-enableNodePINS\" style=\"width:260px;\">\n          <i class=\"fa fa-circle\"></i> <span data-i18n=\"knxUltimateHueLight.node_pins\"></span>\n        </label>\n        <select id=\"node-input-enableNodePINS\">\n          <option value=\"no\" data-i18n=\"knxUltimateHueLight.node_pins_hide\"></option>\n          <option value=\"yes\" data-i18n=\"knxUltimateHueLight.node_pins_show\"></option>\n        </select>\n      </div>\n      </p>\n    </div>\n  </div>\n</div>\n<br />",
     "plug": "<!-- Canonical private HUE Controller template: plug. -->\n<div class=\"form-row hue-legacy-controller-notice\" role=\"note\" style=\"box-sizing:border-box; padding:10px 12px; margin-bottom:14px; border-left:4px solid #d79b00; background:#fff8df; color:#4d3a00;\">\n    <i class=\"fa fa-exclamation-triangle\" aria-hidden=\"true\" style=\"color:#a15c00; margin-right:6px;\"></i>\n    <span data-i18n=\"node-red-contrib-knx-ultimate/knxUltimateHueController:knxUltimateHueController.legacy_node_notice\"></span>\n  </div>\n  <div class=\"form-row\" style=\"margin-bottom:10px;\">\n    <span style=\"color:#ff0000\"><i class=\"fa fa-youtube\"></i></span>&nbsp;<a target=\"_blank\" href=\"https://www.youtube.com/playlist?list=PL9Yh1bjbLAYrU8PsVhW4xzEug2WtVFv3E\"><b>KNX-Ultimate video tutorials (YouTube playlist)</b></a>\n  </div>\n  <div class=\"form-row\">\n    <label for=\"node-input-server\">\n      <img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAKnRFWHRDcmVhdGlvbiBUaW1lAEZyIDYgQXVnIDIwMTAgMjE6NTI6MTkgKzAxMDD84aS8AAAAB3RJTUUH3gYYCicNV+4WIQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAACUSURBVHjaY2CgFZg5c+Z/ZEyWAZ8+f/6/ZsWs/xoamqMGkGrA6Wla/1+fVARjEBuGsSoGmY4eZSCNL59d/g8DIDbIAHR14OgFGQByKjIGKX5+6/T///8gGMQGiV1+/B0Fg70GIkD+RMYgxf/O5/7//2MSmAZhkBi6OrgB6Bg5DGB4ajr3f2xqsYYLSDE2THJUDg0AAAqyDVd4tp4YAAAAAElFTkSuQmCC\" />\n      <span data-i18n=\"common.knx_gw\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-server\">\n  </div>\n\n  <div class=\"form-row\">\n    <label for=\"node-input-serverHue\">\n      <img src=\"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg==\"/>\n      <span data-i18n=\"common.hue_bridge\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-serverHue\">\n  </div>\n\n  <div class=\"form-row hue-requires-bridge\">\n    <label for=\"node-input-name\">\n      <i class=\"fa fa-tag\"></i> <span data-i18n=\"common.name\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-name\" placeholder=\"Hue plug name\" style=\"flex:1 1 240px; min-width:240px; max-width:240px;\">\n    <button type=\"button\" class=\"red-ui-button hue-refresh-devices\" style=\"margin-left:6px; color:#1b7d33; border-color:#1b7d33;\">\n      <i class=\"fa fa-sync\"></i>\n    </button>\n    <span class=\"hue-devices-loading\" style=\"margin-left:6px; display:none; color:#1b7d33;\">\n      <i class=\"fa fa-circle-notch fa-spin\"></i>\n    </span>\n  </div>\n\n  <div id=\"tabs\">\n    <ul>\n      <li><a href=\"#tabs-1\"><i class=\"fa-solid fa-toggle-on\"></i> <span data-i18n=\"knxUltimateHuePlug.tabs.switch\"></span></a></li>\n      <li><a href=\"#tabs-2\"><i class=\"fa-solid fa-gear\"></i> <span data-i18n=\"knxUltimateHuePlug.tabs.behaviour\"></span></a></li>\n    </ul>\n\n    <div id=\"tabs-1\">\n      <div class=\"form-tips hue-form-tip hue-knx-section\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHuePlug.switch_info\"></span>\n      </div>\n      <div class=\"form-row hue-knx-section\">\n        <label for=\"node-input-namePlugSwitch\" style=\"width:120px;\">\n          <i class=\"fa fa-play-circle\"></i> <span data-i18n=\"knxUltimateHuePlug.switch_control\"></span>\n        </label>\n        <label for=\"node-input-GAPlugSwitch\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GAPlugSwitch\" placeholder=\"1/1/1\" style=\"width:80px; text-align:left;\">\n        <label for=\"node-input-dptPlugSwitch\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptPlugSwitch\" style=\"width:140px;\"></select>\n        <label for=\"node-input-namePlugSwitch\" style=\"width:60px; text-align:right;\"><span data-i18n=\"knxUltimateHuePlug.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-namePlugSwitch\" style=\"width:200px; text-align:left;\">\n      </div>\n\n      <div class=\"form-row hue-knx-section\">\n        <label for=\"node-input-namePlugState\" style=\"width:120px;\">\n          <i class=\"fa fa-circle-info\"></i> <span data-i18n=\"knxUltimateHuePlug.switch_status\"></span>\n        </label>\n        <label for=\"node-input-GAPlugState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GAPlugState\" placeholder=\"1/1/2\" style=\"width:80px; text-align:left;\">\n        <label for=\"node-input-dptPlugState\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptPlugState\" style=\"width:140px;\"></select>\n        <label for=\"node-input-namePlugState\" style=\"width:60px; text-align:right;\"><span data-i18n=\"knxUltimateHuePlug.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-namePlugState\" style=\"width:200px; text-align:left;\">\n      </div>\n\n      <div class=\"form-tips hue-form-tip hue-knx-section\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHuePlug.power_state_info\"></span>\n      </div>\n      <div class=\"form-row hue-knx-section\">\n        <label for=\"node-input-namePlugPowerState\" style=\"width:120px;\">\n          <i class=\"fa fa-bolt\"></i> <span data-i18n=\"knxUltimateHuePlug.power_state\"></span>\n        </label>\n        <label for=\"node-input-GAPlugPowerState\" style=\"width:20px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GAPlugPowerState\" placeholder=\"1/1/3\" style=\"width:80px; text-align:left;\">\n        <label for=\"node-input-dptPlugPowerState\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptPlugPowerState\" style=\"width:140px;\"></select>\n        <label for=\"node-input-namePlugPowerState\" style=\"width:60px; text-align:right;\"><span data-i18n=\"knxUltimateHuePlug.node-input-name\"></span></label>\n        <input type=\"text\" id=\"node-input-namePlugPowerState\" style=\"width:200px; text-align:left;\">\n      </div>\n    </div>\n\n    <div id=\"tabs-2\">\n      <div class=\"form-row\">\n        <label for=\"node-input-readStatusAtStartup\" style=\"width:220px;\">\n          <i class=\"fa fa-question-circle\"></i> <span data-i18n=\"knxUltimateHuePlug.read_status_startup\"></span>\n        </label>\n        <select id=\"node-input-readStatusAtStartup\" style=\"width:120px;\">\n          <option value=\"yes\" data-i18n=\"knxUltimateHuePlug.opt_yes_emit\"></option>\n          <option value=\"no\" data-i18n=\"knxUltimateHuePlug.opt_no\"></option>\n        </select>\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-enableNodePINS\" style=\"width:220px;\">\n          <i class=\"fa fa-code\"></i> <span data-i18n=\"knxUltimateHuePlug.node_pins\"></span>\n        </label>\n        <select id=\"node-input-enableNodePINS\" style=\"width:120px;\">\n          <option value=\"no\" data-i18n=\"knxUltimateHuePlug.node_pins_hide\"></option>\n          <option value=\"yes\" data-i18n=\"knxUltimateHuePlug.node_pins_show\"></option>\n        </select>\n        <div class=\"form-tips hue-form-tip\" style=\"margin-left:4px; display:none;\">\n          <i class=\"fa fa-circle-info\"></i>\n          <span data-i18n=\"knxUltimateHuePlug.node_pins_help\"></span>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <input type=\"hidden\" id=\"node-input-hueDevice\">",
     "button": "<!-- Canonical private HUE Controller template: button. -->\n<div class=\"form-row hue-legacy-controller-notice\" role=\"note\" style=\"box-sizing:border-box; padding:10px 12px; margin-bottom:14px; border-left:4px solid #d79b00; background:#fff8df; color:#4d3a00;\">\n    <i class=\"fa fa-exclamation-triangle\" aria-hidden=\"true\" style=\"color:#a15c00; margin-right:6px;\"></i>\n    <span data-i18n=\"node-red-contrib-knx-ultimate/knxUltimateHueController:knxUltimateHueController.legacy_node_notice\"></span>\n  </div>\n  <div class=\"form-row\" style=\"margin-bottom:10px;\">\n    <span style=\"color:#ff0000\"><i class=\"fa fa-youtube\"></i></span>&nbsp;<a target=\"_blank\" href=\"https://www.youtube.com/playlist?list=PL9Yh1bjbLAYrU8PsVhW4xzEug2WtVFv3E\"><b>KNX-Ultimate video tutorials (YouTube playlist)</b></a>\n  </div>\n  <div class=\"form-row\">\n    <label for=\"node-input-server\">\n      <img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAKnRFWHRDcmVhdGlvbiBUaW1lAEZyIDYgQXVnIDIwMTAgMjE6NTI6MTkgKzAxMDD84aS8AAAAB3RJTUUH3gYYCicNV+4WIQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAACUSURBVHjaY2CgFZg5c+Z/ZEyWAZ8+f/6/ZsWs/xoamqMGkGrA6Wla/1+fVARjEBuGsSoGmY4eZSCNL59d/g8DIDbIAHR14OgFGQByKjIGKX5+6/T///8gGMQGiV1+/B0Fg70GIkD+RMYgxf/O5/7//2MSmAZhkBi6OrgB6Bg5DGB4ajr3f2xqsYYLSDE2THJUDg0AAAqyDVd4tp4YAAAAAElFTkSuQmCC\" />\n      <span data-i18n=\"common.knx_gw\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-server\">\n  </div>\n\n  <div class=\"form-row\">\n    <label for=\"node-input-serverHue\">\n      <img src=\"data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg==\"/>\n      <span data-i18n=\"common.hue_bridge\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-serverHue\">\n  </div>\n\n  <div class=\"form-row hue-requires-bridge\">\n    <label for=\"node-input-name\">\n      <i class=\"fa fa-tag\"></i> <span data-i18n=\"knxUltimateHueButton.hue_sensor\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-name\" placeholder=\"Hue button\" style=\"flex:1 1 240px; min-width:240px; max-width:240px;\">\n    <button type=\"button\" class=\"red-ui-button hue-refresh-devices\" style=\"margin-left:6px; color:#1b7d33; border-color:#1b7d33;\">\n      <i class=\"fa fa-sync\"></i>\n    </button>\n    <span class=\"hue-devices-loading\" style=\"margin-left:6px; display:none; color:#1b7d33;\">\n      <i class=\"fa fa-circle-notch fa-spin\"></i>\n    </span>\n  </div>\n\n  <div id=\"hue-button-tabs\">\n    <ul>\n      <li><a href=\"#hue-button-tab-switch\"><i class=\"fa fa-toggle-on\"></i> <span data-i18n=\"knxUltimateHueButton.tabs.switch\"></span></a></li>\n      <li><a href=\"#hue-button-tab-dim\"><i class=\"fa fa-sun\"></i> <span data-i18n=\"knxUltimateHueButton.tabs.dim\"></span></a></li>\n      <li><a href=\"#hue-button-tab-behaviour\"><i class=\"fa fa-gear\"></i> <span data-i18n=\"knxUltimateHueButton.tabs.behaviour\"></span></a></li>\n    </ul>\n\n    <div id=\"hue-button-tab-switch\">\n      <div class=\"form-tips hue-form-tip hue-knx-section\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHueButton.switch_info\"></span>\n      </div>\n      <div class=\"form-row hue-knx-section\">\n        <label for=\"node-input-GAshort_release\" style=\"width:70px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GAshort_release\" style=\"width:80px; text-align:left;\" placeholder=\"1/1/1\">\n        <label for=\"node-input-dptshort_release\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptshort_release\" style=\"width:120px;\"></select>\n        <label for=\"node-input-nameshort_release\" style=\"width:50px; text-align:right;\"><span data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameshort_release\" style=\"flex:1 1 140px; min-width:120px; text-align:left;\" placeholder=\"Switch action\">\n      </div>\n      <div class=\"form-row hue-knx-section hue-status-row\">\n        <label for=\"node-input-GAshort_releaseStatus\" style=\"width:70px;\"><span data-i18n=\"knxUltimateHueButton.switch_status\"></span></label>\n        <input type=\"text\" id=\"node-input-GAshort_releaseStatus\" style=\"width:80px; text-align:left;\" placeholder=\"1/1/2\">\n        <label for=\"node-input-dptshort_releaseStatus\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptshort_releaseStatus\" style=\"width:120px;\"></select>\n        <label for=\"node-input-nameshort_releaseStatus\" style=\"width:50px; text-align:right;\"><span data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameshort_releaseStatus\" style=\"flex:1 1 140px; min-width:120px; text-align:left;\" placeholder=\"Switch status\">\n      </div>\n    </div>\n\n    <div id=\"hue-button-tab-dim\">\n      <div class=\"form-tips hue-form-tip hue-knx-section\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHueButton.dim_info\"></span>\n      </div>\n      <div class=\"form-row hue-knx-section\">\n        <label for=\"node-input-GArepeat\" style=\"width:70px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GArepeat\" style=\"width:80px; text-align:left;\" placeholder=\"1/1/3\">\n        <label for=\"node-input-dptrepeat\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptrepeat\" style=\"width:120px;\"></select>\n        <label for=\"node-input-nameDim\" style=\"width:50px; text-align:right;\"><span data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-nameDim\" style=\"flex:1 1 140px; min-width:120px; text-align:left;\" placeholder=\"Dim action\">\n      </div>\n    </div>\n\n    <div id=\"hue-button-tab-behaviour\">\n      <div class=\"form-tips hue-form-tip\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHueButton.behaviour_info\"></span>\n      </div>\n      <div class=\"form-row\">\n        <input type=\"checkbox\" id=\"node-input-toggleValues\" style=\"width:auto;\">\n        <label for=\"node-input-toggleValues\" style=\"flex:1 1 auto;\">\n          <span data-i18n=\"knxUltimateHueButton.toggle_values\"></span>\n        </label>\n      </div>\n      <div class=\"form-row hue-status-row\" style=\"margin-left:24px;\">\n        <span data-i18n=\"knxUltimateHueButton.toggle_values_hint\"></span>\n      </div>\n      <div class=\"hue-fixed-values\" style=\"margin-top:8px;\">\n        <div class=\"form-row\">\n          <label for=\"node-input-switchSend\" style=\"width:130px;\"><span data-i18n=\"knxUltimateHueButton.switch_send\"></span></label>\n          <input type=\"text\" id=\"node-input-switchSend\" style=\"width:160px;\">\n        </div>\n        <div class=\"form-row\">\n          <label for=\"node-input-dimSend\" style=\"width:130px;\"><span data-i18n=\"knxUltimateHueButton.dim_send\"></span></label>\n          <input type=\"text\" id=\"node-input-dimSend\" style=\"width:160px;\">\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-tips hue-form-tip hue-output-info\" style=\"display:none;\">\n    <i class=\"fa fa-circle-info\"></i>\n    <span data-i18n=\"knxUltimateHueButton.output_info\"></span>\n  </div>\n\n  <input type=\"hidden\" id=\"node-input-hueDevice\">",
     "relative_rotary": "<!-- Canonical private HUE Controller template: relative_rotary. -->\n<div class=\"form-row hue-legacy-controller-notice\" role=\"note\" style=\"box-sizing:border-box; padding:10px 12px; margin-bottom:14px; border-left:4px solid #d79b00; background:#fff8df; color:#4d3a00;\">\n    <i class=\"fa fa-exclamation-triangle\" aria-hidden=\"true\" style=\"color:#a15c00; margin-right:6px;\"></i>\n    <span data-i18n=\"node-red-contrib-knx-ultimate/knxUltimateHueController:knxUltimateHueController.legacy_node_notice\"></span>\n  </div>\n  <div class=\"form-row\" style=\"margin-bottom:10px;\">\n    <span style=\"color:#ff0000\"><i class=\"fa fa-youtube\"></i></span>&nbsp;<a target=\"_blank\" href=\"https://www.youtube.com/playlist?list=PL9Yh1bjbLAYrU8PsVhW4xzEug2WtVFv3E\"><b>KNX-Ultimate video tutorials (YouTube playlist)</b></a>\n  </div>\n  <div class=\"form-row\">\n    <label for=\"node-input-server\">\n      <img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAKnRFWHRDcmVhdGlvbiBUaW1lAEZyIDYgQXVnIDIwMTAgMjE6NTI6MTkgKzAxMDD84aS8AAAAB3RJTUUH3gYYCicNV+4WIQAAAAlwSFlzAAALEgAACxIB0t1+/AAAAARnQU1BAACxjwv8YQUAAACUSURBVHjaY2CgFZg5c+Z/ZEyWAZ8+f/6/ZsWs/xoamqMGkGrA6Wla/1+fVARjEBuGsSoGmY4eZSCNL59d/g8DIDbIAHR14OgFGQByKjIGKX5+6/T///8gGMQGiV1+/B0Fg70GIkD+RMYgxf/O5/7//2MSmAZhkBi6OrgB6Bg5DGB4ajr3f2xqsYYLSDE2THJUDg0AAAqyDVd4tp4YAAAAAElFTkSuQmCC\" />\n      <span data-i18n=\"common.knx_gw\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-server\">\n  </div>\n\n  <div class=\"form-row\">\n    <label for=\"node-input-serverHue\">\n      <img src=\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg==\"/>\n      <span data-i18n=\"common.hue_bridge\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-serverHue\">\n  </div>\n\n  <div class=\"form-row hue-requires-bridge\">\n    <label for=\"node-input-name\">\n      <i class=\"fa fa-rotate-right\"></i> <span data-i18n=\"knxUltimateHueTapDial.hue_device\"></span>\n    </label>\n    <input type=\"text\" id=\"node-input-name\" placeholder=\"Hue Tap dial\" style=\"flex:1 1 240px; min-width:240px; max-width:240px;\">\n    <button type=\"button\" class=\"red-ui-button hue-refresh-devices\" style=\"margin-left:6px; color:#1b7d33; border-color:#1b7d33;\">\n      <i class=\"fa fa-sync\"></i>\n    </button>\n    <span class=\"hue-devices-loading\" style=\"margin-left:6px; display:none; color:#1b7d33;\">\n      <i class=\"fa fa-circle-notch fa-spin\"></i>\n    </span>\n  </div>\n\n  <div id=\"hue-tapdial-tabs\">\n    <ul>\n      <li><a href=\"#hue-tapdial-tab-mapping\"><i class=\"fa fa-map\"></i> <span data-i18n=\"knxUltimateHueTapDial.tabs.mapping\"></span></a></li>\n      <li><a href=\"#hue-tapdial-tab-behaviour\"><i class=\"fa fa-gear\"></i> <span data-i18n=\"knxUltimateHueTapDial.tabs.behaviour\"></span></a></li>\n    </ul>\n\n    <div id=\"hue-tapdial-tab-mapping\">\n      <div class=\"form-tips hue-form-tip hue-knx-section\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHueTapDial.mapping_info\"></span>\n      </div>\n      <div class=\"form-row hue-knx-section\">\n        <label for=\"node-input-GArepeat\" style=\"width:70px;\"><span data-i18n=\"common.ga\"></span></label>\n        <input type=\"text\" id=\"node-input-GArepeat\" placeholder=\"1/1/1\" style=\"width:80px; text-align:left;\">\n        <label for=\"node-input-dptrepeat\" style=\"width:40px; text-align:right;\"><span data-i18n=\"common.dpt\"></span></label>\n        <select id=\"node-input-dptrepeat\" style=\"width:130px;\"></select>\n        <label for=\"node-input-namerepeat\" style=\"width:50px; text-align:right;\"><span data-i18n=\"common.name\"></span></label>\n        <input type=\"text\" id=\"node-input-namerepeat\" style=\"flex:1 1 140px; min-width:120px; text-align:left;\" placeholder=\"Rotation\">\n      </div>\n    </div>\n\n    <div id=\"hue-tapdial-tab-behaviour\">\n      <div class=\"form-tips hue-form-tip\">\n        <i class=\"fa fa-circle-info\"></i>\n        <span data-i18n=\"knxUltimateHueTapDial.behaviour_info\"></span>\n      </div>\n      <div class=\"form-row\">\n        <label for=\"node-input-enableNodePINS\" style=\"width:220px;\">\n          <i class=\"fa fa-code\"></i> <span data-i18n=\"knxUltimateHueTapDial.node_pins\"></span>\n        </label>\n        <select id=\"node-input-enableNodePINS\" style=\"width:200px;\">\n          <option value=\"yes\" data-i18n=\"knxUltimateHueTapDial.node_pins_show\"></option>\n          <option value=\"no\" data-i18n=\"knxUltimateHueTapDial.node_pins_hide\"></option>\n        </select>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"form-tips hue-form-tip hue-output-info\" style=\"display:none;\">\n    <i class=\"fa fa-circle-info\"></i>\n    <span data-i18n=\"knxUltimateHueTapDial.output_info\"></span>\n  </div>\n\n  <input type=\"hidden\" id=\"node-input-hueDevice\">",