Aprende a crear tus propios Templates & Estilos para personalizar Home Assistant con los siguientes ejemplos.
Índice
Una breve introducción
Los templates o plantillas permiten crear entidades que derivan sus valores de otros datos (como el estado o valor de otra entidad). Los podemos usar tanto en los scripts y automatizaciones, como en la construcción de nuestro panel de control (aunque no todas las tarjetas lo permiten por defecto). Esto nos permite que nuestras creaciones sean dinámicas, es decir, que puedan cambiar en función de otras circunstancias.
Por ejemplo, la siguiente plantilla evalúa el estado de la entidad ‘sensor.impresora_status’ que me proporciona la integración de mi impresora. Si el estado es ‘on’ me devuelve el valor “Encendida”, si es ‘idle’ me devuelve “Inactiva” y en cualquier otro caso me devuelve “Apagada”.
{% if states('sensor.impresora_status') == "On" %} Encendida
{% elif states('sensor.impresora_status') == "Idle" %} Inactiva
{% else %} Apagada
{% endif %}
CSS (siglas en inglés de Cascading Style Sheets), en español «Hojas de estilo en cascada», es un lenguaje de diseño gráfico muy utilizado para definir y crear la presentación de un documento. Este nos permite modificar el aspecto visual de nuestro panel de control.
Por ejemplo, el siguiente código establece que el color de fondo del elemento ‘ha-card’ sea #000000 (que corresponde al color negro en valor hexadecimal).
ha-card {
background-color: #000000;
}
Combinados, nos permiten crear entidades y estilos dinámicos. Es decir, que en función de las circunstancias vamos a poder modificar que datos se muestran, y de qué manera. Por ejemplo, la siguiente plantilla evalua el estado de la entidad ‘sensor.media_session’. Si su valor es “Apagado”, establece el color de fondo del elemento ‘ha-card’ como negro. Si su valor es “Reproduciendo” lo establece como verde, y en cualquier otro caso como rojo.
ha-card {
{% if states('sensor.media_session') == "Apagado" %} background-color: black;
{% elif states('sensor.media_session') == "Reproduciendo" %} background-color: green;
{% else %} background-color: red;
{% endif %}
}
Las combinaciones son infinitas, por lo que es imposible reunir la respuesta a todas las preguntas. El propósito de esta guía de referencia es reunir los usos más comunes, para facilitarte la personalización de tus creaciones. Si no encuentras lo que buscas, pregúntanos en nuestro grupo de Telegram y estaremos encantados de ayudarte.
Antes de empezar
Has de saber que no podemos modificar libremente cualquier aspecto de Home Assistant, al menos por defecto. A veces va a requerir que instalemos complementos o que seamos un poco creativos buscando soluciones. En todo caso, te recomiendo instalar a través de HACS las siguientes tarjetas:
- Card-Mod. Esta archiconocida tarjeta te permite modificar el estilo de casi cualquier elemento de HA. Por tanto, su instalación es prácticamente obligatoria si quieres personalizar tu interfaz de control. Para utilizarla tienes que introducir el siguiente código entre las propiedades de una tarjeta:
card_mod:
style: |
## Aquí va el código CSS ##
- Mushroom Cards. También conocidas por cualquiera que lleve un tiempo utilizando HA. Se trata de un pack de tarjetas de muchos tipos, altamente personalizables. Además incluye la tarjeta del tipo ‘Mushroom Template Card’ que te permite incluir libremente templates entre sus valores. Yo las utilizo muchísimo a la hora de crear tarjetas personalizadas.
Templates
Como complemento a esta guía de ejemplos, te interesa saber que desde Home Assistant hay un apartado que te permite hacer pruebas para comprobar en tiempo real si tus plantillas funcionan. Se encuentra en Herramientas para desarrolladores > Plantillas.
Si colocas dentro del cuadro de texto del editor de plantillas tu template, a la derecha te mostrará el resultado. De forma que puedes ir ajustándolo hasta conseguir lo que buscas.
Desde este mismo apartado encontrarás los enlaces a la documentación de plantilla de Jinja2 y a las extensiones de Home Assistant, que son la base de creación de templates y el manual básico de consulta.
Mostrar el estado de una entidad
Aunque es el uso más básico, también es el más frecuente. Simplemente sirve para mostrar el estado de una entidad. Si este cambia, también cambiará el texto mostrado. Entre las comillas puedes incluir cualquier entidad con sus nombre completo (sensores, ayudantes, dispositivos…)
{{ states('sensor.ejemplo') }}
Mostrar un atributo de una entidad
Igual que en el caso anterior, pero en este caso en lugar de mostrar el estado principal de una entidad, mostrará el valor de uno de sus atributos. La plantilla del ejemplo mostraría el valor del “atributo1” de la entidad “sensor.ejemplo”.
{{ state_attr('sensor.ejemplo','atributo1') }}
Realizar comparaciones lógicas
Además de mostrar el estado de una entidad (o atributo), también podemos mostrar resultados o efectuar acciones en funciones de si cumplen o no una condición. Esto lo realizamos mediante la función ‘if‘. Asimismo utilizamos ‘elif‘ para establecer condiciones adicionales, y ‘else‘ para asignar un valor cuando no se cumple ninguna condición.
- Si una variable está definida
En ocasiones una entidad no se encuentra disponible o muestra un valor nulo o indefinido, y lo que nos interesa es que muestre otro valor. Con este código puedes evaluar si la entidad tiene un valor asignado, o asignarle otro en su defecto.
{% set resultado = states('ENTIDAD') %}
{% if states.ENTIDAD defined %}
{{ resultado }}
{% else %}
La entidad no tiene un valor definido
{% endif %}
- Si una variable contiene una cadena de texto
La condición se cumplirá si la variable (por ejemplo, ‘weather’) contiene un texto específico (por ejemplo, ‘night’).
{% if 'night' in weather %} Es de noche
{% else %} Es de día
{% endif %}
- Utilizar operadores de lógica
A través de los operadores de logica podemos enriquecer la lógica comparativa del templeate. Estos son ‘and’ (añade una condición, debiendo cumplirse todas), ‘or’ (añade una condición, debiendo cumplirse una de ellas) y ‘not’ (añade una condición, que NO debe cumplirse).
{% if 'night' in weather and temperature < 10 %} Es de noche y hace frío
{% elif 'night' in weather or temperature < 10 %} O es de noche, o hace frío
{% elif 'night' in weather not temperature < 10 %} Es de noche, pero no hace frío
{% else %} Es de día y no hace frío
{% endif %}
Realizar comparaciones y operaciones matemáticas
Un uso muy recurrente a la hora de elaborar plantillas cuando tratamos con estados númericos son las comparaciones y operaciones matemáticas. De esta forma podemos evaluar si un valor está por encima de un umbral determinado, convertir valores, etc.
- Establecer un valor numérico
Para poder realizar comparaciones y operaciones matemáticas con valores, primero tienes que especificarle a HA que se trata de un valor numérico. De lo contrario entenderá que es una cadena de texto y te generará un error. Esto se realiza mediante los filtros ‘int‘ o ‘float‘. Se aplican de la siguiente manera:
{{ states('input_number.ejemplo') | int }}
{{ states('input_number.ejemplo') | float }}
- Operaciones matemáticas básicas
Una vez que le has especificado a HA que el valor es de tipo numérico, puedes realizar operaciones matemáticas básicas con él. Puedes utilizar números directamente, u otras variables numéricas.
{{ states('input_number.ejemplo') | int + 1 }} # Suma de un número
{{ (states('input_number.ejemplo1') | int) - (states('input_number.ejemplo2') | int)}} # Resta de dos entidades
{{ states('input_number.ejemplo') | int * 10 }} # Multiplicación de un número
{{ states('input_number.ejemplo') | int / 10 }} # División de un número
- Operaciones matemáticas complejas
No voy a desarrollar este apartado, ya que no lo considero habitual en el uso común. No obstante, que sepas que también puedes realizar otro tipo de operaciones complejas (logaritmos, senos, raices cuadradas…). Puedes buscar cómo hacerlas en la documentación oficial.
- Comparaciones matemáticas
Otro uso muy común y muy útil en la elaboración de plantillas, es la comparación de valores numéricos. Esto nos permite evaluar las circunstancias y mostrar valores o realizar funciones en consecuencia.
# Comparación "mayor que"
{% if (states('sensor.temperatura') | int ) > 30 %} Hace más de 30ºC!
# Comparación "mayor o igual que"
{% elif (states('sensor.temperatura') | int ) >= 30 %} Hace 30ºC o más!
# Comparación "menor que"
{% elif (states('sensor.temperatura') | int ) < 10 %} Hace menos de 10ºC!
# Comparación "menor o igual que"
{% elif (states('sensor.temperatura') | int ) <= 10 %} Hace 10ºC o menos!
# Comparación entre dos valores
{% elif 30 > (states('sensor.temperatura') | int ) > 10 %} La temperatura está entre 10 y 30ºC
# Comparación entre dos entidades
{% elif (states('sensor.temperatura') | int ) > (states('sensor.temperatura_exterior') | int ) %} Fuera hace más frío que en casa
{% endif %}
- Reemplazar valores indefinidos
Cuando establecemos operaciones matemáticas con distinas entidades debemos asegurarnos de que todas ellas contienen valores numéricos. Si al menos una de ellas contiene un valor del tipo “null”, “unavailable”, etc., no podrá completarse la operación y no devolverá un resultado válido.
Para ello al definir estas entidades podemos comprobar que contienen un valor numérico, y de lo contrario asignarle un valor predefinido (por ejemplo, “0” para sumas y restas, o “1” para multiplicaciones y divisiones). De esta forma no alterará el computo y el resto de entidades de la operación seguirán operando.
{% set resultado = states('ENTIDAD') | int if states('ENTIDAD')|is_number else 0 %}
{{ resultado }}
Estilos
Antes de detallarte algunos ejemplos de uso común, déjame decirte que CSS es un lenguaje amplio con muchas combinaciones. No obstante, en esta guía puedes encontrar un manual completo en el que consultar aquellas dudas para las que no encuentres respuesta en nuestros ejemplos. También te recomiendo que veas nuestro taller sobre cómo crear tarjetas personalizadas.
Asimismo, a la hora de construir tu panel te ayudará entender que vamos a personalizar (color, tamaño,…) elementos que ya están definidos. Esto implica dos cosas que debes tener en cuenta:
- Como todos los elementos que ves en pantalla están definidos, se pueden modificar. Casi siempre lo vas a identificar de forma fácil con los ejemplos que incluyo a continuación. No obstante, si empiezas a modificar aspectos más profundos primero debes identificar el elemento que quieres personalizar. Para ello puedes consultar el código fuente de la página, haciendo clic derecho con el ratón y seleccionando “Ver código fuente”.
- A veces vamos a querer personalizar un aspecto de un elemento que ya ha sido definido previamente, por ejemplo, el color de fondo (aspecto) de una tarjeta (elemento). Si queremos que nuestro valor prevalezca sobre el que ya ha sido definido previamente, tenemos que incluir el término !important al final del código.
card_mod:
style: |
ha-card {
## El fondo tendrá color negro, e ignorará el valor por defecto
background-color: black !important;
}
Tamaño de una tarjeta
Por defecto el la anchura de una tarjeta es el máximo que puede ocupar en la pantalla, y la altura viene determinada por el contenido de la tarjeta. No obstante, podemos modificar estas dimensiones (en unidades de medida o porcentaje) con el siguiente código:
card_mod:
style: |
ha-card {
## Altura, en pixels
height: 235px;
## Anchura, en porcentaje del máximo total
width: 50%;
}
Fondo de una tarjeta
Este es un efecto visual muy simple, pero muy impactante al afectar al conjunto de la tarjeta. Podemos reemplazar el fondo de una tarjeta por un color, una imagen, un degradado, hacerlo transparente… así como asignar otras propiedades en función del tipo de fondo asignado. Ver todas las referencias del elemento ‘background’ y específicamente del atributo ‘linear-gradient’.
card_mod:
style: |
ha-card {
## Establecer un color como fondo
background-color: black;
## Establecer un degradado de colores como fondo (los valores representan el color en código RGB)
background: linear-gradient( rgba(67, 150, 206), rgba(59, 190, 188) );
## Establecer el fondo transparente
background: transparent;
## Establecer una imagen como fondo
background-image: url('https://urldelaimagen.jpg');
## Establecer el modo de repetición de la imagen de fondo (un valor a elegir)
background-repeat: repeat/repeat-x/no-repeat;
## Establecer la posición de la imagen como fondo (un valor a elegir)
background-position: top/bottom/left/right/center;
## Establecer el tamaño de la imagen como fondo en unidades o propiedad (un valor a elegir)
background-size: cover/contain/100%
}
Opacidad de una tarjeta
Por defecto cualquier tarjeta es opaca (opacidad del 100%) y lo contrario sería que fuera transparente (opacidad del 0%). Con el siguiente código podemos determinar el porcentaje de opacidad de la tarjeta, afectando al conjunto de la misma (no sólo al fondo).
card_mod:
style: |
ha-card {
## Opacidad con valores entre 0 y 1
opacity: 0.5;
}
Sombra de una tarjeta
A veces queremos que el fondo de una tarjeta sea transparente, para integrarla visualmente dentro de otro elemento. No obstante, si no eliminamos la sombra esta revelará su presencia. Para ello utilizamos el siguiente código:
card_mod:
style: |
ha-card {
box-shadow: none;
}
Márgenes de una tarjeta
Cuando creamos un bloque compuesto de distintas tarjetas, manejar los márgenes de los distintos elementos puede ayudarnos a que quede más estética. Incluso podemos establecer un margen negativo para que un elemento aparezca superpuesto sobre otro.
card_mod:
style: |
ha-card {
## Margen superior
margin-top: 100px;
## Margen inferior
margin-bottom: -80px;
## Margen izquierdo
margin-left: 50px;
## Margen derecho
margin-right: 40px;
}
Relleno de una tarjeta
Modificar el relleno de una tarjeta (entendido como los márgenes interiores) puede servir para aumentar el tamaño de la tarjeta, o para desplazar el contenido dentro de la misma. Podemos aplicarlo de forma generalizada, o en un sentido determinado.
card_mod:
style: |
ha-card {
## relleno general
padding: 50px !important;
## relleno superior
padding-top: 30px !important;
## relleno inferior
padding-bottom: 60px !important;
## relleno derecho
padding-right: 15px !important;
## relleno izquierdo
padding-left: 50px !important;
}
Animar los iconos
Un efecto visual muy atractivo es incluir animaciones en los iconos de las tarjetas, que además pueden servir para darnos información del estado del dispositivo. Puedes encontrar más efectos en este hilo del foro oficial de la comunidad.
- Boing
card_mod:
style: |
ha-state-icon {
animation: boing 3s ease infinite;
transform-origin: 50% 90%;
}
@keyframes boing {
0% { transform: scale3d(1, 1, 1); }
7% { transform: scale3d(1.25, 0.75, 1); }
10% { transform: scale3d(0.75, 1.25, 1); }
12% { transform: scale3d(1.15, 0.85, 1); }
16% { transform: scale3d(0.95, 1.05, 1); }
19% { transform: scale3d(1.05, 0.95, 1); }
25% { transform: scale3d(1, 1, 1); }
}
- Beat
card_mod:
style: |
ha-state-icon {
animation: beat 1.3s ease-out infinite both;
transform-origin: 50% 60%;
}
@keyframes beat {
0% { transform: scale(1); }
10% { transform: scale(1.1); }
17% { transform: scale(1.05); }
33% { transform: scale(1.25); }
60% { transform: scale(1); }
}
- Lavadora
card_mod:
style: |-
ha-state-icon {
animation: shake 400ms ease-in-out infinite, drum 2s ease infinite;
transform-origin: 50% 110%;
}
@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%, 34% 68%, 60% 41%, 71% 56%, 65% 74%, 47% 79%, 32% 69%, 35% 100%, 100% 100%, 100% 0); }
}
- Ring
card_mod:
style: |-
ha-state-icon {
animation: ring 1.4s ease infinite;
}
@keyframes ring {
0%, 50%, 80%, 100% { transform: translateY(0); }
10% { transform: translateY(-4px) rotate(-27deg); }
20% { transform: translateY(-4px) rotate(21deg); }
30% { transform: translateY(-4px) rotate(-15deg); }
40% { transform: translateY(-4px) rotate(9deg); }
60% { transform: translateY(-2.4px); }
}
Mushroom cards
Estas tarjetas merecen un apartado especial por lo tremendamente útiles que resultan a la hora de personalizar nuestro panel de control. Si no encuentras lo que buscas entre estos ejemplos te recomiendo que busques en el hilo oficial del foro oficial de la comunidad.
- Mushroom Chips
card_mod:
style: |
ha-card {
## Color de fondo del chip
background-color: black !important;
## Altura del chip
height: 30px!important;
## Sombra del chip
--chip-box-shadow: 0px;
## Color del icono
--color: #f0f176;
## Tamaño del icono
--chip-icon-size: 30px;
## Tamaño del texto
--chip-font-size: 20px;
## Espacio entre chips
--chip-spacing: 0px !important;
## Espacio dentro de los chips
--chip-padding: 0px !important;
}
- Mushroom Template Card
card_mod:
style: |
ha-card {
# Tamaño del texto principal
--card-primary-font-size: 20px;
# Color del texto principal
--primary-text-color: #000000;
# Tamaño del texto secundario
--card-secondary-font-size: 20px;
# Color del texto secundario
--secondary-text-color: #000000;
# Tamaño del icono
--icon-size: 95px;
}
#icono
ha-state-icon {
#rotar icono
rotate: 30deg;
}
# Círculo que rodea al icono
mushroom-shape-icon {
--shape-color: none !important;
}
# Distintivo
mushroom-badge-icon {
# Tamaño del icono
--badge-icon-size: 15px;
# Tamaño del círculo que rodea al icono
--badge-size: 25px;
}
- Mushroom Title Card
card_mod:
style: |
ha-card {
# Tamaño del título
--title-font-size: 20px !important
}
¿Dudas?¿necesitas ayuda? entra aquí
Y si te ha gustado, compártelo! 🙂
