Hi all,
I’m rationalizing my dashboard and wondering if there is any way to add the number of lights left on (defined by a template sensor) to my light button (so combining the chip at the top with the bulb card as seen in the screenshot below).
One idea I thought of was to create a series of images (Bulb icon with a number overlaid on it), then use a template to show the correct image/icon depending on how many lights were on. Is that even possible?
Is there a better solution?
Huge thanks!
If you don’t necessarily want an overlay, you can make a template sensor that’s the count of lights that are on, nest another button card in your existing button card (you can use a relative layout, so maybe you could do the overlay, but I’m thinking grid layout), and display the template sensor with the nested card.
This has helped me discover Custom Fields - I didn’t know all of that was possible. Huge thanks 
Very nice and clean view, I like it!
Would you like to share the code for it?
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
Wow, thanks alot, looks great! I’ll check it out and come back if I have questions.
Sorry for my bad english, but what do you mean with. “need a input helper”?
i know where to find them but dont know wich one to use can you tell me or can you show me your config of installed helpers for this?
what i want to create is 1 custom card that tell me that lights are on and how many there are on, when i toggle that button then opening multiple buttoncards with different locations who i can toggle on or off
i thought that your configuration came close to what want, but i dont understant what you did or what to do with the helpers
I used a drop-down helper for the ‘Dashboard Choice’ helper. The values of the helper are the different sections I wanted to navigate between (Lighting, Heating, Weather, security etc. Etc.)
Shout if you’re unsure how it’s being used in the code above - been a while since I’ve looked at it, but should be able to unpick it!
so if i want 1 card (example only light) i set 1 drop down helper, but what to put in that helper?
i don’t know what i need to put in the option box
The value can be anything, it just needs to be referenced correctly in the code. For my light button, I use the value ‘Lights’. But if you only want a single card, you don’t need to worry about this part- the helper allows me to switch between the different buttons on the top row.
So you can use a reduced version of the first box in post 5 to create a single card (my cards change colour when selected, being grey when they aren’t - so I know which ‘tab’ of my dashboard I’m on - that’s why there’s 2 near identical bits of code in the first box). This does need a sensor created that contains all your lights firstly though. My code for this is:
- platform: template
sensors:
number_of_lights_on:
unique_id: sensor.number_of_lights_on
friendly_name: "Number of Lights On"
unit_of_measurement: 'on'
value_template: >
{% set lights = [
states.light.dining_room_lights,
states.light.living_room_lights,
states.light.nursery_lights,
states.light.master_bedroom_lights,
states.light.garage_lights,
states.light.downstairs_toilet_lights,
states.light.kitchen_lights,
states.light.upstairs_landing_lights,
states.light.hallway_lights,
states.light.dressing_room_lights,
states.light.guest_bedroom_lights,
states.light.office_lights,
states.switch.bedroom_ensuite_lights,
states.switch.guest_bedroom_ensuite_lights,
states.switch.upstairs_bathroom_lights
] %}
{{ lights | selectattr('state','eq','on') | list | count }}
Then you can create the button card that shows how many lights are currently on:
type: custom:button-card
color: default
entity: sensor.number_of_lights_on
show_name: false
name: Lights
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) ]]]
operator: default
You’ll need to play with the custom_fields section to get the icon that shows the number of lights that are on in the right spot.
In terms of the second part - wanting it to open multiple button cards with more lights when you click it, I’d suggest editing the button card configuration so that tapping it navigates to a different page on your dashboard (with all the lights you want shown). This is likely the quickest way, but the Browser Mod add on will allow you to do this also (click on the button and have another view pop-up, similar to the ‘More Info’ view you get when clicking on entities.