Cuadros de mando del Asistente del Hogar para tabletas y móviles


En este artículo, voy a mostrarte cómo puedes crear dos tableros hermosos y fáciles de construir para tu casa inteligente que se ejecuta en el asistente del hogar.

Algo importante a tener en cuenta, esta plantilla de diseño te servirá como punto de partida, sin embargo dependerá del dispositivo que decidas utilizar y de la cantidad de entidades que tengas.

 

iPad home

 

 

iPhone dashboard

Tableta

El primer paso es comprar o pensar en la tableta que se va a utilizar como quiosco para el asistente del hogar. Lo ideal sería que fuera el mismo modelo, pero no tiene por qué serlo. Esto se debe a que vamos a seguir comprobando cómo se ve en la tableta y a maximizar el espacio en la medida de lo posible.

Usuarios

En el asistente doméstico, puedes crear usuarios y luego asignar tableros para que sean visibles sólo para esos usuarios, de esa manera puedes controlar qué dispositivos se ven y cómo se ven.

Haga clic en Configuración -> Añadir una persona

 

Cuadros de mando

Haga clic en configuración -> Cuadros de mando de Lovelace

Puedes darle un título bonito, el icono aparecerá en la barra lateral izquierda puedes usar el mdi ( iconos de material design ) para saber qué logotipos son compatibles.

Estoy usando mdi:tablet y mdi:cellphone , para los tableros de la tableta y del celular respectivamente.

En mi tablero tengo 5 vistas, puedes usar los tres puntos de la derecha para añadir las vistas

 

 

 

Ajustes

Puedes dar a las vistas un nombre, un icono (mdi), una url (útil para la navegación) y un tema

Insignias

Añade pequeños trozos de información en la parte superior de tu tablero, no los estoy usando en este artículo.

 

Visibilidad

Aquí se puede activar/desactivar la visibilidad para cada usuario.

 

Vista de la casa

La vista de la casa está dividida en tres partes gracias a tarjetas de rejilla

Parte izquierda

Está formado por una tarjeta Grid con 1 columna (cuadrado que se rompe en falso)

La primera posición es una tarjeta meteorológica con la previsión verdadera.

La segunda posición es un tarjeta de mirada de la imagen con mi cámara de la puerta delantera y dos sensores (sensor de contacto de la puerta delantera y una luz del porche delantero).

La tercera posición es otra tarjeta de rejilla con 2 columnas renderizadas como cuadrados, en la rejilla tengo dos tarjetas de botones con iconos personalizados para ayudarme a entender qué es qué.

 

Parte central

El punto de partida es una tarjeta de cuadrícula con 1 columna, tenemos tres componentes: primero, un botón de alarma, el segundo otra tarjeta de cuadrícula y por último una tarjeta de termostato.

El panel de alarma tiene un poco más de configuración:

Cambie la acción del grifo a Llamar al Servicio, cambie la navegación a /lovelace-ipad/alarma (esto es porque llamé al dashboard ipad y la vista se llama alarma (esto no ha sido creado todavía).

Desactivar el nombre y el estado sólo mantener el icono.

En la sección de servicio de llamada elija el panel de control de la alarma armar lejos (o armar casa), luego haga clic en elegir la entidad y seleccione la alarma (sólo debe tener una). Si necesitas un código al desarmar tienes que seleccionarlo, yo desactivé esa funcionalidad cuando creé el panel de alarma en la configuración. archivo yaml.

 

Ahora tenemos una tarjeta cuadriculada con 3 columnas y dos botones y una luz (escena de salir de casa, escena de buenas noches y grupo de luces de la cocina).

Tendrás que haber creado estas escenas y grupos.

 

La última parte es mi termostato principal sin personalizar.

 

Tercera parte

Esta tarjeta cuadriculada tiene 1 columna y 4 partes (no cuadradas)

1. Una tarjeta de rejilla con 2 columnas y 1 botón y 1 luz (representada como un cuadrado).

  1. Tarjeta de botón de garaje, cambié la acción de toque a "más información" para asegurar que la puerta no se abra accidentalmente, cambie la acción de retención a "llamar al servicio" con el interruptor. turn_on, elige el interruptor de entidad para la puerta del garaje. También he eliminado el nombre y el estado para mantener un aspecto limpio.
  2. La luz de jardín es un simple botón de luz con una lámpara de exterior (mdi:outdoor-lamp)

Las partes 2ª y 3ª son elementos de imagen con una relación de aspecto fija de 16:9, ya que se trata de dos cámaras diferentes (Annke y Reolink). Toque la acción "más información" Vista de la cámara "en vivo" esto le dará un poco más de tensión en el ordenador portátil y el servidor del asistente en casa.

 

El cuarto elemento es un reproductor multimedia Ahora puedes usar el reproductor multimedia normal, en mi ejemplo estoy usando el mini reproductor multimedia que puedes encontrar en el repositorio HACS (Home assistant community store)

 

Seguridad

El propósito de esta vista es mantener un ojo en lo que está sucediendo en el hogar, esta es una sola tarjeta de cuadrícula. Para que la pantalla se represente correctamente, active el modo Panel.

Permítanme desglosar esto: 1 tarjeta de rejilla principal de 1 columna no cuadrada con 2 elementos

 

Elemento superior

Tarjeta de cuadrícula con dos elementos y 2 columnas.

  1. Panel de alarma (añadir un espacio vacío en el nombre para eliminar el nombre) desde la página de inicio podemos enlazar con esta página para introducir el código pin.
  2. Tarjeta de cuadrícula para mantener las 4 cámaras juntas (2 columnas)

 

Elemento inferior

Esta parte es para mostrar el estado de todas las puertas, ventanas y movimiento / ocupación.

En caso de que se active una alarma, debería ser capaz de seguir por donde está/ha estado la gente.

Seleccione una tarjeta de cuadrícula con 3 columnas (una para cada zona) utilice las tarjetas de entidad

 

 

 

Primer piso

Desde este punto de vista, mi objetivo principal es controlar el sistema de entretenimiento, algunos termostatos, las luces y vigilar el estado de mi iMac.

 

Esta vista se compone de tres partes

Parte izquierda

Tarjeta de cuadrícula con 1 columna con 5 elementos

  1. Tarjeta de cuadrícula con 2 columnas y 4 botones cada una con un script para activar una acción remota contra mi Apple TV para luego seleccionar la fuente apropiada dependiendo de lo que quiera ver. Esta parte es un trabajo en progreso, ya que quiero añadir algunos logotipos agradables.
  2. Estoy usando el mini reproductor de medios para mostrar el Apple TV (obra de arte de cubierta completa)
  3. Sistema Sonos 5.1 para controlar el audio del televisor y la música (seleccionar listas de reproducción) esto se consigue con el mini reproductor multimedia.
  4. De nuevo mini reproductor multimedia para PS4
  5. mini reproductor multimedia para Plex en apple TV

 

A la derecha tengo 2 tarjetas cuadriculadas (son muy similares así que lo explicaré rápidamente)

El primer bloque

Se compone de una tarjeta de rejilla con 2 columnas representadas como un cuadrado (4 elementos para cada zona luminosa) y 1 elemento para el termostato.

El segundo bloque es exactamente igual

He añadido algo más de mdi para darle más contraste, sigo teniendo los nombres principalmente para los visitantes. En el lado derecho tengo el clima igual que el de arriba.

En la parte del botón tengo dos tarjetas de visita a la izquierda, tres sensores para mi iMac (encendido o apagado, cámara encendida/apagada, micrófono encendido/apagado.

A la derecha la ocupación detectada sí/no, la ventana abierta, el nivel de luz en la habitación.

 

Vista del clima

Esta es una vista más centrada en la temperatura, esto nos ayudará a mantener un seguimiento de la previsión del tiempo y las temperaturas en la casa.

Al igual que el panel de alarma, se representa en modo panel.

Una tarjeta de rejilla principal controla toda esta página.

3 Columnas en la tarjeta my que no se muestran como cuadradas

 

  1. Tarjeta meteorológica
  2. Tarjeta de cuadrícula (2 columnas, falso cuadrado) con 4 tarjetas de sensores
  3. Tarjeta de cuadrícula (2 columnas, falso cuadrado) con 4 tarjetas de termostato

https://courses.hogarinteligente.comoescoger.com/courses/dashboards-in-home-assistant

Más información sobre los cuadros de mando

He creado un curso de vídeo para enseñarte a

Tablero de mandos de Iphone

El objetivo de este cuadro de mandos es permitirme acceder a mi casa sin tener que desplazarme y tener una experiencia de una sola página. Esto dependerá del teléfono que tengas, así que es bueno probarlo. También queremos rellenar la pantalla para obtener toda la información posible.

En dejarte el código de abajo para que puedas copiar y pegar esto y usarlo como plantilla.

La tarjeta principal es, como habrás adivinado, una tarjeta cuadriculada.

1 columna 3 elementos

Parte superior

Tarjeta de rejilla con 2 columnas y 6 elementos

  1. Panel de alarma (configurado como el tablero del iPad, pero sin la opción de desplazarse)
  2. Tarjeta de cuadrícula con 2 columnas cuatro elementos que contienen un grupo de movimiento, un grupo de sensor de agua, una puerta cerrada, una puerta abierta.
  3. Salir de la escena de casa (tarjeta de botones)
  4. Escena de buenas noches (tarjeta de botones)
  5. Garaje (tarjeta de botones)
  6. Termostato (nido)

 

Parte central

Tarjeta de rejilla de 3 columnas con luces en 3 zonas (suelo, primera, segunda)

He creado grupos de luz de antemano.

 

La parte del botón

Tarjeta de visualización con las lecturas de temperatura de cada planta

 

Código

Creación de grupos

Añade el siguiente código en los grupos. yaml

motion: name: house_motion icon: mdi:motion-sensor entities: - binary_sensor.hallway_sensor_motion - binary_sensor.kitchen_motion - binary_sensor.landing_sensor_motion - binary_sensor.landing_sensor_2_motion - binary_sensor.inspiration_motion

 

Panel de control del IPad

views: - icon: 'mdi:home-outline' panel: false title: Home badges: [] cards: - type: grid cards: - type: weather-forecast entity: weather.home - type: picture-glance title: Front Door image: '../img/hogar-inteligente-b629babb5298d32be3d2cab086a327c0-kitchen.png' entities: - entity: binary_sensor.front_door - entity: switch.front_porch camera_image: camera.front_door camera_view: live - type: grid cards: - type: button tap_action: action: toggle entity: light.porch_light icon: 'mdi:coach-lamp' - type: button tap_action: action: toggle entity: switch.downstairs_loo icon: 'mdi:toilet' columns: 2 columns: 1 square: false - type: grid cards: - type: button tap_action: action: call-service service: alarm_control_panel.alarm_arm_away service_data: {} target: entity_id: alarm_control_panel.home_alarm entity: alarm_control_panel.home_alarm hold_action: action: navigate navigation_path: /lovelace-ipad/alarm name: ' ' show_icon: true show_name: false - type: grid cards: - type: button tap_action: action: call-service service: scene.turn_on service_data: {} target: entity_id: scene.leave_home entity: scene.leave_home show_name: false - type: button tap_action: action: call-service service: scene.turn_on service_data: {} target: entity_id: scene.good_night entity: scene.good_night show_name: false - type: button tap_action: action: toggle entity: light.kitchen_and_dining_lights icon: 'mdi:ceiling-light' show_name: false columns: 3 - type: thermostat entity: climate.nest columns: 1 square: false - type: grid cards: - type: grid cards: - type: button tap_action: action: more-info entity: cover.garage_door hold_action: action: call-service service: switch.turn_on service_data: {} target: entity_id: switch.garage_door show_name: false - type: light entity: light.garden_light icon: 'mdi:outdoor-lamp' columns: 2 - type: picture-entity entity: camera.garage_camera camera_image: camera.garage_camera camera_view: live aspect_ratio: '16:9' show_name: false show_state: false - type: picture-entity entity: camera.parking_bay show_name: false camera_view: live camera_image: camera.parking_bay show_state: false aspect_ratio: '16:9' - type: 'custom:mini-media-player' artwork: cover entity: media_player.living_room_speaker hide: power_state: false source: true volume: false icon: 'mdi:google-home' tts: platform: google_translate columns: 1 square: false - icon: 'mdi:security' panel: true title: alarm path: alarm badges: [] cards: - type: grid cards: - type: grid cards: - type: alarm-panel states: - arm_home - arm_away entity: alarm_control_panel.home_alarm name: ' ' - type: grid cards: - type: picture-entity entity: camera.uvc_g3_dome camera_image: camera.uvc_g3_dome camera_view: live show_name: false show_state: false aspect_ratio: '16:9' - type: picture-entity entity: camera.uvc_flex camera_image: camera.uvc_flex show_name: false show_state: false camera_view: live aspect_ratio: '16:9' - type: picture-entity entity: camera.garage_camera camera_image: camera.garage_camera show_name: false camera_view: live show_state: false aspect_ratio: '16:9' - type: picture-entity entity: camera.parking_bay camera_image: camera.parking_bay camera_view: live show_name: false show_state: false aspect_ratio: '16:9' columns: 2 square: false square: false columns: 2 - type: grid cards: - type: entities entities: - entity: binary_sensor.front_door - entity: binary_sensor.garage_door_sensor - entity: binary_sensor.patio_doors - entity: binary_sensor.storage_door - entity: binary_sensor.hallway_sensor_motion - entity: binary_sensor.kitchen_motion - entity: binary_sensor.kitchen_motion_occupancy - entity: binary_sensor.water_leak_sensor title: Ground Floor show_header_toggle: false - type: entities entities: - entity: binary_sensor.landing_sensor_motion - entity: binary_sensor.living_room_open_window - entity: binary_sensor.inspiration_room_open_window - entity: binary_sensor.inspiration_motion_occupance - entity: binary_sensor.inspiration_motion title: First Floor show_header_toggle: false - type: entities entities: - entity: binary_sensor.landing_sensor_2_motion - entity: binary_sensor.bedroom_open_window title: Second Floor show_header_toggle: false state_color: false square: false columns: 1 square: false - title: First Floor path: first floor icon: 'mdi:home-floor-1' badges: [] cards: - type: grid cards: - type: grid cards: - type: button tap_action: action: toggle entity: script.lounge_appletv_disney show_icon: false name: Disney - type: button tap_action: action: toggle entity: script.lounge_appletv_netflix show_icon: false name: Netflix - type: button tap_action: action: toggle entity: script.lounge_appletv_plex name: Plex show_icon: false - type: button tap_action: action: toggle entity: script.lounge_appletv_fitness name: Apple Fitness show_icon: false columns: 2 square: false - type: 'custom:mini-media-player' volume_stateless: false group: true entity: media_player.atv_living_room toggle_power: false artwork: full-cover icon: 'mdi:apple' info: short source: icon - type: 'custom:mini-media-player' group: true entity: media_player.lounge artwork: cover toggle_power: true volume_stateless: false - type: 'custom:mini-media-player' entity: media_player.playstation_4 artwork: cover group: true - type: 'custom:mini-media-player' entity: media_player.plex_plex_for_apple_tv_living_room group: true columns: 1 square: false - type: grid cards: - type: grid cards: - type: light entity: light.living_1 icon: 'mdi:ceiling-light' - type: light entity: light.living_2 icon: 'mdi:ceiling-light' - type: light entity: light.lamp_1 icon: 'mdi:lamp' - type: light entity: light.lamp_2 icon: 'mdi:lamp' columns: 2 square: true - type: thermostat entity: climate.living_room columns: 2 square: true - type: grid cards: - type: grid cards: - type: button tap_action: action: toggle entity: switch.inspiration_light_switch icon: 'mdi:light-switch' name: Switch - type: light entity: light.inspiration_light icon: 'mdi:ceiling-light' name: Inspiration - type: light entity: light.imac_lamp icon: 'mdi:desk-lamp' - type: button tap_action: action: toggle entity: switch.bookcase_smart_plug icon: 'mdi:book-open-variant' show_name: true name: Bookcase columns: 2 square: false - type: thermostat entity: climate.inspiration_room - type: glance entities: - entity: binary_sensor.smarts_imac_active - entity: binary_sensor.smarts_imac_camera_in_use - entity: binary_sensor.smarts_imac_microphone_in_use show_name: false show_state: true - type: glance entities: - entity: binary_sensor.inspiration_motion_occupance - entity: binary_sensor.inspiration_room_open_window - entity: sensor.inspiration_motion_illuminance show_name: false show_state: true square: false columns: 2 - icon: 'mdi:thermostat' path: climate title: Climate panel: true badges: [] cards: - type: grid cards: - type: weather-forecast entity: weather.home - type: grid cards: - type: sensor entity: sensor.hallway_sensor_temperature graph: line name: Ground - type: sensor entity: sensor.fridge_temperature graph: line icon: 'mdi:fridge' detail: 1 name: Fridge - type: sensor entity: sensor.landing_sensor_temperature graph: line name: Landing 1 - type: sensor entity: sensor.landing_sensor_2_temperature graph: line name: Landing 2 columns: 2 square: false - type: grid cards: - type: thermostat entity: climate.nest - type: thermostat entity: climate.living_room - type: thermostat entity: climate.inspiration_room - type: thermostat entity: climate.bedroom columns: 2 square: false columns: 3 square: false - icon: 'mdi:television' path: television badges: [] cards: []

 

Iphone (inicio)

type: grid
cards: - type: grid cards: - type: button tap_action: action: call-service service: alarm_control_panel.alarm_arm_away service_data: {} target: entity_id: alarm_control_panel.home_alarm entity: alarm_control_panel.home_alarm show_name: false - type: grid cards: - type: button tap_action: action: more-info entity: group.motion show_name: false show_state: false show_icon: true - type: button tap_action: action: more-info entity: binary_sensor.water_leak_sensor show_name: false - type: button tap_action: action: more-info entity: binary_sensor.front_door icon: 'mdi:door' show_state: true show_name: false - type: button tap_action: action: more-info entity: binary_sensor.patio_doors icon: 'mdi:window-closed-variant' show_state: true show_name: false columns: 2 square: true - type: button tap_action: action: call-service service: scene.turn_on service_data: {} target: entity_id: scene.leave_home entity: scene.leave_home show_name: false - type: button tap_action: action: call-service service: scene.turn_on service_data: {} target: entity_id: scene.good_night entity: scene.good_night show_name: false - type: button tap_action: action: more-info entity: cover.garage_door show_name: false - type: thermostat entity: climate.nest columns: 2 square: false - type: grid cards: - type: light entity: light.ground_floor_lights name: Ground - type: light entity: light.first_floor_lights name: First - type: light entity: light.second_floor_lights name: Second columns: 3 square: false - type: glance entities: - entity: sensor.hallway_sensor_temperature - entity: sensor.landing_sensor_temperature - entity: sensor.landing_sensor_2_temperature show_name: false
columns: 1
square: false

 

Entradas recientes