Uso de Mushroom, Mini Graph Card, Stack-in-Card, TP-Link Smart Plugs y Switches en Home Assistant

En este video, aprenderás cómo integrar y usar tarjetas Mushroom, Mini Graph Card y Stack-in-Card en Home Assistant. Además, te mostraremos cómo configurar y utilizar TP-Link Smart Plugs y Smart Switches para automatizar y controlar tu hogar de manera eficiente. También exploraremos cómo usar subvistas de Home Assistant y configurar la acción de toque para la navegación. ¡Sigue este tutorial paso a paso para mejorar tu configuración de Home Assistant!.

Codigo de la tarjeta.
type: custom:stack-in-card
cards:
type: custom:stack-in-card
cards:
type: grid
square: false
columns: 3
cards:
type: custom:mushroom-entity-card
entity: switch.homeassistant
primary_info: state
secondary_info: name
name: Homeassistant
icon_color: green
type: custom:mushroom-entity-card
entity: sensor.homeassistant_today_s_consumption
primary_info: state
secondary_info: name
name: Energy
icon_color: blue
type: custom:mushroom-entity-card
entity: sensor.homeassistant_current_consumption
primary_info: state
secondary_info: name
name: Power
icon_color: red
type: custom:mini-graph-card
entities:
entity: sensor.homeassistant_current_consumption
name: Power (Wh)
color: '#00bb33'
hours_to_show: 24
line_width: 3
font_size: 50
animate: true
show:
name: false
icon: false
labels: true
state: false
legend: false
fill: fade
card_mod:
style: |
mushroom-shape-icon {
{% if is_state(config.entity, 'heat_cool') %}
--card-mod-icon: mdi:autorenew;
animation: spin 3s ease-in-out infinite alternate;
{% elif is_state(config.entity, 'heat') %}
--card-mod-icon: mdi:fire;
animation: heat 2s infinite;
{% elif is_state(config.entity, 'cool') %}
--card-mod-icon: mdi:snowflake;
animation: cool 6s ease-in-out infinite;
{% elif is_state(config.entity, 'dry') %}
--card-mod-icon: mdi:water-percent;
animation: dry 1.5s linear infinite;
{% elif is_state(config.entity, 'fan_only') %}
--card-mod-icon: mdi:fan;
animation: spin 1s linear infinite;
{% else %}
--card-mod-icon: mdi:air-conditioner;
{% endif %}
display: flex;
}
@keyframes cool {
0%, 100% { transform: rotate(25deg); }
25% { transform: rotate(-25deg); }
50% { transform: rotate(50deg); }
75% { transform: rotate(-50deg); }
}
@keyframes heat {
0%, 100% { --icon-color: rgba(var(--rgb-red), 1); }
10%, 90% { --icon-color: rgba(var(--rgb-red), 0.8); }
20%, 80% { --icon-color: rgba(var(--rgb-red), 0.6); }
30%, 70% { --icon-color: rgba(var(--rgb-red), 0.4); }
40%, 60% { --icon-color: rgba(var(--rgb-red), 0.2); }
50% { --icon-color: rgba(var(--rgb-red), 0); }
}
@keyframes dry {
0%, 100% { --icon-symbol-size: 21px; }
10%, 90% { --icon-symbol-size: 22px; }
20%, 80% { --icon-symbol-size: 23px; }
30%, 70% { --icon-symbol-size: 24px; }
40%, 60% { --icon-symbol-size: 25px; }
50% { --icon-symbol-size: 26px; }
}