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

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

También te podría gustar...

Deja un comentario