Tiles. Tarjetas personalizadas para Home Assistant

Hola!

con este tutorial vamos a intentar explicar como crear paneles personalizados con Home Assistant, para que quede algo como esto:

Lo pasos a seguir son:

frontend:
  extra_html_url:
  - /local/custom_ui/state-card-tiles.html
  extra_html_url_es5:
  - /local/custom_ui/state-card-tiles_es5.html

  • Después en configuration.yaml en el apartado input_boolean añadimos tantos como grupos queramos:

input_boolean:
  tiles_home_cinema:
  tiles_ventilador_cuarto:
  tiles_ventilador_salon:
  tiles_tv_cuarto:
  tiles_aire_acondicionado_cuartillo:

  • Luego en customize para tenerlo más ordenado (un fichero por aparato) ponemos en el configuration.yaml lo siguiente:

customize: !include_dir_merge_named customized

  • Dentro de la carpeta customized creamos por ejemplo el fichero tv_cuartillo_customize.yaml

input_boolean.tiles_tv_cuarto: (elemento que vamos a personalizar)
  custom_ui_state_card: state-card-tiles
  config: (Aquí va la configuración general)
    columns: 3 (número de columnas máximas)
    icon_size: 50px (Tamaño de los iconos)
    color_on: "#80878f" (Color en estado on)
    color_off: "#535b66" (Color en estado off)
    color: "#535b66" (Color general)
    entities:
      - entity: script.tv_cuartillo_encender_script (entidad a la que hacemos referencia)
        icon: mdi:power (icono)
        column: 1 (Posición de 1 de 3 columnas que hemos puesto arriba)
        column_span: 2 (Unión de dos columnas, es decir, este elemento va a pillar 2 de 3 columnas)
      - entity: script.tv_cuarto_apagar_script
        icon: mdi:power-off
        column: 3 (Posición de 3 de 3 columnas que hemos puesto arriba)
      - entity: script.tv_cuarto_bajar_volumen_script
        icon: mdi:volume-minus
        column: 1
      - entity: script.tv_cuarto_subir_volumen_script
        icon: mdi:volume-plus
        column: 2
      - entity: script.tv_cuarto_av_script
        icon: mdi:video-input-component
        label: AV
        column: 3
      - entity: script.tv_cuarto_izquierda_script
        icon: mdi:arrow-left-bold
        column: 1
      - entity: script.tv_cuarto_derecha_script
        icon: mdi:arrow-right-bold
        column: 3

Lo que hay entre paréntesis es la explicación y no se tiene que poner.

A parte de las configuraciones que he puesto config, hay muchas, en el repositorio se pueden ver https://github.com/c727/home-assistant-tiles.

Otra cosa a tener en cuenta es que en config he puesto la configuración de color y tamaño de icono esta ese aplica de forma general pero también se puede aplicar a cada cuadro de forma independiente poniéndola como en el último elemento.

Basicamente es ir jugando con column y column_span, también están los row para pillar más altura row y row_span.

  • Después en grupos basta con llamar a la entidad:

cuarto:
name: Cuarto
view: yes
entities:
- group.tv

tv:
name: Televisión
view: no
entities:
- input_boolean.tiles_tv_cuarto

Para recordar como hacer grupos o pestañas puedes ver nuestra entrada Grupos, pestañas y paneles en HA.

Os dejo aquí mis archivos de configuración por si os interesa descargar.

Todos los botones que tengo yo configurados son de tipo switch del broadlink, próximamente se publicará una guía sobre esto-

4 comentarios sobre “Tiles. Tarjetas personalizadas para Home Assistant

Deja un comentario

Síguenos

Siguenos en facebook