A color picker / slider widget for HADashboard

Third party integrations HADashboard
62

Great! I will update the repo and adjust the other widgets that use async function.

63

I honestly really appreciate your help with this, I couldn’t have got this far without your input.

64

It might actually be more useful to be able control the colour temperature, over “fun effects”

65

I know this issue was a long time ago, but has this been recompiled? as I’ve got the same issue back after adding your camerastream widget.

Thanks.

66

I did fix it, but forgot to upload to github. Will try to do it during the weekend. Thanks for the reminder!

67

Thank you. one more quick question, how do i modify the size of the slider at the bottom? and can that be done per dashboard or even per switch?

Thanks.

68

(swipe_light_)slider_style can be changed.

in your skin (swipe_light_slider_style) in variables.yaml for all widgets from the same style or in dashboard (slider_style) for a seperate widget

you can set all accepted CSS. (witdh, height, left, right, etc.)

69

Thanks I got it sorted. I removed async at the begining of the function lines, and it’s all working, with the camera’s too!

1 Like
70

Hi,

I have been using the color picker widget for a while but today I upgraded appdaemon to the dev branch and the widget didnt load anymore. There’s a error message on the logs saying:

2019-12-14 14:44:50.271505 WARNING AppDaemon: Error in widget definition '%s':
2019-12-14 14:44:50.271690 WARNING AppDaemon: parser says
2019-12-14 14:44:50.271810 WARNING AppDaemon:   in "<unicode string>", line 2, column 10:
    entity: {{entity}}
            ^

The fix was simple: just add quotes to {{}} variables on light_swipe.yaml file, i.e. entity: “{{entity}}”

71

indeed thats a breaking change for custom widgets.
has to do with changes in the yaml interpreter from python.

72

Hi Tomas,

I would really love to use your custom widget, but I am having problems getting it running.

My widget definition looks like:

wzfarbig1:
    widget_type: swipe_light
    widget_style: "font-size: 150%;"
    entity: light.tradfri_lampe_farbig1_level_light_color_on_off
    title: "WZ-Lampe"
    title_style:  "font-size: 30px;"
    enabled: 0
    icon_on: mdi-lightbulb-on
    icon_off: mdi-lightbulb-off-outline
    icon_style_active: "color: yellow; font-size: 350%; margin-top: 10px;"
    icon_style_inactive: "color: grey; font-size: 350%; margin-top: 10px;"

variables.yaml:

swipe_light_title_style: $style_title
swipe_light_title2_style: $style_title2
swipe_light_widget_style: $background_style
swipe_light_level_style: "font-size: 15px;"
swipe_light_unit_style: "font-size: 10px;"
swipe_light_button_style: ""
swipe_light_slider_style: "background: rgba(100,100,100,0.5)"
swipe_light_icon_on: mdi-lightbulb
swipe_light_icon_off: mdi-lightbulb
swipe_light_icon_style_active: "font-size: 250%!important; $style_active"
swipe_light_icon_style_inactive: "font-size: 250%!important; $style_inactive"

It looks fine:

1
11168×724 39.9 KB

Problem is: I can move the slider, and I can pick a color, but he is not changing the brightness or the color. Also I cannot switch the light on/or off. The status of a manually change in Homeassistant or with voice command is displayed correctly, but I cannot change it on the dashboard.

Element picker of chrome shows that if I put my mouse next to the icon:

2
21144×676 44.6 KB

Icon:

3
31135×681 42.5 KB

slider:

4
41144×664 43.1 KB

Do you have an idea what I can try to solve this one?

Best regards,
Christian

73

There was a change in the call_service API that I missed. I have uploaded adjusted files to the repository now. This new version also includes a button to chose light effects such as colorloop and random, but you might need to adjust the size of the widget to (2x1). I will later add code to make this button optional. Please try it out and let me know if it works as expected.

74

Hi Tomas,

I couldnt get this one running. It looks like this (both widgets (3x2) but also tried(2x1)):

1
11141×661 36.8 KB

The right one is the normal light widget, which is working (on/off/brightness).
The left one is your widget, which has one button more, but is still not working :confused:

It shows the on/off and the brightness status, but i cannot change it via the widget.
Also I think color-picker is working worse. Additional button is doing nothing :frowning:

What can I try?

Best regards,
Christian

75

@tjntomas

Do you have a version with the slider only and not the other two buttons? The .cp slider seems to reduce the clickable area in the title substantially. Standard appdaemon light will trigger on/off at any location but the brightness buttons.

76

there is a version with a slider only or with a plus/minus button, on default in HAdashboard

77

I had no idea, I see slider options in doc but confused on how you apply to a light. Do you have an example?

78

sorry, my mistake i thought the light_wth_brightness was added to default.
but its still in my github.

1 Like
79

So I just pulled an old iPad 2 out of the drawer and ran into this issue as well. It looks to me like the “async” function was not a thing back in this version of safari. I didn’t study the code too hard, but the functions are on eventListeners, and they don’t really need the async functionality. I also couldn’t find a corresponding “await” for these function calls. I started going down the “Promise” route, but that doesn’t seem necessary either.

I simply deleted the "async " before “function” on the respective lines of code and all is working well, in old and new environments (chrome, firefox, old safari, edge, etc). If anyone else stumbles across this, I hope this helps! The semicolon addition broke the functionality on the newer browsers, and it’s just a way of tricking compiler/debugger as far as I can tell.