💡 Lovelace: RGB light card

Share your Projects! Dashboards & Frontend
1

Hi everyone !

I’d like to show you my new Lovelace custom card dedicated to RGB lights :purple_circle::orange_circle::green_circle:

The goal is to quickly switch between different presets of color / brightness with a minimalist UI

:memo: Don’t hesitate do give me your feedback and suggestions to improve it !

Preview

Light Dark

Installation & Configuration

Please visit the GitHub repository for a detailed documentation and examples
( and add a :star2: if you like it ! )

44 Likes
2

Beautiful, is this customizable (as in colors?).

If yes I will incorporate this into my setup!

1 Like
3

It is very customizable yes !

Check out the documentation to see the examples

4

The github link is wrong. It points to the screenshot :wink:

5

Oooops ! Thank you, it’s fixed

6

Great idea and good work!! :+1: I will integrate this in my :bulb: setup today.

7

That it’s very nice!
Would be possible to have it integrated with HACS?

Thanks!
Andrea

1 Like
8

Yes ! The request is being reviewed

1 Like
9

Great, will be waiting till its added tot HACS but it looks great and is a very cool addition.

10

Is this also possible for (light) groups?.

11

Each icon simply call the service light.turn_on with your own parameters

The light.turn_on service works for lights groups, so the answer is yes !

1 Like
12

It’s done ! Click the “RELOAD DATA” button in your HACS settings, and the plugin should appear after a few minutes !

@VGE @SeLLeRoNe

3 Likes
13

Looks freaking awesome:

afbeelding

5 Likes
14

Is there anyway to get ride of the light entity and just show the colour options?

15

Sure !
The light entity isn’t part of the lovelace card and is on the screenshots only as an example.

However, the custom card must be included in a “entities” card

type: entities
entities:
    - type: 'custom:rgb-light-card'
      entity: light.example_light
      colors: [...]
1 Like
16

Thanks, looks great by the way - I was definitely missing this from the front end.

1 Like
17

Would you mind sharing the code to also have the brightness control as you have?

Thanks .)

18

I guess @VGE uses this custom component

So it would be something like

type: entities
entities:

  - type: 'custom:slider-entity-row'
    entity: light.example_light
    toggle: true

  - type: 'custom:rgb-light-card'
    entity: light.example_light
    colors: [...]
2 Likes
19

Well yes and no (I did know about that card, but that’s something slighly different), because that way it show two lights entities while he is somehow mixing the two

image

20

Nevermind, I found what was my issue :slight_smile:

image

3 Likes