THIS: 
I’ve just begun buying RGB LED bulbs for my HA installation and have ZHA up and running with my Conbee II dongle and several Philips Hue bulbs (and a Go). Having never used scenes, I considered several approaches over the period of a few days to figure out how I wanted to control them. I put two in my living room and wanted to control them both individually and as a group. I played with creating scenes. Then tried using scripts triggered by buttons on the UI to toggle the lights with the correct parameters. I tried using Button cards and Custom-Button cards, but they behaved differently depending upon whether I used the tap-action to call a script or a service, like scene.apply. I tried activating pre-created scenes, but also tried putting everything in the card itself as service-data to the on-the-fly scene.apply service call, trying to find what felt right.
After getting several approaches to work, I set out to create a card that allowed me to set a Warm and a Cool scene using buttons that didn’t toggle the lights on/off. I also wanted a separate switch that could be used just turn the group off or on. Then I thought it would be nice to be able to define a color scene on-the-fly where I would define the Hue, Saturation, and Brightness through inputs, and press a button to set a scene based upon those inputs.
The card I came up with is shown below. All four icons (i.e., the three buttons, and the icon for the switch), all match the current color. When the lights are off, the icons change to the -outline version of the icon.
I soon realized that setting the Hue was not trivial unless I memorized the numbers for the primary and secondary colors from the color wheel to determine the color I wanted. I thought that a Hue Slider which has a background that was color-number accurate representation of the color wheel would be a really cool feature So I set out to find one. Hmm… nothing.
I began thinking about how I could set a background on the slider using a GIF I created in Photoshop. Then I discovered that CSS has a background-image tag that lets you apply a linear gradient and define the colors! The trick, then, would be to get Lovelace to put it where I wanted it. That process took several days, but I FINALLY was able to do it using Thomas Loven’s Card-Mod. It took me a while to finally get the right selectors figured out, but the resulting code is surgical in its effect and extremely brief. The following code added to the entity row in the entities card for the Hue slider created just the effect I was looking for:
card_mod:
style:
"ha-slider$ paper-progress$": |
div#progressContainer {
background-image: linear-gradient(to right,red,yellow,green,cyan,blue,magenta,red);
--paper-progress-active-color: none;
}
This changes the previous Hue Slider to that shown below. Gotta love Home Assistant and all the cool, smart people who make creating things like this so easy! Of course, this could break with any future UI update, but it would now be trivial to figure out how to change the above to make it work again. I can live with that!
