💡 Lovelace: RGB light card

Share your Projects! Dashboards & Frontend
104

EDIT: Never mind! I think perhaps I was hitting a caching issue? The icons are now working properly…

I was very excited to see “Automatic icon color when color_temp or kelvin is defined in a color” in the release notes for v1.5.0. I just upgraded to v1.5.0 via HACS, and the new feature doesn’t appear to be working for me. As you’ll see below, the icons are all grey (except for the one that I defined via icon_color).

<snip>
  - colors:
    - brightness_pct: 60
      icon_color: '#FF942B'
      profile: relax
    - brightness_pct: 100
      kelvin: 2500
    - brightness_pct: 100
      kelvin: 3500
    - brightness_pct: 100
      kelvin: 4291
    - brightness_pct: 100
      kelvin: 4500
    - brightness_pct: 100
      kelvin: 5500
    - brightness_pct: 100
      kelvin: 6500
<snip>

rgb-light-card-GreyIcons
rgb-light-card-GreyIcons734×350 14.6 KB

I also tried using color_temp, which showed grey icons as well.

I was curious if this is working for anyone else? Perhaps I’m missing something obvious.

105

Hi @mattcantu, I’m glad to hear that you like this new feature

As said before, your browser cache may keep an old version of the card for a while, and sometimes HACS fails to update correctly

Could you press the F12 key to open the JavaScript console and confirm that the printed version is 1.5.0 ?

106

@bokub That was totally it! Apologies for the extra noise, and many thanks for the quick reply.

107

Not sure if anyone answered you, but what you’re after is a conditional, there’s a working example towards the start of the thread.

108

I’m working on this feature :wink:

Is hide_when_off a good name for the option? Or do you have a better suggestion?

109

what is the best led kit to work with this?

110

I suppose it’s not the best thread to ask, but it is somehow related.
I have HueGo which has built-in effect which looks like a slightly flickering candle. I can reach this effect by pressing button on the lamp.
Is it possible to start this effect from RGB light card?

111

Sounds like a good name to me, does what it says on the tin as they say.

112

Can you start this effect using the light.turn_on service ? You can check in the Developer Tools > Service page of home assistant

If the answer is yes, you can start this effect from the RGB Light Card.

113

There is service call parameter “effect” but I have no idea what value to pass to.

114

The effect list should be in the effect_list attribute of your lamp, and even in a dropdown if you open your light in the home assistant UI

115

The effects I can see in light card are “random” and “colorloop” but I don’t think those are this lamp effects. Rather some generic effects of integration or so. The lamp allows to change between various colours and whites and mentioned candle light effect.

116

That feature is now available in version 1.6.0 :tada:

1 Like
117

It’s perfect, made my light setup work and look way better, thank you.

118

You might have already sorted it but I did something similar recently, might give some ideas.

When the light is off it just displays the slider bar, when its turned on it shows the buttons and also a dropdown list of options. Select the option and then click the last button (light_effect.png and running the script) and it will flash the light effect (this is yeelight bulb)

I also made a forth conditional card for the light group so when all lights are on I can set the effect/color to all of them at once.

Lovelace card:

cards:
  - card:
      entities:
        - entity: light.bedside_1
          name: Bedside 1
          toggle: true
          type: 'custom:slider-entity-row'
      show_header_toggle: false
      type: entities
    conditions:
      - entity: light.bedside_1
        state: 'off'
    type: conditional
  - card:
      entities:
        - entity: light.bedside_1
          name: Bedside 1
          toggle: true
          type: 'custom:slider-entity-row'
        - colors:
            - brightness_pct: 75
              rgb_color:
                - 255
                - 137
                - 15
              transition: 0
            - entity_id: script.light_select_effect_bedside_1
              icon_color: center/100% url("/local/icons/hassio/light_effect.png")
              type: script
          entity: light.bedside_1
          justify: center
          type: 'custom:rgb-light-card'
        - entity: input_select.light_select_effect_bedside_1
      show_header_toggle: false
      toggle: true
      type: entities
    conditions:
      - entity: light.bedside_1
        state: 'on'
    type: conditional
type: 'custom:vertical-stack-in-card'

HA code:

input_select:
  light_select_effect_bedside_1:
    name: Light Effect
    options:
      - Stop
      - Alarm
      - Twitter
      - WhatsApp
    initial: Stop
    icon: mdi:light

script:
  light_select_effect_bedside_1:
    alias: Light Effect Bedside 1
    sequence:
    - service: light.turn_on
      data_template:
        entity_id: light.bedside_1
        effect: "{{ states('input_select.light_select_effect') }}"

image

image
image929×356 44.5 KB

2 Likes
119

Is RGB light card depreciated now? have had trouble getting it to work a week ago and now it stopped again.

120

when I check the log, I am seeing below error, the card seems to be working fine. not sure what it is about?

ERROR (MainThread) [hacs] Tried to serve up ‘/config/www/community/rgb-light-card/card.js’ but it does not exist

121

Well, as said in the log, it’s an HACS error, so there is nothing I can do about it :man_shrugging:t2:

1 Like
122

somehow the card.js is not in the local folder. I followed the manual installation and point it to the http url, rebooted HA and no error now.

Thanks for the great card!

123

Same here. I’ve just installed it via HACS and the plugin is confirmed as installed, yet no files seems to have been copied/created