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.
Pete
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 unfortunatelyng-clickisn'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:
- 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?
as i recently switched my home automation from mysensors to node red (and node red dashboard), i stumbled over this thread. as i have implemented iro.js in mysensors as a component previously, i wanted to use this library on my new dashboard as well.
as this was the first thread listed in googles search results, i wanted to share my solution, for those of you who are not satisfied with the default color picker node.
i added a "template" node to my flow, unticked "Pass through messages from input" and wrote the following code into it.
beware: you need to change some bits, if you want to use multiple instances of this on your dashboard.
<script src="https://cdn.jsdelivr.net/npm/@jaames/iro/dist/iro.min.js"></script>
<script>
var theScope = scope;
var storedStateColor = getLastColor(theScope);
var colorPicker;
/**
* initialize iro.js component
*/
function initIroJs()
{
//wait for iro library to be loaded
if(typeof(iro) === 'object')
{
//and initialize component
colorPicker = new iro.ColorPicker(
"#color-picker-container",
{
width: 300,
color: fixColorString(storedStateColor),
}
);
colorPicker.on('input:change', onColorChange);
}
else
{
setTimeout(function() { initIroJs(); }, 250);
}
}
function onColorChange()
{
theScope.send({ payload: colorPicker.color.hexString });
}
/**
* update colorPicker state if msg.payload is received
*
* @param {string} payload - hex color string
*/
function messageReceived(payload)
{
if(typeof(colorPicker) === 'object')
{
colorPicker.color.hexString = fixColorString(payload);
}
}
/**
* prefix hex color strings with # if not present
*
* @param {string} color - hex color string
*/
function fixColorString(color)
{
return color.startsWith('#') ? color : '#' + color;
}
/**
* checks for stored msg object and returns the last set color, if present
*
* @param {object} theScope
*/
function getLastColor(theScope)
{
//check if stored state has a msg object
if(typeof(theScope.msg) === 'object')
{
//check if payload is a hex color string
if(typeof(theScope.msg.payload) === 'string' &&
theScope.msg.payload.match(/^#?[A-Fa-f0-9]{6}$/))
{
return theScope.msg.payload;
}
}
return '#000000';
}
theScope.$watch('msg.payload', messageReceived); //listen for incoming messages
initIroJs();
</script>
<div id="color-picker-container" style="min-height: 350px;"></div>
i am currently learning how to make this a completely functional and publishable node.
3 Likes
Thanks for this, I like it a lot. I changed the size to be smaller (and min height at bottom of code). I'd like to have an option to only send the stop value rather than all the ones in between, but I'll manage for now.
I changed input:change to input:end and this now outputs only the final colour and not any intermediate ones while making the selection. An option to set this would be useful when making your node. Thanks!
It seems that many months later the colour wheel never did get improved - and for me remains one of very FEW weak points in Node-Red. For me rather than adding in a manner of 3rd party Dashboards, I'd LIKE to think that NR is fully self-contained but with increasing deployment of coloured LED lighting, noy judt RGB and RGBW but also RGBWW, the Dashboard colour wheel really could do with replacing. If I were up to it I'd get on and do it. I first griped about the wheel in September 2018 - maybe I should have started commenting a lot earlier. NR in general continues to go from strength to strngth but not, sadly, support in Dashboard for coloured lighting.
still time for you to fix it if you like... people can contribute ui-widgets so you can build a new one and contribute it.
Hi DCEEJAY, sadly I have been unable to fix it ā I have tried. I was rather hoping someone else was up to the job. Iāve made a few small contributions to Node-Red which remains my tool of choice but I canāt quite get my head around the colour controller.
Pete
You can always create a new one that is to your liking instead.
I should have said I cannot get my head around A colour controller, not just that specific one. I got so far with an alternative. What's needed is someone who has lots of time due to not being allowed to socialise. I wonder if we can find anyone in that situation 
As time goes by ...
1 Like
Still no mobile use?
As a widget it works perfectly - i set it in a 7 grid wide group and it is easy to use with my thumb. Only the popup has some issues - hopefully someone can help me out here soon. Still reading a lot of things on z-index but still no Solution.
