Could soon be my Sensor Card in the kitchen, if I don’t find another solution! This card also have rhysb animated icons when detekted. The Icons are Philips Motion Sensor, Aqara Door Sensor and a Smarthings Water Sensor.
The Harmony Remote card I have already shown this in an earlier post, but this one also have the animated icons, I went crazy 
If you look at the picture on the far right on the Nvidia Shield (shield icon), that one is off center, that because it was moving during screenshot, that one are tilting back and forth.
Sensor Card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: binary_sensor.mushroom_senosorer_matrum
primary: Sensorer
secondary: |
{% if is_state('binary_sensor.mushroom_senosorer_matrum', 'on') %} På
{%else%}
Av
{% endif %}
icon: mdi:leak
icon_color: |
{% if is_state('binary_sensor.mushroom_senosorer_matrum', 'on') %} green
{%else%}
grey
{% endif %}
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards: null
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: binary_sensor.smartthings_vision_motion
icon: hue:motion-sensor
icon_color: green
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: entity
entity: binary_sensor.lumi_lumi_sensor_magnet_aq2_d6b67507_on_off
icon: phu:aqara-contact
icon_color: green
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: entity
entity: binary_sensor.vattensensor_matrum_ias_zone
icon: mdi:water
icon_color: green
content_info: none
tap_action:
action: more-info
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-icon {
{% if is_state('binary_sensor.smartthings_vision_motion', 'on') %}
animation: alarm 1.8s ease infinite;
{% endif %}
}
@keyframes alarm {
0%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-2px) rotate(-27deg); }
20% { transform: translateY(-2px) rotate(21deg); }
30% { transform: translateY(-2px) rotate(-15deg); }
40% { transform: translateY(-2px) rotate(9deg); }
50% { transform: translateY(0); }
60% { transform: translateY(-1.2px) }
}
mushroom-entity-chip:nth-child(2)$: |
ha-icon {
{% if is_state('binary_sensor.lumi_lumi_sensor_magnet_aq2_d6b67507_on_off', 'on') %}
animation: alarm 1.8s ease infinite;
{% endif %}
}
@keyframes alarm {
0%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-2px) rotate(-27deg); }
20% { transform: translateY(-2px) rotate(21deg); }
30% { transform: translateY(-2px) rotate(-15deg); }
40% { transform: translateY(-2px) rotate(9deg); }
50% { transform: translateY(0); }
60% { transform: translateY(-1.2px) }
}
mushroom-entity-chip:nth-child(3)$: |
ha-icon {
{% if is_state('binary_sensor.vattensensor_matrum_ias_zone', 'on') %}
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
{% endif %}
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 6px;
}
Harmony Remote Card:
type: custom:vertical-stack-in-card
cards:
- type: custom:mushroom-template-card
entity: remote.harmony_hub
primary: Harmony
secondary: |
{% if is_state('select.harmony_hub_activities', 'PowerOff') %}Av
{%else%}
{{states('select.harmony_hub_activities')}}
{% endif %}
icon: mdi:remote
icon_color: |
{% if is_state('remote.harmony_hub', 'on') %} indigo
{%else%}
grey
{% endif %}
tap_action:
action: more-info
- type: custom:layout-card
layout_type: masonry
layout:
width: 106
max_cols: 1
height: auto
padding: 0px
card_margin: var(--masonry-view-card-margin, -10px 8px 15px)
cards: null
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: switch.harmony_hub_xbox
icon_color: indigo
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: entity
entity: switch.harmony_hub_bluesound
icon_color: indigo
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
- type: entity
entity: switch.harmony_hub_shield_tv
icon_color: indigo
icon: mdi:shield
content_info: none
tap_action:
action: toggle
card_mod:
style: |
ha-card {
--chip-border-width: 0;
alignment: center
card_mod:
style:
mushroom-entity-chip:nth-child(1)$: |
ha-icon {
{% if is_state('switch.harmony_hub_xbox', 'on') %}
animation: huh 4s ease infinite;
transform-origin: 50% 60%;
{% endif %}
}
@keyframes huh {
0%, 10%, 75%, 100% { transform: rotate(0deg); }
15% { transform: rotate(-25deg); }
30%, 35% { transform: rotate(-40deg); }
50% { transform: rotate(12deg); }
65% { transform: rotate(-8deg); }
}
mushroom-entity-chip:nth-child(2)$: |
ha-icon {
{% if is_state('switch.harmony_hub_bluesound', 'on') %}
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
{% endif %}
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
mushroom-entity-chip:nth-child(3)$: |
ha-icon {
{% if is_state('switch.harmony_hub_shield_tv', 'on') %}
animation: ducky 2s ease-in-out infinite;
transform-origin: 50% 75%;
{% endif %}
}
@keyframes ducky {
0%, 100% { transform: rotate(-25deg); }
50% { transform: rotate(25deg); }
}
style: |
ha-card {
margin: -2px 0px 12px;
--chip-background: rgba(var(--rgb-disabled), 0.15);
--ha-card-box-shadow: none;
--chip-border-radius: 12px;
--chip-height: 40px;
--chip-padding: 12px;
--chip-spacing: 6px;
}
/Thekholm
This card has three button to be used as fast access to radio stations, playlist, buttons or anything else.
rhysb
