Christian-Me / node-red-contrib-ui-iro-color-picker

Node-RED dashboard color picker widget utilizing the iro.js library. Can be configured as a widget or modal popup window. Individual components can be combined,
Apache License 2.0
4 stars 3 forks source link

No issue - brilliant #3

Closed scargill closed 2 years ago

scargill commented 3 years ago

I tried the IRO slider maybe 2 years ago or more and could NOT integrate it into NR, then I looked at your first shot - you had mobile issues - and now it WORKS - well done....

Pete.

Christian-Me commented 3 years ago

Great you are happy - always open to future suggestions. Observed that you where looking for a color picker for a while now, same as me.

scargill commented 3 years ago

Well, I'm almost there, controlling RGBW lights 2021-06-07 00_44_17-Your Phone like this.... see image - LOVELY - the WWWW part of the lamp is separate from the colour so I cheated - and when you move the saturation fully left - I switch to WHITE (the warm white elements in the bulbs are brighter by far than R+G+B) - the only thing I could not fit into those two sliders was BLACK (ie. OFF) so I had to use a button. If you think of a way to incorporate black into one of those sliders I'll be delighted - BUT this is GREAT compared to the normal horrible solution in NR Dashboard....

Christian-Me commented 3 years ago

Yeah, RGBW LEDs nice topic

Hue and Saturation don't give you the complete color model. To complete the color Modell you need the Value / Brightness! So simply add the Value slider? (As popup or widget) image

Or a hue circle + value: image

Or a Box + Hue: image

Or a second node for the birghtness?

I work with the HSV-Model in my own firmware. So I do the conversion from HSV to RGBW in C in the device. But I already thought I could add a {r:255,g:255,b:255,w:255} datatype to the output formats for easy use. But perhaps I should find a better algorithm to take the color temperature of the white LEDs into account and as you wrote the intensity differences of the LED chips. But perhaps there is already a converter node for this task - Think the node is already on the edge to be overloaded!

Think a separate converter node form HSV to RGB+WW/CW would be best. Here the intensity levels and temperatures could be defined. Or not to use the RGB LEDs for saturation = 0 to avoid tinting ... Not a easy task. I also thought to build my own spectrometer to measure my LEDs to get the perfect calibrated color ... so many projects in the queue 😎and the sun is shining 🌞

Note: iro.js seams not intended to work with additive color mixture and reduces most values it back to a RGB model - https://github.com/jaames/iro.js/discussions/188#discussioncomment-740232

This do the work for me (lot of math for a poor ESP8266) ... but no intensity parameter or color temperature per channel taken into account. A javascript version should findable be somewhere in the webs ...

// uses H 0..360 S 1..100 I/V 1..100 (according to homie convention)
// Source https://blog.saikoled.com/post/44677718712/how-to-convert-from-hsi-to-rgb-white

void HSV2RGBW(float H, float S, float I, int rgbw[4]) {
  int r, g, b, w;
  float cos_h, cos_1047_h;
  H = fmod(H,360); // cycle H around to 0-360 degrees
  H = 3.14159*H/(float)180; // Convert to radians.
  S = S / 100;
  S = S>0?(S<1?S:1):0; // clamp S and I to interval [0,1]
  I = I / 100;
  I = I>0?(I<1?I:1):0;

  if(H < 2.09439) {
    cos_h = cos(H);
    cos_1047_h = cos(1.047196667-H);
    r = S*255*I/3*(1+cos_h/cos_1047_h);
    g = S*255*I/3*(1+(1-cos_h/cos_1047_h));
    b = 0;
    w = 255*(1-S)*I;
  } else if(H < 4.188787) {
    H = H - 2.09439;
    cos_h = cos(H);
    cos_1047_h = cos(1.047196667-H);
    g = S*255*I/3*(1+cos_h/cos_1047_h);
    b = S*255*I/3*(1+(1-cos_h/cos_1047_h));
    r = 0;
    w = 255*(1-S)*I;
  } else {
    H = H - 4.188787;
    cos_h = cos(H);
    cos_1047_h = cos(1.047196667-H);
    b = S*255*I/3*(1+cos_h/cos_1047_h);
    r = S*255*I/3*(1+(1-cos_h/cos_1047_h));
    g = 0;
    w = 255*(1-S)*I;
  }

  rgbw[0]=r;
  rgbw[1]=g;
  rgbw[2]=b;
  rgbw[3]=w;
}
scargill commented 3 years ago

To be honest, for most RGB LED E27 lmps, the individual colours are hardly worth the hassle of worrying about intensity as they're not that bright to start with. It has taken me a lot of searching to find a half-decent lamp – I'm using ATHOM (AliExpress Store) 15W E27.. Cold and Warm white are goof – colours still a bit sim but better than most.

Still – Nice to experiment – I used the colour wheel at first but if you have lots of lights – like the BLYNK ERGA it takes up too much room – so I LOVE the little sliders on the IRO as you have adapted.

I'd not thought of pop up centre window or group – just widgwt – however, for me the altervative seem to go of the edge of my screen..

And looking at what I have with hue and saturation – hoirzontallly, am I missing something, I can't see where to add the third one – level….

Thanks for that feedback, it will keep me in reading for some time😊

From: Chris @.> Sent: 07 June 2021 15:08 To: Christian-Me/node-red-contrib-ui-iro-color-picker @.> Cc: Peter Scargill @.>; Author @.> Subject: Re: [Christian-Me/node-red-contrib-ui-iro-color-picker] No issue - brilliant (#3)

Yeah, RGBW LEDs nice topic

Hue and Saturation don't give you the complete color model. To complete the color Modell you need the Value / Brightness! So simply add the Value slider? (As popup or widget) https://user-images.githubusercontent.com/15779507/121017352-7a43f900-c79d-11eb-850e-2ace74966458.png

Or a hue circle + value: https://user-images.githubusercontent.com/15779507/121017320-7021fa80-c79d-11eb-964f-4c7161c25053.png

Or a Box + Hue: https://user-images.githubusercontent.com/15779507/121017418-8af46f00-c79d-11eb-91e2-9b073a74d32a.png

Or a second node for the birghtness?

I work with the HSV-Model in my own firmware. So I do the conversion from HSV to RGBW in C in the device. But I already thought I could add a {r:255,g:255,b:255,w:255} datatype to the output formats for easy use. But perhaps I should find a better algorithm to take the color temperature of the white LEDs into account and as you wrote the intensity differences of the LED chips. But perhaps there is already a converter node for this task - Think the node is already on the edge to be overloaded!

Think a separate converter node form HSV to RGB+WW/CW would be best. Here the intensity levels and temperatures could be defined. Or not to use the RGB LEDs for saturation = 0 to avoid tinting ... Not a easy task. I also thought to build my own spectrometer to measure my LEDs to get the perfect calibrated color ... so many projects in the queue 😎and the sun is shining 🌞

Note: iro.js seams not intended to work with additive color mixture and reduces most values it back to a RGB model - jaames/iro.js#188 (comment) https://github.com/jaames/iro.js/discussions/188#discussioncomment-740232

This do the work for me (lot of math for a poor ESP8266) ... but no intensity parameter or color temperature per channel taken into account. A javascript version should findable be somewhere in the webs ...

// uses H 0..360 S 1..100 I/V 1..100 (according to homie convention)

// Source https://blog.saikoled.com/post/44677718712/how-to-convert-from-hsi-to-rgb-white

void HSV2RGBW(float H, float S, float I, int rgbw[4]) {

int r, g, b, w;

float cos_h, cos_1047_h;

H = fmod(H,360); // cycle H around to 0-360 degrees

H = 3.14159*H/(float)180; // Convert to radians.

S = S / 100;

S = S>0?(S<1?S:1):0; // clamp S and I to interval [0,1]

I = I / 100;

I = I>0?(I<1?I:1):0;

if(H < 2.09439) {

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

r = S*255*I/3*(1+cos_h/cos_1047_h);

g = S*255*I/3*(1+(1-cos_h/cos_1047_h));

b = 0;

w = 255*(1-S)*I;

} else if(H < 4.188787) {

H = H - 2.09439;

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

g = S*255*I/3*(1+cos_h/cos_1047_h);

b = S*255*I/3*(1+(1-cos_h/cos_1047_h));

r = 0;

w = 255*(1-S)*I;

} else {

H = H - 4.188787;

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

b = S*255*I/3*(1+cos_h/cos_1047_h);

r = S*255*I/3*(1+(1-cos_h/cos_1047_h));

g = 0;

w = 255*(1-S)*I;

}

rgbw[0]=r;

rgbw[1]=g;

rgbw[2]=b;

rgbw[3]=w;

}

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Christian-Me/node-red-contrib-ui-iro-color-picker/issues/3#issuecomment-855910960 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONJA4W77EMJFS345PQPM3TRTAD5ANCNFSM46F6G5LQ . https://github.com/notifications/beacon/AAONJAYRDQZHOTLZA4ZZDA3TRTAD5A5CNFSM46F6G5L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGMCCUMA.gif

scargill commented 3 years ago

Just checked, no way to add the third slider in – needs it's own space – hence taking up a lot odf extra space – Oh, well… 😊

From: Chris @.> Sent: 07 June 2021 15:08 To: Christian-Me/node-red-contrib-ui-iro-color-picker @.> Cc: Peter Scargill @.>; Author @.> Subject: Re: [Christian-Me/node-red-contrib-ui-iro-color-picker] No issue - brilliant (#3)

Yeah, RGBW LEDs nice topic

Hue and Saturation don't give you the complete color model. To complete the color Modell you need the Value / Brightness! So simply add the Value slider? (As popup or widget) https://user-images.githubusercontent.com/15779507/121017352-7a43f900-c79d-11eb-850e-2ace74966458.png

Or a hue circle + value: https://user-images.githubusercontent.com/15779507/121017320-7021fa80-c79d-11eb-964f-4c7161c25053.png

Or a Box + Hue: https://user-images.githubusercontent.com/15779507/121017418-8af46f00-c79d-11eb-91e2-9b073a74d32a.png

Or a second node for the birghtness?

I work with the HSV-Model in my own firmware. So I do the conversion from HSV to RGBW in C in the device. But I already thought I could add a {r:255,g:255,b:255,w:255} datatype to the output formats for easy use. But perhaps I should find a better algorithm to take the color temperature of the white LEDs into account and as you wrote the intensity differences of the LED chips. But perhaps there is already a converter node for this task - Think the node is already on the edge to be overloaded!

Think a separate converter node form HSV to RGB+WW/CW would be best. Here the intensity levels and temperatures could be defined. Or not to use the RGB LEDs for saturation = 0 to avoid tinting ... Not a easy task. I also thought to build my own spectrometer to measure my LEDs to get the perfect calibrated color ... so many projects in the queue 😎and the sun is shining 🌞

Note: iro.js seams not intended to work with additive color mixture and reduces most values it back to a RGB model - jaames/iro.js#188 (comment) https://github.com/jaames/iro.js/discussions/188#discussioncomment-740232

This do the work for me (lot of math for a poor ESP8266) ... but no intensity parameter or color temperature per channel taken into account. A javascript version should findable be somewhere in the webs ...

// uses H 0..360 S 1..100 I/V 1..100 (according to homie convention)

// Source https://blog.saikoled.com/post/44677718712/how-to-convert-from-hsi-to-rgb-white

void HSV2RGBW(float H, float S, float I, int rgbw[4]) {

int r, g, b, w;

float cos_h, cos_1047_h;

H = fmod(H,360); // cycle H around to 0-360 degrees

H = 3.14159*H/(float)180; // Convert to radians.

S = S / 100;

S = S>0?(S<1?S:1):0; // clamp S and I to interval [0,1]

I = I / 100;

I = I>0?(I<1?I:1):0;

if(H < 2.09439) {

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

r = S*255*I/3*(1+cos_h/cos_1047_h);

g = S*255*I/3*(1+(1-cos_h/cos_1047_h));

b = 0;

w = 255*(1-S)*I;

} else if(H < 4.188787) {

H = H - 2.09439;

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

g = S*255*I/3*(1+cos_h/cos_1047_h);

b = S*255*I/3*(1+(1-cos_h/cos_1047_h));

r = 0;

w = 255*(1-S)*I;

} else {

H = H - 4.188787;

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

b = S*255*I/3*(1+cos_h/cos_1047_h);

r = S*255*I/3*(1+(1-cos_h/cos_1047_h));

g = 0;

w = 255*(1-S)*I;

}

rgbw[0]=r;

rgbw[1]=g;

rgbw[2]=b;

rgbw[3]=w;

}

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Christian-Me/node-red-contrib-ui-iro-color-picker/issues/3#issuecomment-855910960 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONJA4W77EMJFS345PQPM3TRTAD5ANCNFSM46F6G5LQ . https://github.com/notifications/beacon/AAONJAYRDQZHOTLZA4ZZDA3TRTAD5A5CNFSM46F6G5L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGMCCUMA.gif

scargill commented 3 years ago

Ignoer me – I found the little ADD under components….

From: Chris @.> Sent: 07 June 2021 15:08 To: Christian-Me/node-red-contrib-ui-iro-color-picker @.> Cc: Peter Scargill @.>; Author @.> Subject: Re: [Christian-Me/node-red-contrib-ui-iro-color-picker] No issue - brilliant (#3)

Yeah, RGBW LEDs nice topic

Hue and Saturation don't give you the complete color model. To complete the color Modell you need the Value / Brightness! So simply add the Value slider? (As popup or widget) https://user-images.githubusercontent.com/15779507/121017352-7a43f900-c79d-11eb-850e-2ace74966458.png

Or a hue circle + value: https://user-images.githubusercontent.com/15779507/121017320-7021fa80-c79d-11eb-964f-4c7161c25053.png

Or a Box + Hue: https://user-images.githubusercontent.com/15779507/121017418-8af46f00-c79d-11eb-91e2-9b073a74d32a.png

Or a second node for the birghtness?

I work with the HSV-Model in my own firmware. So I do the conversion from HSV to RGBW in C in the device. But I already thought I could add a {r:255,g:255,b:255,w:255} datatype to the output formats for easy use. But perhaps I should find a better algorithm to take the color temperature of the white LEDs into account and as you wrote the intensity differences of the LED chips. But perhaps there is already a converter node for this task - Think the node is already on the edge to be overloaded!

Think a separate converter node form HSV to RGB+WW/CW would be best. Here the intensity levels and temperatures could be defined. Or not to use the RGB LEDs for saturation = 0 to avoid tinting ... Not a easy task. I also thought to build my own spectrometer to measure my LEDs to get the perfect calibrated color ... so many projects in the queue 😎and the sun is shining 🌞

Note: iro.js seams not intended to work with additive color mixture and reduces most values it back to a RGB model - jaames/iro.js#188 (comment) https://github.com/jaames/iro.js/discussions/188#discussioncomment-740232

This do the work for me (lot of math for a poor ESP8266) ... but no intensity parameter or color temperature per channel taken into account. A javascript version should findable be somewhere in the webs ...

// uses H 0..360 S 1..100 I/V 1..100 (according to homie convention)

// Source https://blog.saikoled.com/post/44677718712/how-to-convert-from-hsi-to-rgb-white

void HSV2RGBW(float H, float S, float I, int rgbw[4]) {

int r, g, b, w;

float cos_h, cos_1047_h;

H = fmod(H,360); // cycle H around to 0-360 degrees

H = 3.14159*H/(float)180; // Convert to radians.

S = S / 100;

S = S>0?(S<1?S:1):0; // clamp S and I to interval [0,1]

I = I / 100;

I = I>0?(I<1?I:1):0;

if(H < 2.09439) {

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

r = S*255*I/3*(1+cos_h/cos_1047_h);

g = S*255*I/3*(1+(1-cos_h/cos_1047_h));

b = 0;

w = 255*(1-S)*I;

} else if(H < 4.188787) {

H = H - 2.09439;

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

g = S*255*I/3*(1+cos_h/cos_1047_h);

b = S*255*I/3*(1+(1-cos_h/cos_1047_h));

r = 0;

w = 255*(1-S)*I;

} else {

H = H - 4.188787;

cos_h = cos(H);

cos_1047_h = cos(1.047196667-H);

b = S*255*I/3*(1+cos_h/cos_1047_h);

r = S*255*I/3*(1+(1-cos_h/cos_1047_h));

g = 0;

w = 255*(1-S)*I;

}

rgbw[0]=r;

rgbw[1]=g;

rgbw[2]=b;

rgbw[3]=w;

}

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Christian-Me/node-red-contrib-ui-iro-color-picker/issues/3#issuecomment-855910960 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONJA4W77EMJFS345PQPM3TRTAD5ANCNFSM46F6G5LQ . https://github.com/notifications/beacon/AAONJAYRDQZHOTLZA4ZZDA3TRTAD5A5CNFSM46F6G5L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGMCCUMA.gif

Christian-Me commented 3 years ago

I'd not thought of pop up centre window or group – just widgwt – however, for me the altervative seem to go of the edge of my screen..

can you send me a screenshot ... on my iPhone it works fine .. perhaps reduce the percentage or chose a custom size (see popup demo)

The minimum space the picker needs is 1x1 for a button ...

Think there is no way to get it smaller image custom size 1x6 determine the vertical length in horizontal stacking, button size is 1, indent 0 and empty label - and you will end with a 1x1 button

Good you found the add button - not my idea ;)

scargill commented 3 years ago

Sorted

I'm still cheating on white – if color > Fe Fe Fe (broken up) output 00 00 00 00 FF (warm white) – there will be a better way but I'll get there.

Be nice if I could figure out how to put a box around each SET – no doubt there will be…

Regards

Pete

From: Chris @.> Sent: 07 June 2021 17:45 To: Christian-Me/node-red-contrib-ui-iro-color-picker @.> Cc: Peter Scargill @.>; Author @.> Subject: Re: [Christian-Me/node-red-contrib-ui-iro-color-picker] No issue - brilliant (#3)

I'd not thought of pop up centre window or group – just widgwt – however, for me the altervative seem to go of the edge of my screen..

can you send me a screenshot ... on my iPhone it works fine .. perhaps reduce the percentage or chose a custom size (see popup demo)

The minimum space the picker needs is 1x1 for a button ...

Think there is no way to get it smaller https://user-images.githubusercontent.com/15779507/121047989-ab7cf300-c7b6-11eb-9d72-4c8ad1f48840.png custom size 1x6 determine the vertical length in horizontal stacking, button size is 1, indent 0 and empty label - and you will end with a 1x1 button

Good you found the add button - not my idea ;)

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Christian-Me/node-red-contrib-ui-iro-color-picker/issues/3#issuecomment-856052015 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONJA3QUA6L5ZOWBE2YSMDTRTSQZANCNFSM46F6G5LQ . https://github.com/notifications/beacon/AAONJA5IK4ZZYUASKQKO6BTTRTSQZA5CNFSM46F6G5L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGMDFCLY.gif

Christian-Me commented 3 years ago

Fine ... perhaps I'll trow in a rgbw converter quickly ... but you still will need 3 sliders πŸ”

Hmmm a frame ... I'm not a css expert but with a template node you should be able to manipulate the css - let me experiment a bit.

scargill commented 3 years ago

What a good person – like you I've spent WAY too much time on Node-Red visuals – any help gratefully received – RGB control has long since been a big issue for me – looks like it's here at last.

And with that I'm off to the pub.

Regards

Pete

From: Chris @.> Sent: 07 June 2021 19:07 To: Christian-Me/node-red-contrib-ui-iro-color-picker @.> Cc: Peter Scargill @.>; Author @.> Subject: Re: [Christian-Me/node-red-contrib-ui-iro-color-picker] No issue - brilliant (#3)

Fine ... perhaps I'll trow in a rgbw converter quickly ... but you still will need 3 sliders πŸ”

Hmmm a frame ... I'm not a css expert but with a template node you should be able to manipulate the css - let me experiment a bit.

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Christian-Me/node-red-contrib-ui-iro-color-picker/issues/3#issuecomment-856110262 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONJA74U37DSGR4UYRMDF3TRT4E5ANCNFSM46F6G5LQ . https://github.com/notifications/beacon/AAONJA46QXQLC6WIXFTO3FLTRT4E5A5CNFSM46F6G5L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGMDTJNQ.gif

Christian-Me commented 3 years ago

🍺🍻 Perhaps you like to try this one ... a function node converting HSV to RGBW. So switch the color picker to a HSV object output and you will get RGBW (quickly translated the C++ code to javascript - not tested on real hardware but the number are looking promising). To wire it into iro-picker I'll perhaps need a RGBW to HSV converter too πŸ€·β€β™‚οΈ...

[{"id":"fc452e55.ebdd1","type":"function","z":"7fd2ef10.d1106","name":"hsv 2 RGBW","func":"fmod = function (a,b) { \n    return Number((a - (Math.floor(a / b) * b)).toPrecision(8)); \n};\n\nvar input = msg.payload;\nvar color = {r:0, g:0, b:0, w:0};\nvar cos_h, cos_1047_h;\nvar H = fmod(input.h,360); // cycle H around to 0-360 degrees\nH = 3.14159*H/180; // Convert to radians.\nvar S = input.s / 100;\nS = S>0?(S<1?S:1):0; // clamp S and I to interval [0,1]\nvar I = input.v / 100;\nI = I>0?(I<1?I:1):0;\n\nif(H < 2.09439) {\n    cos_h = Math.cos(H);\n    cos_1047_h = Math.cos(1.047196667-H);\n    color.r = S*255*I/3*(1+cos_h/cos_1047_h);\n    color.g = S*255*I/3*(1+(1-cos_h/cos_1047_h));\n    color.b = 0;\n    color.w = 255*(1-S)*I;\n} else if(H < 4.188787) {\n    H = H - 2.09439;\n    cos_h = Math.cos(H);\n    cos_1047_h = Math.cos(1.047196667-H);\n    color.g = S*255*I/3*(1+cos_h/cos_1047_h);\n    color.b = S*255*I/3*(1+(1-cos_h/cos_1047_h));\n    color.r = 0;\n    color.w = 255*(1-S)*I;\n} else {\n    H = H - 4.188787;\n    cos_h = Math.cos(H);\n    cos_1047_h = Math.cos(1.047196667-H);\n    color.b = S*255*I/3*(1+cos_h/cos_1047_h);\n    color.r = S*255*I/3*(1+(1-cos_h/cos_1047_h));\n    color.g = 0;\n    color.w = 255*(1-S)*I;\n}\n    \nreturn color;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":869,"y":119,"wires":[["2902caad.e9ebf6"]]}]
scargill commented 3 years ago

WAY too late at night – I'll check tomorrow – but generally speaking the model R G B Warm white cold light #rrggbbvlwl (red green blue cold white warm white – all in hex) seems to work well.. ok, tomorrow I'll follow this up.

Ta

Pete

From: Chris @.> Sent: 07 June 2021 21:32 To: Christian-Me/node-red-contrib-ui-iro-color-picker @.> Cc: Peter Scargill @.>; Author @.> Subject: Re: [Christian-Me/node-red-contrib-ui-iro-color-picker] No issue - brilliant (#3)

🍺🍻 Perhaps you like to try this one ... a function node converting HSV to RGBW. So switch the color picker to a HSV object output and you will get RGBW (quickly translated the C++ code to javascript - not tested on real hardware but the number are looking promising). To wire it into iro-picker I'll perhaps need a RGBW to HSV converter too πŸ€·β€β™‚οΈ...

[{"id":"fc452e55.ebdd1","type":"function","z":"7fd2ef10.d1106","name":"hsv 2 RGBW","func":"fmod = function (a,b) { \n return Number((a - (Math.floor(a / b) b)).toPrecision(8)); \n};\n\nvar input = msg.payload;\nvar color = {r:0, g:0, b:0, w:0};\nvar cos_h, cos_1047_h;\nvar H = fmod(input.h,360); // cycle H around to 0-360 degrees\nH = 3.14159H/180; // Convert to radians.\nvar S = input.s / 100;\nS = S>0?(S<1?S:1):0; // clamp S and I to interval [0,1]\nvar I = input.v / 100;\nI = I>0?(I<1?I:1):0;\n\nif(H < 2.09439) {\n cos_h = Math.cos(H);\n cos_1047_h = Math.cos(1.047196667-H);\n color.r = S255I/3(1+cos_h/cos_1047_h);\n color.g = S255I/3(1+(1-cos_h/cos_1047_h));\n color.b = 0;\n color.w = 255(1-S)I;\n} else if(H < 4.188787) {\n H = H - 2.09439;\n cos_h = Math.cos(H);\n cos_1047_h = Math.cos(1.047196667-H);\n color.g = S255I/3(1+cos_h/cos_1047_h);\n color.b = S255I/3(1+(1-cos_h/cos_1047_h));\n color.r = 0;\n color.w = 255(1-S)I;\n} else {\n H = H - 4.188787;\n cos_h = Math.cos(H);\n cos_1047_h = Math.cos(1.047196667-H);\n color.b = S255I/3(1+cos_h/cos_1047_h);\n color.r = S255I/3(1+(1-cos_h/cos_1047_h));\n color.g = 0;\n color.w = 255(1-S)I;\n}\n \nreturn color;","outputs":1,"noerr":0,"initialize":"","finalize":"","x":869,"y":119,"wires":[["2902caad.e9ebf6"]]}]

β€” You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/Christian-Me/node-red-contrib-ui-iro-color-picker/issues/3#issuecomment-856200411 , or unsubscribe https://github.com/notifications/unsubscribe-auth/AAONJA2QYC7KYVL2RPELNADTRUNCDANCNFSM46F6G5LQ . https://github.com/notifications/beacon/AAONJA6LU5JS2ZUCVVBIUGLTRUNCDA5CNFSM46F6G5L2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOGMEJJWY.gif

Christian-Me commented 3 years ago

As it makes no sense to "misuse" a ui widget for color conversion for many reasons. Here is a solution which can do that and many other nice things.

https://flows.nodered.org/node/node-red-contrib-chroma

Have fun (happy for any kind of feedback)