A color picker / slider widget for HADashboard

Third party integrations HADashboard
1

I made a small color picker/ slider widget to control lights in HADashboard.

1011Ă—1488 99.9 KB

Features:

  • Pops up a color wheel when the small colored button on the top right of the widget is clicked
  • Control the brightness with the slider
  • Click the icon to toggle the light on/off
  • The small button shows the current color and brightness of the light

You can find the widget here.

1 Like
2

the light widget looks great.
does it work in a 120x120 widget, or does it need more space?

and whats the difference from slider with the already existing slider widget?
except appearance that is changable anyway?

3

It actually works, but I see that the color button is a bit off. I’ll adjust it and it should work with any size. The slider and color wheel seems to work also at 120x120.

4

can you post pics from 120x120 in default skin?

5

small
small695Ă—231 7.75 KB

As you can see, there is not enough space for the color button if only one column wide. This is 100x100 so maybe 120x120 will work. I can add some code to make the color button smaller if widget size is less than 2 columns.

6

Not sure if the slider has any difference.

No, tested now, and no difference apart from appearance.

7

so no need to create/publish that :wink:
and back then i did decide for 2 widgets 1 with colorpicker and 1 with slider. because of the space problem. :wink:
but indeed there is probably need for combined widgets that take 2 places.

8

I have an LED strip configured as a:

"
light:
  - platform: mqtt
    name: "luces_rgb_salon"
    retain: false
    state_topic: "stat/H801_1/POWER1"
    command_topic: "cmnd/H801_1/POWER1"
    rgb_state_topic: "stat/H801_1/COLOR"
    rgb_command_template: "{{ '%02x%02x%02x' | format(red,green, blue)}}"
    rgb_command_topic: "cmnd/H801_1/Color"
    rgb_value_template: "{{(value_json.Channel[0]*2.55)|int}},{{(value_json.Channel[1]*2.55)|int}},{{(value_json.Channel[2]*2.55)|int}}"
    effect_state_topic: "stat/H801_1/SCHEME"
    effect_command_topic: "cmnd/H801_1/Scheme"
    effect_value_template: "{{ value_json.Scheme }}"
    brightness_state_topic: "stat/H801_1/DIMMER"
    brightness_command_topic: "cmnd/H801_1/Dimmer"
    brightness_value_template: "{{ value_json.Dimmer }}"
    brightness_scale: 100
    qos: 1
    payload_on: "ON"
    payload_off: "OFF"
    effect_list:
    - 0
    - 1
    - 2
    - 3
    - 4

The widget is defined like this:

     leds_RGB:
        widget_type: swipe_light
         entity: light.luces_rgb_salon
         title: "LED's salĂłn"
         icon_on: mdi-lightbulb
         icon_off: mdi-lightbulb

The problem is that pressing the icon does not turn the light on or off.
The other two functions work perfectly (color wheel and brightness)

On the other hand, the light widget works perfectly.

luz_rgb_salon:
    widget_type: light
    entity: light.luces_rgb_salon
    title: LEDS RGB salĂłn
    widget_style: "background-color:TEAL;"
    on_attributes:
        rgb_color: 255, 255, 255

Any ideas?

9

is the widget big enough?

10

If you are using a Chrome browser, please open tha javascript console (press F12 or shift-ctrl I) and chose the element inspector tool (the small icon on the top left of the console) and hover over the widget until you see

div#click_area.click_area

if the widget dimension is very small,this area might overlap with the color picker icon

h1#cp.cp

If this is the case, I’ll try to make the clickable area not overlap by dynamically adjusting the sizes.

1 Like
11

The area does not include the icon. That’s why it didn’t work for me.
Clicking on that area does work.

image

12

Aha, what size is your widget?

13

I have made some adjustments to the widget. Please download the baseswipe_light.js, baseswipe_light.css and baseswipe_light.html and see if it works. I tried a few different sizes and it seems to work better now.
https://github.com/tjntomas/HADashboard-widgets/tree/master/custom_widgets/baseswipe_light

14

The dimensions are:

widget_dimensions: [207,194]
widget_margins: [5, 5]

But now, after the changes, it works perfectly.

It’s an incredible widget!

Thank you very much!

1 Like
15

Hi, i wonder if you can add a way to set the light white, when im picking a color i can’t return to normal light, i have to set it with google home otherwise I really love this widget !

16

Hmm, depends on how it should work. I could add that a double click/double tap on the color wheel sets the color to white perhaps.

18

I like the idea, it could work well!

19

Ok I uploaded a new baseswipe_light.js here. Try it out and let me know if it works as expected.

20

white can be 2 things

  1. whitevalue between 0 and 250
  2. effect white
21

is it possible to use this with the default layout, i.e. no custom css? I’ve configured one of my switched to use the “swipe_light” and now my layout looks like this: (no css is applied)

image
image1069Ă—775 7.56 KB

I’m using the default theme, so not sure where to find or create the custom css file. - I’ve since created a variables.yaml and a default theme, however all my “squares” are still empty.

Thanks In advance.