Hi
I've used the dashboard in the past then stopped using it in general because of the colour wheel. That was ages ago. Tonight having not used it for ages I thought I'd take another look. Not a lot seems to have improved on the colour wheel.
Typically for RGB lighting one might want to select saturated colours and have the option also to go for unsaturated -ie pastel colours. In the current colour wheel, with brightness slider in the centre, you get a grey wheel centre. To get a white centre you can set the brightness slider to full. Greet, the wheel now shows colours around the outside and full white in the centre - but not only is the hue slider now all white but moving the wheel pointer in and out has no effect.
Is it yet possible to have the wheel control determine saturation somehow? (at which point you might not need the other two sliders for lighting control. The BLYNK ZERGBA control is a better example (if a little unweildy) of controlling RGB lights.
Pete - the current library is this one - https://ruhley.github.io/angular-color-picker/
Can you see if you can find you mode you want in the options it offers ?
If not then we/you would need to change the library for one that does, but this one does offer nice things like the small swatch, expand/shrink, optional sliders etc - so any replacement would also need to offer similar, and be an angular 1 control, but happy to consider one if it can be found.
Note - you can also use a Dashboard text input node - set to colour picker mode... this uses whatever HTML5 widget your browser happens to have built in.
Hi Dave
Looks like I’ve opened a can of worms here.. Sorry, this may be a dead end (or not) in which case sorry to bother you.
I went to the link you included. The only thing I changed was “round – yes” to turn the colour wheel on. Clicking on the value, the wheel appeared – with a round indicator just as you have it, suggesting that moving that point around would change the selected colour – it does not. Meanwhile there are 4 sliders to the right – two of which are almost invisible due to being white. No amount of moving the point in the wheel around will change the actual selected colour. The slider 2nd from the right, if put half way up, allows that point in the wheel to work but produces a horrible grey in the wheel itself. There seems to be no combination that would let you control colour and saturation with the wheel. i.e. No good.
I looked at other Angular stuff….
This example from Chis Woodle looks nice but offers no saturation control of intensity in the wheel at all. https://codepen.io/chriswoodle/pen/MEbqbj
At first glance it seems that no-none in the Angular school of thought has managed a truly useful WHEEL for selecting colour (hue) AND intensity by ordinary folk.
It IS possible to do this in a wheel, moving the pointer in and out, one version who’s demo has sadly disappeared shows the outer edge of the wheel black and the centre white.
The ONLY Javascript wheel demo I could find that does the job of an elegant wheel + slider is linked below here and is REALLY elegant and easy to use. Note that the wheel selects ANY hue up to white and there is a single, separate intensity control to take you all the way to OFF (black) – ideal for RGB LED control. It is touch-compatible, but not Angular. Last updated August 2018. It is HTML5 Canvas based. https://www.cssscript.com/sleek-html5-javascript-color-picker-iro-js/ I took a quick look and it allows NPM INSTALL. I've also tested it on mobile and it works a treat and is MIT licence. I wonder if anyone would consider the challenge of getting it into a Node-Red Dashboard template,,,
I appreciate this is well away from a simple Angular component but felt the need to show how I feel a colour wheel should be.
Pete
Yes,
It would seem the author of the one we use closed this https://github.com/ruhley/angular-color-picker/issues/152 so probably doesn't consider it a thing to fix.
I can see what you mean on the other one.
We may be able to monkey-patch the picker to do approximately that - but it would be a change to the widgets behaviour - which of course may not be what other folk desire.
But maybe it's a better default. (if it can be made to work).
I’ll leave that with you. If it helps I get lots of IOT types on my tech blog and a good number of them use LED lighting so I think a good colour wheel would go down well, especially when their non-technical partners get to use it. I understand of course that the wheel I sent a link to is FAR from what you are doing but if it is possible to get that behavior out of the Angular component I’m sure it will go down well. The current operation is not intuitive… it makes sense to have solid colours around the outside heading through pastel to white in the centre, but you might want to turn the lights down or off without losing your hue setting… so I suspect that iro.js is bang on… right, I’ll leave you alone.
Seems like this would be a good use case for a new node type rather than a modification of the existing one; though I'll admit I'm the type of guy who re-buys the same movies every time a new format comes out...
1 Like
Well, as to be fair the existing one is called a colour PICKER, that seems a reasonable idea IMHO - so if it IS possible then a new type - a colour wheel...then there would be no compatibility problems to even consider. (we have a saying in the Northeast shy bairns get nowt).. personally I am convinced the existing colour picker is slightly bust as are many similar ones out there and I mean no disrespect to the hours people put into these things. I mentioned the BLYNK RGB conrol for Android... it can't do all colour combos and is ugly but it does work - personally I think brilliance SHOULD be separate and here we see just that - hue and saturation IN the wheel - intensity down to all off in a slider.. it is possible this iro.js (which I only accidentally stumbled upon today) may be one of if not the best wheel - and it is MIT and works really smoothly on a PC AND a phone. I need to back off here - thought I'd say that before someone else does..
Dodgy hack
Goes from white to full colour at edge - then have to use slider to go darker (or indeed can also go lighter)
Iro.js does indeed look sexy as hell on touch interfaces. If some better coder than I (which leaves it open to just about anyone) makes that work I'd owe them a beer. If it had selectable color space options I'd owe them a good beer.
pushed a test to master as 2.9.9-beta
Happy to back up my main setup and test this afternoon.
Ok, just testing now... no, doesn't do it. With white in the centre of the wheel (i.e intensity on full) and colours around the outside, the value remains white FFFF no matter what you do with the wheel itself. The ONLY thing I changed was to show the value.... so, the intensity slider you use does the job but if only you could alter the VALUE so it reflects the colour at the current position of the little circle inside the wheel, you'd just about be there I think. So near yet so far? 
OH dear, I didn't realise this but despite having EVERYING up to date on my PI3 (or so I thought) - I was ACTUALLY using NPM 5.odd. I've NOW upgraded to npn 6.4 and the behaviour of the wheel has just degraded,
So NOW you cannot move that little circle in the wheel in and out - only around the edge of the wheel - and the intensity (brightness) control moves up and down with it - that is completely wrong.
Actually now with npm 6.4 (no other changes and yes I rebooted) .. the behaviour is worse, the circle in the wheel remains glued to the outside... and moving that circle around the colours triggers changes in the intensity!
At least with NPM 5.odd it was ALMOST there, just needing the value fixing, but now, it is worse. Sorry - your effort and interst is REALLY appreciated.
the circle remains around the outside - but clicking towards the centre should head towards white. the slider then lets you also go black as you can't do both with the wheel.
(npm version shouldn't matter - it'll be the fact you refreshed the browser twice to flush the cache)
Right, refreshed browser for both NR and dashboard. I'm still on NPM 6.4. Now, with brilliance slider in the middle, moving around the outside of the wheel gives me red, green, blue etc.. moving into the middle of the wheel does roughly the right thing, centre gives white, though it does not turn white until you get there. But the circle remains on the outside (your beta with 5.4 correctly showwed white in the middle all the time and the circle in the wheel moved in and out properly _ I tried that umpteen times before upgrading to npm 6.4 (this is all on a backup so I COULD start again to prove it but I'm pretty sure I'm right). Also, now, the intensity slider is moving around as you change colour position in the wheel, so using it as an intensity control is out of the question. And yes I've stopped NR and restarted to confirm the behaviour...
Originally with 5.3 (or whatever npm I was using, 5.x) the circle moved in and out correctly and the inrensity control stayed put. I'm assuming if this is to work, what happend with 5.3 is not important... 6.4 is...
What modules are you installing to use this colour wheel? What entry for it do you have in your package.json file?
I'm struggling to see why the version of npm has any bearing on the behaviour of a colour wheel widget in the dashboard.
Hi Nick
I merely found that example wheel iro.js - and tested it in a browser and on my Android mobile - most wheels out there are poor, this was MIT licence and by all accounts very good on browser and phone. . simple,
beaufiful. However it is Canvas.
To use your colour wheel I've installed nothing - just using Dashboard on the Pi3. I abandoned Dashboasrd in the past as the colour wheel was no good for RGB lighting control (typical use) - but last night, Dave had a go at beta changes so the WHEEL would allow colour and saturation control (up to white) - with the intensity control allowing separate intensity (brightness) control. JayDickson wrote in to agree with the sentiment.
This morning I grabbed the BETA dashboard with the changes Dave made yesterday and (though I didn't realise I was on NPM 5.3, I thought I'd fully updated everything last week) apart from the value being wrong, the wheel worked. The centre of the wheel was white and moving inside the wheel (which also worked visually) left the intensity slider alone but appeared to affect the saturation as expected. White in the centre of the wheel should not be confused with intensity - it is 100% desaturated colour.
Sadly the actual VALUE didn't change but I suggested that might not be hard to fix. In the meantme I used sudo npm i -g npm to bring npm up to 6.4 (making no other changes and rebooting my PI3 afterwards. At that point the ability to move the WHEEL control circle in and out stopped working (it would now only go around the outside) and instead the intensity slider started moving up and down. I checked with a reboot and browser refresh, no difference. One step forward, 2 steps back.
Nick - I've restored the Pi to pre-last night condition (thanks to the excellent rpi-clone which some folk think can't work). If you'd like me to start again, firstly with npm 5.x then updating - I can certainly do that. Would this warrant an offline conversation, folk might get bored with the detail in here?
My point was, you kept quote the npm version at us, but the npm version does not tell us about what version of dashboard or anything else you have.
So when it stopped working, did you check what version of dashboard you actually had installed? It's possible npm reverted you back to whatever you have listed in package.json.
Sorry I assumed that was understood - my mistake - the official dashboard colour wheel I gave up on months ago - but after bringing the subject up yesterday I was delighted that DCJ had a go with the control and put up a Dashboard BETA with modified wheel control.
ASnd apologies, in the past when dashboard controls didn't do what I wanted I made alternatives ising the TEMPLATE dashboard control - they are all out there - on the blog at tech.scargill.net - but for the colour control, I decided to give the Dashboard control another look - I had a mishaps late last year and cannot yet concentrate sufficiently to just dig in and change the colour wheel myself so I got excited to see iro.js out there and DCJ kindly took a look to see if it is possible to make the dashboard wheel a little more like that in operation. Right now the dashboard control isn't much use for controlling RGB lighting... it seemed this morning that we were so near, then ALL I did was upgrade the NPM versio (with NR turned off) - nothing else - then turne NR back on and now the control doesn't do what it did at first.
Anyway I'm back to pre-beta.
