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

Only one output format can be selected with multiple components #10

Open Devilsmaul opened 2 years ago

Devilsmaul commented 2 years ago

hey there. im using your color picker component (RGB) in combination with a value (brightness slider) and as output format i can only choose if i like to send RGB or value but i woul like to have both. What do you think about making all outputs selectable and instead of sending it in msg.payload you could send msg.payload.rgb and msg.payload.value.

Im currently writing a node red converter node for ikea xy lights :)

Christian-Me commented 2 years ago

Perhaps Take a look into my chroma.js node.

Im currently writing a node red converter node for ikea xy lights :)

If you are using zigbee2mqtt you can also send RGB

color_xy: To control the XY color (CIE 1931 color space) publish a message to topic zigbee2mqtt/FRIENDLY_NAME/set with payload {"color": {"x": X_VALUE, "y": Y_VALUE}} (e.g. {"color":{"x":0.123,"y":0.123}}). To read the XY color send a message to zigbee2mqtt/FRIENDLY_NAME/get with payload {"color":{"x":"","y":""}}. Alternatively it is possible to set the XY color via RGB: {"color": {"r": R, "g": G, "b": B}} e.g. {"color":{"r":46,"g":102,"b":150}} {"color": {"rgb": "R,G,B"}} e.g. {"color":{"rgb":"46,102,150"}} {"color": {"hex": HEX}} e.g. {"color":{"hex":"#547CFF"}}

and (much better)

image

HS + brightness is working too. This is my favorite color model as it is human readable and to change the color (or saturation or brightness) you only have to change one value not three

zigbee2mqtt does a pretty good job in converting to cieXY. This will give you the advantage to have your Node-RED flow device independent and only convert to a device dependent format at the last minute if necessary.

Devilsmaul commented 2 years ago

Hey Christian, yes im aware of the linked chroma.js. The reason why i would like to implement my own converter is the missing option to select the RGB colormodel, Gamma Model, AdaptionModel (Bradford, von Kries, XYZ Scaling...).

I got some IKEA light bulbs and the colors they have are not satisfying for me. Wether in Zigbee2MQTT nor in any other rgb converter. The blue rgb [0,0,255] seems to be a light blue. I managed to get a really deep blue with different xy calculations!

Thats why i created a flow for me based on this library here CIE-ColorConverter which is based on the maths of Bruce Lindbloom. I added small enhancements of my side to enable a correct converion of the IKEA xy bri format to RGB and back with better color experience than the normal ikea remote has included. the lightbulb seems not to support the color temperature. But with the white point reference which i can choose in the converter i am able to switch the white point of the lamp from D50 to D65 and can control the temperature (appeareance of white warm / cold).

here is also my stack overflow thread if you are interessted how-to-convert-ikea-light-bulb-color-xy-cie-1931-colorspace-to-rgb

In the end the best results you can get with the bulb is to sending the x,y color and a brightness. I could probably also use your suggested HSV format (Hue, Saturation, Value/ Brigthness) but i think the problem still exists. If you have several components you can not have multiple outputs or a merged output.

This looks for me that the output format logically depends on your components which you added and it probably does not make sense to let the user choose freely between all of them.

Devilsmaul commented 2 years ago

Thank you for the hint with HSV format. I got everything working now =) just had to use a hsv2rgb transformation and back but now its really good!

Still i think the options of the output format should be reconsidered here as mentioned before.

Thank you for the Node! Great Job so far!

Christian-Me commented 2 years ago

I could use a typed Input widget. There is a multi select drop down available. So you can pick the formats you like. I can hopefully implement this when I finalize the temperature conversion below 2000°K as this problem is present in croma.js as it is in the color picker

https://discourse.nodered.org/t/contrib-ui-iro-color-picker-thank-you-minor-issue/57503

and

https://github.com/gka/chroma.js/issues/288

Devilsmaul commented 2 years ago

looks like you ran also with the color temp into the whitepoint problematic.

I could use a typed Input widget.

yes would be awesome! NodeReds TypedInput Widget you can define your own types and validation functions! I like that idea!

I will continue on my node idea for ikea/hue bulbs. probably part of the outcome will be a small conversion library for ikea xy bri <-> rgb/hsv with white point ref / rgb model / gamma model and adaptation on top of the mentioned lib above. I read in your chroma lib that you still need the conversion of xy bri to rgb. So you could use mine when it's ready :)

Christian-Me commented 2 years ago

I already push the typed input to its limits. And guess what added a color picker ;) And a function input and a multi value input ... still work in progress.

Will see when the uPlot node really will be ready to be released... Hope before summer.

Yes keep me informed. I already have the chromaPlus class to define more color types. Not perfect jet but ok.