node-red-contrib-knx-ultimate 2.1.58 → 2.1.60

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +6 -1
  2. package/nodes/knxUltimateHueLight.html +133 -10
  3. package/nodes/utils/iro.js +1835 -0
  4. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -6,8 +6,13 @@
6
6
 
7
7
  # CHANGELOG
8
8
  <p>
9
+ <b>Version 2.1.60</b> - October 2023<br/>
10
+ - HUE Light: NEW color picker. A Color picker is shown in the right TABS of node-red, as soon as you open the light node. You can choose the color you want, and paste the RGB color into the HUE light node.<br/>
11
+ - HUE Light: the color getter is now not shown, whenever you select a grouped light. You can use the color picker instead.<br/>
12
+ </p>
13
+ <p>
9
14
  <b>Version 2.1.58</b> - October 2023<br/>
10
- - HUE Light: NEW color picker. Just click a button to automatically fill the node's "color" properties<br/>
15
+ - HUE Light: NEW color getter. Just click a button to automatically fill the node's "color" properties<br/>
11
16
  </p>
12
17
  <p>
13
18
  <b>Version 2.1.57</b> - October 2023<br/>
package/nodes/knxUltimateHueLight.html CHANGED
@@ -96,12 +96,113 @@
96
96
  var oNodeServer = RED.nodes.node($("#node-input-server").val()); // Store the config-node
97
97
  var oNodeServerHue = RED.nodes.node($("#node-input-serverHue").val()); // Store the config-node
98
98
 
99
- // var colorPicker = new iro.ColorPicker("#picker", {
100
- // // Set the size of the color picker
101
- // width: 320,
102
- // // Set the initial color to pure red
103
- // color: "#f00"
104
- // });
99
+
100
+
101
+ // Create the TAB in Node-Red
102
+ // ####################################
103
+ const content = `<html>
104
+
105
+ <head>
106
+ <div class="red-ui-sidebar-header">Color Selector</div>
107
+ </head>
108
+ <div style='position:relative;height:100%;margin:10px'>
109
+ <p>Choose the desired color/temperature, copy the <b>Result RGB</b> text and paste it into the required fields.</p>
110
+ <div>
111
+ <h3>Color</h3>
112
+ <div id="colorPicker"></div>
113
+ </div>
114
+ </br>
115
+ <div>
116
+ <h3>Temperature</h3>
117
+ <div id="kelvinPicker"></div>
118
+ </div>
119
+ </br>
120
+ <div>
121
+ <h3>Result RGB</h3>
122
+ <div>
123
+ <input style="width:100%" type="text" id="resultRGB">
124
+ </div>
125
+ </div>
126
+ <div>
127
+ <button id="copyTextButton" type="button" class="red-ui-button">Copy to clipboard</button>
128
+ </div>
129
+
130
+ </div>
131
+ </html>
132
+ `;
133
+ RED.sidebar.addTab({
134
+ id: "tabNRColor",
135
+ label: "Color Picker",
136
+ name: "Color Picker",
137
+ iconClass: "fa fa-database",
138
+ content: content,
139
+ enableOnEdit: true
140
+ });
141
+ RED.sidebar.show("tabNRColor");
142
+
143
+ // Temperature
144
+ node.kelvinPicker = new iro.ColorPicker("#kelvinPicker", {
145
+ width: 250,
146
+ color: "rgb(255, 0, 0)",
147
+ borderWidth: 1,
148
+ borderColor: "#fff",
149
+ layoutDirection: 'vertical',
150
+ layout: [
151
+ {
152
+ component: iro.ui.Slider,
153
+ options: {
154
+ sliderType: 'kelvin',
155
+ sliderSize: 20,
156
+ }
157
+ },
158
+ ]
159
+ });
160
+ // color:change callbacks receive the current color
161
+ node.kelvinPicker.on("color:change", function (color) {
162
+ const resultRGBForNode = '{"red": ' + color.rgb.r + ', "green": ' + color.rgb.g + ', "blue": ' + color.rgb.b + '}';
163
+ $("#resultRGB").val(resultRGBForNode)
164
+ });
165
+
166
+
167
+ // Color
168
+ node.colorPicker = new iro.ColorPicker("#colorPicker", {
169
+ width: 250,
170
+ color: "rgb(255, 0, 0)",
171
+ borderWidth: 1,
172
+ borderColor: "#fff",
173
+ layout: [
174
+ {
175
+ component: iro.ui.Box,
176
+ },
177
+ {
178
+ component: iro.ui.Slider,
179
+ options: {
180
+ id: 'hue-slider',
181
+ sliderType: 'hue'
182
+ }
183
+ }
184
+ ]
185
+ });
186
+ // color:change callbacks receive the current color
187
+ node.colorPicker.on("color:change", function (color) {
188
+ // Transform to compatible value for the node { "red": 255, "green": 255, "blue": 255 }
189
+ const resultRGBForNode = '{"red": ' + color.rgb.r + ', "green": ' + color.rgb.g + ', "blue": ' + color.rgb.b + '}';
190
+ $("#resultRGB").val(resultRGBForNode)
191
+ });
192
+
193
+ // Copy to clipboard button
194
+ $("#copyTextButton").on("click", function () {
195
+ var copyText = document.getElementById("resultRGB");
196
+ // Select the text field
197
+ copyText.select();
198
+ copyText.setSelectionRange(0, 99999); // For mobile devices
199
+ // Copy the text inside the text field
200
+ navigator.clipboard.writeText(copyText.value);
201
+ });
202
+ // ####################################
203
+
204
+
205
+
105
206
 
106
207
  $("#tabs").tabs();
107
208
 
@@ -272,8 +373,12 @@
272
373
  // Distinguish between group of lights an single light.
273
374
  if (ui.item.value.startsWith('Grouped_light')) {
274
375
  $('#node-input-hueDevice').val(ui.item.hueDevice + "#grouped_light");
376
+ $("#getHueColorButton").hide();
377
+ $("#getColorAtSwitchOnNightTime").hide();
275
378
  } else {
276
379
  $('#node-input-hueDevice').val(ui.item.hueDevice + "#light");
380
+ $("#getHueColorButton").show();
381
+ $("#getColorAtSwitchOnNightTime").show();
277
382
  }
278
383
  $('#tabs').show();
279
384
  }
@@ -296,6 +401,14 @@
296
401
  $('#divColorsAtSwitchOn').hide()
297
402
  $('#divColorCycle').hide()
298
403
  }
404
+ // Check if grouped, to hide/show the "Get current" buttons
405
+ if (element.deviceObject.type === "grouped_light") {
406
+ $("#getHueColorButton").hide();
407
+ $("#getColorAtSwitchOnNightTime").hide();
408
+ }else{
409
+ $("#getHueColorButton").show();
410
+ $("#getColorAtSwitchOnNightTime").show();
411
+ }
299
412
  return
300
413
  }
301
414
  });
@@ -307,6 +420,10 @@
307
420
  $("#getHueColorButton").text("Wait...")
308
421
  $.getJSON("knxUltimateGetHueColor?id=" + $('#node-input-hueDevice').val().split('#')[0], (data) => {
309
422
  $('#node-input-colorAtSwitchOnDayTime').val(data.toString());
423
+ $("#node-input-colorAtSwitchOnDayTime").css("background-color", "lightgreen");
424
+ setTimeout(() => {
425
+ $("#node-input-colorAtSwitchOnDayTime").css("background-color", "");
426
+ }, 500);
310
427
  $("#getHueColorButton").text("Get current")
311
428
  });
312
429
  });
@@ -315,6 +432,10 @@
315
432
  $("#getColorAtSwitchOnNightTime").text("Wait...")
316
433
  $.getJSON("knxUltimateGetHueColor?id=" + $('#node-input-hueDevice').val().split('#')[0], (data) => {
317
434
  $('#node-input-colorAtSwitchOnNightTime').val(data.toString());
435
+ $("#node-input-colorAtSwitchOnNightTime").css("background-color", "lightgreen");
436
+ setTimeout(() => {
437
+ $("#node-input-colorAtSwitchOnNightTime").css("background-color", "");
438
+ }, 500);
318
439
  $("#getColorAtSwitchOnNightTime").text("Get current")
319
440
  });
320
441
  });
@@ -322,19 +443,21 @@
322
443
  // ########################
323
444
  if (this.hueDevice !== "") $('#tabs').show();
324
445
 
446
+
325
447
  },
326
448
  oneditsave: function () {
327
-
328
-
449
+ RED.sidebar.removeTab("tabNRColor");
450
+ RED.sidebar.show("help")
329
451
  },
330
452
  oneditcancel: function () {
331
-
453
+ RED.sidebar.removeTab("tabNRColor");
454
+ RED.sidebar.show("help")
332
455
  }
333
456
  })
334
457
 
335
458
  </script>
336
459
  <script src="https://kit.fontawesome.com/11f26b4500.js" crossorigin="anonymous"></script>
337
- <!-- <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script> -->
460
+ <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script>
338
461
 
339
462
  <script type="text/html" data-template-name="knxUltimateHueLight">
340
463