Con estas tarjetas individuales para electrodomésticos tendrás el control total de su estado, uso de energía y consumo de cada uno.
Además también podrás interactuar con ellos de manera sencilla y, con solo un vistazo rápido, tendrás al alcance toda la información que necesitas para optimizar el consumo de energía en tu hogar.
🥑 Esta entrada, las tarjetas y automatizaciones correspondientes han sido creadas por nuestro amigo Abel, con el apoyo de la comunidad de Aguacatec e inspiradas por el magnífico trabajo de BWHOUSE. Si te ha gustado puedes dejarle un comentario un poco más abajo!❤️Índice
Requisitos previos
Para crear las tarjetas individuales para electrodomésticos necesitas lo siguiente:
- Integrar tus electrodomésticos en Home Assistant mediante un enchufe inteligente que monitorice el consumo.
- Instalar a través de HACS las tarjetas de Card Mod, Swipe Card y Mushroom Cards.
- Crear un sensor que indique en cada momento el precio de tu tarifa, ya sea PVPC, fija o por tramos.
Descripción y construcción de la tarjeta
Hemos utilizado Swipe Card como base para poder visualizar todos los electrodomésticos en una misma tarjeta. De esta forma, cuando nos deslizamos hacia uno de sus laterales irán apareciendo todas las tarjetas. Cada una de ellas contiene, a su vez, varias tarjetas Mushroom Cards para mostrar la información que nos interesa.
Cabecera
En la cabecera, utilizamos una Mushroom Template Card con el atributo ‘primary’ para el nombre y estado del electrodoméstico, y ‘secondary’ para mostrar información adicional, como el conteo del stock de detergente disponible.
Además, jugamos con los iconos dándoles movimiento cuando están trabajando y cambiando el color en función de los estados. De esta manera, podemos presentar la información de manera clara y concisa para que sea fácil de entender y utilizar. Si no sabes como obtener esta información de tus electrodomésticos, revisa esta entrada.
La parte del código correspondiente a esta parte sigue esta estructura:
type: custom:mushroom-template-card
entity: input_select.lavadora_estados
multiline_secondary: false
primary: |2-
{% set d ={
'Lavando': 'Lavadora en uso',
'Finalizado': 'Lavado finalizado',
'Apagada': 'Lavadora apagada'
} %}
{{ d.get(states(entity)) }}
secondary: >
Número de lavados: quedan
{{states('input_number.lavadora_stock') | float | round(0)}}
icon: |-
{% if is_state('input_select.lavadora_estados', 'Lavando') %}
mdi:washing-machine
{% elif is_state('input_select.lavadora_estados', 'Finalizado') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Lavando' %} #556B2F
{% elif state== 'Finalizado' %} red {% elif state== 'Terminado'
%} purple {% else %} black {% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 25px;
--primary-text-color: black;
--secondary-text-color: black;
}
.: |
ha-card {
font-variant: small-caps;
border: 3px solid black;
border-radius: 10px;
height: 20px;
margin-top: -10px;
margin-left: 0px;
background-color: ;
}
ha-state-icon {
--icon-symbol-size: 30px;
{% if states('input_select.lavadora_estados') == 'Apagada' %}
{% else %} animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 32% 45%, 60% 34%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
}
Campos de estados e información complementaria
Bajo la cabecera incluimos unos ‘Mushroom Chip’ para añadir una línea con información complementaria. Como ejemplo, podemos añadir botones para interactuar con los dispositivos, estados de los ciclos, temperatura de la estancia, potencia… Las posibilidades son infinitas, depende de nuestro gusto y del electrodoméstico.
La parte del código correspondiente a esta parte sigue esta estructura:
type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:power
entity: switch.lavadora
tap_action:
action: toggle
entity: switch.lavadora
icon_color: black
fill_container: false
card_mod:
style: >
ha-card { --chip-background: {% if
is_state('switch.0xa4c138dc6a7f6b75', 'on') %} #556B2F {%
else %} darkred {% endif %}; --chip-icon-size: 15px;
--chip-font-size: 9px; }
- type: template
icon: mdi:recycle
entity: input_select.estado_de_lavadora
tap_action:
action: none
content: >-
{% if is_state('input_select.lavadora_estados', 'Lavando') %}
Lavando {% elif is_state('input_select.lavadora_estados',
'Finalizado') %} Finalizado {% else %} Apagada {% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.lavadora_estados', 'Lavando') %} #556B2F
{% elif is_state('input_select.lavadora_estados', 'terminado') %} red
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: template
icon: mdi:power-plug
entity: sensor.lavadora_power
tap_action:
action: none
content: POTENCIA = {{ states('sensor.lavadora_power') }} W
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.lavadora_estados', 'Lavando') %} #556B2F
{% elif is_state('input_select.lavadora_estados', 'terminado') %} red
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
Consumo energético
En la siguiente parte, tenemos una Mushroom Template Card para mostrar el consumo diario y mensual, medido en kWh.
Para ello previamente necesitaremos crear los ayudantes oportunos en función de lo que queremos representar. En este caso se trata de ayudantes de tipo “contador” (o ‘utility meter’) que funcionan como acumuladores del sensor de energía de los enchufes, y que haremos que se reinicien mediante diaria y mensualemente para mantener un seguimiento preciso de los consumos de energía.
La parte del código correspondiente a esta parte sigue esta estructura:
type: custom:mushroom-template-card
icon: mdi:transmission-tower
primary: >
CONSUMO DIARIO: {{ states("sensor.lavadora_consumo_diario") |
float | round(2) }} kWh
secondary: >
CONSUMO MENSUAL: {{ states("sensor.lavadora_consumo_mensual") |
float | round(2) }} kWh
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
}
ha-card {
--icon-symbol-size: 30px;
box-shadow: none;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
margin-top: 15px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
Gasto acumulado
De nuevo utilizamos una Mushroom Template Card para representar el gasto acumuado en euros. En este caso usaremos un ayudante de tipo “número” (‘input_number‘), a cuyo valor iremos agregando mediante una automatización el gasto de cada ciclo (por ejemplo, el gasto de cada lavado de la lavadora).
Para ello necesitas conocer el gasto en euros de cada ciclo. Si tienes tarifa fija las 24h el cálculo es sencillo, ya que sólo tienes que multiplicar el consumo energético por el precio por kWh, pero… ¿cómo hacemos el cálculo en el caso de tener tarifas por tramos o PVPC? Para conocer el gasto por ciclo (Gn) vamos a utilizar la siguiente fórmula:
Gn = (A - B) * CDónde:
- A = Consumo acumulado de energía en kWh, justo después de terminar el ciclo de funcionamiento. Este vendrá dado por la entidad correspondiente del enchufe inteligente (por ejemplo, ‘sensor.dispositivo_energy’) en el momento en que el electrodoméstico deje de funcionar (representado por el cambio de estado a ‘off’, o similar).
- B = Consumo acumulado de energía en kWh, justo antes de iniciar el ciclo de funcionamiento. Este vendrá dado por el valor de la misma entidad (‘sensor.dispositivo_energy’), que tenemos que guardar en un ayudante de tipo número, cuando el electrodoméstico empieza a funcionar (representado por el cambio de estado a ‘on’, o similar).
- C = Precio en €/kWh de nuestra tarifa en ese momento (tal y como hemos definido en los requisitos previo).
- Gn = Gasto en € obtenido al finalizar el ciclo, tras realizar la fórmula descrita.
Con el resultado de este cálculo (Gn) ya podemos conocer el consumo en un periodo concreto (mensual, anual…) para cada uno de los electrodomésticos. Para ello sólo tenemos que crear el ayudante numérico correspondiente, e ir sumando el gasto de cada ciclo (Gn) cuando lo calculemos (representado por el cambio de estado a ‘off’, o similar). Además tenemos que reiniciar estos ayudantes numéricos con la frecuencia que corresponda (mensualmente, anualmente…).
Todas estas operaciones quedarían resumidas en una automatización con distintos triggers como esta:
alias: "ESTADOS: Lavadora"
description: ""
trigger:
- platform: numeric_state
entity_id:
- sensor.lavadora_power
for:
hours: 0
minutes: 2
seconds: 0
above: "5"
id: Lavando
- platform: numeric_state
entity_id:
- sensor.lavadora_power
for:
hours: 0
minutes: 2
seconds: 0
below: 5
id: Finalizado
- platform: state
entity_id:
- binary_sensor.sensor_lavadora_contact
to: "on"
id: Puerta lavadora abierta
- platform: time_pattern
minutes: /10
id: Recordatorio lavadora finalizada
condition: []
action:
- choose:
- conditions:
- condition: trigger
id:
- Lavando
sequence:
- service: input_select.select_option
target:
entity_id: input_select.lavadora_estados
data:
option: Lavando
- service: input_number.set_value
target:
entity_id: input_number.energia_acumulada_antes_del_lavado_lavadora
data:
value: >-
{{ states('sensor.lavadora_energy') | float | round(2)
}}
- conditions:
- condition: trigger
id:
- Finalizado
- condition: state
entity_id: input_select.lavadora_estados
state: Lavando
sequence:
- service: input_select.select_option
target:
entity_id: input_select.lavadora_estados
data:
option: Finalizado
- service: notify.mobile_app_pixel_6a
metadata: {}
data:
message: Lavadora finalizada
- service: tts.speak
metadata: {}
data:
cache: true
media_player_entity_id: media_player.toda_la_casa
message: La lavadora ha terminado
target:
entity_id: tts.home_assistant_cloud
- service: input_number.set_value
target:
entity_id: input_number.lavadora_gasto_acumulado_mensual
data:
value: >-
{{ (states("input_number.lavadora_gasto_acumulado_mensual") |
float) + (((states("sensor.lavadora_energy") | float -
states("states("input_number.energia_acumulada_antes_del_lavado_lavadora") | float) *") |
float) * (states("sensor.custom_tariff") | float )) | round(4))
}}
- service: input_number.set_value
target:
entity_id: input_number.lavadora_gasto_acumulado_anual
data:
value: >-
{{ (states("input_number.lavadora_gasto_acumulado_anual") |
float) + (((states("sensor.lavadora_energy") | float -
states("input_number.energia_acumulada_antes_del_lavado_lavadora") |
float) * (states("sensor.custom_tariff") | float )) | round(4))
}}
- service: input_number.decrement
metadata: {}
data: {}
target:
entity_id: input_number.lavadora_stock
- conditions:
- condition: trigger
id:
- Puerta lavadora abierta
sequence:
- service: input_select.select_option
target:
entity_id: input_select.lavadora_estados
data:
option: Apagada
- conditions:
- condition: trigger
id:
- Recordatorio lavadora finalizada
- condition: state
entity_id: input_select.lavadora_estados
state: Finalizado
sequence:
- service: notify.mobile_app_pixel_6a
metadata: {}
data:
message: Lavadoraaaaaaaaaaa!!!
- service: tts.speak
metadata: {}
data:
cache: true
media_player_entity_id: media_player.toda_la_casa
message: La lavadora, gañán!
target:
entity_id: tts.home_assistant_cloud
mode: single
Código completo de la tarjeta
A continuación puedes copiar el código completo de las tarjetas individuales para electrodomésticos que has visto en el ejemplo.
type: custom:swipe-card
card_width: 100%
start_card: 1
parameters:
effect: coverflow
threshold: 2
slidesPerView: 1
centeredSlides: true
coverflowEffect:
stretch: -50
rotate: 20
depth: 100
slideShadows: true
cards:
- type: vertical-stack
cards:
- type: entities
entities:
- type: custom:mushroom-template-card
entity: input_select.estados_lavavajillas
multiline_secondary: false
primary: |2-
{% set d ={
'Lavando': 'Lavavajillas en uso',
'Apagado': 'Lavavajillas apagado'
} %}
{{ d.get(states(entity)) }}
secondary: >
Número de lavados: quedan
{{states('input_number.lavavajillas_stock') | float | round(0)}}
icon: |-
{% if is_state('input_select.estados_lavavajillas', 'Lavando') %}
mdi:dishwasher
{% else %}
mdi:dishwasher-off
{% endif %}
icon_color: >-
{% if is_state('input_select.estados_lavavajillas', 'Lavando') %}
#556B2F {% else %} Black {% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 25px;
--primary-text-color: black;
--secondary-text-color: black;
}
.: |
ha-card {
font-variant: small-caps;
border: 3px solid black;
border-radius: 10px;
height: 20px;
margin-top: -10px;
margin-left: 0px;
background-color: ;
}
ha-state-icon {
--icon-symbol-size: 30px;
{% if states('input_select.lavadora_estados') == 'Apagada' %}
{% else %} animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 32% 45%, 60% 34%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:power
entity: switch.lavavajillas
tap_action:
action: toggle
entity: switch.lavavajillas
icon_color: black
fill_container: false
card_mod:
style: >
ha-card { --chip-background: {% if
is_state('switch.lavavajillas', 'on') %} #556B2F {% else
%} darkred {% endif %}; --chip-icon-size: 15px;
--chip-font-size: 9px; }
- type: template
icon: mdi:recycle
entity: input_select.estados_lavavajillas
tap_action:
action: none
content: >-
{% if is_state('input_select.estados_lavavajillas', 'Lavando')
%} Lavando {% else %} Apagado {% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.estados_lavavajillas', 'Lavando') %} #556B2F
{% else %} white
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: template
icon: mdi:power-plug
entity: sensor.lavavajillas_power
tap_action:
action: none
content: POTENCIA = {{ states('sensor.lavavajillas_power') }} W
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.estados_lavavajillas', 'Lavando') %} lavender
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: custom:mushroom-template-card
icon: mdi:transmission-tower
primary: >
CONSUMO DIARIO: {{ states("sensor.lavavajillas_consumo_diario") |
float | round(2) }} kWh
secondary: >
CONSUMO MENSUAL: {{ states("sensor.lavavajillas_consumo_mensual")
| float | round(2) }} kWh
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
}
ha-card {
--icon-symbol-size: 30px;
box-shadow: none;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
margin-top: 15px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
- type: custom:mushroom-template-card
icon: mdi:cash-multiple
primary: >-
GASTO MENSUAL = {{
states("input_number.lavavajillas_gasto_acumulado_mensual") |
float | float | round(2) }} €
secondary: >-
GASTO ANUAL = {{
states("input_number.lavavajillas_gasto_acumulado_anual") | float
| float | round(2) }} €
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
ha-card {
--icon-symbol-size: 30px;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
show_header_toggle: true
state_color: false
card_mod:
style: |
ha-card {
box-shadow: none;
background-color: silver;
border: 0px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
}
- type: vertical-stack
cards:
- type: entities
entities:
- type: custom:mushroom-template-card
entity: input_select.lavadora_estados
multiline_secondary: false
primary: |2-
{% set d ={
'Lavando': 'Lavadora en uso',
'Finalizado': 'Lavado finalizado',
'Apagada': 'Lavadora apagada'
} %}
{{ d.get(states(entity)) }}
secondary: >
Número de lavados: quedan
{{states('input_number.lavadora_stock') | float | round(0)}}
icon: |-
{% if is_state('input_select.lavadora_estados', 'Lavando') %}
mdi:washing-machine
{% elif is_state('input_select.lavadora_estados', 'Finalizado') %}
mdi:washing-machine-alert
{% else %}
mdi:washing-machine-off
{% endif %}
icon_color: >-
{% set state=states(entity) %} {% if state=='Lavando' %} #556B2F
{% elif state== 'Finalizado' %} red {% elif state== 'Terminado'
%} purple {% else %} black {% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 25px;
--primary-text-color: black;
--secondary-text-color: black;
}
.: |
ha-card {
font-variant: small-caps;
border: 3px solid black;
border-radius: 10px;
height: 20px;
margin-top: -10px;
margin-left: 0px;
background-color: ;
}
ha-state-icon {
--icon-symbol-size: 30px;
{% if states('input_select.lavadora_estados') == 'Apagada' %}
{% else %} animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 32% 45%, 60% 34%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:power
entity: switch.lavadora
tap_action:
action: toggle
entity: switch.lavadora
icon_color: black
fill_container: false
card_mod:
style: >
ha-card { --chip-background: {% if
is_state('switch.lavadora', 'on') %} #556B2F {%
else %} darkred {% endif %}; --chip-icon-size: 15px;
--chip-font-size: 9px; }
- type: template
icon: mdi:recycle
entity: input_select.estado_de_lavadora
tap_action:
action: none
content: >-
{% if is_state('input_select.lavadora_estados', 'Lavando') %}
Lavando {% elif is_state('input_select.lavadora_estados',
'Finalizado') %} Finalizado {% else %} Apagada {% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.lavadora_estados', 'Lavando') %} #556B2F
{% elif is_state('input_select.lavadora_estados', 'terminado') %} red
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: template
icon: mdi:power-plug
entity: sensor.lavadora_power
tap_action:
action: none
content: POTENCIA = {{ states('sensor.lavadora_power') }} W
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.lavadora_estados', 'Lavando') %} #556B2F
{% elif is_state('input_select.lavadora_estados', 'terminado') %} red
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: custom:mushroom-template-card
icon: mdi:transmission-tower
primary: >
CONSUMO DIARIO: {{ states("sensor.lavadora_consumo_diario") |
float | round(2) }} kWh
secondary: >
CONSUMO MENSUAL: {{ states("sensor.lavadora_consumo_mensual") |
float | round(2) }} kWh
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
}
ha-card {
--icon-symbol-size: 30px;
box-shadow: none;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
margin-top: 15px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
- type: custom:mushroom-template-card
icon: mdi:cash-multiple
primary: >-
GASTO MENSUAL = {{
states("input_number.lavadora_gasto_acumulado_mensual") | float |
float | round(2) }} €
secondary: >-
GASTO ANUAL = {{
states("input_number.lavadora_gasto_acumulado_anual") | float |
float | round(2) }} €
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
ha-card {
--icon-symbol-size: 30px;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
show_header_toggle: true
state_color: false
card_mod:
style: |
ha-card {
box-shadow: none;
background-color: silver;
border: 0px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
}
- type: vertical-stack
cards:
- type: entities
entities:
- type: custom:mushroom-template-card
entity: input_select.estados_freidora
multiline_secondary: false
primary: ' Air-Fryer'
secondary: |2-
{% set d ={
'Cocinando': 'Cocinando',
'Apagada': 'Apagada'
} %}
{{ d.get(states(entity)) }}
icon: |-
{% if is_state('input_select.estados_freidora', 'Cocinando') %}
mdi:french-fries
{% else %}
mdi:french-fries
{% endif %}
icon_color: >-
{% if is_state('input_select.estados_freidora', 'Cocinando') %}
#556B2F {% else %} Black {% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 24px;
--primary-text-color: black;
--secondary-text-color: black;
}
.: |
ha-card {
font-variant: small-caps;
border: 3px solid black;
border-radius: 10px;
height: 20px;
margin-top: -10px;
margin-left: 0px;
background-color: ;
}
ha-state-icon {
--icon-symbol-size: 30px;
{% if states('input_select.estados_freidora') == 'Apagada' %}
{% else %} animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 32% 45%, 60% 34%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:power
entity: switch.freidora_aire
tap_action:
action: toggle
entity: switch.freidora_aire
icon_color: black
fill_container: false
card_mod:
style: >
ha-card { --chip-background: {% if
is_state('switch.freidora_aire', 'on') %} #556B2F {% else
%} darkred {% endif %}; --chip-icon-size: 15px;
--chip-font-size: 9px; }
- type: template
icon: mdi:recycle
entity: input_select.estados_lavavajillas
tap_action:
action: none
content: >-
{% if is_state('input_select.estados_freidora', 'Cocinando')
%} Cocinando {% else %} Apagada {% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.estados_freidora', 'Cocinando') %} #556B2F
{% else %} white
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: template
icon: mdi:power-plug
entity: sensor.lavavajillas_power
tap_action:
action: none
content: POTENCIA = {{ states('sensor.freidora_aire_power') }} W
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.estados_freidora', 'Cocinando') %} lavender
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: custom:mushroom-template-card
icon: mdi:transmission-tower
primary: >
CONSUMO DIARIO: {{ states("sensor.freidora_consumo_diario") |
float | round(2) }} kWh
secondary: >
CONSUMO MENSUAL: {{ states("sensor.freidora_consumo_mensual") |
float | round(2) }} kWh
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
}
ha-card {
--icon-symbol-size: 30px;
box-shadow: none;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
margin-top: 15px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
- type: custom:mushroom-template-card
icon: mdi:cash-multiple
primary: >-
GASTO MENSUAL = {{
states("input_number.freidora_gasto_acumulado_mensual") | float |
float | round(2) }} €
secondary: >-
GASTO ANUAL = {{
states("input_number.freidora_gasto_acumulado_anual") | float |
float | round(2) }} €
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
ha-card {
--icon-symbol-size: 30px;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
show_header_toggle: true
state_color: false
card_mod:
style: |
ha-card {
box-shadow: none;
background-color: silver;
border: 0px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
}
- type: vertical-stack
cards:
- type: entities
entities:
- type: custom:mushroom-template-card
entity: input_select.estados_termo
multiline_secondary: false
primary: ' Termo'
secondary: |2-
{% set d ={
'Encendido': 'Encendido',
'Apagado': 'Apagado'
} %}
{{ d.get(states(entity)) }}
icon: |-
{% if is_state('input_select.estados_termo', 'Encendido') %}
phu:aqara-thermo-e1
{% else %}
phu:aqara-thermo-e1
{% endif %}
icon_color: >-
{% if is_state('input_select.estados_termo', 'Encendido') %}
#556B2F {% elif is_state('input_select.estados_termo',
'Calentando') %} #801111 {% else %} Black {% endif %}
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--shape-color: white !important;
}
mushroom-state-info$: |
.container {
--card-secondary-font-size: 15px;
--card-primary-font-size: 24px;
--primary-text-color: black;
--secondary-text-color: black;
}
.: |
ha-card {
font-variant: small-caps;
border: 3px solid black;
border-radius: 10px;
height: 20px;
margin-top: -10px;
margin-left: 0px;
background-color: ;
}
ha-state-icon {
--icon-symbol-size: 30px;
{% if states('input_select.estados_termo') == 'Apagado' %}
{% else %} animation: shake 400ms ease-in-out infinite, drum 2s ease infinite; transform-origin: 50% 110%;
{% endif %}
}
@keyframes shake {
0%, 100% { transform: translate(0, 0) rotate(0); }
20% { transform: translate(0.4px, -0.4px) rotate(-4deg); }
40% { transform: translate(-0.4px, 0.4px) rotate(4deg); }
60% { transform: translate(0.4px, 0.4px) rotate(-4deg); }
80% { transform: translate(-0.4px, -0.4px) rotate(4deg); }
}
@keyframes drum {
50% { clip-path: polygon(0 0, 0 100%, 35% 100%, 32% 45%, 60% 34%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
}
- type: custom:mushroom-chips-card
alignment: center
chips:
- type: template
icon: mdi:power
entity: switch.termo
tap_action:
action: toggle
entity: switch.termo
icon_color: black
fill_container: false
card_mod:
style: >
ha-card { --chip-background: {% if is_state('switch.termo',
'on') %} #556B2F {% else %} #801111 {% endif %};
--chip-icon-size: 15px; --chip-font-size: 9px; }
- type: template
icon: mdi:recycle
entity: input_select.estados_termo
tap_action:
action: none
content: >-
{% if is_state('input_select.estados_termo', 'Encendido') %}
Encendido {% elif is_state('input_select.estados_termo',
'Calentando') %} Calentando {% else %} Apagado {% endif %}
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.estados_termo', 'Encendido') %} #556B2F
{% elif is_state('input_select.estados_termo', 'Calentando') %} orange
{% else %} white
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: template
icon: mdi:power-plug
entity: sensor.termo_power
tap_action:
action: none
content: POTENCIA = {{ states('sensor.termo_power') }} W
card_mod:
style: |
ha-card {
--chip-background:
{% if is_state('input_select.estados_termo', 'Encendido') %} lavender
{% else %} lavender
{% endif %};
--chip-icon-size: 15px;
--chip-font-size: 12px;
}
- type: custom:mushroom-template-card
icon: mdi:transmission-tower
primary: >
CONSUMO DIARIO: {{ states("sensor.termo_consumo_diario") | float |
float | round(2) }} kWh
secondary: >
CONSUMO MENSUAL: {{ states("sensor.termo_consumo_mensual") | float
| float | round(2) }} kWh
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
}
ha-card {
--icon-symbol-size: 30px;
box-shadow: none;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
margin-top: 15px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
- type: custom:mushroom-template-card
icon: mdi:cash-multiple
primary: >-
GASTO MENSUAL = {{
states("input_number.termo_gasto_acumulado_mensual") | float | round(2) }} €
secondary: >-
GASTO ANUAL = {{
states("input_number.termo_gasto_acumulado_anual") | float
| round(2) }} €
layout: horizontal
icon_color: b
fill_container: true
card_mod:
style: |
mushroom-shape-icon {
top: -20px;
left: -10px;
}
mushroom-state-item {
text-align: right;
transform: translateX(0%);
}
ha-card {
--icon-symbol-size: 30px;
border: 0px;
background-color: #ffffff;
--card-primary-font-size: 14PX;
--card-secondary-font-size: 14px;
}
:host {
--primary-text-color: rgb(var(--rgb-black));
--secondary-text-color: rgb(var(--rgb-black));
--mush-icon-symbol-size: 0.50em;
}
show_header_toggle: true
state_color: false
card_mod:
style: |
ha-card {
box-shadow: none;
background-color: silver;
border: 0px;
margin-top: 15px;
margin-left: 20px;
margin-right: 20px;
}
🥑 Por cierto, si quieres aprender a diseñar tus propias tarjetas, te recomiendo que veas los talleres de la academia sobre cómo crear tarjetas personalizadas y templates, son gratis!
¿Dudas?¿necesitas ayuda? entra aquí
Y si te ha gustado, compártelo! 🙂
