Using color-picker in UI Template

Dashboard
1

Has anyone managed to get color-picker working in a Dashboard Template node?

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

This displays the picker, ng-change doesn't seem to be available for color-picker, so I'm not sure how to get a message out of it.

2

So apparently this is the color-picker used in Node-RED dashboard. Documentation says;

<color-picker
    ng-model="color"
    options="options"
    api="api"
    event-api="eventApi"
></color-picker>

Presumably I need to add an event-api parameter? Here's the documentation for that:

// api event handlers
$scope.eventApi = {
    onChange:  function(api, color, $event) {},
    onBlur:    function(api, color, $event) {},
    onOpen:    function(api, color, $event) {},
    onClose:   function(api, color, $event) {},
    onClear:   function(api, color, $event) {},
    onReset:   function(api, color, $event) {},
    onDestroy: function(api, color) {},
};

I've tried something like this, in the Dashboard Template node (just to see if it sends anything back when I change the colour):

<color-picker ng-model="myColor" event-api="onChange: function() {send({action: 'colchange'})}"></color-picker>

... but it breaks the color-picker element:

Clipboard01
Clipboard01.jpg1013Ă—942 45.5 KB

3

Sorry to bump, but can anyone help on this?

4

Can you live with the html color picker? Not as sexy but often does the job.

<input type="color" ng-model="msg.payload" ng-change="send(msg)">
2 Likes
5

Thanks, that works for me.

Incidentally, it is pretty sexy on the iphone, as it brings up a nice palette which sends values as you tap around the palette.

But on Chrome in Windows it brings up the old school color selection dialog, which requires clicking on a color then pressing okay (3 clicks).

Is there some cool jquery plugin that could be used to make it marginally nicer?