Tarjetas individuales para electrodomésticos

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!❤️

Requisitos previos

Para crear las tarjetas individuales para electrodomésticos necesitas lo siguiente:

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) * C

Dó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;
              }

¿Dudas?¿necesitas ayuda? entra aquí
Y si te ha gustado, compártelo! 🙂

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Send this to a friend