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:
And if I turn it on it shows me the addtional controls:
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:
- 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.
That would be me 
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
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 
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!