In this article, I’m going to show you how you can create two beautiful and easy to build dashboards for your smart home running on home assistant.

Important thing to consider, this design template will be useful for you as a starting point, however it will depend on the device that you decide to use and how many entities you have.

 

 

 

Tablet

First step is to actually buy or think of which tablet you are planning to use as a Kiosk for home assistant. Ideally it would be the same model, but doesn’t have to be. This is because we are going to keep checking how it looks on the tablet and maximise space as much as possible.

Users

In home assistant you can create users and then assign dashboards to be visible only to those users, in that way you can control what devices are seen and how they look.

Click on Configuration –> Add Person

 

Dashboards

Click on configuration –> Lovelace Dashboards

You can give it a nice title, the icon will be displayed on the left sidebar you can use the mdi (material design icons) website to find out which logos are compatible.

I’m using mdi:tablet and mdi:cellphone , for the tablet and the cellphone dashboards respectively.

In my dashboard I have 5 views, you can use the three dots on the right hand side to add views

 

 

 

Settings

You can give views a name, icon (mdi), url (useful for navigation) and a theme

Badges

Add little bits of information to the top of your dashboard, I’m not using them in this article.

 

Visibility

This is where you can enable / disable the visibility for each user.

 

Home View

The home view is split in three parts thanks to grid cards

Left Part

This is formed by a Grid card with 1 column (square rending false)

1st position is a weather card with forecast true.

2nd position is a picture glance card with my front door camera and two sensors (front door contact sensor and a front porch light).

3rd position is another grid card with 2 columns rendered as squares, in the grid I have two button cards with custom icons to help me understand what is what.

 

Middle Part

Starting point is a grid card with 1 column, we have three components: first an alarm button, second another grid card and last a thermostat card.

Alarm Panel has a little bit more configuration to it:

Change tap action to Call Service, change navigate to /lovelace-ipad/alarm (this is because I called the dashboard ipad and the view is called alarm (this hasn’t been created yet).

Disable name and state only keep icon.

In the call service section pick alarm control panel arm away (or arm home), then click on pick entity and select the alarm (you should only have one). If you have need a code when disarming you need to select it, I disabled that functionality when I created the alarm panel in the configuration.yaml file.

 

Now we have a grid card with 3 columns and two buttons and one light (leave home scene, good night scene, and all kitchen lights group).

You will need to have created these scenes and groups.

 

Last part is my main thermostat without customisation.

 

Third Part

This grid card has 1 column and 4 parts to it (not squared)

1st a grid card with 2 columns and 1 button and 1 light (rendered as square).

1. Garage button card, I changed the tap action to “more info” to ensure that the door doesn’t open accidentally, change hold action to “call service” with switch.turn_on, pick the entity switch for the garage door. I also removed the name and state to keep a clean look.
2. Garden light is a simple light button with an outdoor lamp (mdi:outdoor-lamp)

2nd and 3rd parts are picture elements with a fixed aspect ratio of 16:9 as these are two different cameras (Annke and Reolink). Tap action “more info”, Camera view “live” this will give you a bit more strain on the laptop and home assistant’s server.

 

4th element is a media player, now you can use the normal media player in my example I’m using the mini media player that you can find from the HACS repository (Home assistant community store)

 

Security

The purpose of this view is to keep an eye on what is happening in the home, this is one single grid card. For the screen to be rendered properly, toggle the Panel mode to on.

Let me break this one down: 1 main grid card of 1 column not squared with 2 elements

 

Top Element

Grid card with two elements and 2 columns.

1. Alarm panel (add empty space in the name to remove the name) from the home page we can link to this page to enter the pin code.
2. Grid card to keep the 4 cameras together (2 columns)

 

Bottom Element

This part is to display the status of all doors, windows and motion / occupancy.

In case an alarm is triggered I should be able to follow around where people are / have been.

Select a grid card with 3 columns (one for each zone) use entity cards

 

 

 

First Floor

In this view, my main goal is to control the entertainment system, some thermostats, lights and keep an eye on the status of my iMac.

 

This view is composed of three parts

Left Part

Grid card with 1 column with 5 elements

1. Grid card with 2 columns and 4 buttons each with a script to trigger a remote action against my Apple TV to then select the appropriate source depending on what I want to watch. This part is a work in progress as I want to add some nice logos.
2. I’m using the mini media player to display Apple TV (artwork full-cover)
3. Sonos 5.1 system to control TV audio and music (select playlists) this is achieved with the mini media player.
4. Again mini media player for PS4
5. mini media player for Plex on apple TV

 

On the right I have 2 grid cards (they are very similar so will explain quickly)

The first block

Is composed of a grid card with 2 columns rendered as a square (4 elements for each light zone) and 1 element for the thermostat.

The second block is exactly the same

I added some more mdi to give it more contrast, I still have the names mainly for visitors. On the right hand side I have the climate just the same as the one above.

In the button part I have two glance cards on the left, three sensors for my iMac (on or off, camera on/off mic on/off.

On the right occupancy detected yes/no, window opened, light level in the room.

 

Climate View

This is a more temperature focused view, this will help us to keep track on the weather forecast and temperatures in the house.

Like the alarm panel, this is rendered in panel mode.

One main grid card controls this whole page.

3 Columns on the my card not rendered as square

 

1. Weather card
2. Grid card (2 columns, square false) with 4 sensor cards
3. Grid card (2 columns, square false) with 4 thermostat cards

https://courses.leonardosmarthomemakers.com/courses/dashboards-in-home-assistant

Learn more about dashboards

I created a video course to teach you how to build your own home assistant dashboard

Iphone Dashboard

The goal for this dashboard is to give me access to my home without scrolling and have a one page experience. This will depend on what phone you have, so it is good to test this out. We also want to fill in the screen to get as much info as possible.

In leaving you the code below so that you can copy & paste this and use it as a template.

The main card is, you might have guessed a grid card!

1 column 3 elements

Top part

Grid Card with 2 columns and 6 elements

1. Alarm panel (setup like the iPad dashboard, but without the navigate option)
2. Grid card with 2 columns four elements containing a motion group, water sensor group, door closed, door opened.
3. Leave home scene (button card)
4. Good night scene (button card)
5. Garage (button card)
6. Thermostat (nest)

 

Middle part

3 columns grid card with lights in 3 zones (ground, first, second)

I created light groups beforehand.

 

Button part

Glance card with temperature readings for each floor

 

Code

Creating Groups

Add the following code in groups.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

 

IPad Dashboard

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: 'https://demo.home-assistant.io/stub_config/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 (home)

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