Dashboard Colour Wheel

For clarity Nick I'd never heard of IRO.JS before yesterday, it was one of several example MIT licence controls I looked at to help stress my point. It just so happens it's a winner - but clearly, engineering that into Dashboard is likely not on due to time restraints but Dave decided to have a go at making Dashboasrd nearer to IRO. Control of the latter.. (try it in any browser inc mobile) - colours round the outside of the wheel, white in the middle (ie 100% un-saturation), separate intensity slider takes brilliance from 0-100% without affecting the wheel. Completely intuitive. If only the NR control could do that... possible yet?

The existing control is actually an H,S control with separate L(ightness). with the default being 50% saturation. This means that by default the midpoint is actually 128,128,128 - (grey) and so on. The only way to get a white is to increase the lightness - (slider) and likewise black. The quick hack was to actually feed the point selected as being H, L and fixing the saturation to 100% - and scaling so they were full colour at the edge - and white in the middle - this does mean the existing lightness slider also swings about - but does allow you to drag it down to black if required. Basically it does do what you requested allowing any colour plus fading to white... then slider to black... but if the ergonomics don't work then I'll revert it.

This was a simple monkey patch job to swap those values - anything more sophisticated (like making the circle indicator appear in the correct position towards the centre) would effectively need a big fix to that library which the author themselves has seemingly already ruled out.

From your other thread you are now also onto colour curves etc as well - so I suspect the correct answer may be a separate control just for RGB mixing, which I'm sure you could build via a template like the buttons you created.

We are also working on ways to be able to add widgets to the dashboard palette - - but not quite there yet.

Thanks for your efforts Dave, fo a while there it looked like it might almost be there. My thinking processes aren't 100% yet after a mishap in December, but I did just take the opportunity to download that iro.js project into my .node-rd/public directory and I can confirm it is VERY different to Angular code and may be useful only for future inspiration. I can't even figure out how to modify their demo.

Curves - that's another matter altogether. I use BLYNK on Android mainly as my mobile user interface into Node-Red thanks to a third party set of nodes (NR is now at the centre of my home control efforts) and their colour Zergba (play on Zebra and RGB) kind of works. To bring the whole lot into Node-Red and do away with Blynk would have been nice but until such times as that wheel works a lot better (I use loads of them on several tabs) I guess that's off, unless you get a sudden inspiration in which case I'll be looking in.

The curves thing is again about ease of user interface for thw wife/girlfiend/boyfriend/husband who is NOT fanatical about code and RGB and other technical things. Fact is that linear controls for light and sound do not feel remotely natural. But then you likely know all of this and more.

Meanwhile I'll re-install the beta on a backup and try to find out why updating NPM made a difference - Nick found that confusing.

Meanwhile... on the subject of the text input you suggested I look at - and the colour control mode - I've obviously tried that (trying to cover all bases) - it works of course but at least on Chrome, because of the linear thing, it is not at all easy to use (I've no idea how that would work on a mobile) but that's another discussion - it can probably be improved with a function - I'll blog if I manage that.


Just wanted to make a couple of (hopefully new) points on this (admittedly old) thread...

It's true that if you play with the library demo for the colour picker used by Node-RED and just change the color picker to "round", it is pretty much useless.

However if you remove the lightness bar, then it works very well, with the exception of @scargill's point that the circle is not white in the middle, it's grey.

(To be technically accurate, grey is a valid form of "no saturation", which would equate to "non-coloured-light" but of course this doesn't mimic the colour of light, because you can't have grey light coming from an LED.)

So whilst it doesn't look pretty, it's possible to use it to control RGB lighting in this way.
And whilst it's not technically "wrong", it isn't fit for the purpose of controlling lighting.

For example in the UI Template, I have:

<color-picker ng-model="myColor" options="{format:'rgb', round:true, hue:false, lightness:false, alpha:false}"></color-picker>

Hiding the lightness picker means that lightness is set to 50% (fine - we can control "brightness" of bulb using a separate slider) but at least you can get fully saturated light values.

Perhaps @scargill's point is that this isn't ideal; I would agree. But it's workable.

I have three questions:

  • Might it be possible to feed in a lightness value of 100%, so the circle displays correctly, and somehow ignore the lightness value on the output, so we get fully saturated colours on the output?

  • Slightly off-topic question: I am finding it difficult to work out how to get the colour - in any format - to be sent out of the UI Template node. With a button, you might add ng-click="send({action: 'press', topic: 'thisButton'})" but unfortunately ng-click isn't an option for the color-picker. Any ideas?

  • Finally, what are others doing for controlling the colour of lighting, given this? I'd really like to get this working in the UI Template node, for a more dynamic control of lights, e.g. auto generate the color-picker depending on what lights are in a given zone.

It may be old but the point i still valid - I'd given up and started using the Blynk colour ZERGBA. But I recently twigged to a big issue with that, it can't handle 3 colours at once - ie PINK. So I'm reading this with interest...

Can someone help with my questions about using Color-Picker in the UI Template node?

I'll distill my three questions (my post above) into one:

  1. I'm trying to replicate the Color Picker node in code using the Template UI node, but so far I haven't succeeded (see my post above). Has anyone else done this? Can you share your code?