I have this dashboard for testing some cards. I hope it helps…
All triggered by an ‘input_boolean.testing’ helper that you have to create.
type: grid
columns: 1
square: false
cards:
- primary: '{{ states(entity) }}'
secondary: Testing
type: custom:mushroom-template-card
entity: input_boolean.testing
icon: none
layout: vertical
icon_color: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{'--icon-animation: spin 0.5s linear infinite reverse;' if is_state(config.entity, 'on') }}
border-radius: 50%;
{{'border: 8px dotted rgb(var(--rgb-red));' if is_state(config.entity, 'on') else 'border: 8px dotted rgb(var(--rgb-disabled));'}}
}
.shape {
{{'border: 4px dashed rgb(var(--rgb-green));' if is_state(config.entity, 'on') else 'border: 4px dashed rgb(var(--rgb-disabled));'}}
{{'--shape-animation: spin 2s linear infinite;' if is_state(config.entity, 'on') }}
--shape-color: none;
--icon-symbol-size: 5px;
--icon-size: 34px;
}
- type: custom:mushroom-template-card
primary: Card color changes according to value (i.e. temperature)
secondary: Test Number = {{ states(entity) }}°C
entity: input_number.test_number
icon: mdi:thermometer
layout: horizontal
tap_action:
action: more-info
icon_color: |
{% set battery_level = states(entity) %}
{% if battery_level < '17' %}
blue
{% elif battery_level < '18' %}
teal
{% elif battery_level < '19' %}
green
{% elif battery_level < '20' %}
light-green
{% elif battery_level < '21' %}
lime
{% elif battery_level < '22' %}
yellow
{% elif battery_level < '23' %}
amber
{% elif battery_level < '24' %}
orange
{% elif battery_level < '25' %}
deep-orange
{% else %}
red
{% endif %}
card_mod:
style: |
ha-card {
{% set battery_level = states(config.entity) %}
{% if battery_level < '17' %}
--primary-text-color: rgb(var(--rgb-blue));
--secondary-text-color: rgba(var(--rgb-blue),0.5);
background: rgba(var(--rgb-blue),0.1);
{% elif battery_level < '18' %}
--primary-text-color: rgb(var(--rgb-teal));
--secondary-text-color: rgba(var(--rgb-teal),0.5);
background: rgba(var(--rgb-teal),0.1);
{% elif battery_level < '19' %}
--primary-text-color: rgb(var(--rgb-green));
--secondary-text-color: rgba(var(--rgb-green),0.5);
background: rgba(var(--rgb-green),0.1);
{% elif battery_level < '20' %}
--primary-text-color: rgb(var(--rgb-lime));
--secondary-text-color: rgba(var(--rgb-lime),0.5);
background: rgba(var(--rgb-lime),0.1);
{% elif battery_level < '21' %}
--primary-text-color: rgb(var(--rgb-yellow));
--secondary-text-color: rgba(var(--rgb-yellow),0.5);
background: rgba(var(--rgb-yellow),0.1);
{% elif battery_level < '22' %}
--primary-text-color: rgb(var(--rgb-amber));
--secondary-text-color: rgba(var(--rgb-amber),0.5);
background: rgba(var(--rgb-amber),0.1);
{% elif battery_level < '23' %}
--primary-text-color: rgb(var(--rgb-orange));
--secondary-text-color: rgba(var(--rgb-orange),0.5);
background: rgba(var(--rgb-orange),0.1);
{% elif battery_level < '24' %}
--primary-text-color: rgb(var(--rgb-deep-orange));
--secondary-text-color: rgba(var(--rgb-deep-orange),0.5);
background: rgba(var(--rgb-deep-orange),0.1);
{% else %}
--primary-text-color: rgb(var(--rgb-red));
--secondary-text-color: rgba(var(--rgb-red),0.5);
background: rgba(var(--rgb-red),0.1);
{% endif %}
}
- type: custom:mushroom-template-card
entity: input_boolean.testing
primary: Top Left
icon: mdi:mushroom
icon_color: red
badge_icon: mdi:snail
badge_color: teal
secondary: Mushroom
card_mod:
style: |
{% if is_state(config.entity, 'on') %}
mushroom-badge-icon {
animation: blink 1s linear infinite;
}
@keyframes blink {
50% {opacity: 0;}
}
{% endif %}
- type: custom:mushroom-template-card
entity: input_boolean.testing
primary: Test
icon: mdi:radiator
icon_color: '{{ ''red'' if is_state(entity, ''on'') else ''disabled'' }}'
layout: vertical
secondary: ''
card_mod:
style:
mushroom-shape-icon$: |
ha-icon {
{{ '--icon-animation: clip 1.5s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(50% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}%'
secondary: Pool
icon: none
layout: vertical
entity: sensor.pool_tank_level_percent
icon_color: ''
badge_color: ''
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
{% set water_level = states('input_number.test_number') | int %}
{% if water_level == 5 %}
background: url("/local/my-icons/water 5.png") no-repeat center;
{% elif water_level == 4 %}
background: url("/local/my-icons/water 4.png") no-repeat center;
{% elif water_level == 3 %}
background: url("/local/my-icons/water 3.png") no-repeat center;
{% elif water_level == 2 %}
background: url("/local/my-icons/water 2.png") no-repeat center;
--shape-animation: low 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% else %}
background: url("/local/my-icons/water 1.png") no-repeat center;
--shape-animation: critical 1.5s infinite, pulse 1.5s ease-in-out infinite;
{% endif %}
background-size: contain;
--shape-color: none;
}
@keyframes critical {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-red), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
@keyframes low {
0% { box-shadow: 0 0 0 0 rgba(var(--rgb-orange), 0.7); }
100% { box-shadow: 0 0 5px 15px transparent; }
}
- type: custom:mushroom-template-card
primary: '{{ states(entity) }}'
secondary: Test Number
icon: none
layout: vertical
entity: input_boolean.testing
icon_color: ''
picture: ''
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: url("/local/my-icons/ufh-96.png") no-repeat center;
background-size: contain;
--shape-color: none;
--shape-animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
}
@keyframes clip {
0% {clip-path: inset(60% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: input_boolean.testing
icon: mdi:solar-power-variant
icon_color: amber
content: ''
tap_action:
action: navigate
navigation_path: energy
card_mod:
style: |
.content {
{{ 'animation: rays 2s infinite;' if is_state(config.entity, 'on') }}
}
@keyframes rays {
0%, 100% { clip-path: inset(0 0 0 0); }
80% { clip-path: polygon(100% 100%, 0% 100%, 11% 50%, 57% 48%, 56% 31%, 41% 31%, 33% 25%, 29% 18%, 27% 11%, 27% 6%, 74% 6%, 73% 15%, 69% 23%, 62% 29%, 71% 42%, 87% 47%); }
}
- type: entity
entity: input_number.test_number
- type: custom:mushroom-chips-card
chips:
- type: action
icon_color: blue
tap_action:
action: navigate
navigation_path: home
hold_action:
action: none
double_tap_action:
action: none
icon: mdi:home
- type: back
- type: menu
- type: action
tap_action:
action: navigate
navigation_path: home
icon: mdi:dots-vertical
icon_color: blue
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: mdi:sprinkler
icon_color: light-blue
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
card_mod:
style: |
.content {
animation: sprinkle 2s linear infinite;
transform-origin: 29% 88%;
}
@keyframes sprinkle {
0%, 15%, 30%, 45%, 60%, 100% { clip-path: inset(0 55% 0 0); transform: rotate(0deg); }
1%, 16%, 31%, 46% { clip-path: inset(0 0 0 0); transform: rotate(-10deg); }
6%, 21%, 36%, 51% { transform: rotate(2deg); }
}
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:faucet'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.content {
{{ 'animation: clip 2s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
content_info: none
tap_action:
action: toggle
hold_action:
action: none
double_tap_action:
action: none
picture: /local/my-icons/pool filter-96.png
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
icon: '{{ ''mdi:waterfall'' if is_state(entity, ''on'') else ''mdi:waterfall'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.content {
{{ 'animation: clip 1s ease-out infinite;' if is_state(config.entity, 'on') }}
}
@keyframes clip {
0% {clip-path: inset(0 0 80% 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: conditional
conditions:
- entity: input_boolean.testing
state: 'on'
chip:
type: template
entity: input_boolean.testing
picture: /local/my-icons/water 5.png
icon: '{{ ''mdi:waves'' if is_state(entity, ''on'') else ''mdi:waves'' }}'
icon_color: '{{ ''blue'' if is_state(entity, ''on'') else ''disabled'' }}'
badge_icon: '{{ ''mdi:faucet'' if is_state(entity, ''on'') else ''none'' }}'
badge_color: '{{ ''blue'' if is_state(entity, ''on'') else ''none'' }}'
content_info: none
card_mod:
style: |
.avatar {
animation: clip 1.5s ease-out infinite; if is_state(config.entity, 'on');
object-fit: contain !important;
}
@keyframes clip {
0% {clip-path: inset(75% 0 0 0); }
100% { clip-path: inset(0 0 0 0); }
}
tap_action:
action: toggle
double_tap_action:
action: none
hold_action:
action: more-info
- type: template
double_tap_action:
action: none
icon: mdi:calendar-clock
icon_color: green
tap_action:
action: navigate
navigation_path: /lovelace-home/schedule
hold_action:
action: none
content: >-
{%- set x = ['unavailable','unknown'] -%} {%- set d = ['switch'] -%}
{%- set skd = namespace(all=[],tags=[],on=[]) -%} {%- set entities =
states |rejectattr('state', 'in', x)
|selectattr('domain', 'in', d)
|map(attribute='entity_id')
|list -%}
{%- for en in entities |sort -%}
{%- if ("schedule" in states[en].entity_id) -%}
{%- set skd.all = skd.all + [en] -%}
{%- for tg in state_attr(en,'tags') |sort -%}
{%- set skd.tags = skd.tags + [tg] -%}
{%- endfor -%}
{%- endif -%}
{%- endfor -%} {%- set skd.tags = skd.tags |unique |list |sort -%} {#
https://community.home-assistant.io/t/counts-the-lights-on/105361/137#:~:text=if%20you%20made%20a%20light%20group%20you%20need%20to%20filter
#} {%- set skdONlist = expand(skd.all) |
selectattr('state','eq','on')
| map(attribute='entity_id')
| list -%}
{%- set skdOFFlist = expand(skd.all) | selectattr('state','eq','off')
| map(attribute='entity_id')
| list -%}
{{ skdONlist |count }} / {{ skd.all |count }}
entity: input_boolean.testing
