tom_l
July 11, 2019, 11:11am
11
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
tom_l
July 26, 2019, 3:34pm
12
Compacted the layout a bit:
1 Like
elRadix
August 6, 2019, 3:51pm
13
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.
danboth
September 20, 2019, 11:59am
14
How were you able to get multiple lights on the same card? I have been trying unsuccessfully.
tom_l
September 20, 2019, 12:12pm
15
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
tom_l
September 20, 2019, 12:17pm
16
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:
Hello all! Time to show off a small project I’ve been working on.
I’ve been using a Philips wake up light and love it, really helps me get up in the morning and feel less tired during the day. The Philips wake up light is essentially a big light bulb that slowly fades from red to orange to yellow to white over a timespan of 30 minutes at a set alarm time.
Unfortunately the button interface of the wake up light is rather clumsy and the lack of integrations options made me look for an alternativ…
2 Likes
magiva
October 28, 2019, 11:12am
17
ikea do same but much much cheaper, you just need to add zigbee2mqtt to your hassio
tom_l
October 28, 2019, 11:21am
18
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
jriker1
February 8, 2020, 2:44am
19
tom_l:
Much better:
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?
cyberumb15
February 9, 2020, 6:58pm
21
Tom_I,
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);
}
tom_l
March 14, 2020, 3:24am
22
Unfortunately the tiles-card has been abandoned and no longer works with home assistant.
pcwii
March 15, 2020, 1:12am
23
My tiles-card still seems to be working. Not sure what the issue that is expected with it.
KleBoR
March 22, 2020, 8:30pm
24
Hi, could you post a snippet of one of you “All” - buttons, for example of your Lounge card? Im not able to get the grouping to work, to turn all lights off or on of a complete room.
Thank you =)
tom_l
March 23, 2020, 4:12am
25
It’s just a light group presented as an entity in Lovelace.
all_lounge_lights:
name: All Lounge Lights
entities:
- light.lifx_lounge_entrance_lamp
- light.lifx_lounge_front_left
- light.lifx_lounge_front_right
- light.lifx_lounge_middle_left
- light.lifx_lounge_middle_right
- light.lifx_lounge_rear_left
- light.lifx_lounge_rear_right
The card I’m currently using for displaying the button is no longer supported and I would not recommend use of it.
tom_l
March 23, 2020, 4:15am
26
The issue is that this card has been abandoned by the developer. If you upgrade home assistant it may break and there is no support to get it fixed. Some people already require editing it locally to make it work.
KleBoR
March 23, 2020, 8:36am
27
ah ok, thank you. i’ll try this. I just liked the shadow pretty much if an entity is in use… so i also got the tiles card. i also saw theres a legacy version of it which is abandoned, the normal one also has been abandoned?
you can do the drop shadows with ‘custom: button-card ’
KleBoR
March 23, 2020, 8:48am
29
cool, ill give it a try… i just want the borders to light up which is pretty nice. cause of the amount different custom plugins this might be possible anyway =)
KleBoR
March 23, 2020, 10:16am
30
@sparkydave could you maybe help me a bit to get this test card converted to the custom button-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: group.test_group
label_sec:
value: null
row: 1
shadow: >-
${states['group.test_group'].state === 'on' ? '0px 0px 10px 3px
var(--paper-item-icon-active-color)' : 'none'}
- column: 3
entity: light.test_1
label_sec:
value: Place1
row: 1
shadow: >-
${states['light.test_1'].state === 'on' ? '0px 0px
10px 3px var(--paper-item-icon-active-color)' : 'none'}
- column: 4
entity: light.test_2
icon: 'mdi:lightbulb'
label_sec:
value: Place2
row: 1
shadow: >-
${states['light.test_2'].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.test_1
- light.test_2
- group.test_group
type: 'custom:config-template-card'
show_header_toggle: false
style: |
ha-card {
border: solid 2px var(--primary-color);
border-radius: 15px;
background: rgba(0, 0, 0, 0.6);
}
title: Lights
type: entities
