Personalizando Home Assistant con un CustomUi

  Ahora que tenemos nuestro Home Assistant funcionando, con sus sensores, lights, seguimiento, floorplan, etc,  sus grupos y pestañas, podemos empezar a personalizarlo un poco a nuestro gusto con CustomUi.

CustomUi es un complemento que nos permite personalizar HA e incluso podemos crear nuestros propios CustomUi pero esto ya es otro cuento que hoy no vamos a tocar.

Dada la especial complejidad de esta guía por todos los parámetros que se pueden utilizar hemos contado con la  colaboración de @mig77angel en parte de su elaboración y como betatesters agradecer la paciencia de @Cool_ce y también de @mig77angel.

  En esta guía vamos a trabajar con el CustomUi  state-card-custom-ui , como indicación decir que estas modificaciones se consideran de Nivel Avanzado.

1.-Crear en /.homeassistant la carpeta www y dentro la carpeta custom_ui.

– Añadir dentro de la carpeta custom_ui el siguiente archivo para instalaciones de HA desde la 0.53 a la 0.70

** Cambiar la extensión del archivo a html

– state-card-custom-ui

1.b- Ademas para los que tengan HA 0.59 hasta 0.70 añadir:

**Cambiar la extensión a .html

– state-card-custom-ui-es5

                               —-> ACTUALIZACIÓN PARA 0.77 EN ADELANTE <—-

Necesario cambiar la extensión a .html

state-card-custom-ui

state-card-custom-ui-es5

2.- Añadir estas entradas en el archivo configuration.yaml en frontend: (incluido lo referente a themes).

frontend:<– esto ya debe existir en configuration.yaml, no duplicar.
  extra_html_url:
    - /local/custom_ui/state-card-custom-ui.html
  extra_html_url_es5:
    - /local/custom_ui/state-card-custom-ui-es5.html
  javascript_version: latest
  themes: !include_dir_merge_named themes

3.- Crear la carpeta themes en /.homeassistant donde incluiremos nuestros .yaml con los temas a usar.

Archivo con todos los colores estándar que utiliza HA:

colores estandar HA

Tema de ejemplo customizado, **dejar la extensión como .yaml

dark_theme(.yaml)

Estos temas se pueden personalizar a gusto de cada uno para los diferentes colores de las pestañas, tarjetas, globos, sliders, etc

Para utilizar un tema colocamos lo siguiente en customize.yaml:

light.gateway_light_7777777777: <–nombre de la entity

  theme: dark_theme <– tema seleccionado

4.- Añadir un incluide al archivo customize_glob.yaml en configuration.yaml y crear dicho archivo en /.homeassistant

homeassistant:<–está al inicio del configuration.yaml, no duplicar.
  customize_glob: !include customize_glob.yaml

–> En customize_glob.yaml añadir lo siguiente, esto incluye a todas las entity.

"*.*":
  custom_ui_state_card: state-card-custom-ui

  Una vez hemos hecho los anteriores pasos podemos empezar la personalización.

5.- Cambios de estado probados y funcionales en versión 0.70:

icon_color:

  CAMBIAR COLOR A UN ICONO: (haciendo esto el icono no cambiará de color aunque cambie el estado) A utilizar con el entity deseado dentro de customize.yaml

light.bed_light: <–nombre de nuestra entity
  icon_color: rgb(248-000-000)

 

state_card_mode: badges

  COLOCAR GLOBOS DENTRO DE UNA TARJETA DE GRUPO:

En customize_glob.yaml añadir la entity a usar debajo de custom_ui_state_card

"*.*":
  custom_ui_state_card: state-card-custom-ui

Empezamos a colocar las entities que queremos personalizar
sensor.door_sensor: <– nombre de nuestra entity
  state_card_mode: badges

 

  MOSTRAR EL ULTIMO CAMBIO DE ESTADO EN SEGUNDA LINEA:

custom_ui_state_card: state-card-custom-ui

show_last_changed: true (Solo si la entity tiene un atributo last o similar para mostrar)

 * Si se utiliza extra_data_template este comando no funcionara pues extra_data tiene prioridad.

Poner esto en customize.yaml:

light.gateway_light_1111111111111:<– Nombre de nuestra entity
  custom_ui_state_card: state-card-custom-ui
  show_last_changed: true

  Características disponibles para tarjetas de light, cover, clima, «plain» y «toggle».

Puedes ocultar el toggle por completo

custom_ui_state_card: state-card-custom-ui

hide_control: true

Poner en customize.yaml:

light.gateway_light_1111111111111: <– Nombre de nuestra entity
  custom_ui_state_card: state-card-custom-ui
  hide_control: true

 

Se pueden agregar datos adicionales debajo del nombre de la entidad utilizando

custom_ui_state_card: state-card-custom-ui

extra_data_template:  dentro de customize.yaml.

Usaremos extra_data_template para agregar datos adicionales debajo del nombre de la entity. El formato es en forma de template.

Por ejemplo, para mostrar el estado se utiliza ${state} y delante el indicador %.

También se puede añadir antes del template un nombre para que lo muestre antes y para utilizar los atributos simplemente es añadir ${attributes.xxxxxxxxxx}X.

sensor.memory_use_percent: <–Nombre de nuestra entity
  custom_ui_state_card: state-card-custom-ui
  extra_data_template:
    - ${state}% <–poniendo solo state nos indica lógicamente el estado tal cual
    - 'Uso: ${state.%}%' <–Podemos añadir un nombre antes del template
    - ${attributes.friendly_name} <–Con attributes. nos añade el atributo que indiquemos

  Agregar globos a la tarjeta de estado

custom_ui_state_card: state-card-custom-ui

extra_badge: Poner en customize.yaml

light.gateway_light_7777777777:<--nombre de nuestra entity

  custom_ui_state_card: state-card-custom-ui

  extra_badge:

    - entity_id: sensor.illumination_7777777777 <–entity para el globo

      attribute: illuminance <–dato dentro del globo

      unit: lm <–unidad del dato que mostramos

    - entity_id: light.gateway_light_7777777777 <–entity en otro globo

      attribute: friendly_name

  Controles confirmables

  Poner en customize.yaml escogiendo una de las dos opción o cambiando entre true y false a conveniencia.

custom_ui_state_card: state-card-custom-ui

confirm_controls_show_lock: true

confirm_controls: false

Si queremos evitar activar un interruptor por error tenemos la opción de usar confirm_controls_show_lock para bloquear el toggle y mostrar un icono de bloqueo sobre él.

Tocando el candado se abrirá durante 5 segundos, lo que permite usar el toggle.

Si deseamos evitar un cambio de estado sin la sugerencia visual del candado utilizaremos confirm_controls.

automation.gateway_azul_on: <– nombre de nuestra entity
  custom_ui_state_card: state-card-custom-ui
  confirm_controls_show_lock: true <–con esto hay que pulsar dos veces para cambio de estado
automation.gateway_blanco_on: <–nombre de nuestra entity
  confirm_controls: true <–Con esto se esconde el candado pero se mantiene el bloqueo

  Controles personalizados

Se puede reemplazar el toggle predeterminado con otro toggle propio utilizando control_element

Poner en customize.yaml

#Opción de custom element (En caso de tener toggles propios se pueden llamar aquí) *Imagen 1*
automation.gateway_azul_on: <– nombre de nuestra entity
  custom_ui_state_card: state-card-custom-ui
  control_element: my-custom-switch-element <–nombre del toggle propio

#Opción de que muestre el estado en lugar del toggle  *Imagen 2*
automation.gateway_blanco_on: <–nombre de nuestra entity
  custom_ui_state_card: state-card-custom-ui
  control_element: ''

 Imagen 1

El toggle desaparece pero se puede actuar igualmente

 Imagen 2

  Funciones disponibles solo para light y cover

Si hay espacio suficiente, la tarjeta siempre tendrá el icono + nombre a la izquierda, el slider en el centro y el toggle

Si no hay suficiente espacio horizontal, la tarjeta se configura por state_card_mode:

  Poner en customize.yaml

light.gateway_light_7811d7777777: <–nuestra entity
  custom_ui_state_card: state-card-custom-ui
  state_card_mode: break-slider <–cambiar según se quiera mostrar el conjunto
  stretch_slider: true
  slider_theme:
    min: 10
    max: 255 <–255 máximo para los light y 100 para los cover
    pin: true
    off_when_min: true
    report_when_not_changed: true
  hide_control: false
  confirm_controls_show_lock: true

state_card_mode value descripción de la función
break-slider-toggle Mover el slider y el toggle a la segunda linea
single-line Nunca usar mas de una línea, se encoge el slider
break-slider Mover slider a la segunda línea. Mantener toggle en la primera
hide-slider Esconder el slider.
no-slider (default) Nunca mostrar el slider si no hay suficiente espacio

Si el slider se movió a una nueva línea, tendrá 200 px de ancho.

Usar stretch_slider para hacer que ocupe todo el espacio disponible.

  El comportamiento del slider está controlado por el slider_theme.

Estas son las opciones que se pueden usar:

Campo defecto descripción
Min 0 Valor mínimo del slider
Max 255 para light

100 para cover

Valor máximo del slider
Pin False Mostrar valor numérico al mover el slider
off_when_min True Apagar entity cuando el slider llega a 0
report_when_not_changed True Aviso por si movemos el slider y este vuelve a su posición original

 

 

Fuente: https://github.com/andrey-git/home-assistant-custom-ui

2 comentarios en «Personalizando Home Assistant con un CustomUi»

Deja una respuesta

Síguenos

Siguenos en facebook
Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de sus datos para estos propósitos. Ver
Privacidad