Hello,
I have configured lights in lovelace dashboard using custom button-card. I can change the light or light group color by accessing color-wheel with more-info command.
Is there is any way to assign one button-card with single color and clicking on button shall change the color of the light/light-group.
In action->call-service/service is not changing the color of the light.
Any help is highly appreciated. thanks
Hello Aruffell,
That would be great. Please share the code.
Thanks a lot
You will need a couple custom cards from HACS:
custom:slider-entity-row
custom:rgb-light-card
The first one controls a group (defined in configuration.yaml) so that I can control them all in unison. The others give me the ability to control them individually.
The code for the entire card:
type: entities
style: |
.card-header {
font-size: 18px;
padding: 2px 15px 2px 15px
}
entities:
- type: section
label: Master Bedroom Mood Lights
- type: custom:slider-entity-row
entity: light.master_bedroom_mood_lights
toggle: true
full_row: false
name: Mood Lights
- type: custom:rgb-light-card
entity: light.master_bedroom_mood_lights
size: 28
colors:
- rgb_color:
- 255
- 0
- 0
transition: 1
- rgb_color:
- 255
- 127
- 0
transition: 1
- rgb_color:
- 255
- 255
- 0
transition: 1
- rgb_color:
- 0
- 255
- 0
transition: 1
- rgb_color:
- 0
- 0
- 255
transition: 1
- rgb_color:
- 75
- 0
- 130
transition: 1
- rgb_color:
- 148
- 0
- 211
transition: 1
- type: custom:rgb-light-card
entity: light.master_bedroom_mood_lights
size: 28
colors:
- rgb_color:
- 255
- 177
- 110
transition: 1
- rgb_color:
- 255
- 206
- 166
transition: 1
- rgb_color:
- 255
- 237
- 222
transition: 1
- rgb_color:
- 255
- 255
- 255
transition: 1
- type: section
label: Master Bedroom Floor Lamp
- type: custom:slider-entity-row
entity: light.master_bedroom_floor_lamp
toggle: true
full_row: false
name: Floor Lamp
- type: custom:rgb-light-card
entity: light.master_bedroom_floor_lamp
size: 28
colors:
- rgb_color:
- 255
- 0
- 0
transition: 1
- rgb_color:
- 255
- 127
- 0
transition: 1
- rgb_color:
- 255
- 255
- 0
transition: 1
- rgb_color:
- 0
- 255
- 0
transition: 1
- rgb_color:
- 0
- 0
- 255
transition: 1
- rgb_color:
- 75
- 0
- 130
transition: 1
- rgb_color:
- 148
- 0
- 211
transition: 1
- type: custom:rgb-light-card
entity: light.master_bedroom_floor_lamp
size: 28
colors:
- rgb_color:
- 255
- 177
- 110
transition: 1
- rgb_color:
- 255
- 206
- 166
transition: 1
- rgb_color:
- 255
- 237
- 222
transition: 1
- rgb_color:
- 255
- 255
- 255
transition: 1
- type: section
label: Alex's Table Lamp
- type: custom:slider-entity-row
entity: light.alex_s_table_lamp
toggle: true
full_row: false
name: Table Lamp
- type: custom:rgb-light-card
entity: light.alex_s_table_lamp
size: 28
colors:
- rgb_color:
- 255
- 0
- 0
transition: 1
- rgb_color:
- 255
- 127
- 0
transition: 1
- rgb_color:
- 255
- 255
- 0
transition: 1
- rgb_color:
- 0
- 255
- 0
transition: 1
- rgb_color:
- 0
- 0
- 255
transition: 1
- rgb_color:
- 75
- 0
- 130
transition: 1
- rgb_color:
- 148
- 0
- 211
transition: 1
- type: custom:rgb-light-card
entity: light.alex_s_table_lamp
size: 28
colors:
- rgb_color:
- 255
- 177
- 110
transition: 1
- rgb_color:
- 255
- 206
- 166
transition: 1
- rgb_color:
- 255
- 237
- 222
transition: 1
- rgb_color:
- 255
- 255
- 255
transition: 1
- type: section
label: Meredith's Table Lamp
- type: custom:slider-entity-row
entity: light.meredith_s_table_lamp
toggle: true
full_row: false
name: Table Lamp
- type: custom:rgb-light-card
entity: light.meredith_s_table_lamp
size: 28
colors:
- rgb_color:
- 255
- 0
- 0
transition: 1
- rgb_color:
- 255
- 127
- 0
transition: 1
- rgb_color:
- 255
- 255
- 0
transition: 1
- rgb_color:
- 0
- 255
- 0
transition: 1
- rgb_color:
- 0
- 0
- 255
transition: 1
- rgb_color:
- 75
- 0
- 130
transition: 1
- rgb_color:
- 148
- 0
- 211
transition: 1
- type: custom:rgb-light-card
entity: light.meredith_s_table_lamp
size: 28
colors:
- rgb_color:
- 255
- 177
- 110
transition: 1
- rgb_color:
- 255
- 206
- 166
transition: 1
- rgb_color:
- 255
- 237
- 222
transition: 1
- rgb_color:
- 255
- 255
- 255
transition: 1
state_color: true
title: Accent Lights
show_header_toggle: true
If you only want to control a single RGB light, then this code should be enough:
type: entities
card_mod:
style: |
.card-header {
font-size: 18px;
padding: 2px 15px 2px 15px
}
entities:
- type: section
label: Meredith's Table Lamp
- type: custom:slider-entity-row
entity: light.meredith_s_table_lamp
toggle: true
full_row: false
name: Table Lamp
- type: custom:rgb-light-card
entity: light.meredith_s_table_lamp
size: 28
colors:
- rgb_color:
- 255
- 0
- 0
transition: 1
- rgb_color:
- 255
- 127
- 0
transition: 1
- rgb_color:
- 255
- 255
- 0
transition: 1
- rgb_color:
- 0
- 255
- 0
transition: 1
- rgb_color:
- 0
- 0
- 255
transition: 1
- rgb_color:
- 75
- 0
- 130
transition: 1
- rgb_color:
- 148
- 0
- 211
transition: 1
- type: custom:rgb-light-card
entity: light.meredith_s_table_lamp
size: 28
colors:
- rgb_color:
- 255
- 177
- 110
transition: 1
- rgb_color:
- 255
- 206
- 166
transition: 1
- rgb_color:
- 255
- 237
- 222
transition: 1
- rgb_color:
- 255
- 255
- 255
transition: 1
state_color: true
title: Accent Lights
show_header_toggle: true
There are additional options described in the github pages for these custom cards. At first I also declared a default brightness of 255 (100%) but since I added the slider, I removed that to avoid blasting the light at max whenever I change color.
Since me device names are long, they don’t fit on the same row as the slider and toggle therefore I use a section divider which also supports a label which is where I put the full device name, and then used a generic name for the device (ie Table Lamp).
EDIT: The style is only to make the card title smaller as it looks way too large, especially on a phone.
Edit2: added card_mod: before style which is now the correct way of using style.
can anyone please try and help me accomplish this… been trying for 3 days
@careingemt Create a card (any card), go to YAML editing mode and replace all of the code with the second code snippet I shared in a previous post. Then edit the entities and labels to match your RGB light. The github page for the cards I used gives all the details on how to configure everything but I am guessing what I already did might just work for you as is. Don’t forget to install the custom cards in HACS before doing this otherwise it won’t work.
Also, you can get rid of the card_mod: and style section as that only formats the card title to a smaller font.
/config/configuration.yaml
right?
No, you have to edit your dashboard but first you must install the custom cards using HACS.
Then install the two cards. Their github pages give all the install and configuration options you need but if you like what I did, all you really need to do is add them using HACS. Search for them under “Frontend”.
Once that is done, you can freely use them in your dashboards… so time to edit one and add a card:
Then:
Then pick any random card:
I picked Alarm Panel Card, but it really doesn’t matter. There is a way to just start with a blank card, but I find this to be faster/easier. Click “Show Code Editor”:
Delete all the code as it is for the other card we do not need:
Now paste in the code I shared above:
To make it work you need to edit the entity names and label:
Hit save and it should work assuming the cards are installed and the entities are typed in correctly… and you copied in all of the code I shared above. I am sharing the same code below with a few changes in hopes it makes it easier for you (so it won’t match the screenshots):
type: entities
entities:
- type: section
label: replace_this_with_light_name
- type: custom:slider-entity-row
entity: light.replace_this_with_light_name
toggle: true
full_row: false
name: replace_this_with_shorter_version_of_light_name
- type: custom:rgb-light-card
entity: light.replace_this_with_light_name
size: 28
colors:
- rgb_color:
- 255
- 0
- 0
transition: 1
- rgb_color:
- 255
- 127
- 0
transition: 1
- rgb_color:
- 255
- 255
- 0
transition: 1
- rgb_color:
- 0
- 255
- 0
transition: 1
- rgb_color:
- 0
- 0
- 255
transition: 1
- rgb_color:
- 75
- 0
- 130
transition: 1
- rgb_color:
- 148
- 0
- 211
transition: 1
- type: custom:rgb-light-card
entity: light.replace_this_with_light_name
size: 28
colors:
- rgb_color:
- 255
- 177
- 110
transition: 1
- rgb_color:
- 255
- 206
- 166
transition: 1
- rgb_color:
- 255
- 237
- 222
transition: 1
- rgb_color:
- 255
- 255
- 255
transition: 1
state_color: true
title: replace_this_with_card_title
show_header_toggle: true
Just in case… the “light.replace_this_with_light_name” must be the entity name of your RGB light so its name will be something like light.bedroom_light - if you get this wrong, it won’t know what device you are trying to control. The same device (entity) appears in several spots as the card above is actually multiple cards put together.
thank you so very much
Hey, sorry to resurrect an old thread.
First off, thanks so much for sharing your code! I’ve started using it on my dashboard, and it’s almost perfect.
I was trying to search the docs of the related cards, and couldn’t find what I was looking for - maybe you would.
Is there a way to add a toggle to the top of the lights, to essentially hide the panel? I included a screenshot with a sample toggle (the crappily drawn arrow lol).
Hope this makes sense; thanks in advance! !
