node-red-contrib-knx-ultimate 2.0.0 → 2.0.2

package/nodes/knxUltimateHueLight.html

@@ -6,7 +6,7 @@
             //buttonState: {value: true},
             server: { type: "knxUltimate-config", required: true },
             serverHue: { type: "hue-config", required: true },
-            name: { value: "Hue Light" },
+            name: { value: "Hue Light (beta)" },
 
             nameLightSwitch: { value: "" },
             GALightSwitch: { value: "" },
@@ -20,7 +20,23 @@
             GALightDIM: { value: "" },
             dptLightDIM: { value: "" },
 
-            hueLight: { value: "" }
+            nameLightColor: { value: "" },
+            GALightColor: { value: "" },
+            dptLightColor: { value: "" },
+
+            nameLightColorState: { value: "" },
+            GALightColorState: { value: "" },
+            dptLightColorState: { value: "" },
+
+            nameLightBrightness: { value: "" },
+            GALightBrightness: { value: "" },
+            dptLightBrightness: { value: "" },
+
+            nameLightBrightnessState: { value: "" },
+            GALightBrightnessState: { value: "" },
+            dptLightBrightnessState: { value: "" },
+
+            hueDevice: { value: "" }
         },
         inputs: 0,
         outputs: 0,
@@ -28,7 +44,7 @@
         label: function () {
             return (this.name);
         },
-        paletteLabel: "Hue Light (beta)",
+        paletteLabel: "Hue Light",
         // button: {
         //     enabled: function() {
         //         // return whether or not the button is enabled, based on the current
@@ -46,6 +62,7 @@
         oneditprepare: function () {
             var node = this;
             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
 
             // 19/02/2020 Used to get the server sooner als deploy.
             $("#node-input-server").change(function () {
@@ -53,6 +70,12 @@
                     oNodeServer = RED.nodes.node($(this).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());
+                } catch (error) { }
+            });
 
             // 31/03/2020 Search Helper
             function fullSearch(sourceText, searchString) {
@@ -69,9 +92,11 @@
             // ########################
             $.getJSON('knxUltimateDpts', (data) => {
                 data.forEach(dpt => {
-                    $("#node-input-dptLightSwitch").append($("<option></option>")
-                        .attr("value", dpt.value)
-                        .text(dpt.text))
+                    if (dpt.value.startsWith("1.")) {
+                        $("#node-input-dptLightSwitch").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                    }
                 });
                 $("#node-input-dptLightSwitch").val(this.dptLightSwitch)
             })
@@ -84,7 +109,7 @@
                     $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
                         response($.map(data, function (value, key) {
                             var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
-                            if (fullSearch(sSearch, request.term)) {
+                            if (fullSearch(sSearch, request.term + " 1.")) {
                                 return {
                                     label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
                                     value: value.ga // Value
@@ -102,7 +127,6 @@
                     } catch (error) {
                     }
                     $('#node-input-nameLightSwitch').val(sDevName);
-                    $('#node-input-name').val(sDevName);
                     var optVal = $("#node-input-dptLightSwitch option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr('value');
                     // Select the option value 
                     $("#node-input-dptLightSwitch").val(optVal);
@@ -116,10 +140,13 @@
             // ########################
             $.getJSON('knxUltimateDpts', (data) => {
                 data.forEach(dpt => {
-                    $("#node-input-dptLightState").append($("<option></option>")
-                        .attr("value", dpt.value)
-                        .text(dpt.text))
+                    if (dpt.value.startsWith("1.")) {
+                        $("#node-input-dptLightState").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                    }
                 });
+
                 $("#node-input-dptLightState").val(this.dptLightState)
             })
 
@@ -130,7 +157,7 @@
                     $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
                         response($.map(data, function (value, key) {
                             var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
-                            if (fullSearch(sSearch, request.term)) {
+                            if (fullSearch(sSearch, request.term + " 1.")) {
                                 return {
                                     label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
                                     value: value.ga // Value
@@ -159,11 +186,15 @@
             // ########################
             $.getJSON('knxUltimateDpts', (data) => {
                 data.forEach(dpt => {
-                    $("#node-input-dptLightDIM").append($("<option></option>")
-                        .attr("value", dpt.value)
-                        .text(dpt.text))
+                    if (dpt.value === "3.007") {
+                        $("#node-input-dptLightDIM").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                    }
                 });
+
                 $("#node-input-dptLightDIM").val(this.dptLightDIM)
+
             })
 
             // Autocomplete suggestion with ETS csv File
@@ -173,7 +204,7 @@
                     $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
                         response($.map(data, function (value, key) {
                             var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
-                            if (fullSearch(sSearch, request.term)) {
+                            if (fullSearch(sSearch, request.term + " 3.007")) {
                                 return {
                                     label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
                                     value: value.ga // Value
@@ -198,18 +229,186 @@
             });
 
 
+            // DPT dptLightColor and dptLightColorStateƒ
+            // ########################
+            $.getJSON('knxUltimateDpts', (data) => {
+                data.forEach(dpt => {
+                    if (dpt.value === "232.600") {
+                        $("#node-input-dptLightColor").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                        $("#node-input-dptLightColorState").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                    }
+                });
+
+                $("#node-input-dptLightColor").val(this.dptLightColor)
+                $("#node-input-dptLightColorState").val(this.dptLightColorState)
+
+            })
+
+            // Autocomplete suggestion with ETS csv File
+            $("#node-input-GALightColor").autocomplete({
+                minLength: 1,
+                source: function (request, response) {
+                    $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
+                        response($.map(data, function (value, key) {
+                            var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
+                            if (fullSearch(sSearch, request.term + " 232.600")) {
+                                return {
+                                    label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
+                                    value: value.ga // Value
+                                }
+                            } else {
+                                return null;
+                            }
+                        }));
+                    });
+                }, select: function (event, ui) {
+                    // Sets Datapoint and device name automatically
+                    var sDevName = ui.item.label.split("#")[1].trim();
+                    try {
+                        sDevName = sDevName.substr(sDevName.indexOf(")") + 1).trim();
+                    } catch (error) {
+                    }
+                    $('#node-input-nameLightColor').val(sDevName);
+                    var optVal = $("#node-input-dptLightColor option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr('value');
+                    // Select the option value 
+                    $("#node-input-dptLightColor").val(optVal);
+                }
+            });
+
+            // Autocomplete suggestion with ETS csv File
+            $("#node-input-GALightColorState").autocomplete({
+                minLength: 1,
+                source: function (request, response) {
+                    $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
+                        response($.map(data, function (value, key) {
+                            var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
+                            if (fullSearch(sSearch, request.term + " 232.600")) {
+                                return {
+                                    label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
+                                    value: value.ga // Value
+                                }
+                            } else {
+                                return null;
+                            }
+                        }));
+                    });
+                }, select: function (event, ui) {
+                    // Sets Datapoint and device name automatically
+                    var sDevName = ui.item.label.split("#")[1].trim();
+                    try {
+                        sDevName = sDevName.substr(sDevName.indexOf(")") + 1).trim();
+                    } catch (error) {
+                    }
+                    $('#node-input-nameLightColorState').val(sDevName);
+                    var optVal = $("#node-input-dptLightColorState option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr('value');
+                    // Select the option value 
+                    $("#node-input-dptLightColorState").val(optVal);
+                }
+            });
+
+
+
+            // DPT dptLightBrightness and dptLightBrightnessState
+            // ########################
+            $.getJSON('knxUltimateDpts', (data) => {
+                data.forEach(dpt => {
+                    if (dpt.value === "5.001") {
+                        $("#node-input-dptLightBrightness").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                        $("#node-input-dptLightBrightnessState").append($("<option></option>")
+                            .attr("value", dpt.value)
+                            .text(dpt.text))
+                    }
+                });
+
+                $("#node-input-dptLightBrightness").val(this.dptLightBrightness)
+                $("#node-input-dptLightBrightnessState").val(this.dptLightBrightnessState)
+
+            })
+
+            // Autocomplete suggestion with ETS csv File
+            $("#node-input-GALightBrightness").autocomplete({
+                minLength: 1,
+                source: function (request, response) {
+                    $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
+                        response($.map(data, function (value, key) {
+                            var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
+                            if (fullSearch(sSearch, request.term + " 5.001")) {
+                                return {
+                                    label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
+                                    value: value.ga // Value
+                                }
+                            } else {
+                                return null;
+                            }
+                        }));
+                    });
+                }, select: function (event, ui) {
+                    // Sets Datapoint and device name automatically
+                    var sDevName = ui.item.label.split("#")[1].trim();
+                    try {
+                        sDevName = sDevName.substr(sDevName.indexOf(")") + 1).trim();
+                    } catch (error) {
+                    }
+                    $('#node-input-nameLightBrightness').val(sDevName);
+                    var optVal = $("#node-input-dptLightBrightness option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr('value');
+                    // Select the option value 
+                    $("#node-input-dptLightBrightness").val(optVal);
+                }
+            });
+
+            // Autocomplete suggestion with ETS csv File
+            $("#node-input-GALightBrightnessState").autocomplete({
+                minLength: 1,
+                source: function (request, response) {
+                    $.getJSON("knxUltimatecsv?nodeID=" + oNodeServer.id, (data) => {
+                        response($.map(data, function (value, key) {
+                            var sSearch = (value.ga + " (" + value.devicename + ") DPT" + value.dpt);
+                            if (fullSearch(sSearch, request.term + " 5.001")) {
+                                return {
+                                    label: value.ga + " # " + value.devicename + " # " + value.dpt, // Label for Display
+                                    value: value.ga // Value
+                                }
+                            } else {
+                                return null;
+                            }
+                        }));
+                    });
+                }, select: function (event, ui) {
+                    // Sets Datapoint and device name automatically
+                    var sDevName = ui.item.label.split("#")[1].trim();
+                    try {
+                        sDevName = sDevName.substr(sDevName.indexOf(")") + 1).trim();
+                    } catch (error) {
+                    }
+                    $('#node-input-nameLightBrightnessState').val(sDevName);
+                    var optVal = $("#node-input-dptLightBrightnessState option:contains('" + ui.item.label.split("#")[2].trim() + "')").attr('value');
+                    // Select the option value 
+                    $("#node-input-dptLightBrightnessState").val(optVal);
+                }
+            });
+
+
+
+
+
             // Autocomplete suggestion with HUE Lights
-            $("#node-input-hueLight").autocomplete({
+            $("#node-input-name").autocomplete({
                 minLength: 1,
                 source: function (request, response) {
-                    $.getJSON("KNXUltimateGetAllLightsHUE", (data) => {
-                        response($.map(data.lights, function (value, key) {
+                    $.getJSON("KNXUltimateGetDevicesHUE?rtype=light&nodeID=" + oNodeServerHue.id, (data) => {
+                        response($.map(data.devices, function (value, key) {
                             //alert(JSON.stringify(value) + " "+ key)
-                            var sSearch = (value.metadata.name + " (" + value.metadata.archetype + " " + value.type + ") #" + value.id);
+                            var sSearch = (value.name);
                             if (fullSearch(sSearch, request.term)) {
                                 return {
-                                    label: value.metadata.name + " (" + value.metadata.archetype + " " + value.type + ") #" + value.id, // Label for Display
-                                    value: value.metadata.name + " (" + value.metadata.archetype + " " + value.type + ") #" + value.id // Value
+                                    hueDevice: value.id, // Label for Display
+                                    value: value.name // Value
                                 }
                             } else {
                                 return null;
@@ -217,9 +416,8 @@
                         }));
                     });
                 }, select: function (event, ui) {
-                    // Sets the field
-                    var sDevName = ui.item.label;
-                    $('#node-input-hueLight').val(sDevName);
+                    // Sets the fields
+                    $('#node-input-hueDevice').val(ui.item.hueDevice);
                 }
             });
 
@@ -243,32 +441,27 @@
 
 
 <div class="form-row">
-    <b><span data-i18n="knxUltimateHueLight.title"></span></b>&nbsp&nbsp<span style="color:red"
-        data-i18n="[html]knxUltimateHueLight.helplink"></span>
+    <b>HUE Light</b>&nbsp&nbsp<span style="color:red"
+    &nbsp<i class="fa fa-question-circle"></i></span>
+    &nbsp<a target="_blank" href="https://github.com/Supergiovane/node-red-contrib-knx-ultimate/wiki/en-hue-configuration"><u>Configuration</u></a> 
     <br />
+    <p align="center"><img src='https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/hueLight.png'></p>
     <br />
     <label for="node-input-server" >
-        <i class="fa fa-square-o"></i>
-        <span data-i18n="knxUltimateHueLight.advanced.node-input-server"></span>
+        <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"></img>
+        KNX GW
     </label>
     <input type="text" id="node-input-server" />
 </div>
 
 <div class="form-row">
     <label for="node-input-serverHue">
-        <i class="fa fa-lightbulb-o"></i>
-        <span data-i18n="knxUltimateHueLight.advanced.node-input-serverHue"></span>
+        <img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAEKADAAQAAAABAAAAEAAAAAA0VXHyAAABFUlEQVQ4EZWSsWoCQRCG1yiENEFEi6QSkjqWWoqFoBYJ+Br6JHkMn8Iibd4ihQpaJIhWNkry/ZtdGZY78Qa+m39nZ+dm9s4550awglNBluS/gVtAX6KgDclf68w2OThgfR9iT/jnoEv4TtByDThWTCDKW4SSZTf/zj9/eZbN+izTDuKGimu0vPF8B/YN8aC8LmcOj/AAn9CFTEs70Js/oGqy79C69bqJ5XbQI2kGO5N8QL9D08S8zBtBF5ZaVsznpCMoqJnVdjTpb1Db0fwIWmQV6BLXzFOYgA6/gDVfQN9bBWp2J2hdWDPoBV5FrKnAJutHikk/CHHR8i7x4iG7qQ720IYvu3GFbpHjx3pFrOFYkA354z/5bkK826phyAAAAABJRU5ErkJggg=="/>
+        HUE Bridge
     </label>
     <input type="text" id="node-input-serverHue" />
 </div>
 
-<div class="form-row">
-    <label for="node-input-name" >
-        <i class="fa fa-tag"></i>
-        <span data-i18n="knxUltimateHueLight.node-input-name"></span>
-    </label>
-    <input style="width:35%;" type="text" id="node-input-name" data-i18n="[placeholder]knxUltimateHueLight.node-input-name" />
-</div>
 
 <br/>
 <p>
@@ -276,17 +469,19 @@
 </p>
     
 <div class="form-row">
-    <label for="node-input-hueLight" >
-        <i class="fa fa-lightbulb-o"></i>&nbsp<span data-i18n="knxUltimateHueLight.node-input-hueLight"></span></label>
-    <input type="text" id="node-input-hueLight" />
+    <label for="node-input-hueDevice" >
+        <i class="fa fa-play-circle"></i>&nbspName</label>
+    <input type="text" id="node-input-name" placeholder="Enter your hue device name"/>
+    <input type="hidden" id="node-input-hueDevice"/>
 </div>
 
 <br/>
+
+<!-- <p> <img src='https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/knx.png' width='32px'> -> <img src='https://raw.githubusercontent.com/Supergiovane/node-red-contrib-knx-ultimate/master/img/hue.png' width='32px'></p> -->
+
 <p>
-<b>KONNEX</b>
+<b>KNX COMMANDS -> TO PHILIPS HUE</b>
 </p>
-
-<div id="GAandDPT">
     <div class="form-row">
         <label for="node-input-nameLightSwitch" style="width:100px;"><i class="fa fa-play-circle-o"></i> <span data-i18n="knxUltimateHueLight.node-input-nameLightSwitch"></span></label>
 
@@ -300,10 +495,59 @@
         <label for="node-input-nameLightSwitch" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
         <input type="text" id="node-input-nameLightSwitch" style="width:200px;margin-left: 5px; text-align: left;">
     </div>
+    </div>
+        <div class="form-row">
+        <label for="node-input-nameLightDIM" style="width:100px;"><i class="fa fa-play-circle-o"></i>&nbspDimming</label>
+
+        <label for="node-input-GALightDIM" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
+        <input type="text" id="node-input-GALightDIM" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
+       
+        <label for="node-input-dptLightDIM" style="width:40px; margin-left: 0px; text-align: right;">
+            <span data-i18n="knxUltimateHueLight.node-input-dptLightState"></span> </label>
+        <select id="node-input-dptLightDIM" style="width:140px;"></select>
+       
+        <label for="node-input-nameLightDIM" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
+        <input type="text" id="node-input-nameLightDIM" style="width:200px;margin-left: 5px; text-align: left;">
+    </div>
+    </div>
+        <div class="form-row">
+        <label for="node-input-nameLightColor" style="width:100px;"><i class="fa fa-play-circle-o"></i>&nbspColor</label>
+
+        <label for="node-input-GALightColor" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
+        <input type="text" id="node-input-GALightColor" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
+       
+        <label for="node-input-dptLightColor" style="width:40px; margin-left: 0px; text-align: right;">
+            <span data-i18n="knxUltimateHueLight.node-input-dptLightState"></span> </label>
+        <select id="node-input-dptLightColor" style="width:140px;"></select>
+       
+        <label for="node-input-nameLightColor" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
+        <input type="text" id="node-input-nameLightColor" style="width:200px;margin-left: 5px; text-align: left;">
+    </div>
+    </div>
+        </div>
+        <div class="form-row">
+        <label for="node-input-nameLightBrightness" style="width:100px;"><i class="fa fa-play-circle-o"></i>&nbspBrightness</label>
+
+        <label for="node-input-GALightBrightness" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
+        <input type="text" id="node-input-GALightBrightness" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
+       
+        <label for="node-input-dptLightBrightness" style="width:40px; margin-left: 0px; text-align: right;">
+            <span data-i18n="knxUltimateHueLight.node-input-dptLightState"></span> </label>
+        <select id="node-input-dptLightBrightness" style="width:140px;"></select>
+       
+        <label for="node-input-nameLightBrightness" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
+        <input type="text" id="node-input-nameLightBrightness" style="width:200px;margin-left: 5px; text-align: left;">
+    </div>
+
+<br/>
+<p>
+<b>PHILIPS HUE LIGHT STATE -> TO KNX</b>
+</p>
+
     <div class="form-row">
-        <label for="node-input-nameLightState" style="width:100px;"><i class="fa fa-play-circle-o"></i> <span data-i18n="knxUltimateHueLight.node-input-nameLightState"></span></label>
+        <label for="node-input-nameLightState" style="width:100px;"><i class="fa fa-play-circle-o"></i> Switch</label>
 
-        <label for="node-input-GALightState" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
+        <label for="node-input-GALightState" style="width:20px;">GA</label>
         <input type="text" id="node-input-GALightState" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
        
         <label for="node-input-dptLightState" style="width:40px; margin-left: 0px; text-align: right;">
@@ -314,19 +558,83 @@
         <input type="text" id="node-input-nameLightState" style="width:200px;margin-left: 5px; text-align: left;">
     </div>
         <div class="form-row">
-        <label for="node-input-nameLightDIM" style="width:100px;"><i class="fa fa-play-circle-o"></i>&nbsp DIM (3.007)</label>
+        <label for="node-input-nameLightColorState" style="width:100px;"><i class="fa fa-play-circle-o"></i>&nbspColor</label>
 
-        <label for="node-input-GALightDIM" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
-        <input type="text" id="node-input-GALightDIM" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
+        <label for="node-input-GALightColorState" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
+        <input type="text" id="node-input-GALightColorState" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
        
-        <label for="node-input-dptLightDIM" style="width:40px; margin-left: 0px; text-align: right;">
-            <span data-i18n="knxUltimateHueLight.node-input-dptLightDIM"></span> </label>
-        <select id="node-input-dptLightDIM" style="width:140px;"></select>
+        <label for="node-input-dptLightColorState" style="width:40px; margin-left: 0px; text-align: right;">
+            <span data-i18n="knxUltimateHueLight.node-input-dptLightState"></span> </label>
+        <select id="node-input-dptLightColorState" style="width:140px;"></select>
        
-        <label for="node-input-nameLightDIM" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
-        <input type="text" id="node-input-nameLightDIM" style="width:200px;margin-left: 5px; text-align: left;">
+        <label for="node-input-nameLightColorState" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
+        <input type="text" id="node-input-nameLightColorState" style="width:200px;margin-left: 5px; text-align: left;">
     </div>
-</div>
+        </div>
+        <div class="form-row">
+        <label for="node-input-nameLightBrightnessState" style="width:100px;"><i class="fa fa-play-circle-o"></i>&nbspBrightness</label>
+
+        <label for="node-input-GALightBrightnessState" style="width:20px;"><span data-i18n="knxUltimateHueLight.node-input-GALightState"></span></label>
+        <input type="text" id="node-input-GALightBrightnessState" placeholder="Ex: 1/1/1" style="width:70px;margin-left: 5px; text-align: left;">
+       
+        <label for="node-input-dptLightBrightnessState" style="width:40px; margin-left: 0px; text-align: right;">
+            <span data-i18n="knxUltimateHueLight.node-input-dptLightState"></span> </label>
+        <select id="node-input-dptLightBrightnessState" style="width:140px;"></select>
+       
+        <label for="node-input-nameLightBrightnessState" style="width:50px; margin-left: 0px; text-align: right;"><span data-i18n="knxUltimateHueLight.node-input-name"></span></label>
+        <input type="text" id="node-input-nameLightBrightnessState" style="width:200px;margin-left: 5px; text-align: left;">
+    </div>
+
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+<br/>
+
+
+</script>
 
 
+<script type="text/markdown" data-help-name="knxUltimateHueLight">
+
+[Find it useful?](https://www.paypal.me/techtoday)
+
+This node lets you control your Philips HUE light and also get the states of this lights.
+
+**General**
+|Property|Description|
+|--|--|
+| KNX GW | Select the KNX gateway to be used |
+| HUE Bridge | Select the HUE Bridge to be used |
+| Name | HUE light to be used. The avaiable lights start showing up while you're typing.|
+
+<br/>
+
+**KNX COMMANDS -> TO PHILIPS HUE**
+Here you can choose the KNX addresses to be linked to the avaiable HUE light commands.<br/>
+Start typing in the GA field, the name or group address of your KNX device, the avaiable devices start showing up while you're typing.
+
+|Property|Description|
+|--|--|
+| Switch | This command is used to turn on/off the HUE light via a boolean KNX value true/false|
+| Dimming | This command is used to DIM the HUE light via a KNX relative DIM datapoint |
+| Color | This command is used to change the HUE light's color. Accepted datapoint is RGB triplet (r,g,b)|
+| Brightness | This command is used to change the absolute HUE light's brightness |
+
+<br/>
+
+**PHILIPS HUE LIGHT STATE -> TO KNX**
+Here you can link the state changes of your HUE light, to any KNX group address you want.<br/>
+Start typing in the GA field, the name or group address of your KNX device, the avaiable devices start showing up while you're typing.
+
+|Property|Description|
+|--|--|
+| Switch | This state is used to send on/off value to the selected KNX group address |
+| Color | This state is used to send changes of the HUE light's color. Accepted datapoint is RGB triplet (r,g,b)|
+| Brightness | This state is used to send changes of your absolute HUE light's brightness, to a KNX group address |
+
+<br/>
 </script>