Mushroom-inspired Room Light Card
Made with Button-Card, Mushroom-Cards, Auto-Entities-Card and Timer Bar Card.
This is a light-card for a “Room” (which really is just a group of lights).
- Image You need to give it an path or url to an image to display. The image will be greyscale if all lights in the group are off an normal if one or more lights of the group are on
- Timer If you have set up an timer for an automation you can define your timer-entity in variables. If you do so, there will be a timer-icon. If you click on the Icon, the more-info-dialog of the timer-entity will be shown
- Automation If you have set up an automation to control your lights in this group (e.g. based on motion) you can define an automation-entity in the variables. The card will then show an automation on/off icon. If you click the icon, the automation will toggle between on and off
- Room Toggle The toggle on the upper right side toggle all the lights in the group (on / off).
- Light-Chips for each light-entity in the light-group there will be a chip-card with icon and name. Click on the chip to toggle the light-state. Long tap will leed to the more-info-dialog.
- Timer-Bar If you defined a timer-entity and the timer is running, it will display a small bar shrinking as the times goes down.
What you need to to:
- Copy the YAML-Code below
- Change the following things:
type: custom:button-card
entity: light.waschekeller_alle
variables:
automation_entity: none
timer_entity: none
picture: /local/img/wäschekeller.jpg
show_name: false
show_state: false
show_icon: false
styles:
card:
- padding: 0px
- background: |
[[[
if (entity.state === "on")
return "rgba(255,255,0,0.05)";
]]]
grid:
- grid-template-areas: '"karte"'
- grid-template-columns: 100%
- grid-template-rows: 100%
custom_fields:
mush:
- filter: opacity(100%)
- overflow: visible
custom_fields:
karte:
card:
type: custom:stack-in-card
card_mod:
style: |
ha-card {
background: none;
}
mode: horizontal
keep:
background: true
border_radius: true
box_shadow: true
margin: true
outer_padding: false
cards:
- type: custom:button-card
entity: '[[[ return entity.entity_id ]]]'
show_name: false
styles:
card:
- width: 5rem
- padding: 0px
- border: none
- border-radius: 0px
- height: 10rem
entity_picture:
- width: 5rem
- height: 10rem
- object-fit: cover
- filter: |
[[[
if (entity.state === "off")
return "grayscale(100%)";
else
return "none";
]]]
entity_picture: '[[[ return variables.picture ]]]'
show_entity_picture: true
tap_action:
action: none
hold_action:
action: none
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
- type: vertical-stack
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
alignment: start
chips:
- type: template
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: none
hold_action:
action: more-info
double_tap_action:
action: none
icon: '{{ state_attr(entity,"icon") }}'
content: '{{ state_attr(entity,"friendly_name") }}'
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
- type: custom:mushroom-chips-card
card_mod:
style: |
.chip-container {
--chip-spacing: -10px !important;
}
alignment: end
chips:
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.timer_entity ]]]'
state_not: unknown
chip:
type: template
entity: '[[[ return variables.timer_entity ]]]'
icon: '{{ state_attr(entity,"icon") }}'
tap_action:
action: more-info
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
.content {
padding: 0px !important;
}
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.automation_entity ]]]'
state_not: unknown
chip:
type: template
entity: '[[[ return variables.automation_entity ]]]'
icon: |-
{% if states(entity) == "on" %}
mdi:motion-sensor
{% elif states(entity) == "off" %}
mdi:motion-sensor-off
{% endif %}
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 3rem !important;
}
- type: template
entity: '[[[ return entity.entity_id ]]]'
tap_action:
action: toggle
hold_action:
action: more-info
icon: |-
{% if states(entity) == "on" %}
mdi:toggle-switch
{% else %}
mdi:toggle-switch-off
{% endif %}
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
background: none !important;
font-size: 4rem !important;
}
- type: custom:button-card
show_name: false
show_state: false
show_icon: false
show_label: false
styles:
card:
- height: 5px
- box-shadow: none
- border-bottom: 1px solid rgb(50,50,50,0.2)
- border-radius: 0px
- padding: 0px
- margin-top: '-0.5rem'
- background: none
- type: custom:auto-entities
show_empty: true
sort:
method: name
card:
type: custom:mushroom-chips-card
alignment: center
card_param: chips
filter:
include:
- group: '[[[ return entity.entity_id ]]]'
options:
type: template
content: '{{ state_attr(entity,"friendly_name") }}'
icon: '{{ state_attr(entity,"icon") }}'
icon_color: |-
{% if states(entity) == "on" %}
orange
{% else %}
grey
{% endif %}
tap_action:
action: toggle
hold_action:
action: more-info
card_mod:
style: |
ha-card {
background: var(--secondary-background-color) !important;
}
- type: conditional
conditions:
- condition: state
entity: '[[[ return variables.timer_entity ]]]'
state: active
card:
type: custom:timer-bar-card
entity: '[[[ return variables.timer_entity ]]]'
invert: true
bar_direction: ltr
name: aus in
bar_foreground: darkorange
bar_background: none
bar_height: 0.1rem
layout: full_row
text_width: 0px