How are you laying out your light control?
Obviously this is unacceptable:
Are there any custom cards that do a better job of exposing brightness controls for lights?
2 lights per card if you want it to look uniform.
Either that or switch over to a picture-entity and use the hold action to control brightness Then you can do up to 4 without it looking bad, you just have to add an extra step for brightness control
I just tap on the light and it brings up a colour wheel as well as brightness, warmth and effect controls… I don’t see any real benefit in using those lovelace cards for that - no benefit that I can see…
Yeah, I get the whole more-info pop-up thing. It’s how I was doing it originally (with the states based UI and originally converted Lovelace UI). I was just interested to see what other ways people were doing this.
I guess I’ll go back to using an entities card.
Yeah I don’t see any killer improvement on that for lights.
I thought I’d try a horizontal row of entity buttons. Maybe not 0_o
2 Likes
Ah! That’s what I’m looking for.
Tonight I have been completely redesigning my lights page. I could not for the life of me work out the layout of the custom button card so I went with the more logical tiles card. Unfortunately to get the fancy looks I had to invoke a couple of other custom cards, lovelace-card-mod and config-template-card.
There’s a lot of wasted space and I’m not completely sold on the layout yet but it does work well from desktop to mobile.
Example card:
title: Laundry
type: entities
show_header_toggle: false
entities:
- type: 'custom:config-template-card'
entities:
- light.lifx_laundry
- light.lifx_washing_spot
card:
type: 'custom:tiles-card'
card_settings:
align: center
background: 'rgba(0, 0, 0, 0)'
column_width: calc(85%/4)
columns: 4
gap: 20px
padding: 0px
row_height: 75px
entities:
- column: 1
row: 1
entity: light.lifx_laundry
label_sec:
value: Laundry
shadow: >-
${states['light.lifx_laundry'].state === 'on' ? '0px 0px 10px 3px
var(--paper-item-icon-active-color)' : 'none'}
- column: 2
row: 1
entity: light.lifx_washing_spot
icon:
value: 'mdi:track-light'
label_sec:
value: Spotlight
shadow: >-
${states['light.lifx_washing_spot'].state === 'on' ? '0px 0px 10px
3px var(--paper-item-icon-active-color)' : 'none'}
global_settings:
background:
value: 'rgba(0, 0, 0, 0)'
border:
color:
value_off: var(--primary-color)
value_on: var(--paper-item-icon-active-color)
radius: 20px
size: 2px
icon:
color:
value_off: var(--primary-text-color)
value_on: var(--paper-item-icon-active-color)
value: 'mdi:lightbulb'
label_sec:
color:
value_off: var(--secondary-text-color)
value_on: var(--primary-text-color)
style: |
ha-card {
--ha-card-box-shadow: 'none';
}
- type: 'custom:fold-entity-row'
padding: 0
group_config:
toggle: false
type: 'custom:slider-entity-row'
head:
label: Light Settings
type: section
items:
- entity: light.lifx_laundry
name: Laundry
- entity: light.lifx_washing_spot
name: Spotlight
style: |
ha-card {
border: solid 2px var(--primary-color);
}
8 Likes
what is the light settings with scenes that you have for each group and sunrise simulation. can you share your config?
thank you in advance.
How were you able to get multiple lights on the same card? I have been trying unsuccessfully.
I use the tiles-card (modified by card-mod and config-template-card)
entities:
- card:
card_settings:
align: center
background: 'rgba(0, 0, 0, 0)'
column_width: calc(85%/4)
columns: 4
gap: 20px
padding: 0px
row_height: 75px
entities:
- column: 1
entity: light.lifx_spare_bedroom
label_sec:
value: Ceiling
row: 1
shadow: >-
${states['light.lifx_spare_bedroom'].state === 'on' ? '0px 0px 10px
3px var(--paper-item-icon-active-color)' : 'none'}
- column: 2
entity: light.lifx_sp_bed_lamp
icon: 'mdi:lamp'
label_sec:
value: Bedside
row: 1
shadow: >-
${states['light.lifx_sp_bed_lamp'].state === 'on' ? '0px 0px 10px
3px var(--paper-item-icon-active-color)' : 'none'}
global_settings:
background:
value: 'rgba(0, 0, 0, 0)'
border:
color:
value_off: var(--primary-color)
value_on: var(--paper-item-icon-active-color)
radius: 20px
size: 2px
icon:
color:
value_off: var(--primary-text-color)
value_on: var(--paper-item-icon-active-color)
value: 'mdi:lightbulb'
label_sec:
color:
value_off: var(--secondary-text-color)
value_on: var(--primary-text-color)
style: |
ha-card {
--ha-card-box-shadow: 'none';
}
type: 'custom:tiles-card'
entities:
- light.lifx_spare_bedroom
- light.lifx_sp_bed_lamp
type: 'custom:config-template-card'
- entities:
- entity: light.lifx_spare_bedroom
name: Ceiling
- entity: light.lifx_sp_bed_lamp
icon: 'mdi:lamp'
name: Bedside
group_config:
toggle: false
type: 'custom:slider-entity-row'
head:
label: Light Settings
type: section
padding: 0
type: 'custom:fold-entity-row'
- entities:
- entity: automation.spare_bedroom_sunrise_simulation
name: Enable
- entity: input_boolean.spr_bed_sunrise_sim_ignore
- entity: input_boolean.spr_bed_sunrise_sim_workday
- entity: input_datetime.spr_bed_sunrise_sim_time
head:
label: Sunrise Simulation
type: section
padding: 0
type: 'custom:fold-entity-row'
show_header_toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
}
title: Spare Bedroom
type: entities
Light settings is just a list of slider-entity-rows to allow brightness and colour setting. Scenes is an input select to select the room scene. Sunrise simulation is a brightness alarm that wakes me up by increasing the light from a dim red to a bright white over 30 minutes.
e.g.
I adapted this for the sunrise simulation:
2 Likes
ikea do same but much much cheaper, you just need to add zigbee2mqtt to your hassio
add a nice automation for white in the morning, and yellow in the evening, job done 
Sure, if I want to shit all over my wifi bands with zigbee (I do not want this).
Also you misunderstand what the automation does. It’s an alarm clock. It starts off deep dim red 30 minutes before I want to get up. By the time I should be awake, 30 minutes later, it is a brilliant white.
2 Likes
How did you get the brightness control next to the names of each light? For me I have to click into each name to change the brightness?
Tom_I,
I mimic your code but I did not get button on my screen. Please take a look what I am missing here?
Thanks,
- title: Lights
icon: mdi:home-lightbulb-outline
cards:
- type: entities
title: Lighting
show_header_toggle: false
entities:
- type: 'custom:config-template-card'
entities:
- light.kitchen
- light.dining_room
card:
type: 'custom:tiles-card'
card_settings:
align: center
background: 'rgba(0, 0, 0, 0)'
column_width: calc(85%/4)
columns: 4
gap: 20px
padding: 0px
row_height: 75px
entities:
- column: 1
row: 1
entity: light.kitchen
label_sec:
value: Kitchen
shadow: >-
${states['light.kitchen'].state === 'on' ? '0px 0px 10px 3px
var(--paper-item-icon-active-color)' : 'none'}
- column: 2
row: 1
entity: light.dining_room
icon:
value: 'mdi:ceiling-light'
label_sec:
value: Dining Room
shadow: >-
${states['light.dining_room'].state === 'on' ? '0px 0px 10px
3px var(--paper-item-icon-active-color)' : 'none'}
global_settings:
background:
value: 'rgba(0, 0, 0, 0)'
border:
color:
value_off: var(--primary-color)
value_on: var(--paper-item-icon-active-color)
radius: 20px
size: 2px
icon:
color:
value_off: var(--primary-text-color)
value_on: var(--paper-item-icon-active-color)
value: 'mdi:lightbulb'
label_sec:
color:
value_off: var(--secondary-text-color)
value_on: var(--primary-text-color)
style: |
ha-card {
--ha-card-box-shadow: 'none';
}
- type: 'custom:fold-entity-row'
padding: 0
group_config:
toggle: false
type: 'custom:slider-entity-row'
head:
label: Light Settings
type: section
items:
- entity: light.kitchen
name: Basement
toggle: false
- entity: light.dining_room
name: Dining Room
toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
}
