Button Card Home Assistant

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: nonetogglemore-infonavigateyurlcall-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

NombreEscribeDefectoOpciones admitidasDescripción
typestringRequeridocustom:button-cardtipo de tarjeta
templatestringopcionalcualquier plantilla válida debutton_card_templates
entitystringopcionalswitch.acentidad_id
triggers_updatecadena o matrizopcionalswitch.aclista de entidad_id que desencadenaría una actualización de la tarjeta,
group_expandbooleanofalsotrue | falseCuando 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.
iconstringopcionalmdi:air-conditionerIcono 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_typestringiconiconcardblank-card|label-cardColorea el fondo de la tarjeta o el ícono dentro de la tarjeta. Estableciendo esto para habilitar card automático fonticoncolor. Esto permite que el texto/icono sea legible incluso si el color de fondo es brillante/oscuro. Opciones adicionales de tipo de color blank-cardlabel-cardse pueden usar para la organización.
colorstringopcionalautoauto-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
sizestring40%20pxTamaño del icono. Puede ser porcentaje o píxel
aspect_ratiostringopcional1/12/11/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_actionobjetoopcionalDefina el tipo de acción al hacer clic, si no está definido, se usará la alternancia.
hold_actionobjetoopcionalDefine el tipo de acción en espera, si no se define, no pasa nada.
double_tap_actionobjetoopcionalDefina el tipo de acción al hacer doble clic, si no está definido, no pasa nada.
namestringopcionalAir conditionerDefina un texto opcional para mostrar debajo del icono. Soporta plantillas,
state_displaystringopcionalOnAnule la forma en que se muestra el estado. Soporta plantillas,
labelstringopcionalCualquier cadena que quierasMuestre una etiqueta debajo de la tarjeta. 
show_namebooleanotruetrue|falseYa 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_statebooleanofalsetrue|falseMuestre el estado en la tarjeta. el valor predeterminado es falso si no se establece
show_iconbooleanotruetrue|falseYa sea para mostrar el icono o no. A menos que se redefina en icon, usa el icono de entidad predeterminado de hass
show_unitsbooleanotruetrue|falseMuestra u oculta las unidades de un sensor, si las hay.
show_labelbooleanofalsetrue|falseMostrar u ocultar lalabel
show_last_changedbooleanofalsetrue|falseReemplace la etiqueta por completo y muestre el atributo last_changed de una manera agradable (por ejemplo 12 minutes ago🙂
show_entity_picturebooleanofalsetrue|falseReemplace 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_streambooleanofalsetrue|falseMuestra 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_picturestringopcionalPuede ser cualquier /local/*archivo o una URLAnulará 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,
unitsstringopcionalKb/slux, …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.
styleslista de objetosopcional
extra_stylesstringopcional
statelista de objetosopcionalEstado a utilizar para el color, icono y estilo del botón. Se pueden definir varios estados
confirmationobjetoopcionalMostrar una ventana emergente de confirmación
lockobjetoopcionalMuestra un candado en el botón.
layoutstringopcionalEl diseño del botón se puede modificar usando esta opción
custom_fieldsobjetoopcional
variablesobjetoopcional
card_sizenúmero3Cualquier númeroConfigure 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)
tooltipstringopcionalCualquier 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.

NombreEscribeDefectoOpciones admitidasDescripción
textstringningunacualquier textoEste texto se mostrará en la ventana emergente. Soporta plantillas,
exemptionsmatriz de usuariosningunauser: USER_IDCualquier 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).

NombreEscribeDefectoOpciones admitidasDescripción
enabledbooleanofalsetrue | falseActiva o desactiva el bloqueo. Soporta plantillas,
durationnúmero5cualquier númeroDuración del estado desbloqueado en segundos
exemptionsmatriz de ID de usuario o nombre de usuarioningunauser: USER_ID|username: testCualquier 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)
unlockstringtaptaphold|double_tapEl tipo de clic que desbloqueará el botón.

Estado

NombreEscribeDefectoOpciones admitidasDescripción
operatorstring==El operador solía comparar el estado actual con el value
valuecadena/númerorequerido (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 cadenaEl valor que se comparará con el estado actual de la entidad.
namestringopcionalCualquier 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,
iconstringopcionalmdi:batteryEl icono que se muestra para este estado: el valor predeterminado es el icono de la entidad. Esconderse con show_icon: false. Soporta plantillas,
colorstringvar(--primary-text-color)Cualquier color, por ejemplo: rgb(28, 128, 199)oblueEl color del icono (si color_type: icon) o el fondo (si color_type: card)
stylesstringopcional
spinbooleanofalsetrue|false¿Debería girar el ícono para este estado?
entity_picturestringopcionalPuede ser cualquier /local/*archivo o una URLAnulará el icono/la imagen de entidad predeterminada con su propia imagen para este estado. Lo mejor es usar una imagen cuadrada. Soporta plantillas,
labelstringopcionalCualquier cadena que quierasMuestre 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.

OperadorvalueejemploDescripción
<5El estado actual es inferior a value
<=4El 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
>=32El estado actual es superior o igual a value
>12El 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
templatedebe ser una expresión de javascript que devuelva un valor booleano. Si el booleano es verdadero, coincidirá con este estado
defaultN / ASi 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

Sígueme en Youtube - Button Card Home Assistant
(Visited 1.400 times, 1 visits today)
EnglishDeutschEspañol