💡 Lovelace: RGB light card

bokub · November 12, 2019, 10:56am

What about something like this ?
It will only change the brightness of your LED strip

type: entities
entities:
    - type: 'custom:rgb-light-card'
      entity: light.example_light # < Your LED strip here
      colors:
          - brightness: 0
            icon_color: '#222'
          - brightness: 128
            icon_color: '#ff8'
          - brightness: 255
            icon_color: '#ffa'

bokub · November 21, 2019, 10:37am

I’ve released the version 1.3.0 of this card

You can now call scripts and scenes when clicking on icons, so you can set multiple lights on a single click

Documentation is available here:

danbutter · November 25, 2019, 12:11am

Anyone having issues with this in HACS?
The latest version shows red like this:

and it says “This plugin is not added to your Lovelace resources.”
But yet it works fine just as it has before.
I only noticed this after updating to the latest HACS, but I don’t really watch that closely so it may have been there before that.

m90att · December 18, 2019, 12:54pm

Same for me

seantibb · December 20, 2019, 1:59am

This got me closer than anything else! Thank you! My only issue now (Tuya bulb) is using the icons to change the colors. I loaded up, clicked on pink, got a pink light. Clicked on the other colors and no change. Any suggestions?

mekki · December 31, 2019, 4:06pm

Hello,

It would be cool if we can add the RGB colors at the bottom of this light card :

any idea of how we could do that ?

bokub · December 31, 2019, 4:33pm

Can you share your config if you still have this issue?

jimz011 · December 31, 2019, 5:12pm

Just create a vertical stack:

first card: thermostat
second card rgb-card

Choose the correct justify settings and done.
If you need 2 thermostats next to each other and a rgb card below do the following:

Vertical stack

first card: horizontal-stack
- thermostat 1
- thermostat 2
second card: rgb-card

bokub · January 3, 2020, 9:26am

You can use a vertical-stack, or a borderless vertical-stack, in which you include:

Your light cards
An “entities” card containing the RGB Light Card

Example:

type: 'custom:vertical-stack-in-card' # or 'vertical-stack'
cards:

  # Your lights
  - type: horizontal-stack
    cards:
      - type: light
        entity: light.bedroom
      - type: light
        entity: light.office

  # The RGB Light card
  - type: entities
    entities:
      - type: 'custom:rgb-light-card'
        entity: light.bedroom
        colors:
          - ...
          - ...

sweup · January 5, 2020, 2:31pm

Is it possible to have “Color temperature” circles, ie Trådfri / IKEA?
ikea

bokub · January 5, 2020, 3:40pm

Sure !

You can do something like that

type: entities
entities:
    - type: 'custom:rgb-light-card'
      entity: light.example_light
      colors:
          - color_temp: 160
            icon_color: '#ffead9'
          - color_temp: 350
            icon_color: '#ffa859'
          - color_temp: 550
            icon_color: '#ff8000'

I’ll let you decide which values are the best suited for you, and which colors you want on your icons

sweup · January 5, 2020, 6:36pm

Nice, thx
ikea

mekki · January 5, 2020, 7:11pm

thanks a lot, working good.

how did you manage to get the last color icon ? is it a .png ?

bokub · January 6, 2020, 1:25pm

Yes ! It’s a .png which is imported like this:

icon_color: center/100% url("/local/rainbow.png")

Here is the image:

mekki · January 6, 2020, 2:01pm

Thank you

Sam04 · January 6, 2020, 9:19pm

thanks alot, great plugin!

would it be possible to add a overlay function for material design icons?
and what about a long press function for actions?

stban1983 · January 16, 2020, 6:37pm

Hi!
Very good card, but i have one problem with my Yeelight:

      - rgb_color:
          - 255
          - 186
          - 129
        brightness: 255

With this configuration, i should have a white warm very bright, but when i click on the color icon, i got very low brightness. States og the light says that i am a 255 of brightness… but it’s very dark.

Any ideas ?

bokub · January 17, 2020, 8:19am

Yeah, I have the same problem on my Yeelight, I created an issue on Home Assistant, but it seems like it’s a Yeelight related problem

Don’t you have the same problem when you use the color wheel from the UI ?

One way to solve the problem is using color_temp instead of rgb_color, but you’ll have less colors to choose from…

stban1983 · January 17, 2020, 9:03am

ho so sad… I think it’s working with the color wheel. But i have same problem in HomeHabit app.
I recently plug an old yeelight bulb and it was working, then i update the firmware and brightness is broken now…
Maybe we can post on Yeelight forum ?

geeked · January 17, 2020, 2:14pm

This will be great for my sons Philips Hue Play light bar in his room. Thank you!