Button Card Home Assistant

La tarjeta button card de Home Assistant, te ayudará a personalizar y dar una nueva vida al Lovelace de tu Home Assistant.

Características de Button Card en Home Assistant

1. funciona con cualquier entidad conmutable
2. 6 acciones disponibles al tocar y /o mantener y/o hacer doble clic: none, toggle, more-info, navigateyurlcall-service
3. pantalla de estado (opcional)
4. color personalizado (opcional) o basado en el valor/temperatura de la luz rgb
5. definición de estado personalizada con color, icono y estilo personalizables (opcional)
6. tamaño personalizado del icono, ancho y alto (opcional)
7. soporte de relación de aspecto (opcional)
8. Soporte para plantillas javascript en algunos campos
9. icono personalizado (opcional)
10. estilo css personalizado (opcional)
11. soporte de diseño múltiple y soporte de diseño personalizado
12. las unidades para los sensores se pueden redefinir u ocultar
13. 2 tipos de colores
    • icon: aplica la configuración de color solo al icono
    • card: aplica la configuración de color solo a la tarjeta
14. color de fuente automático si color_type se establece encard
15. tarjeta en blanco y tarjeta de etiqueta (para la organización)
16. soporte de animación parpadeante
17. soporte de animación giratoria
18. ventana emergente de confirmación para elementos sensibles (opcional) o mecanismo de bloqueo
19. soporte háptico para la aplicación complementaria de IOS
20. soporte para custom_updater y HACS

Configuración de Button Card en Home Assistant

Opciones principales

Nombre	Escribe	Defecto	Opciones admitidas	Descripción
type	string	Requerido	custom:button-card	tipo de tarjeta
template	string	opcional	cualquier plantilla válida debutton_card_templates
entity	string	opcional	switch.ac	entidad_id
triggers_update	cadena o matriz	opcional	switch.ac	lista de entidad_id que desencadenaría una actualización de la tarjeta,
group_expand	booleano	falso	true | false	Cuando true, si alguna de las entidades que desencadenan una actualización de tarjeta es un grupo, el grupo se expandirá automáticamente y la tarjeta se actualizará en cualquier cambio de estado de entidad secundaria. Esto también funciona con grupos anidados.
icon	string	opcional	mdi:air-conditioner	Icono para mostrar. Será anulado por el ícono definido en un estado (si está presente). El valor predeterminado es el icono de la entidad. Esconderse con show_icon: false. Soporta plantillas,
color_type	string	icon	icon| card| blank-card|label-card	Colorea el fondo de la tarjeta o el ícono dentro de la tarjeta. Estableciendo esto para habilitar card automático fonty iconcolor. Esto permite que el texto/icono sea legible incluso si el color de fondo es brillante/oscuro. Opciones adicionales de tipo de color blank-cardy label-cardse pueden usar para la organización.
color	string	opcional	auto| auto-no-temperature|rgb(28, 128, 199)	Color del icono/tarjeta. auto establece el color en función del color de una luz, incluida la temperatura de la luz. Establecer esto en auto-no-temperaturese comportará como el predeterminado del asistente doméstico, ignorando la temperatura de la luz. Por defecto, si el estado de la entidad es off, el color será var(--paper-item-icon-color), para onserá var(--paper-item-icon-active-color) y para cualquier otro estado será var(--primary-text-color). Puede redefinir cada color usandostate
size	string	40%	20px	Tamaño del icono. Puede ser porcentaje o píxel
aspect_ratio	string	opcional	1/1, 2/1, 1/1.5, …	Relación de aspecto de la tarjeta. 1/1siendo un cuadrado. Esto se adaptará automáticamente al tamaño de su pantalla
tap_action	objeto	opcional		Defina el tipo de acción al hacer clic, si no está definido, se usará la alternancia.
hold_action	objeto	opcional		Define el tipo de acción en espera, si no se define, no pasa nada.
double_tap_action	objeto	opcional		Defina el tipo de acción al hacer doble clic, si no está definido, no pasa nada.
name	string	opcional	Air conditioner	Defina un texto opcional para mostrar debajo del icono. Soporta plantillas,
state_display	string	opcional	On	Anule la forma en que se muestra el estado. Soporta plantillas,
label	string	opcional	Cualquier cadena que quieras	Muestre una etiqueta debajo de la tarjeta.
show_name	booleano	true	true|false	Ya sea para mostrar el nombre o no. Elegirá el nombre de entidad_id de forma predeterminada, a menos que se redefina en la propiedad name o en cualquier propiedad name estatal
show_state	booleano	false	true|false	Muestre el estado en la tarjeta. el valor predeterminado es falso si no se establece
show_icon	booleano	true	true|false	Ya sea para mostrar el icono o no. A menos que se redefina en icon, usa el icono de entidad predeterminado de hass
show_units	booleano	true	true|false	Muestra u oculta las unidades de un sensor, si las hay.
show_label	booleano	false	true|false	Mostrar u ocultar lalabel
show_last_changed	booleano	false	true|false	Reemplace la etiqueta por completo y muestre el atributo last_changed de una manera agradable (por ejemplo 12 minutes ago🙂
show_entity_picture	booleano	false	true|false	Reemplace el icono por la imagen de la entidad (si la hay) o la imagen personalizada (si la hay). Vuelve a usar el ícono si ambos no están definidos
show_live_stream	booleano	false	true|false	Muestra el flujo de la cámara (si la entidad es una cámara). Requiere que el stream:componente esté habilitado en la configuración de home-assistant
entity_picture	string	opcional	Puede ser cualquier /local/*archivo o una URL	Anulará el icono/la imagen de entidad predeterminada con su propia imagen. Lo mejor es usar una imagen cuadrada. También puede definir uno por estado. Soporta plantillas,
units	string	opcional	Kb/s, lux, …	Anule o defina las unidades que se mostrarán después del estado de la entidad. Si se omite, está utilizando las unidades de la entidad.
styles	lista de objetos	opcional
extra_styles	string	opcional
state	lista de objetos	opcional		Estado a utilizar para el color, icono y estilo del botón. Se pueden definir varios estados
confirmation	objeto	opcional		Mostrar una ventana emergente de confirmación
lock	objeto	opcional		Muestra un candado en el botón.
layout	string	opcional		El diseño del botón se puede modificar usando esta opción
custom_fields	objeto	opcional
variables	objeto	opcional
card_size	número	3	Cualquier número	Configure el tamaño de la tarjeta visto por la función de diseño automático de lovelace (lovelace multiplicará el valor por aproximadamente 50px)
tooltip	string	opcional	Cualquier cadena	(No compatible con pantallas táctiles) Puede configurar la información sobre herramientas que se muestra después de pasar el cursor sobre la tarjeta durante 1,5 segundos. Soporta plantillas, ver plantillas

Acción

Todos los campos admiten plantillas, consulte plantillas.

Confirmación

Aparecerá un cuadro de diálogo antes de ejecutar la acción.

Nombre	Escribe	Defecto	Opciones admitidas	Descripción
text	string	ninguna	cualquier texto	Este texto se mostrará en la ventana emergente. Soporta plantillas,
exemptions	matriz de usuarios	ninguna	user: USER_ID	Cualquier usuario declarado en esta lista no verá el diálogo de confirmación.

Objeto de bloqueo

Esto mostrará un botón normal con un símbolo de candado en la esquina. Al hacer clic en el botón, el bloqueo desaparecerá y permitirá maniobrar el botón durante delay segundos (5 por defecto).

Nombre	Escribe	Defecto	Opciones admitidas	Descripción
enabled	booleano	false	true | false	Activa o desactiva el bloqueo. Soporta plantillas,
duration	número	5	cualquier número	Duración del estado desbloqueado en segundos
exemptions	matriz de ID de usuario o nombre de usuario	ninguna	user: USER_ID|username: test	Cualquier usuario declarado en esta lista no verá el diálogo de confirmación. Puede ser una identificación de usuario ( user) o un nombre de usuario ( username)
unlock	string	tap	tap| hold|double_tap	El tipo de clic que desbloqueará el botón.

Estado

Nombre	Escribe	Defecto	Opciones admitidas	Descripción
operator	string	==		El operador solía comparar el estado actual con el value
value	cadena/número	requerido (a menos que el operador sea default)	Si su entidad es un sensor con números, use un número directamente, de lo contrario use una cadena	El valor que se comparará con el estado actual de la entidad.
name	string	opcional	Cualquier cadena, 'Alert', 'My little switch is on', …	si show_name es true, el nombre que se mostrará para este estado. Si está definido, usa la configuración general namey si no está definido, usa el nombre de la entidad. Soporta plantillas,
icon	string	opcional	mdi:battery	El icono que se muestra para este estado: el valor predeterminado es el icono de la entidad. Esconderse con show_icon: false. Soporta plantillas,
color	string	var(--primary-text-color)	Cualquier color, por ejemplo: rgb(28, 128, 199)oblue	El color del icono (si color_type: icon) o el fondo (si color_type: card)
styles	string	opcional
spin	booleano	false	true|false	¿Debería girar el ícono para este estado?
entity_picture	string	opcional	Puede ser cualquier /local/*archivo o una URL	Anulará el icono/la imagen de entidad predeterminada con su propia imagen para este estado. Lo mejor es usar una imagen cuadrada. Soporta plantillas,
label	string	opcional	Cualquier cadena que quieras	Muestre una etiqueta debajo de la tarjeta.

Operadores disponibles

El orden de sus elementos en el stateobjeto es importante. El primero que sea true, coincidirá. El campo value para todos los operadores excepto regex para las plantillas de soporte.

Operador	valueejemplo	Descripción
<	5	El estado actual es inferior a value
<=	4	El estado actual es inferior o igual a value
==	42o'on'	Este es el valor predeterminado si no se especifica ningún operador. El estado actual es igual (==javascript) a value
>=	32	El estado actual es superior o igual a value
>	12	El estado actual es superior a value
!=	'normal'	¡El estado actual no es igual (! =javascript) a value
regex	'^norm.*$'	valuela expresión regular aplicada al estado actual coincide
template		debe ser una expresión de javascript que devuelva un valor booleano. Si el booleano es verdadero, coincidirá con este estado
default	N / A	Si nada coincide, esto se usa

Diseño

Esta opción le permite modificar el diseño de la tarjeta.

Es totalmente compatible con todo el show_*opciones. Asegúrese de configurar show_state: true si desea mostrar el estado

Son posibles múltiples valores, vea la imagen a continuación para ver ejemplos:

• vertical (valor predeterminado si no se proporciona nada): todo está centrado verticalmente uno encima del otro
• icon_name_state: Todo está alineado horizontalmente, el nombre y el estado están concatenados, la etiqueta está centrada debajo
• name_state: El ícono se encuentra encima del nombre y el estado concatenados en una línea, la etiqueta debajo
• icon_name: El ícono y el nombre están alineados horizontalmente, el estado y la etiqueta están centrados debajo
• icon_state: El ícono y el estado están alineados horizontalmente, el nombre y la etiqueta están centrados debajo
• icon_label: El ícono y la etiqueta están alineados horizontalmente, el nombre y el estado están centrados debajo
• icon_name_state2nd: El ícono, el nombre y el estado están alineados horizontalmente, el nombre está arriba del estado, la etiqueta debajo del nombre y el estado
• icon_state_name2nd: El ícono, el nombre y el estado están alineados horizontalmente, el estado está arriba del nombre, la etiqueta debajo del nombre y el estado

Otros ejemplos de Button Card en Home Assistant

Ventilador que da vueltas (tienes que personalizar el id con el id de tu entidad)

type: custom:button-card
state:
  - value: 'on'
    spin: true
    color: yellow
  - value: 'off'
    color: black
tap_action:
  action: toggle
entity: fan.ventilador

Vamos a ver cómo cambiar la velocidad de giro del ventilador.

type: custom:button-card
state:
  - value: 'on'
    spin: true
    color: yellow
    styles:
      icon:
        - animation:
            - blink 3s linear infinite
            - rotating 0.5s linear infinite alternate
      name:
        - animation:
           - blink 0.1s linear infinite
           - rotating 1s linear infinite
      card:
        - animation:
           - rotating .5s linear infinite
  - value: 'off'
    color: white
tap_action:
  action: toggle
entity: fan.ventilador

También podemos cargar una imagen en nuestro Home Assistant para utilizar tanto de on cómo de off. Si quieres las imágenes que yo utilizo de muestar, aquí tienes el ventilador off y aquí el ventilador on.

type: custom:button-card
show_entity_picture: 'on'
state:
  - value: 'off'
    spin: false
    entity_picture: /local/icon-fan.png
  - value: 'on'
    spin: true
    entity_picture: /local/icon-fan-speed.png
tap_action:
  action: toggle
entity: fan.ventilador

Sígueme a Youtube