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.