Tarjetas de habitación

En esta entrada vamos a crear tarjetas de habitación para controlar de un simple vistazo el estado de los dispositivos de las mismas.

Anteriormente ya hemos utilizado ejemplos específicos como las tarjetas de ocupación o la tarjeta para Smart TV, pero en este caso el objetivo es concentrar en una pequeña tarjeta toda la información. En mi caso es ideal para habitaciones como el dormitorio o el salón, en las que pasamos mucho tiempo pero cuentan con dispositivos limitados (que no merecen un apartado específico en el panel de control).

Al final te quedarán unas tarjetas con el siguiente estilo:

Consideraciones previas

Si quieres construir esta tarjeta, considera lo siguiente:

  • Para crear la tarjeta necesitas instalar a través de HACS las tarjetas Mushroom Cards, Card-mod, Stack in card.
  • Puedes copiar y pegar el código al final de la entrada, pero puedes modificarlo libremente como quieras. Para ayudarte, recuerda que siempre puedes consultar la biblioteca de templates y estilos.
  • Si vas a controlar bombillas zigbee que frecuentemente enciendes y apagas con interruptores de pared, te recomiendo que eches un vistazo a este truco para mostrar el estado real de tus bombillas zigbee, para evitar que sigan apareciendo como encendidas cuando las apagas con el interruptor.

Construcción de la tarjeta

Para crear las tarjetas de habitación vamos a considerar las siguientes partes:

  • Encabezado de la tarjeta

El encabezado nos va a mostrar información importante de la habitación. En mi caso me interesa visualizar la temperatura y el porcentaje de humedad de la habitación. Para ello lógicamente vas a necesitar disponer de algún sensor que te proporcione esta información. En mi caso utilizo este tipo de sensores integrados a través de zigbee2mqtt.

Puedes modificar el encabezado de la tarjeta en la siguiente parte del código:

## ENCABEZADO DE LA TARJETA
- type: custom:mushroom-template-card
primary: Dormitorio ## NOMBRE DE LA HABITACIÓN
secondary: >- ## INDICA A CONTINUACIÓN LOS SENSORES DE LA HABITACIÓN
  {{ states('sensor.sensor_temperatura_dormitorio') | int }}ºC | {{ states('sensor.sensor_humedad_dormitorio') | int }}%
icon: ''
card_mod:
  style: |
    ha-card {
      border: 0px;
    }
tap_action:
  action: none
  • Icono de la tarjeta

Lógicamente, el icono representa la estancia de la tarjeta y puedes personalizar el color que más te guste. Pero además, sobre este aparece un distintivo cuando se cumplen ciertas condiciones (que puedes personalizar como quieras).

  1. Si la humedad igual el 60%, aparece el icono de una gota con el fondo azul.
  2. Si la temperatura iguala o supera los 26º, aparece el icono de una llama con el fondo rojo.
  3. Si la temperatura iguala o baja de los 18º, aparece el icono de un copo de nieve con el fondo azul.

Puedes modificar el icono y los distintivos de la tarjeta en la siguiente parte del código:

## ICONO DE LA TARJETA
- type: custom:mushroom-template-card
  primary: ''
  secondary: ''
  icon: mdi:bed ## ICONO
  icon_color: teal ## COLOR DEL ICONO
  tap_action:
    action: none
  card_mod:
    style: |
      ha-card {
        border: 0px;
        --icon-size: 120px;
        margin-left: -30px;
        margin-bottom: -40px;
        margin-top: -5px;
      }
      mushroom-badge-icon {
        margin-right: 10px;
        margin-top: 10px;
        --badge-icon-size: 15px;
        --badge-size: 25px;
      }
  ## REGLAS DE LOS DISTINTIVOS (ICONOS)
  badge_icon: >
    {% if (states('sensor.sensor_humedad_dormitorio') | int) >= 60 %} mdi:water
    {% elif (states('sensor.sensor_temperatura_dormitorio') | int) >= 26 %} mdi:fire
	{% elif (states('sensor.sensor_temperatura_dormitorio') | int) <= 18 %} mdi:snowflake
	{% endif %}
  ## REGLAS DE LOS DISTINTIVOS (COLORES)
  badge_color: >
    {% if (states('sensor.sensor_humedad_dormitorio') | int) >= 60 %} blue
    {% elif (states('sensor.sensor_temperatura_dormitorio') | int) >= 26 %} red
    {% elif (states('sensor.sensor_temperatura_dormitorio') | int) <= 18 %} blue
    {% endif %}
  • Iconos laterales

Los iconos laterales van a servir para infomar del estado de los dispositivos de la estancia, así como para controlarlos. En mi caso voy a incluir las distintas bombillas y lámparas de la estancia, y la televisión. No obstante, puedes usarlo para cualquier cosa que se te ocurra (controlar ventiladores, consultar cámaras de vigilancia, etc).

Cada uno de los iconos laterales está compuesto por un código como el siguiente:

## ICONOS LATERALES
- type: custom:mushroom-template-card
  primary: ''
  secondary: ''
  layout: vertical
  icon: mdi:ceiling-light ## ICONO
  entity: light.bombilla_dormitorio ## ENTIDAD CONTROLADA
  icon_color: >
    {% if (states('light.bombilla_dormitorio')) == 'on' %} teal ## COLOR DEL ICONO (ENCENDIDO)
	{% endif %}
  card_mod:
    style: |
      ha-card {
        border: 0px;
        margin-top: -166px;
        margin-right: -120px;
        --icon-size: 32px;
      }

Código de la tarjeta

La forma más rápida de crear tus propias tarjetas de habitación es copiar el código de la tarjeta de ejemplo, crear una nueva tarjeta en tu panel de control, y pegarlo en el editor de código. Ten en cuenta que tendrás que modificar el nombre de tus habitaciones, sensores y entidades, así como personalizar los colores tal y como te he explicado en los apartados anteriores.

A continuación puedes copiar el código completo de la tarjeta de ejemplo.

  • Código optimizado para 4 iconos laterales
tarjeta habitacion
type: grid
square: false
columns: 2
cards:
  - type: custom:stack-in-card
    cards:
      ## ENCABEZADO DE LA TARJETA
      - type: custom:mushroom-template-card
        primary: Dormitorio ## NOMBRE DE LA HABITACIÓN
        secondary: >- ## INDICA A CONTINUACIÓN LOS SENSORES DE LA HABITACIÓN
          {{ states('sensor.sensor_temperatura_dormitorio') | int }}ºC | {{ states('sensor.sensor_humedad_dormitorio') | int }}%
        icon: ''
        card_mod:
          style: |
            ha-card {
              border: 0px;
            }
        tap_action:
          action: none
      ## ICONO DE LA TARJETA
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:bed ## ICONO
        icon_color: teal ## COLOR DEL ICONO
        tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              border: 0px;
              --icon-size: 120px;
              margin-left: -30px;
              margin-bottom: -40px;
              margin-top: -5px;
            }
            mushroom-badge-icon {
              margin-right: 10px;
              margin-top: 10px;
              --badge-icon-size: 15px;
              --badge-size: 25px;
            }
        ## REGLAS DE LOS DISTINTIVOS (ICONOS)
        badge_icon: >
          {% if (states('sensor.sensor_humedad_dormitorio') | int) >= 60 %} mdi:water
	  {% elif (states('sensor.sensor_temperatura_dormitorio') | int) >= 26 %} mdi:fire
	  {% elif (states('sensor.sensor_temperatura_dormitorio') | int) <= 18 %} mdi:snowflake
	  {% endif %}
        ## REGLAS DE LOS DISTINTIVOS (COLORES)
        badge_color: >
          {% if (states('sensor.sensor_humedad_dormitorio') | int) >= 60 %} blue
          {% elif (states('sensor.sensor_temperatura_dormitorio') | int) >= 26 %} red
          {% elif (states('sensor.sensor_temperatura_dormitorio') | int) <= 18 %} blue
          {% endif %}
      ## ICONOS LATERALES
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:ceiling-light ## ICONO
        entity: light.bombilla_dormitorio ## ENTIDAD CONTROLADA
        icon_color: >
          {% if (states('light.bombilla_dormitorio')) == 'on' %} teal ## COLOR DEL ICONO (ENCENDIDO)
	  {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -166px;
              margin-right: -120px;
              --icon-size: 32px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:lamp
        entity: light.bombilla_dormitorio_filamento
        icon_color: >
          {% if (states('light.bombilla_dormitorio_filamento')) == 'on' %} teal
          {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -128px;
              margin-right: -120px;
              --icon-size: 32px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:television
        entity: media_player.tv_dormitorio
        tap_action:
          action: more-info
        icon_color: >
          {% if (states('media_player.tv_dormitorio')) == 'off' %} {% else %}
          teal {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -90px;
              margin-right: -120px;
              --icon-size: 32px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:speaker
        entity: switch.altavoces
        icon_color: |
          {% if (states('switch.altavoces')) == 'on' %} teal {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-bottom: -10px;
              margin-top: -52px;
              margin-right: -120px;
              --icon-size: 32px;
            }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Salón
        secondary: >-
          {{ states('sensor.salon_temperatura') | int }}ºC | {{
          states('sensor.salon_humedad') | int }}%
        icon: ''
        card_mod:
          style: |
            ha-card {
              border: 0px;
            }
        tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:sofa
        icon_color: lime
        tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              border: 0px;
              --icon-size: 120px;
              margin-left: -30px;
              margin-bottom: -40px;
              margin-top: -5px;
            }
            mushroom-badge-icon {
              margin-right: 10px;
              margin-top: 10px;
              --badge-icon-size: 15px;
              --badge-size: 25px;
            }
        badge_icon: >
          {% if (states('sensor.salon_humedad') | int) >= 60 %} mdi:water {%
          elif (states('sensor.salon_temperatura') | int) >= 26 %} mdi:fire {%
          elif (states('sensor.salon_temperatura') | int) <= 18 %} mdi:snowflake
          {% endif %}
        badge_color: |
          {% if (states('sensor.salon_humedad') | int) >= 60 %} blue
          {% elif (states('sensor.salon_temperatura') | int)
          >= 26 %} red
          {% elif (states('sensor.salon_temperatura') | int)
          <= 18 %} blue
          {% endif %}
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:floor-lamp
        entity: light.bombilla_salon
        icon_color: |
          {% if (states('light.bombilla_salon')) == 'on' %} lime {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -166px;
              margin-right: -120px;
              --icon-size: 32px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:television
        entity: media_player.tv_salon
        tap_action:
          action: more-info
        icon_color: >
          {% if (states('media_player.tv_salon')) == 'off' %} {% else %} lime {%
          endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -128px;
              margin-right: -120px;
              --icon-size: 32px;
            }
  • Código optimizado para 3 iconos laterales (tarjeta un poco más pequeña e iconos un poco más grandes)
square: false
type: grid
columns: 2
cards:
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Dormitorio
        secondary: >-
          {{ states('sensor.sensor_temperatura_dormitorio_temperature') | int
          }}ºC | {{ states('sensor.sensor_temperatura_dormitorio_humidity') |
          int }}%
        icon: ''
        card_mod:
          style: |
            ha-card {
              border: 0px;
            }
        tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:bed
        icon_color: teal
        tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              border: 0px;
              --icon-size: 100px;
              margin-left: -25px;
              margin-bottom: -55px;
              margin-top: -20px;
            }
            mushroom-badge-icon {
              margin-right: 10px;
              margin-top: 10px;
              --badge-icon-size: 10px;
              --badge-size: 20px;
            }
        badge_icon: >
          {% if (states('sensor.sensor_temperatura_dormitorio_humidity') | int)
          >= 60 %} mdi:water {% elif
          (states('sensor.sensor_temperatura_dormitorio_temperature') | int) >=
          26 %} mdi:fire {% elif
          (states('sensor.sensor_temperatura_dormitorio_temperature') | int) <=
          18 %} mdi:snowflake {% endif %}
        badge_color: >
          {% if (states('sensor.sensor_temperatura_dormitorio_humidity') | int)
          >= 60 %} blue

          {% elif (states('sensor.sensor_temperatura_dormitorio_temperature') |
          int)

          >= 26 %} red

          {% elif (states('sensor.sensor_temperatura_dormitorio_temperature') |
          int)

          <= 18 %} blue

          {% endif %}
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:ceiling-light
        entity: light.bombilla_dormitorio
        icon_color: >
          {% if (states('light.bombilla_dormitorio')) == 'on' %} teal {% endif
          %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -125px;
              margin-right: -120px;
              --icon-size: 35px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:lamp
        entity: light.bombilla_dormitorio_filamento
        icon_color: >
          {% if (states('light.bombilla_dormitorio_filamento')) == 'on' %} teal
          {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -90px;
              margin-right: -120px;
              --icon-size: 35px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:television
        entity: media_player.tv_dormitorio
        tap_action:
          action: more-info
        icon_color: >
          {% if (states('media_player.tv_dormitorio')) == 'off' %} {% else %}
          teal {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              padding-bottom: 0px!important;
              margin-top: -55px;
              margin-right: -120px;
              --icon-size: 35px;
            }
  - type: custom:stack-in-card
    cards:
      - type: custom:mushroom-template-card
        primary: Salón
        secondary: >-
          {{ states('sensor.salon_temperatura') | int }}ºC | {{
          states('sensor.salon_humedad') | int }}%
        icon: ''
        card_mod:
          style: |
            ha-card {
              border: 0px;
            }
        tap_action:
          action: none
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        icon: mdi:sofa
        icon_color: lime
        tap_action:
          action: none
        card_mod:
          style: |
            ha-card {
              border: 0px;
              --icon-size: 100px;
              margin-left: -25px;
              margin-bottom: -55px;
              margin-top: -20px;
            }
            mushroom-badge-icon {
              margin-right: 10px;
              margin-top: 10px;
              --badge-icon-size: 10px;
              --badge-size: 20px;
            }
        badge_icon: >
          {% if (states('sensor.salon_humedad') | int) >= 60 %} mdi:water {%
          elif (states('sensor.salon_temperatura') | int) >= 26 %} mdi:fire {%
          elif (states('sensor.salon_temperatura') | int) <= 18 %} mdi:snowflake
          {% endif %}
        badge_color: |
          {% if (states('sensor.salon_humedad') | int) >= 60 %} blue
          {% elif (states('sensor.salon_temperatura') | int)
          >= 26 %} red
          {% elif (states('sensor.salon_temperatura') | int)
          <= 18 %} blue
          {% endif %}
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:floor-lamp
        entity: light.bombilla_salon
        icon_color: |
          {% if (states('light.bombilla_salon')) == 'on' %} lime {% endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -125px;
              margin-right: -120px;
              --icon-size: 35px;
            }
      - type: custom:mushroom-template-card
        primary: ''
        secondary: ''
        layout: vertical
        icon: mdi:television
        entity: media_player.tv_salon
        tap_action:
          action: more-info
        icon_color: >
          {% if (states('media_player.tv_salon')) == 'off' %} {% else %} lime {%
          endif %}
        card_mod:
          style: |
            ha-card {
              border: 0px;
              margin-top: -90px;
              margin-right: -120px;
              --icon-size: 35px;
            }

Y si quieres personalizar el fondo de las tarjetas con imágenes y degradados, visita esta entrada!

tarjeta atractiva
🥑 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! 🙂
Send this to a friend