Custom widget: Angular radial color picker

Tags: #<Tag:0x00007f212abf2e10> #<Tag:0x00007f212abf2b40> #<Tag:0x00007f212abf2988>

(nicbuh) #1

I am currently trying to implement a radial color picker without the Brightness and Saturation. I have found a beautiful and user-friendly one written in Angular: Setting it up to show was quite easy, but I fail to get the selected color out of it and even after reading all the documentation it won’t work. The point where it fails is returning the value of the selected color. My code in the custom widget looks like this:

<div oc-lazy-load="['/static/color-picker.js', '/static/propeller.min.js', '/static/color-picker.css']">
    <color-picker ng-model="$ctrl.initialColor" on-select="$ctrl.onSelect(color)"></color-picker>
    Color selected: {{ color.hex }}

Any advise on how to get this to work is much appreciated. I can imagine that other people might be interested in this, so once it works, I’d be happy to post the complete code/solution.

HABPanel Development & Advanced Features: Start Here!
(Yannick Schaus) #2

Can you post your controller’s code?

(nicbuh) #3

Thanks for your reply, Yannick. I have meanwhile received some further directions from the angular core developers on reddit ( The current code looks like this:

In the custom widget:

<div oc-lazy-load="['/static/mycontroller.js', '/static/color-picker.js', '/static/propeller.min.js', '/static/color-picker.css']">
  <div ng-app="app">
      <div ng-controller="mycontroller as $ctrl" id="demo">
          <color-picker on-select="$ctrl.onSelect(color)"></color-picker>

          {{ $ctrl.color }} <!-- print the selected color -->

And the mycontroller.js:

    .module('app', ['color.picker.core'])
    .controller('mycontroller', function() {
        var $ctrl = this;
        // It's okay if you don't provide an initial color -
        // color picker defaults to #ff0000 (full red)
        $ctrl.color = null;

        // When you click on the color selector (the inner circle) 
        // your color model gets updated
        $ctrl.onSelect = function(color) {
            // Assign the value to the view model in order to show it.
            $ctrl.color = color;
            console.log('#' + color.hex); // hex value is at disposal too
            // Currently it's only extrapolated as plain text.
            // In the full demo (
            // we're updating the header color with the ng-style directive

The error message in Chrome’s developer tools reads:
Error: [$controller:ctrlreg]$controller/ctrlreg?p0=mycontroller

(Yannick Schaus) #4

@nicbuh I see two mistakes:

  1. In your template: you can’t define a second ng-app beneath the one already defined by HABPanel - remove it;

  2. In your controller: the line

.module('app', ['color.picker.core'])

means you’re defining an module named app but it is already defined. See Since you want to add a new dependency, what you can do is come up with a new name like:

.module('app.widgets.mycolorpicker', ['color.picker.core'])

Good luck!

(nicbuh) #5

@ysc Works like a charm! I even realised that I can further simplify it like this:

Custom widget:

<div oc-lazy-load="['/static/mycontroller.js', '/static/color-picker.js', '/static/propeller.min.js', '/static/color-picker.css']">
          <color-picker on-select="sendCmd('ColorGroupAll_Color',  color.hsla.hue  +',100,100')"></color-picker>


    .module('app.widgets.mycolorpicker', ['color.picker.core'])

Right now the callback is only triggered after the the color is actually selected by clicking the button in the middle, but I understand from the developers that they plan to update the color while dragging the handle in their next release. Then it will become a really awesome widget.
Here is how it looks now:

(Jan Schreiber) #6


this is pretty cool but the widget doesn’t seem to scale well. Is there a way to make it scale when you resize the browser? Or maybe just have the middle dot there and having a pop up with the full color picker when the dot get’s cklicked?

I tried to achive this on my own but i’m not (yet) familiar enough with Angular / CSS / JS to do it :frowning:

kind regards


(Nguyễn Phúc Anh Đồng) #7

Nice job!!!
Can you share with us the .js files Please?

(nicbuh) #8

Have you tried CSS media queries?
I’m only using it on my iPhone so responsiveness is not yet a topic for me. I have simply set a fixed width and height.

(nicbuh) #9

I suggest you get the .js files from the official site:

(Jan Schreiber) #10


i did that, but didn’t helped. But with a little help i got it solved now:

Just open color-picker.css and edit the first block to look like this:

color-picker {
 display: block;
 overflow: hidden;
 position: absolute;
 top:10px; bottom:10px; left:10px;right:10px;

Then it’s sitting centered in the box and just scales perfectly, awesome!

kind regards


(Nguyễn Phúc Anh Đồng) #11

Hi I have a RGB strip connected to 3 variable resistors which are used to adjust the RGB color.
How can I make this color-picker wheel to respectively change the color whenever I adjust the variable resistors? I mean, does this color-picker receive a string which contains RGB value and then change its color?

(Hans-Jörg Merk) #12

No, it does not.
If you read the docs about openHAB concepts, especially items
you see that it receives HSB value.

(pascal) #13


I’ve been trying to build a new widget based on the above.
In the meantime it seems that the color-picker code has changed, so since i’m very new too AngularJS, it was a bit of a strugle. But currently I have a visible colorpicker and I’m able to control a hue color lamp while dragging the handle.
Next step for me is to make sure that the initial color picker color is in sync with the lamp color state. This can be done by passing a parameter “color” to the color-picker. However I’m not able to pass the correct values :frowning:

example:This initializes the color-picker to color 120 (green),
<color-picker color="{ hue: 120, saturation: 100, luminosity: 50, alpha: 1 }" on-color-change="$ctrl.onSelect(color);sendCmd('hue_keuken_2color', $ctrl.color.hue +',100,100')"></color-picker>

however the following fails.

<color-picker color="itemValue(‘hue_color_string’)" on-color-change="$ctrl.onSelect(color);sendCmd('hue_keuken_2color', $ctrl.color.hue +',100,100')"></color-picker>

The item hue_color_string is a string item, and contains "hue: 120, saturation: 100, luminosity: 50, alpha: 1"
The color-picker however fails.

I also tried:
<color-picker color="{{itemValue(‘hue_color_string’) }}" on-color-change="$ctrl.onSelect(color);sendCmd('hue_keuken_2color', $ctrl.color.hue +',100,100')"></color-picker>

<color-picker color="{itemValue(‘hue_color_string’)}" on-color-change="$ctrl.onSelect(color);sendCmd('hue_keuken_2color', $ctrl.color.hue +',100,100')"></color-picker>

No luck.

Any help is much appreciated!

(Michael) #14

this is a cool widget i wouldlike to use. unfortunately i’m an abolute beginner in term of widget/Java.

As the color-picker has changed a bit, to above solution seems not to work.

could anybody help with an updated

widget (if necessary)

would be grat!