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

package/resources/hueControllerProfiles.js

@@ -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);
 
@@ -1658,6 +1692,7 @@
             },
 
             oneditsave: function () {
+              $(document).off('change.knxUltimateHueLightGateway', '#node-input-server');
               // Return to the info tab
               try {
                 RED.sidebar.show("info");
@@ -1707,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");
@@ -1731,6 +1767,7 @@
               }
             },
             oneditclose: function () {
+              $(document).off('change.knxUltimateHueLightGateway', '#node-input-server');
               if (typeof this.__stopHueLocateSession === 'function') {
                 try { this.__stopHueLocateSession(); } catch (error) { /* empty */ }
               }
@@ -9124,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\">",