Hi Guys
I have a large number of Light switches and wonder how do you guys display your light switches. ( On the Overview ).
Due to a large number of switches, I have created this long list of lights and frustrating to find a light sometimes.
Can you give me some ideas as to how you display your switches, remembering that sometimes we use our phones to control our lights?
Thanks in advance
Have you tried drawing your house with floorplan? I saw some very good results here in the community
I organized all my lights into hierarchy of light groups: all lights, floors group, rooms group. The latter consists of lights (or switches configured as lights)
With such approach you can put light groups in UI just as lights, all next to each other seeing all of them on the first glance
This is how I had UI done previously:
recently I redesigned UI to make it more comfortable for use on smartphone. Main screen gives overview of light groups, windows and temperstures.
I can disable all lights in selected room by longpress on each button.
To display and control light I use the same light groups as previously
obviously single click is to “enter” selected room
homekit card or button card ?
and can you please share code ? i would like to see how you added window/door and temp sensor to room , long press also seems interesting idea !
also any idea how to create this ?
here I’ve used decluttering card but you’ve to create template
displays number of lights
and here shows name if it’s only one light
It utilizes both. The main screen uses button-card (except of weather). Thanx to that I can combine multiple entities on single buttons. “room” screens are build over HomeKit card in 100%. Keep in mind it’s a bit restyled, especially background and foreground colors to make inactive entities more readable.
For button-card I’ve created a template of the single button, which is organized in 3 rows and 2 columns.
button_card_templates:
mycustomcard:
show_icon: true
show_state: false
aspect_ratio: 1/1
card_size: 1
tap_action:
action: navigate
hold_action:
action: call-service
styles:
name:
- justify-self: start
- padding-left: 0px
- font-weight: 500
- font-size: 14px
- align-self: middle
- padding-top: 20px
- color: 'var(--tile-on-name-text-color, rgba(0, 0, 0, 1))'
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- margin-top: 5px
- width: 30px
- height: 30px
- '--paper-item-icon-color': 'rgba(0,0,0,0.3)'
card:
- padding: 10px
- padding-top: 3px
- padding-bottom: 7px
- border-radius: 10%
- box-shadow: 'rgba(0, 0, 0, 0.3) 0px 1px 3px 0px'
- background-color: 'var(--tile-on-background, rgba(255, 255, 255, 1))'
grid:
- grid-template-areas: '"i window" "n n" "misc temp"'
- grid-template-columns: 1fr 60%
- grid-template-rows: 1fr 1fr 1fr
custom_fields:
window:
- padding-bottom: 2px
- align-self: middle
- justify-self: end
- pointer-events: none
misc:
- padding-bottom: 0px
- align-self: middle
- justify-self: start
- color: 'var(--tile-on-state-text-color, rgba(0, 0, 0, 1))'
- pointer-events: none
temp:
- padding-bottom: 0px
- align-self: end
- justify-self: end
- margin-right: '-5px'
- color: 'var(--tile-on-state-text-color, rgba(0, 0, 0, 1))'
- pointer-events: none
subsection:
show_name: false
show_icon: true
tap_action:
action: none
double_tap_action:
action: none
hold_action:
action: none
styles:
card:
- background: transparent
icon:
- margin-top: 5px
- width: 30px
- height: 30px
- '--paper-item-icon-color': 'rgba(0,0,0,0.3)'
style: |
ha-card {
box-shadow: none;
}
subsection_bottom:
template: subsection
styles:
icon:
- width: 22px
- heigth: 22px
- padding: 0px
- margin: 0px
subsection_temp:
template: subsection_bottom
show_name: false
show_icon: true
show_units: false
show_state: true
styles:
grid:
- grid-template-areas: '"s i"'
- grid-template-columns: 1fr 22px
- grid-template-rows: 1fr
state:
- justify-self: start
- color: 'var(--tile-on-state-text-color, rgba(0, 0, 0, 1))'
- font-size: 12px
- margin-top: 6px
icon:
- '--paper-item-icon-color': 'rgba(0,0,0,0.3)'
- color: 'rgba(0,0,0,0.3)'
card:
- padding: 0px
- margin: 0px
Weather card is wrapped around by homekit card. It required some styling. button-cards are organized using vertica-stack.
Here is complete code of main page
type: 'custom:mod-card'
style:
hui-vertical-stack-card:
$:
homekit-card:
$: |
:host .container {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top: 0px !important;
margin-bottom: 0px !important;
}
div .card-title {padding: 0px !important}
card:
type: vertical-stack
cards:
- type: 'custom:homekit-card'
statePositionTop: true
entities:
- popup:
type: 'custom:light-popup-card'
entities:
- card: weather-forecast
wider: true
widerSize: 3
noPadding: true
cardOptions:
entity: weather.domov
name: Home
show_forecast: true
cardStyle: |
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!important;
background: transparent!important;
box-shadow: none!important;
border-radius:0!important;
color: black;
}
.content {
display: flex!important;
flex-direction: row!important;
color: black;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 32px!important;
flex: 0 0 32px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:14px!important;
text-align:right;
}
.info .name-state .name {
font-size:14px!important;
}
.info .temp-attribute {
width:100%;
font-weight: 500;
}
.info .temp-attribute .temp {
font-size: 16px!important;
}
.info .temp-attribute .temp span {
font-size: 14px!important;
}
.forecast {
font-size: 14px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:20px!important;
height:20px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:14px!important;
font-weight: 400;
color: black;
}
.forecast .templow {
display:none;
}
- type: 'custom:mod-card'
style: |
:host {padding: 0px 13px}
card:
type: grid
square: true
columns: 3
cards:
- type: 'custom:button-card'
template: mycustomcard
name: Bedroom
entity: light.lights_bedroom
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/bedroom
hold_action:
service: light.turn_off
service_data:
entity_id: light.lights_bedroom
custom_fields:
temp:
card:
type: 'custom:button-card'
template: subsection_temp
entity: sensor.sleeping_temperature
window:
card:
type: 'custom:button-card'
template: subsection
entity: binary_sensor.sleeping_room_window
- type: 'custom:button-card'
template: mycustomcard
name: Childroom
entity: light.lights_childroom
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/childroom
hold_action:
service: light.turn_off
service_data:
entity_id: light.lights_childroom
custom_fields:
temp:
card:
type: 'custom:button-card'
template: subsection_temp
entity: sensor.childroom_temperature
window:
card:
type: 'custom:button-card'
template: subsection
entity: binary_sensor.child_room_window
- type: 'custom:button-card'
template: mycustomcard
name: PC room
entity: light.pcroom_all_lights
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/pcroom
hold_action:
service: light.turn_off
service_data:
entity_id: light.pcroom_all_lights
custom_fields:
temp:
card:
type: 'custom:button-card'
template: subsection_temp
entity: sensor.pcroom_temperature
window:
card:
type: 'custom:button-card'
template: subsection
entity: binary_sensor.pcroom_window
- type: 'custom:button-card'
template: mycustomcard
name: Livingroom
entity: light.lights_cube
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/livingroom
hold_action:
service: light.turn_off
service_data:
entity_id: light.lights_cube
custom_fields:
temp:
card:
type: 'custom:button-card'
template: subsection_temp
entity: sensor.livingroom_temperature
window:
card:
type: 'custom:button-card'
template: subsection
entity: binary_sensor.cube_door_garden
- type: 'custom:button-card'
template: mycustomcard
name: Kitchen
entity: light.kitchen_all_lights
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/kitchen
hold_action:
service: light.turn_off
service_data:
entity_id: light.kitchen_all_lights
- type: 'custom:button-card'
template: mycustomcard
name: Hallway / Stairs
entity: light.stairs_all_lights
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/stairs
hold_action:
service: light.turn_off
service_data:
entity_id: light.stairs_all_lights
- type: 'custom:button-card'
template: mycustomcard
name: Laundry
entity: light.laundry
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/laundry
hold_action:
service: light.turn_off
service_data:
entity_id: light.laundry
- type: 'custom:button-card'
template: mycustomcard
name: Bathroom
entity: light.bathroom
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/bathroom
custom_fields:
misc:
card:
type: 'custom:button-card'
template: subsection_bottom
entity: binary_sensor.washing_mashine_gui
triggers_update:
- switch.washing_machine_empty
show_icon: |
[[[
return (states['binary_sensor.washing_mashine_gui'].state == 'on');
]]]
styles:
icon:
- color: |
[[[
if (states['switch.washing_machine_empty'].state == 'on') return "red";
else if (states['binary_sensor.washing_mashine_gui'].state == 'on') return 'var(--paper-item-icon-active-color)';
return 'var(--paper-item-icon-color)';
]]]
hold_action:
service: light.turn_off
service_data:
entity_id: light.bathroom
- type: 'custom:button-card'
template: mycustomcard
name: Toilet
entity: light.wc
icon: 'mdi:lightbulb-group'
tap_action:
navigation_path: /lovelace/toilet
hold_action:
service: light.turn_off
service_data:
entity_id: light.wc
My main overview page shows me all the lights that are on+some switches that I always want to be able to control. I use an auto-entity card.
card:
show_header_toggle: false
title: Summary
type: entities
filter:
exclude:
- attributes:
hidden: true
- entity_id: '*wake*'
- entity_id: light.0xdd16abffff070772_light
- entity_id: light.stairs_keypad_top
- entity_id: light.jareds_light_switch
- entity_id: light.nate_s_light_switch
- entity_id: fan.bedroom_fan
- entity_id: light.hide_medining_room_switch
- entity_id: light.office_fan_switch
- entity_id: light.bedroom_keypad
- entity_id: light.bedroom_lamps
- entity_id: light.living_room_light_switch
- entity_id: light.upstairs_staircase
- entity_id: light.ground_floor_hallway_light_light
include:
- domain: remote
state: 'on'
name: '*Harmony*'
- domain: light
state: 'on'
- domain: fan
state: 'on'
- entity_id: switch.front_door_light
- entity_id: switch.kitchen_under_cabinet_lights
show_empty: false
type: 'custom:auto-entities'
Produces this
Its super handy - only issue is that sometimes manipulating a light to off, removes it from the list so quickly that it moves another light up in its spot. Overall, i love it thoiugh