Of course
Shout if any of the code below doesn’t make sense and I’ll explain as much as I can!
The top row has changed a bit - it now tracks the number of lights, radiators and doors open on the respective buttons (Spotify button has gone and has been replaced with a security tab, and weather tab has gone and now have a 3D printer/Plugs tab). It now looks like this:
You’ll need an input helper for each of the buttons (lights, heating etc.)
The code for a single button is below, though I use different colours for each button icon when it’s selected - red for hearing, blue for security etc. It’s just a horizontal stack that holds the buttons:
type: custom:button-card
color: default
entity: input_select.dashboard_choice
show_name: false
color_type: label-card
name: Lights
icon: mdi:lightbulb-group
state:
- icon: mdi:lightbulb-group
styles:
grid:
- position: relative
card:
- height: 65px
icon:
- color: orange
- width: 40px
- align-self: start
name:
- color: white
- font-size: 12px
- padding-bottom: 10px
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.number_of_lights_on'].state == 0) return "rgb(28, 28, 28)";
return "rgb(255, 165, 0)";
]]]
- color: rgb(28, 28, 28)
- border-radius: 50%
- position: absolute
- left: 70%
- top: 15%
- height: 15px
- width: 15px
- font-size: 11px
- font-weight: bold
- line-height: 15px
custom_fields:
notification: |
[[[ return (states['sensor.number_of_lights_on'].state) ]]]
value: Lights
- icon: mdi:lightbulb-group
styles:
grid:
- position: relative
card:
- height: 65px
icon:
- color: white
- opacity: 0.5
- width: 40px
name:
- color: white
- font-size: 12px
- padding-bottom: 10px
custom_fields:
notification:
- background-color: |
[[[
if (states['sensor.number_of_lights_on'].state == 0) return "rgb(28, 28, 28)";
return "rgb(255, 165, 0)";
]]]
- color: rgb(28, 28, 28)
- border-radius: 50%
- position: absolute
- left: 70%
- top: 15%
- height: 15px
- width: 15px
- font-size: 11px
- font-weight: bold
- line-height: 15px
custom_fields:
notification: |
[[[ return (states['sensor.number_of_lights_on'].state) ]]]
operator: default
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.dashboard_choice
option: Lights
double_tap_action:
action: navigate
navigation_path: lightson
For the floor select and ‘Rooms’ and ‘Floor’ titles, the code is below. You’ll need an input helper setup for the floor select, and it uses the Mushroom cards and Custom Card Mod that need to be added via HACs. It also isn’t needed for every view I have, like my plugs dashboard, so I use a conditional card to only show it for certain views (lights and heating)
type: conditional
conditions:
- entity: input_select.dashboard_choice
state_not: Spotify
- entity: input_select.dashboard_choice
state_not: Weather
- entity: input_select.dashboard_choice
state_not: Security
- entity: input_select.dashboard_choice
state_not: Plugs
card:
type: vertical-stack
cards:
- type: custom:mushroom-title-card
title: Floors
alignment: center
subtitle: ''
- type: horizontal-stack
cards:
- type: custom:button-card
color: default
entity: input_select.light_menu_select
show_name: true
color_type: label-card
name: Downstairs
icon: mdi:home-floor-g
state:
- icon: mdi:home-floor-g
styles:
card:
- height: 85px
icon:
- color: white
- width: 40px
- align-self: start
name:
- color: white
- font-size: 12px
- padding-bottom: 10px
value: Downstairs
- icon: mdi:home-floor-g
styles:
card:
- height: 85px
icon:
- color: white
- opacity: 0.5
- width: 40px
name:
- color: white
- font-size: 12px
- padding-bottom: 10px
operator: default
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.light_menu_select
option: Downstairs
- type: custom:button-card
color: default
entity: input_select.light_menu_select
show_name: true
color_type: label-card
name: Upstairs
icon: mdi:home-floor-1
state:
- icon: mdi:home-floor-1
styles:
card:
- height: 85px
icon:
- color: white
- width: 40px
name:
- color: white
- font-size: 12px
- padding-bottom: 10px
value: Upstairs
- icon: mdi:home-floor-1
styles:
card:
- height: 85px
icon:
- color: white
- opacity: 0.5
- width: 40px
name:
- color: white
- font-size: 12px
- padding-bottom: 10px
operator: default
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.light_menu_select
option: Upstairs
- type: custom:mushroom-title-card
title: Rooms
alignment: center
subtitle: ''
Then finally, the substantive information is shown using conditional cards, based on the input helper Dashboard Choice (as mentioned above - lights, heating etc.). My entire lighting part is long because of the number of lights, but hopefully it’s easy to pick out the pattern:
type: conditional
conditions:
- entity: input_select.dashboard_choice
state: Lights
card:
type: custom:state-switch
entity: input_select.light_menu_select
states:
Downstairs:
type: grid
columns: 3
square: false
cards:
- type: custom:mushroom-template-card
primary: Living Room
icon: mdi:sofa
multiline_secondary: false
tap_action:
action: toggle
secondary: >-
{{ state_attr('climate.wiser_living_room', 'current_temperature') }}
°C
entity: light.living_room_lights
icon_color: |-
{% if is_state('light.living_room_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: living-room
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Dining Room
icon: phu:rooms-dining
multiline_secondary: false
tap_action:
action: toggle
secondary: >-
{{ state_attr('climate.wiser_living_room', 'current_temperature') }}
°C
entity: light.dining_room_lights
icon_color: |-
{% if is_state('light.dining_room_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: dining-room
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Kitchen
icon: mdi:knife
multiline_secondary: false
tap_action:
action: toggle
secondary: '{{ state_attr(''climate.wiser_kitchen'', ''current_temperature'') }} °C'
entity: light.kitchen_lights
icon_color: |-
{% if is_state('light.kitchen_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: kitchen
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Hallway
icon: phu:rooms-hallway
multiline_secondary: false
tap_action:
action: toggle
secondary: '{{ state_attr(''climate.wiser_hallway'', ''current_temperature'') }} °C'
entity: light.hallway_lights
icon_color: |-
{% if is_state('light.hallway_lights', 'on') %}
orange
{% endif %}
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Toilet
icon: phu:rooms-toilet
multiline_secondary: false
tap_action:
action: toggle
secondary: >-
{{
state_attr('sensor.downstairs_toilet_motion_sensor_device_temperature',
'temperature') }} °C
entity: light.downstairs_toilet_lights
icon_color: |-
{% if is_state('light.downstairs_toilet_lights', 'on') %}
orange
{% endif %}
layout: vertical
double_tap_action:
action: more-info
- type: custom:mushroom-template-card
primary: Garage
icon: phu:rooms-carport
multiline_secondary: false
tap_action:
action: toggle
secondary: '-'
entity: light.garage_lights
icon_color: |-
{% if is_state('light.garage_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: garage
double_tap_action:
action: more-info
layout: vertical
Upstairs:
type: grid
columns: 3
square: false
cards:
- type: custom:mushroom-template-card
primary: Bedroom
icon: phu:rooms-bedroom
multiline_secondary: false
tap_action:
action: toggle
secondary: '{{ state_attr(''climate.wiser_bedroom'', ''current_temperature'') }} °C'
entity: light.master_bedroom_lights
icon_color: |-
{% if is_state('light.master_bedroom_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: bedroom
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Guest Bedroom
icon: phu:rooms-guest-room
multiline_secondary: false
tap_action:
action: toggle
secondary: >-
{{ state_attr('climate.wiser_guest_bedroom', 'current_temperature')
}} °C
entity: light.guest_bedroom_lights
icon_color: |-
{% if is_state('light.guest_bedroom_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: guest-bedroom
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Nursery
icon: mdi:baby
multiline_secondary: false
tap_action:
action: toggle
secondary: '{{ state_attr(''climate.wiser_nursery'', ''current_temperature'') }} °C'
entity: light.nursery_lights
icon_color: |-
{% if is_state('light.nursery_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: nursery
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Office
icon: phu:rooms-office
multiline_secondary: false
tap_action:
action: toggle
secondary: '-'
entity: light.office_lights
icon_color: |-
{% if is_state('light.office_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: office
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Dressing Room
icon: phu:rooms-closet
multiline_secondary: false
tap_action:
action: toggle
secondary: >-
{{ state_attr('climate.wiser_dressing_room', 'current_temperature')
}} °C
entity: light.dressing_room_lights
icon_color: |-
{% if is_state('light.dressing_room_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: dressing-room
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Landing
icon: phu:rooms-balcony
multiline_secondary: false
tap_action:
action: toggle
secondary: >-
{{ state_attr('sensor.upstairs_landing_sensor_temperature',
'temperature') }} °C
entity: light.upstairs_landing_lights
icon_color: |-
{% if is_state('light.upstairs_landing_lights', 'on') %}
orange
{% endif %}
hold_action:
action: navigate
navigation_path: landing
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Main Ensuite
icon: mdi:shower-head
multiline_secondary: false
tap_action:
action: toggle
entity: switch.bedroom_ensuite_lights
icon_color: |-
{% if is_state('switch.bedroom_ensuite_lights', 'on') %}
orange
{% endif %}
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Bathroom
icon: mdi:bathtub-outline
multiline_secondary: false
tap_action:
action: toggle
entity: switch.upstairs_bathroom_lights
icon_color: |-
{% if is_state('switch.upstairs_bathroom_lights', 'on') %}
orange
{% endif %}
double_tap_action:
action: more-info
layout: vertical
- type: custom:mushroom-template-card
primary: Guest Ensuite
icon: mdi:shower-head
multiline_secondary: false
tap_action:
action: toggle
entity: switch.guest_bedroom_ensuite_lights
icon_color: |-
{% if is_state('switch.guest_bedroom_ensuite_lights', 'on') %}
orange
{% endif %}
double_tap_action:
action: more-info
layout: vertical