node-red-contrib-knx-ultimate 2.2.25 → 2.2.27

package/nodes/knxUltimateHueLight.html

@@ -1,107 +1,14 @@
 <!-- <script type="application/javascript;charset=utf-8" src="https://kit.fontawesome.com/11f26b4500.js" crossorigin="anonymous"></script>
 <script type="application/javascript;charset=utf-8" src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script> -->
+
+'use strict'
 <script type="text/javascript" src="resources/node-red-contrib-knx-ultimate/11f26b4500.js"></script>
 
 <script type="text/javascript">
+  (function () {
 
-  RED.nodes.registerType("knxUltimateHueLight", {
-    category: "KNX Ultimate",
-    color: "#C0C7E9",
-    defaults: {
-      //buttonState: {value: true},
-      server: { type: "knxUltimate-config", required: false },
-      serverHue: { type: "hue-config", required: true },
-      name: { value: "" },
-
-      nameLightSwitch: { value: "" },
-      GALightSwitch: { value: "" },
-      dptLightSwitch: { value: "" },
-
-      nameLightState: { value: "" },
-      GALightState: { value: "" },
-      dptLightState: { value: "" },
-
-      nameLightDIM: { value: "" },
-      GALightDIM: { value: "" },
-      dptLightDIM: { value: "" },
-
-      nameLightColor: { value: "" },
-      GALightColor: { value: "" },
-      dptLightColor: { value: "" },
-
-      nameLightColorState: { value: "" },
-      GALightColorState: { value: "" },
-      dptLightColorState: { value: "" },
-
-      nameLightHSV: { value: "" },
-      GALightHSV: { value: "" },
-      dptLightHSV: { value: "" },
-
-      nameLightHSVPercentage: { value: "" },
-      GALightHSVPercentage: { value: "" },
-      dptLightHSVPercentage: { value: "" },
-
-      nameLightHSVState: { value: "" },
-      GALightHSVState: { value: "" },
-      dptLightHSVState: { value: "" },
-
-      nameLightBrightness: { value: "" },
-      GALightBrightness: { value: "" },
-      dptLightBrightness: { value: "" },
-
-      nameLightBrightnessState: { value: "" },
-      GALightBrightnessState: { value: "" },
-      dptLightBrightnessState: { value: "" },
-
-      nameLightBlink: { value: "" },
-      GALightBlink: { value: "" },
-      dptLightBlink: { value: "" },
-
-      nameLightColorCycle: { value: "" },
-      GALightColorCycle: { value: "" },
-      dptLightColorCycle: { value: "" },
-
-      nameDaylightSensor: { value: "" },
-      GADaylightSensor: { value: "" },
-      dptDaylightSensor: { value: "" },
-
-      nameLightKelvin: { value: "" },
-      GALightKelvin: { value: "" },
-      dptLightKelvin: { value: "" },
-
-      nameLightKelvinState: { value: "" },
-      GALightKelvinState: { value: "" },
-      dptLightKelvinState: { value: "" },
-
-      specifySwitchOnBrightness: { value: "temperature" },
-      colorAtSwitchOnDayTime: { value: '{"kelvin":3000, "brightness":100 }' },
-
-      enableDayNightLighting: { value: "no" },
-      colorAtSwitchOnNightTime: { value: '{ "kelvin":2700, "brightness":20 }' },
-
-      invertDayNight: { value: false },
-
-      updateKNXBrightnessStatusOnHUEOnOff: { value: "no" },
-      dimSpeed: { value: 5000, required: false },
-      minDimLevelLight: { value: 10, required: false },
-      maxDimLevelLight: { value: 100, required: false },
-      readStatusAtStartup: { value: "yes" },
-      enableNodePINS: { value: "no" },
-
-      outputs: { value: 0 },
-      inputs: { value: 0 },
-
-      hueDevice: { value: "" },
-    },
-    inputs: 0,
-    outputs: 0,
-    icon: "node-hue-icon.svg",
-    label: function () {
-      return this.name;
-    },
-    paletteLabel: "Hue Light",
-    oneditprepare: function () {
-      var node = this;
+    function onEditPrepare(node) {
+      // var node = node;
       var oNodeServer = RED.nodes.node($("#node-input-server").val()); // Store the config-node
       var oNodeServerHue = RED.nodes.node($("#node-input-serverHue").val()); // Store the config-node
 
@@ -126,24 +33,26 @@
       }
       // ################################################################
 
+
       $("#tabs").tabs(); // Tabs gestione KNX
 
+
       // 19/02/2020 Used to get the server sooner als deploy.
       $("#node-input-server").change(function () {
         try {
-          oNodeServer = RED.nodes.node($(this).val());
+          oNodeServer = RED.nodes.node($(node).val());
         } catch (error) { }
       });
       // 19/02/2020 Used to get the server sooner als deploy.
       $("#node-input-serverHue").change(function () {
         try {
-          oNodeServerHue = RED.nodes.node($(this).val());
+          oNodeServerHue = RED.nodes.node($(node).val());
         } catch (error) { }
       });
 
       // 31/03/2020 Search Helper
       function fullSearch(sourceText, searchString) {
-        // This searches for all words in a string
+        // node searches for all words in a string
         var aSearchWords = searchString.toLowerCase().split(" ");
         var i = 0;
         for (let index = 0; index < aSearchWords.length; index++) {
@@ -155,6 +64,7 @@
       function getDPT(_dpt, _destinationWidget) {
         // DPT Switch command
         // ########################
+        $(_destinationWidget).empty();
         $.getJSON("knxUltimateDpts", (data) => {
           data.forEach((dpt) => {
             if (dpt.value.startsWith(_dpt)) {
@@ -264,11 +174,138 @@
       getGroupAddress("#node-input-GALightKelvinState", "#node-input-nameLightKelvinState", "#node-input-dptLightKelvinState", " 9.002");
 
 
+      // Get the HUE capabilities to enable/disable UI parts
+      $.getJSON("knxUltimateGetLightObject?id=" + $("#node-input-hueDevice").val().split("#")[0], (data) => {
+        let oLight = data;
+        // Check if grouped, to hide/show the "Get current" buttons
+        if (oLight.type === "grouped_light") {
+          $("#tabs").tabs("enable", "#tabs-4");
+          $("#tabs").tabs("enable", "#tabs-3");
+          $("#tabs").tabs("enable", "#tabs-2");
+          $("#getColorAtSwitchOnDayTimeButton").show();
+          $("#getColorAtSwitchOnNightTimeButton").show();
+          $("#node-input-specifySwitchOnBrightness").empty().append(
+            $("<option>")
+              .val("no")
+              .text("Last status")
+          ).append(
+            $("<option>")
+              .val("yes")
+              .text("Select color")
+          ).append(
+            $("<option>")
+              .val("temperature")
+              .text("Select temperature and brightness")
+          );
+          $("#node-input-enableDayNightLighting").empty().append(
+            $("<option>")
+              .val("no")
+              .text("No")
+          ).append(
+            $("<option>")
+              .val("yes")
+              .text("Select color")
+          ).append(
+            $("<option>")
+              .val("temperature")
+              .text("Select temperature and brightness")
+          );
+          $("#node-input-specifySwitchOnBrightness").val(node.specifySwitchOnBrightness).trigger('change');
+          $("#node-input-enableDayNightLighting").val(node.enableDayNightLighting).trigger('change');
+          return;
+        } else {
+
+          $("#getColorAtSwitchOnDayTimeButton").show();
+          $("#getColorAtSwitchOnNightTimeButton").show();
+          $("#node-input-specifySwitchOnBrightness").empty().append(
+            $("<option>")
+              .val("no")
+              .text("Last status")
+          );
+          $("#node-input-enableDayNightLighting").empty().append(
+            $("<option>")
+              .val("no")
+              .text("No")
+          );
+        }
+        $("#tabs").tabs("disable", "#tabs-4");
+        $("#tabs").tabs("disable", "#tabs-3");
+        $("#tabs").tabs("disable", "#tabs-2");
+        $("#divColorsAtSwitchOn").hide();
+        $("#divColorsAtSwitchOnNightTime").hide();
+        $("#divTemperatureAtSwitchOn").hide();
+        $("#divTemperatureAtSwitchOnNightTime").hide();
+        $("#divColorCycle").hide();
+        $("#divUpdateKNXBrightnessStatusOnHUEOnOff").hide();
+        $("#divMinMaxBrightness").hide();
+        $("#comboTemperatureAtSwitchOn").hide();
+        $("#comboTemperatureAtSwitchOnNightTime").hide();
+
+        // Enable options/tabs one by one
+        if (oLight.color !== undefined) {
+          $("#tabs").tabs("enable", "#tabs-4");
+          $("#divColorsAtSwitchOn").show();
+          $("#divColorsAtSwitchOnNightTime").show();
+          $("#divColorCycle").show();
+          $("#node-input-specifySwitchOnBrightness").append(
+            $("<option>")
+              .val("yes")
+              .text("Select color")
+          );
+          $("#node-input-enableDayNightLighting").append(
+            $("<option>")
+              .val("yes")
+              .text("Select color")
+          );
+        }
+        // Check temperature (if the light supports temperature, it support dimming as well)
+        if (oLight.color_temperature !== undefined) {
+          $("#tabs").tabs("enable", "#tabs-3");
+          $("#tabs").tabs("enable", "#tabs-2");
+          $("#node-input-specifySwitchOnBrightness").append(
+            $("<option>")
+              .val("temperature")
+              .text("Select temperature and brightness")
+          );
+          $("#node-input-enableDayNightLighting").append(
+            $("<option>")
+              .val("temperature")
+              .text("Select temperature and brightness")
+          );
+          $("#divTemperatureAtSwitchOn").show();
+          $("#divTemperatureAtSwitchOnNightTime").show();
+          $("#divUpdateKNXBrightnessStatusOnHUEOnOff").show();
+          $("#divMinMaxBrightness").show();
+          $("#comboTemperatureAtSwitchOn").show();
+          $("#comboTemperatureAtSwitchOnNightTime").show();
+        } else {
+          $("#tabs").tabs("enable", "#tabs-2");
+          $("#node-input-specifySwitchOnBrightness").append(
+            $("<option>")
+              .val("temperature")
+              .text("Select brightness")
+          );
+          $("#node-input-enableDayNightLighting").append(
+            $("<option>")
+              .val("temperature")
+              .text("Select brightness")
+          );
+          $("#comboTemperatureAtSwitchOn").val(0);
+          $("#comboTemperatureAtSwitchOnNightTime").val(0);
+          $("#divTemperatureAtSwitchOn").show();
+          $("#divTemperatureAtSwitchOnNightTime").show();
+          $("#divUpdateKNXBrightnessStatusOnHUEOnOff").show();
+          $("#divMinMaxBrightness").show();
+        }
+        $("#node-input-specifySwitchOnBrightness").val(node.specifySwitchOnBrightness).trigger('change');
+        $("#node-input-enableDayNightLighting").val(node.enableDayNightLighting).trigger('change');
+      });
+
       // Show/Hide the div of the color at swich on
-      if (this.specifySwitchOnBrightness === "yes") {
+      if (node.specifySwitchOnBrightness === "yes") {
         $("#divColorsAtSwitchOn").show();
         $("#divTemperatureAtSwitchOn").hide();
-      } else if (this.specifySwitchOnBrightness === "temperature") {
+      } else if (node.specifySwitchOnBrightness === "temperature") {
         $("#divColorsAtSwitchOn").hide();
         $("#divTemperatureAtSwitchOn").show();
       } else {
@@ -291,12 +328,12 @@
       });
 
       // Show/Hide and enable/disable day/night Lighting behaviour
-      if (this.enableDayNightLighting === "yes") {
+      if (node.enableDayNightLighting === "yes") {
         $("#divEnableDayNightLighting").show();
         $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
         $("#divColorsAtSwitchOnNightTime").show();
         $("#divTemperatureAtSwitchOnNightTime").hide();
-      } else if (this.enableDayNightLighting === "temperature") {
+      } else if (node.enableDayNightLighting === "temperature") {
         $("#divEnableDayNightLighting").show();
         $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
         $("#divColorsAtSwitchOnNightTime").hide();
@@ -313,7 +350,7 @@
           $("#divColorsAtSwitchOnNightTime").show();
           $("#divTemperatureAtSwitchOnNightTime").hide();
           blinkBackground("#colorPickerNight")
-          $("#getColorAtSwitchOnDayTimeButton").text("Get again");
+          $("#getColorAtSwitchOnDayTimeButton").text("Get current");
         } else if ($("#node-input-enableDayNightLighting").val() === "temperature") {
           $("#divEnableDayNightLighting").show();
           $("#divCCSBoxAtNightLighting").css({ border: "1px solid dimgrey", "border-radius": "12px", padding: "5px" }); // Add little box to better understand the property page
@@ -325,81 +362,6 @@
         }
       });
 
-
-
-      // Autocomplete suggestion with HUE Lights
-      $("#node-input-name").autocomplete({
-        minLength: 1,
-        source: function (request, response) {
-          $.getJSON("KNXUltimateGetResourcesHUE?rtype=light&nodeID=" + oNodeServerHue.id, (data) => {
-            response(
-              $.map(data.devices, function (value, key) {
-                //alert(JSON.stringify(value) + " "+ key)
-                var sSearch = value.name;
-                if (!value.name.includes("I'm still connecting")) {
-                  if (fullSearch(sSearch, request.term)) {
-                    return {
-                      hueDevice: value.id,
-                      value: value.name,
-                    };
-                  } else {
-                    return null;
-                  }
-                } else {
-                  return {
-                    hueDevice: value.id,
-                    value: value.name,
-                  };
-                }
-              })
-            );
-          });
-        },
-        select: function (event, ui) {
-          // Distinguish between group of lights an single light.
-          if (ui.item.value.toLowerCase().startsWith("grouped_light")) {
-            $("#node-input-hueDevice").val(ui.item.hueDevice + "#grouped_light");
-            $("#getColorAtSwitchOnDayTimeButton").hide();
-            $("#getColorAtSwitchOnNightTimeButton").hide();
-          } else {
-            $("#node-input-hueDevice").val(ui.item.hueDevice + "#light");
-            $("#getColorAtSwitchOnDayTimeButton").show();
-            $("#getColorAtSwitchOnNightTimeButton").show();
-          }
-          $("#tabs").show();
-        },
-      });
-
-      // Get the HUE capabilities to enable/disable UI parts
-      $.getJSON("KNXUltimateGetResourcesHUE?rtype=light&nodeID=" + oNodeServerHue.id, (data) => {
-        data.devices.forEach((element) => {
-          if (element.id === this.hueDevice.split("#")[0] && element.deviceObject !== undefined) {
-            // Check dimming
-            if (element.deviceObject.dimming === undefined) {
-              $("#tabs").tabs("disable", "#tabs-2");
-              $("#divColorsAtSwitchOn").hide();
-              $("#divColorCycle").hide();
-            }
-            // Check color
-            if (element.deviceObject.color_temperature === undefined) $("#tabs").tabs("disable", "#tabs-3");
-            if (element.deviceObject.color === undefined) {
-              $("#tabs").tabs("disable", "#tabs-4");
-              $("#divColorsAtSwitchOn").hide();
-              $("#divColorCycle").hide();
-            }
-            // Check if grouped, to hide/show the "Get current" buttons
-            if (element.deviceObject.type === "grouped_light") {
-              $("#getColorAtSwitchOnDayTimeButton").hide();
-              $("#getColorAtSwitchOnNightTimeButton").hide();
-            } else {
-              $("#getColorAtSwitchOnDayTimeButton").show();
-              $("#getColorAtSwitchOnNightTimeButton").show();
-            }
-            return;
-          }
-        });
-      });
-
       $("#getColorAtSwitchOnDayTimeButton").on("click", function () {
         $("#getColorAtSwitchOnDayTimeButton").text("Wait...");
         let jRet;
@@ -429,7 +391,7 @@
       });
 
       // Fill options for minDimLevel and maxDimLevel and comboBrightnessAtSwitchOn (for color brightness at switch on, with temperature toghedher)
-      for (let index = 0; index <= 100; index += 5) {
+      for (let index = 100; index >= 0; index -= 5) {
         if (index === 0) {
           $("#node-input-minDimLevelLight").append($("<option>").val(index).text(index.toString() + "% (Switch Off)"));
           $("#comboBrightnessAtSwitchOn").append($("<option>").val(index).text(index.toString() + "% (Switch Off)"));
@@ -472,16 +434,18 @@
 
       // Calculate kelvin/color
       let json;
-      this.colorAtSwitchOnDayTime = this.colorAtSwitchOnDayTime.replace("geen", "green"); // Old bug in "geen" property
-      this.colorAtSwitchOnNightTime = this.colorAtSwitchOnNightTime.replace("geen", "green"); // Old bug in "geen" property
+      node.colorAtSwitchOnDayTime = node.colorAtSwitchOnDayTime.replace("geen", "green"); // Old bug in "geen" property
+      node.colorAtSwitchOnNightTime = node.colorAtSwitchOnNightTime.replace("geen", "green"); // Old bug in "geen" property
       try {
-        json = JSON.parse(this.colorAtSwitchOnDayTime);
-      } catch (error) { }
+        json = JSON.parse(node.colorAtSwitchOnDayTime);
+      } catch (error) {
+        console.log("json = JSON.parse(node.colorAtSwitchOnDayTime) in HTML: " + error.message)
+      }
       if (json !== undefined && json.kelvin !== undefined) {
         // Kelvin
         $("#comboTemperatureAtSwitchOn").val(json.kelvin);
         $("#comboBrightnessAtSwitchOn").val(json.brightness);
-        if (this.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('temperature'); // Adjust in case of mismatch (from old geen bug)
+        if (node.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('temperature'); // Adjust in case of mismatch (from old geen bug)
       } else if (json !== undefined && json.red !== undefined) {
         // Must transform RGB into HTML HEX color
         try {
@@ -489,22 +453,22 @@
         } catch (error) {
         }
         $("#colorPickerDay").val($("#node-input-colorAtSwitchOnDayTime").val());
-        if (this.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('yes'); // Adjust in case of mismatch (from old geen bug)
+        if (node.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('yes'); // Adjust in case of mismatch (from old geen bug)
       } else {
         // It's already an HEX color
-        $("#colorPickerDay").val(this.colorAtSwitchOnDayTime);
-        if (this.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('yes'); // Adjust in case of mismatch (from old geen bug)
+        $("#colorPickerDay").val(node.colorAtSwitchOnDayTime);
+        if (node.specifySwitchOnBrightness !== 'no') $("#node-input-specifySwitchOnBrightness").val('yes'); // Adjust in case of mismatch (from old geen bug)
       }
       //Night
       json = undefined;
       try {
-        json = JSON.parse(this.colorAtSwitchOnNightTime);
+        json = JSON.parse(node.colorAtSwitchOnNightTime);
       } catch (error) { }
       if (json !== undefined && json.kelvin !== undefined) {
         // Kelvin
         $("#comboTemperatureAtSwitchOnNightTime").val(json.kelvin);
         $("#comboBrightnessAtSwitchOnNightTime").val(json.brightness);
-        if (this.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('temperature'); // Adjust in case of mismatch (from old geen bug)
+        if (node.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('temperature'); // Adjust in case of mismatch (from old geen bug)
       } else if (json !== undefined && json.red !== undefined) {
         // Must transform RGB into HTML HEX color
         try {
@@ -512,11 +476,11 @@
         } catch (error) {
         }
         $("#colorPickerNight").val($("#node-input-colorAtSwitchOnNightTime").val());
-        if (this.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('yes'); // Adjust in case of mismatch (from old geen bug)
+        if (node.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('yes'); // Adjust in case of mismatch (from old geen bug)
       } else {
         // It's already an HEX color
-        $("#colorPickerNight").val(this.colorAtSwitchOnNightTime);
-        if (this.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('yes'); // Adjust in case of mismatch (from old geen bug)
+        $("#colorPickerNight").val(node.colorAtSwitchOnNightTime);
+        if (node.enableDayNightLighting !== 'no') $("#node-input-enableDayNightLighting").val('yes'); // Adjust in case of mismatch (from old geen bug)
       }
 
 
@@ -536,7 +500,7 @@
       });
 
 
-      $("#node-input-minDimLevelLight").val(this.minDimLevelLight);
+      $("#node-input-minDimLevelLight").val(node.minDimLevelLight);
       for (let index = 100; index >= 10; index--) {
         $("#node-input-maxDimLevelLight").append(
           $("<option>")
@@ -544,103 +508,248 @@
             .text(index.toString() + "%")
         );
       }
-      $("#node-input-maxDimLevelLight").val(this.maxDimLevelLight);
+      $("#node-input-maxDimLevelLight").val(node.maxDimLevelLight);
 
-      if (this.hueDevice !== "") $("#tabs").show(); // Light options
+      if (node.hueDevice !== "") $("#tabs").show(); // Light options
 
-    },
-    oneditsave: function () {
-      //RED.sidebar.removeTab("tabNRColor");
-      //RED.sidebar.show("help");
-      if ($("#node-input-enableNodePINS").val() === "yes") {
-        this.outputs = 1;
-        this.inputs = 1;
-      } else {
-        this.outputs = 0;
-        this.inputs = 0;
-      }
-    },
-    oneditcancel: function () {
-      //RED.sidebar.removeTab("tabNRColor");
-      //RED.sidebar.show("help");
+
+
+      // Autocomplete suggestion with HUE Lights
+      $("#node-input-name").autocomplete({
+        minLength: 1,
+        source: function (request, response) {
+          $.getJSON("KNXUltimateGetResourcesHUE?rtype=light&nodeID=" + oNodeServerHue.id, (data) => {
+            response(
+              $.map(data.devices, function (value, key) {
+                //alert(JSON.stringify(value) + " "+ key)
+                var sSearch = value.name;
+                if (!value.name.includes("I'm still connecting")) {
+                  if (fullSearch(sSearch, request.term)) {
+                    return {
+                      hueDevice: value.id,
+                      value: value.name,
+                    };
+                  } else {
+                    return null;
+                  }
+                } else {
+                  return {
+                    hueDevice: value.id,
+                    value: value.name,
+                  };
+                }
+              })
+            );
+          });
+        },
+        select: function (event, ui) {
+          // Distinguish between group of lights an single light.
+          if (ui.item.value.toLowerCase().startsWith("grouped_light")) {
+            $("#node-input-hueDevice").val(ui.item.hueDevice + "#grouped_light");
+          } else {
+            $("#node-input-hueDevice").val(ui.item.hueDevice + "#light");
+          }
+          onEditPrepare(node);
+          $("#tabs").show();
+        },
+      });
     }
-  });
-
-  function rgbHex(red, green, blue, alpha) {
-    const toHex = (red, green, blue, alpha) => ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1) + alpha;
-    const parseCssRgbString = (input) => {
-      const parts = input.replace(/rgba?\(([^)]+)\)/, '$1').split(/[,\s/]+/).filter(Boolean);
-      if (parts.length < 3) {
-        return;
+
+    RED.nodes.registerType("knxUltimateHueLight", {
+      category: "KNX Ultimate",
+      color: "#C0C7E9",
+      defaults: {
+        //buttonState: {value: true},
+        server: { type: "knxUltimate-config", required: false },
+        serverHue: { type: "hue-config", required: true },
+        name: { value: "" },
+
+        nameLightSwitch: { value: "" },
+        GALightSwitch: { value: "" },
+        dptLightSwitch: { value: "" },
+
+        nameLightState: { value: "" },
+        GALightState: { value: "" },
+        dptLightState: { value: "" },
+
+        nameLightDIM: { value: "" },
+        GALightDIM: { value: "" },
+        dptLightDIM: { value: "" },
+
+        nameLightColor: { value: "" },
+        GALightColor: { value: "" },
+        dptLightColor: { value: "" },
+
+        nameLightColorState: { value: "" },
+        GALightColorState: { value: "" },
+        dptLightColorState: { value: "" },
+
+        nameLightHSV: { value: "" },
+        GALightHSV: { value: "" },
+        dptLightHSV: { value: "" },
+
+        nameLightHSVPercentage: { value: "" },
+        GALightHSVPercentage: { value: "" },
+        dptLightHSVPercentage: { value: "" },
+
+        nameLightHSVState: { value: "" },
+        GALightHSVState: { value: "" },
+        dptLightHSVState: { value: "" },
+
+        nameLightBrightness: { value: "" },
+        GALightBrightness: { value: "" },
+        dptLightBrightness: { value: "" },
+
+        nameLightBrightnessState: { value: "" },
+        GALightBrightnessState: { value: "" },
+        dptLightBrightnessState: { value: "" },
+
+        nameLightBlink: { value: "" },
+        GALightBlink: { value: "" },
+        dptLightBlink: { value: "" },
+
+        nameLightColorCycle: { value: "" },
+        GALightColorCycle: { value: "" },
+        dptLightColorCycle: { value: "" },
+
+        nameDaylightSensor: { value: "" },
+        GADaylightSensor: { value: "" },
+        dptDaylightSensor: { value: "" },
+
+        nameLightKelvin: { value: "" },
+        GALightKelvin: { value: "" },
+        dptLightKelvin: { value: "" },
+
+        nameLightKelvinState: { value: "" },
+        GALightKelvinState: { value: "" },
+        dptLightKelvinState: { value: "" },
+
+        specifySwitchOnBrightness: { value: "temperature" },
+        colorAtSwitchOnDayTime: { value: '{"kelvin":3000, "brightness":100 }' },
+
+        enableDayNightLighting: { value: "no" },
+        colorAtSwitchOnNightTime: { value: '{ "kelvin":2700, "brightness":20 }' },
+
+        invertDayNight: { value: false },
+
+        updateKNXBrightnessStatusOnHUEOnOff: { value: "no" },
+        dimSpeed: { value: 5000, required: false },
+        minDimLevelLight: { value: 10, required: false },
+        maxDimLevelLight: { value: 100, required: false },
+        readStatusAtStartup: { value: "yes" },
+        enableNodePINS: { value: "no" },
+
+        outputs: { value: 0 },
+        inputs: { value: 0 },
+
+        hueDevice: { value: "" },
+        hueDeviceObject: { value: {} },
+      },
+      inputs: 0,
+      outputs: 0,
+      icon: "node-hue-icon.svg",
+      label: function () {
+        return this.name;
+      },
+      paletteLabel: "Hue Light (beta)",
+      oneditprepare: function () {
+        onEditPrepare(this);
+      },
+      oneditsave: function () {
+        //RED.sidebar.removeTab("tabNRColor");
+        //RED.sidebar.show("help");
+        if ($("#node-input-enableNodePINS").val() === "yes") {
+          this.outputs = 1;
+          this.inputs = 1;
+        } else {
+          this.outputs = 0;
+          this.inputs = 0;
+        }
+      },
+      oneditcancel: function () {
+        //RED.sidebar.removeTab("tabNRColor");
+        //RED.sidebar.show("help");
       }
+    });
+
+
 
-      const parseValue = (value, max) => {
-        value = value.trim();
 
-        if (value.endsWith('%')) {
-          return Math.min(Number.parseFloat(value) * max / 100, max);
+    function rgbHex(red, green, blue, alpha) {
+      const toHex = (red, green, blue, alpha) => ((blue | green << 8 | red << 16) | 1 << 24).toString(16).slice(1) + alpha;
+      const parseCssRgbString = (input) => {
+        const parts = input.replace(/rgba?\(([^)]+)\)/, '$1').split(/[,\s/]+/).filter(Boolean);
+        if (parts.length < 3) {
+          return;
         }
 
-        return Math.min(Number.parseFloat(value), max);
-      };
+        const parseValue = (value, max) => {
+          value = value.trim();
 
-      const red = parseValue(parts[0], 255);
-      const green = parseValue(parts[1], 255);
-      const blue = parseValue(parts[2], 255);
-      let alpha;
+          if (value.endsWith('%')) {
+            return Math.min(Number.parseFloat(value) * max / 100, max);
+          }
 
-      if (parts.length === 4) {
-        alpha = parseValue(parts[3], 1);
-      }
+          return Math.min(Number.parseFloat(value), max);
+        };
 
-      return [red, green, blue, alpha];
-    };
+        const red = parseValue(parts[0], 255);
+        const green = parseValue(parts[1], 255);
+        const blue = parseValue(parts[2], 255);
+        let alpha;
 
-    let isPercent = (red + (alpha || '')).toString().includes('%');
+        if (parts.length === 4) {
+          alpha = parseValue(parts[3], 1);
+        }
 
-    if (typeof red === 'string' && !green) { // Single string parameter.
-      const parsed = parseCssRgbString(red);
-      if (!parsed) {
-        throw new TypeError('Invalid or unsupported color format.');
+        return [red, green, blue, alpha];
+      };
+
+      let isPercent = (red + (alpha || '')).toString().includes('%');
+
+      if (typeof red === 'string' && !green) { // Single string parameter.
+        const parsed = parseCssRgbString(red);
+        if (!parsed) {
+          throw new TypeError('Invalid or unsupported color format.');
+        }
+
+        isPercent = false;
+        [red, green, blue, alpha] = parsed;
+      } else if (alpha !== undefined) {
+        alpha = Number.parseFloat(alpha);
       }
 
-      isPercent = false;
-      [red, green, blue, alpha] = parsed;
-    } else if (alpha !== undefined) {
-      alpha = Number.parseFloat(alpha);
-    }
+      if (typeof red !== 'number'
+        || typeof green !== 'number'
+        || typeof blue !== 'number'
+        || red > 255
+        || green > 255
+        || blue > 255
+      ) {
+        throw new TypeError('Expected three numbers below 256');
+      }
 
-    if (typeof red !== 'number'
-      || typeof green !== 'number'
-      || typeof blue !== 'number'
-      || red > 255
-      || green > 255
-      || blue > 255
-    ) {
-      throw new TypeError('Expected three numbers below 256');
-    }
+      if (typeof alpha === 'number') {
+        if (!isPercent && alpha >= 0 && alpha <= 1) {
+          alpha = Math.round(255 * alpha);
+        } else if (isPercent && alpha >= 0 && alpha <= 100) {
+          alpha = Math.round(255 * alpha / 100);
+        } else {
+          throw new TypeError(`Expected alpha value (${alpha}) as a fraction or percentage`);
+        }
 
-    if (typeof alpha === 'number') {
-      if (!isPercent && alpha >= 0 && alpha <= 1) {
-        alpha = Math.round(255 * alpha);
-      } else if (isPercent && alpha >= 0 && alpha <= 100) {
-        alpha = Math.round(255 * alpha / 100);
+        alpha = (alpha | 1 << 8).toString(16).slice(1); // eslint-disable-line no-mixed-operators
       } else {
-        throw new TypeError(`Expected alpha value (${alpha}) as a fraction or percentage`);
+        alpha = '';
       }
 
-      alpha = (alpha | 1 << 8).toString(16).slice(1); // eslint-disable-line no-mixed-operators
-    } else {
-      alpha = '';
+      return toHex(red, green, blue, alpha);
     }
 
-    return toHex(red, green, blue, alpha);
-  }
-
+  }())
 
 </script>
 
-
 <script type="text/html" data-template-name="knxUltimateHueLight">
 
 <div class="form-row">
@@ -937,7 +1046,7 @@
         <option value="yes">Yes, and emit KNX telegrams.</option>
       </select>
     </div>
-    <div class="form-row">
+    <div class="form-row" id="divUpdateKNXBrightnessStatusOnHUEOnOff">
       <label style="width:260px;" for="node-input-updateKNXBrightnessStatusOnHUEOnOff">
         <i class="fa fa-tag"></i> KNX Brightness Status
       </label>
@@ -951,9 +1060,9 @@
         <i class="fa fa-tag"></i> Switch on behaviour
       </label>
       <select id="node-input-specifySwitchOnBrightness">
-        <option value="temperature">Select temperature and brightness</option>
-        <option value="yes">Select color</option>
         <option value="no">Last status</option>
+        <!-- <option value="temperature">Select temperature and brightness</option>
+        <option value="yes">Select color</option> -->
       </select>
     </div>
 
@@ -967,8 +1076,8 @@
     <div class="form-row" id="divTemperatureAtSwitchOn" hidden>
       <label for="node-input-colorAtSwitchOnDayTime" style="width:260px">
       </label>
-      <select style="width:180px;" id="comboTemperatureAtSwitchOn"></select>
-      <select  style="width:180px;" id="comboBrightnessAtSwitchOn"></select>      
+      <select style="width:12%;" id="comboTemperatureAtSwitchOn"></select>
+      <select  style="width:25%;" id="comboBrightnessAtSwitchOn"></select>      
     </div>
 
     <div id="divCCSBoxAtNightLighting">
@@ -977,9 +1086,9 @@
           <i class="fa fa-clone"></i> Night Lighting
         </label>
         <select id="node-input-enableDayNightLighting">
-          <option value="temperature">Select temperature and brightness</option>
-          <option value="yes">Select color</option>
           <option value="no">No night lighting</option>
+          <!-- <option value="temperature">Select temperature and brightness</option>
+          <option value="yes">Select color</option> -->
         </select>
       </div>
 
@@ -1027,19 +1136,21 @@
       </label>
       <input type="text" id="node-input-dimSpeed" placeholder='Default is 5000' style="width:260px">
     </div>
-    <div class="form-row">
-      <label for="node-input-minDimLevelLight" style="width:260px;">
-        <i class="fa fa-clone"></i> Min Dim Brightness
-      </label>
-      <select id="node-input-minDimLevelLight">
-        <option value="useHueLightLevel">Use minimum brightness specified in the HUE light</option>
-      </select>
-    </div>
-    <div class="form-row">
-      <label for="node-input-maxDimLevelLight" style="width:260px;">
-        <i class="fa fa-clone"></i> Max Dim Brightness
-      </label>
-      <select id="node-input-maxDimLevelLight"></select>
+    <div id ="divMinMaxBrightness">
+      <div class="form-row">
+        <label for="node-input-minDimLevelLight" style="width:260px;">
+          <i class="fa fa-clone"></i> Min Dim Brightness
+        </label>
+        <select id="node-input-minDimLevelLight">
+          <option value="useHueLightLevel">Use minimum brightness specified in the HUE light</option>
+        </select>
+      </div>
+      <div class="form-row">
+        <label for="node-input-maxDimLevelLight" style="width:260px;">
+          <i class="fa fa-clone"></i> Max Dim Brightness
+        </label>
+        <select id="node-input-maxDimLevelLight"></select>
+      </div>
     </div>
     <div class="form-row">
       <label for="node-input-enableNodePINS" style="width:260px;">
@@ -1056,7 +1167,10 @@
   <br />
   </script>
 
+
 <script type="text/markdown" data-help-name="knxUltimateHueLight">
+
+
 <p>This node lets you control your Philips HUE light and grouped lights and also gets the states of this lights, to be sent to the KNX bus.</p>
 
 **General**
@@ -1140,4 +1254,4 @@ The Dimming function works in **KNX mode `start` and `stop`**. To start dimming,
 [Find it useful?](https://www.paypal.me/techtoday)
 
 <br/>
-</script>-
+</script>