💡 Lovelace: RGB light card

Jamie_Pryer · January 8, 2021, 12:17pm

Thanks, this is awesome
i use mine with a conditional card, so it only shows when the lights are turned on.

- type: conditional
    conditions:
      - entity: light.bedroom_all_lights
        state: 'on'
    card:
      type: entities
      show_header_toggle: false
      title: Bedroom Lights
      entities:
        - entity: light.bedroom_all_lights
          name: Turn On / Off
        - type: 'custom:slider-entity-row'
          entity: light.bedroom_all_lights
          name: Brightness
          hide_state: true
        - type: 'custom:rgb-light-card'
          entity: light.bedroom_all_lights
          colors:
            - color_temp: 195
              brightness: 200
              transition: 1
            - color_temp: 276
              brightness: 200
              transition: 1
            - color_temp: 357
              brightness: 200
              transition: 1
            - color_temp: 405
              brightness: 200
              transition: 1
            - color_temp: 451
              brightness: 200
              transition: 1

vitalion · February 4, 2021, 8:44am

hello, very nice modification. can i have some help on that please? how do i implement it on my setup? i tried the code on a “conditional card” but is not working. thanks

bokub · February 4, 2021, 9:54am

You could even display “on/off” and “brightness” on the same line, and use the hide_when_off option to hide only the icons!

Here is what I use on my dashboard:

Animated screenshot

type: entities
entities:
  - entity: light.example
    type: 'custom:slider-entity-row'
    name: LED
    toggle: true
  - entity: light.example
    type: 'custom:rgb-light-card'
    hide_when_off: true
    justify: left
    colors:
      - brightness: 200
        hs_color:
          - 195
          - 42
        transition: 1
      - brightness: 255
        hs_color:
          - 22
          - 93
        transition: 1
      # - ...
      # - ...
      # - ...

Jamie_Pryer · February 4, 2021, 1:19pm

AWESOME! thank you

Jamie_Pryer · February 4, 2021, 1:35pm

is your last one a color picker? (the multi colored circle?)

my code now:

type: entities
show_header_toggle: false
entities:
  - entity: light.bedroom_all_lights
    icon: 'mdi:bed'
    type: 'custom:slider-entity-row'
    name: Bedroom Lights
    toggle: true
  - entity: light.bedroom_all_lights
    type: 'custom:rgb-light-card'
    hide_when_off: true
    justify: around
    colors:
      - color_temp: 195
        brightness: 254
        transition: 1
        label: Crisp
      - color_temp: 276
        brightness: 200
        transition: 1
      - color_temp: 357
        brightness: 150
        transition: 1
        label: Cosy
      - color_temp: 405
        brightness: 100
        transition: 1
      - color_temp: 451
        brightness: 50
        transition: 1
        label: Warm

Dennis_Brouwer · February 9, 2021, 9:27am

Weird question maybe : But can i hook up an action when clicking a color? I have a full automated light setup, so if i click a color, it will turn-off within in a minute again. So i would like to switch the “light mode” to “Manual” when someone clicks a color!

bokub · February 9, 2021, 11:03am

Of course, you can configure service and service_data on every icon and call a service or a script of your choice when clicked.

Everything is explained in the documentation, in the “Calling services” section

wzwick · March 24, 2021, 8:56am

This is EXACTLY what I was looking for
Creating mini dashboards for my kids and this is great for smaller fingers to use.
The hide_when_off option - I dont suppose you could make one for hide_when_unavailable ?
I know there aren’t many use cases for that but I have one, the power of the smart bulb is controlled by power that isnt always on and currently when it the entity is not available it will display the colour options.

is this possible to add?

bokub · April 21, 2021, 9:11am

Version 1.8.0 is out!

If you use the hide_when_off option, icons will now hide if entity is unavailable

Screenshot

@wzwick It should fix your problem

wzwick · April 22, 2021, 1:09am

Brilliant thanks - will test this out later in the week.

bokub · April 26, 2021, 8:42am

I had some free time lately, so…version 1.9.0 is out!

You can now choose the RGB Light Card from the Lovelace card picker.

The card will be pre-configured with one of your lights, and some sample colors !

gustavocmorais · May 11, 2021, 7:23pm

is there a way to use MDI icons on the buttons??

bokub · May 25, 2021, 11:19am

Yes, I have created a tool to convert material design icons into pure CSS compatible with this card

telashton · June 24, 2021, 2:49pm

Is it possible to combine a linear gradient background with the MDI icons?

bokub · July 7, 2021, 8:43am

Of course!

In my icon tool, replace the Background color with a linear gradient.

For example, here is the result with linear-gradient(45deg, #ff64b6, #ffda82 ):

telashton · July 8, 2021, 12:30pm

Perfect - I missed the comma in my attempts! Thanks.

Dujith · August 23, 2021, 8:20pm

Let me start by thanking you for this card. Been in use for the girls bedrooms and they love it.
Now either i’m overlooking it or its not possible (for now). But how would an end user set the colors for the buttons? Right now i have to do it in the code editor but thats not something i’m willing to let them do it.

Something like a long press on the color would set it to the current RGBW values?

bokub · September 1, 2021, 8:37am

Sorry but I don’t think a Lovelace card can store data or change its own configuration…

If I’m wrong, please correct me and I’ll be happy to implement this feature!

RichardU · September 7, 2021, 3:02pm

My Shelly RGBW2 runs an RGBW strip. If I specify an RGB color, the icon shows the correct color. If I specify an RGBW color, the icon is always medium gray, no matter what color I set.

                  - label: Shows correct color
                    rgb_color:
                      - 255
                      - 85
                      - 0
                    effect: 0
                    transition: 1
                  - label: Shows medium gray
                    rgbw_color:
                      - 255
                      - 85
                      - 0
                      - 150
                    effect: 0
                    transition: 1

FWIW, when I choose an RGBW color, the lightbulb icon for the entity shows the correct color, so I can always grab that color from the screen and set it manually if I need to.

Fabry · September 21, 2021, 8:31pm

hello I really like this card, does the HA code go into the yaml configuration?
Regards