💡 Lovelace: RGB light card

Could you please share how you came up with that?
What combo of cards and code did you use?

1 Like

Hi Guys,

This is my full Card Config in Lovelace:

entities:
  - type: section
  - entity: light.salontafel
    icon: 'mdi:ceiling-light'
    toggle: true
    type: 'custom:slider-entity-row'
  - entity: light.eettafel
    icon: 'mdi:ceiling-light'
    toggle: true
    type: 'custom:slider-entity-row'
  - type: section
  - entity: light.trf_color_1
    icon: 'mdi:floor-lamp'
    name: Hoek (kleur)
    toggle: true
    type: 'custom:slider-entity-row'
  - colors:
      - rgb_color:
          - 241
          - 224
          - 181
      - rgb_color:
          - 239
          - 210
          - 117
      - rgb_color:
          - 245
          - 250
          - 246
      - icon_color: '#D72AE0'
        rgb_color:
          - 255
          - 127
          - 255
      - icon_color: '#E02A2A'
        rgb_color:
          - 255
          - 0
          - 0
    entity: light.trf_color_1
    type: 'custom:rgb-light-card'
  - type: section
  - entity: light.trf_color_2
    icon: 'mdi:floor-lamp'
    name: Muur (kleur)
    toggle: true
    type: 'custom:slider-entity-row'
  - colors:
      - rgb_color:
          - 241
          - 224
          - 181
      - rgb_color:
          - 239
          - 210
          - 117
      - rgb_color:
          - 245
          - 250
          - 246
      - icon_color: '#D72AE0'
        rgb_color:
          - 255
          - 127
          - 255
      - icon_color: '#E02A2A'
        rgb_color:
          - 255
          - 0
          - 0
    entity: light.trf_color_2
    type: 'custom:rgb-light-card'
  - type: section
  - entity: input_select.welke_scene_wk
title: Woonkamer
type: entities

Its a combination of lovelace-slider-entity-row and rgb-light-card. Both installed trough HACS (Home Assistant Community Store).

3 Likes

I did something slightly different, I have a condtion card in front of the light (for now 1 light)

          - type: conditional
            conditions:
              - entity: light.studio_andrea_light
                state: "off"
            card:
              type: entities
              show_header_toggle: false
              entities:
                - entity: light.studio_andrea_light
                  name: "Wall Light"
          - type: conditional
            conditions:
              - entity: light.studio_andrea_light
                state: "on"
            card:
              type: entities
              toggle: false
              entities:
                - type: 'custom:slider-entity-row'
                  entity: light.studio_andrea_light
                  name: Wall Light
                  toggle: true
                - type: 'custom:rgb-light-card'
                  entity: light.studio_andrea_light
                  colors:
                    - rgb_color:
                      - 255
                      - 255
                      - 255
#                      brightness: 255
                      icon_color: '#FFFFFF'
                    - rgb_color:
                      - 51
                      - 102
                      - 204
#                      brightness: 255
                      icon_color: '#3366CC'
                    - rgb_color:
                      - 51
                      - 204
                      - 51
#                      brightness: 255
                      icon_color: '#33CC33'
                    - rgb_color:
                      - 255
                      - 0
                      - 255
#                      brightness: 255
                      icon_color: '#FF00FF'

This way, if the light is off I see this:
image

And if I turn it on it shows me the addtional controls:
image

The brighness is there commented, because I now control it with the slider, but if I want I can simply uncomment it to have a specific color with a specific brightness.

4 Likes

Nice! I also started that way but the lights i use for color are mood lights in corners of the room so i nearly alway set them to a percentage with the slider. Using the slider even when there off is 1 manual action to the desired strength instead of first activating the switch and then adjusting the brightness.

Also my girlfriend uses this in the IOS app and liked this more. I do find the way you use it better looking.

1 Like

That is a good point, if moving the slider itself change turn the light on, it might be worth your way or something in the middle.
Like keeping the brighness bar available, but show the additional colors only when the light it’s on

Something like this:
image
image

          - type: conditional
            conditions:
              - entity: light.studio_andrea_light
                state: "off"
            card:
              type: entities
              show_header_toggle: false
              entities:
                - type: 'custom:slider-entity-row'
                  entity: light.studio_andrea_light
                  name: Wall Light
                  toggle: true
          - type: conditional
            conditions:
              - entity: light.studio_andrea_light
                state: "on"
            card:
              type: entities
              toggle: false
              entities:
                - type: 'custom:slider-entity-row'
                  entity: light.studio_andrea_light
                  name: Wall Light
                  toggle: true
                - type: 'custom:rgb-light-card'
                  entity: light.studio_andrea_light
                  colors:
                    - rgb_color:
                      - 255
                      - 255
                      - 255
#                      brightness: 255
                      icon_color: '#FFFFFF'
                    - rgb_color:
                      - 51
                      - 102
                      - 204
#                      brightness: 255
                      icon_color: '#3366CC'
                    - rgb_color:
                      - 51
                      - 204
                      - 51
#                      brightness: 255
                      icon_color: '#33CC33'
                    - rgb_color:
                      - 255
                      - 0
                      - 255
#                      brightness: 255
                      icon_color: '#FF00FF'

@bokub, would be possible to set the diameter of the circle in order to make it slightly smaller somewhere?

4 Likes

Yes!! Perfect idea. Will try to implement tonight if i have spare time and report back.

Sure ! Somebody has already created an issue about it

That would be me :slight_smile:

also i was thinking about if it would be possible to define the color list in one place and use it in multible, so if i want to use same colors in many places, i will only have one place to mantain the list.

2 Likes

WOW!!! what is the code you used for this card?

Yes something like a color group. Define once but addressable per light. This way you could also make a group with the 3 basis Tradfri light colors and assign them to only those.

@RedBull See my config above, i posted it!

1 Like

I’ve just released this feature in version 1.2.0 ! The option is called size

Thanks @skelgaard for the suggestion

3 Likes

Not sure, but I think this is already possible in Lovelace as it gets used a lot with the custom-button-card. I just don’t know if it’s something that is purely for the custom-button-card (i think it is, but maybe the code can be copied to add the feature for this card) or generic for anything in Lovelace. Definitely worth looking at because it would be nice to use a base template for all lights

@sparkydave

Are you talking about CSS variables such as var(--primary-text-color) ?

If yes, I’m afraid you cannot use them to configure the color of your lights (but you can use it in icon_color)

If not, I have no idea what you’re talking about, but I’m interested :wink:

No, I’m referring to the templates that can be assigned in the custom button card. I think they are a setup only available to that card, but perhaps you can implement the same system with this card

Oh, I see, that’s brilliant

And you are right, this is something specific to that custom card. I’ll see what I can do but I can’t promise anything

Nice, will update this weekend

Thanks for the card. I finally got rid of my ugly color dropdown.

1 Like

I love the idea of the conditional card.
Sadly I’m having trouble trying to use your code. I get a duplicated mapping key for conditional as I go down the lines and try to remove the leading 10 characters. It says bad indent if I don’t do that first.
Any thoughts?
I’m on 0.100.1 running hassio if it matters.
Thanks

Can you paste your code so that I can see if I can spot anything?

I literally hit the copy button on your code snippet in post 25 of this thread. It should make the card and then complain that the entity isn’t valid. It just says indents are wrong.
I am using the built in editor.
There seems to be 10 spaces before everything and the lovelace editor complains about bad indents. So I delete down the leading spaces line by line and it stops complaining about bad indents, but when I get down to line 13 the 2nd conditional it complains that there is a duplicate.

Just not sure how to get past this and I’m terrible with yaml and the spacing requirements.
I’m hoping someone has an idea to push me past this.

Thanks!