Gh61/lovelace-hue-like-light-card

How to change Slider Color and Grouping lights

Closed this issue · 6 comments

Hi,

First of all great card. I never seen a card which looks so great as the hue app now its my main card for lights.

Here are my Questions:

  1. How to change the Slider-Color if I pressed on the Card? The card-mod works (from your readme) but as soon as I click on the card the slider changes to the Color of the Homeassistant settings.

  2. How can I group lights? I know the Group function of Homeassistant but for me it doesn't seem to be right. It's too static. Sometimes you want to change only one bulb of a light or all of them.
    A dynamic group function for all lights which are specified in the entities of the card would be great.

Thanks for reading!

Gh61 commented

Hello, thank you for kind words.
To your questions:

  1. I suppose you are trying to change color of the mushroom slider? Please post your yaml configuration of the card, for me to check.
  2. I didn't quite get this question. You can add entities to this card and change them all at once on the main screen, or one by one on the hue-screen. That's it.

Maybe you are searching for something like this:
I'm implementing the feature, to load all lights from given area (#113) and even to control them all at once (#55).

Hi @Gh61 ...

Here is my config:
type: custom:hue-like-light-card title: Schlafzimmer entity: light.schlafzimmer slider: mushroom style: | .brightness-slider { --mush-control-height: 50px; --slider-color: white; }

Here the Color of the slider is only white if I don't tap on the card. As soon as I tap on the card the slider is not white anymore.

The config looks like this: image

It's a homeassistant group - here I can't change the lights individually.

And here is the other config:
`type: custom:hue-like-light-card
title: Arbeitszimmer
entities:

  • light.schreibtisch_1_light_3
  • light.schreibtisch_2_light
  • light.kino_1_light_4
  • light.kino_2_light_2
    slider: mushroom
    style: |
    .brightness-slider {
    --mush-control-height: 50px;
    --slider-color: white;
    }
    `

And here I can't change the Color temperature for all lights at the same time:
image

Gh61 commented
  1. You are correct. The card-mod style is only applied to the card on your lovelace dashboard.
    The screen you posted has opened dialog and the dialog does not allow to be styled. Actually I'm not even planning it yet.
    It's more possible, that I'll add some other way for changing the mushroom slider colors, but for now the color in dialog is decided based on your selected style.

  2. When you use the HA group, the control sees it only as single entity and 'does not know' this entity is actually multiple entities at once. So the second solution is preferred. Changing color or temperature of all lights at once is definitely planned (see #32), but not implemented yet.

@Gh61 ...

Thank you for the explanation. I really appreciate that you take the time to answer those questions.

Regarding to 2.) I would hope to see this feature soon and if you're developing this. I would really appreciate if you allow to select a default behaviour. For me controlling all lights at the same time happens more often than controlling only several lights.

Last question to this card. Is there a way to increase the size of the card but keeping the slider height the same as already set? Increasing the slider height increases also the card but what if I only want to make the card bigger (I like the look of the card on a bigger screen it looks a little bit 'lost'...)

Thank you in advance!

Gh61 commented
  1. My plan is to make the selector as similar to the official Hue App's one, as possible. If I remember correctly, it lets you easily group lights to single pointer, which controls all of them. And also, if they all have the same color, the pointer is automatically grouped. So yeah, something like this is coming.

Yes, you can add some space around the slider, if you want the card to be bigger. For example like this:

type: custom:hue-like-light-card
...
style: |
  .brightness-slider {
    --mush-control-height: 20px;
    --slider-color: white;

    /* Add some space around the slider: */
    display: inline-block;
    margin-top: 20px;
    margin-bottom: 20px;
  }

I just accidentally closed the issue, but it seems like all is resolved for now, so I'll leave it that way.
Feel free to reopen, if there's anything else (related) to discuss.

3. So yeah, something like this is coming.

Wooooohooooooooo!!! I just switched my hue bulbs over to zigbee2mqtt and am missing the auto grouping. Looking forward to this :)