Custom widget: Angular radial color picker

Apps & Services HABPanel
, ,
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:

https://talamaska.github.io/angular-radial-color-picker/ 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 }}
</div>

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.

2

Can you post your controller’s code?

3

Thanks for your reply, Yannick. I have meanwhile received some further directions from the angular core developers on reddit (https://www.reddit.com/r/javascript/comments/611tjv/angular_radial_color_picker/). 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 -->
          </div>
  </div>
</div>

And the mycontroller.js:

angular
    .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 (https://talamaska.github.io/angular-radial-color-picker/)
            // we're updating the header color with the ng-style directive
        }
    });

The error message in Chrome’s developer tools reads:
Error: [$controller:ctrlreg] http://errors.angularjs.org/1.5.11/$controller/ctrlreg?p0=mycontroller

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 https://docs.angularjs.org/guide/module#creation-versus-retrieval. 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!

1 Like
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>
</div>

mycontroller.js:

angular
    .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:

2 Likes
6

Hi,

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

jan

7

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

8

Have you tried CSS media queries?
(https://www.w3schools.com/cssref/css3_pr_mediaquery.asp)
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.

9

Hi,
I suggest you get the .js files from the official site:
https://www.npmjs.com/package/angular-radial-color-picker

10

Hi,

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

jan

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?

12

No, it does not.
If you read the docs about openHAB concepts, especially items
http://docs.openhab.org/concepts/items.html
you see that it receives HSB value.

13

Hi,

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!

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)
mycontroller.js

would be grat!

thx

15

I was able to integrate the color picker into the widget so far. however, there are still some problems.

The color picker opens automatically in a fixed color when you change pages.

However, I would like the color value that was set last to be saved and displayed again when changing pages.
The color picker should always start closed.

Can someone help?

16

Where to get color-picker.js, propeller.min.js, color-picker.css?