HOWTO: Build a smart home kiosk with Home Assistant

I get a lot of questions about the heads up display style display that I have in my home. It’s great for keeping up with my daily calendar, the weather, and displaying camera feeds. This guide assumes that you already have an instance of Home Assistant running and some basic data that you’d like to display. There are lots of good guides for how to get started with Home Assistant already, and the official documentation is a great place to start

Requirements:

1. Home Assistant instance
2. Raspberry Pi or other computer to run a web browser
3. LCD panel
4. GitHub account

Install HACS

HACS stands for Home Assistant Community Store. HACS is a system that helps manage many of the common custom cards and other UI Elements that are available for Home Assistant. The custom elements used for creating a Wallpannel are available through HACS.

1. Select the type of Home Assistant installation you have from the HACS documentation https://hacs.xyz/docs/setup/download
2. Follow the instructions for downloading the ‘Get HACS’ script onto your Home Assistant installation.
3. Follow the instructions for initial configuration https://hacs.xyz/docs/configuration/basic

You should see output similar to the following when the ‘Get HACS’ script finishes…

Restart Home Assistant and add the HACS Integration from Settings > Devices & Services

Accept the usage agreements and follow the on screen instructions for authenticating with your github account. You’ll see the following screen when HACS has been connected to your github account.

The HACS icon should now be visible in the main menu.

Install Wallpanel

The Lovelace Wallpannel extension creates an new layer/screensaver mode for Home Assistant Lovelace dashboards. The screensaver is an image slideshow that can also display cards, like a dashboard, but with some extra styles and a cool photo slideshow background.

Project github: https://github.com/j-a-n/lovelace-wallpanel

Install Card-mod

The card-mod extension allows applying custom styles to individual elements of the Wallpanel cards.

Project github: https://github.com/thomasloven/lovelace-card-mod

Create a ‘Local Time’ sensor

We want to display a 12hr clock on our dashboard so our dashboard can serve as a stylish clock. To add a 12hr local time sensor edit the main configurations.yaml file and add the following yaml code.

template:
  - sensor:
      - name: Local Time
        unique_id: time_am_pm
        state: "{{ now().strftime('%-I:%M %p') }}"

Next, restart Home Assistant and verify that you have a new entity named Local Time

Create a dashboard

The kiosk dashboard will have custom styling and layouts so it should probably be a separate dashboard that will only be displayed in kiosk mode (with all browsers controls hidden).

Example dashboard

• Clock/Local Time
• Weather
• Horizon/ Sunrise + Sunset
• Cameras

Edit raw configuration to enable Wallpanel mode

The dashboard’s raw yaml code needs to be modified to enable the Wallpanel integration. Add the following yaml code to enable Wallpanel and arrange the cards.

wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 2
  display_time: 120
  cards:
    - type: entity
      entity: sensor.local_time
      icon: mdi:clock-outline
      wp_style:
        grid-row: 1
        grid-column: 2
    - type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      wp_style:
        grid-row: 1
        grid-column: 1
    - type: picture-entity
      entity: camera.backyard_camera
      wp_style:
        grid-row: 2
        grid-column: 1
    - type: custom:horizon-card
      wp_style:
        grid-row: 2
        grid-column: 2

Apply custom styles with card-mod

This dashboard looks okay, but it would be nice if we could make some of the font bigger so that the cards are easier to read. The text of the clock card is a good example. Add the following yaml to the raw configuration of the Local Time card.

      card_mod:
        style: |
          ha-card .value {
            font-size: 6em
          }
          ha-card .info {
            line-height: 6em;
          }

Save the new configuration and refresh the browser window. Once the Wallpanel mode activates our clock card looks much better!

Summary

After all the changes are applied the raw yaml for the dashboard should look something like this. Hopefully this short guide can be used to create your own Wallpanel dashboards!

wallpanel:
  enabled: true
  hide_toolbar: true
  hide_sidebar: true
  fullscreen: true
  idle_time: 2
  display_time: 120
  cards:
    - type: entity
      entity: sensor.local_time
      icon: mdi:clock-outline
      wp_style:
        grid-row: 1
        grid-column: 2
      card_mod:
        style: |
          ha-card .value {
            font-size: 6em
          }
          ha-card .info {
            line-height: 6em;
          }
    - type: weather-forecast
      entity: weather.forecast_home
      forecast_type: daily
      wp_style:
        grid-row: 1
        grid-column: 1
    - type: picture-entity
      entity: camera.backyard_camera
      wp_style:
        grid-row: 2
        grid-column: 1
    - type: custom:horizon-card
      wp_style:
        grid-row: 2
        grid-column: 2