Hue style light cards

Tutorials & Examples
1

Hi community!

Here’s my attempt to create a light control page in the style of the Hue app.

It uses quite a lot of JavaScript and CSS in the widget YAML.

Features:

  • Dynamic card color dependent on current light states
  • Dynamic text and icon color dependent on current light states
  • Optional external HTML slider element which ignores touch events during scrolling
  • Overall brightness control for each room which only changes lights which are currently on
  • Optional month dependent power outlet for each room, e.g. to represent a Christmas light
  • Scene selection for each room

The relevant code and instructions to set it up can be found on GitHub:

2

It’s a shame that this kind of modification requires placing static files and creating rules. I would have loved if this kind of customization was possible via marketplace widgets. This even requires installation of the JavaScripting add-on to make it work.

Soon, widgets will be supported by “the new YAML format”. That will make it possible to define multiple widgets in one file, which will eliminate the need to install all the widgets individually.

3

Hm, I wouldn’t call it a shame. After all it IS possible to create something like this :blush:
But you’re right, it’s not possible to create a marketplace widget from this.

What really annoyed me was the stock slider element that directly reacts if you only touch it, but all you want is to scroll. That leads to too many false brightness changes.

The rest was then a question of “how far can I push this” :sweat_smile:

I guess you don’t need the JavaScript binding for this YAML-internal JS. The rule could be written in any format.

4

Oh, it annoys me too, and has done so for a very long time. It should be fixed in the standard slider, it is one of the reasons why I’m hesitant to move from Sitemaps to MainUI widgets. Not everything is “harmless” if they happen to be set way off, like the master volume for the sound system.