Home Assistant Dashboard

Introduction

Today I am going to show off my Home Assistant dashboard. The dashboard in Home Assistant is called lovelace and you can use it to setup the look and feel of your Home Assistant. Right now creating a dashboard is pretty code heavy but, in the new year (2021) there will be a lot of new features such as drag and drop and more refined cards.

I have 4 pages that I use regularly:

1) The first layout page I created was for 'dashboard', it's my main landing page that pulls up when I open the app or navigate to the Home Assistant web page. I try to concentrate on quick actions or data that I need to view the most frequently.

2) The second layout page I created was for 'all data', my organizational skills might not make sense at first glance but you get used to it. I know where to look for everything that's going on with my Home Assistant.

3) The third layout page is for all of the lights in the condo. Here I can change color or brightness of each bulb or room.

4) The last page is I use is for the TV remote

TL;DR - I show off my dashboards, custom shade component I wrote, and all plugins for HACS I use. GitHub for source code

HACS

Home Assistant Community Store (HACS) is a Home Assistant add on that allows you to quickly add new features that were created by the community into your Home Assistant. I have found the custom integrations and custom UI elements well worth it! The setup isn't too difficult and can be found on the page that I linked.

HACS frontend integrations

iOS Dark Mode Theme
Mini Media Player
this is below my custom shade cards (works phenomenally with SONOS speakers allowing you to quickly group or un-group speakers)
LG WebOS Remote Control
Atomic Calendar Revive

All of these can be searched in HACS if you want to add them into your setup.

Custom integrations

I have written two custom integrations:

Shade Status Card

the main reason I custom wrote this card was for two reasons, the first being I just wanted to know where the shades were located, and the second was that if I click the up and down arrow it will send up the shades all the way but also disable my automations for me!
The vacuum card for my Xoimai S5 - mainly taken from the community site here. I just tweaked the colors for my needs.

elements:
  - entity: sensor.vacuum_status
    style:
      border-color: '#3090C7'
      border-left-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 80%
      font-weight: bold
      left: 1%
      pointer-events: none
      top: 15%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_battery
    style:
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 80%
      font-weight: bold
      left: 1%
      pointer-events: none
      top: 30%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_fan_speed
    style:
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 80%
      font-weight: bold
      left: 1%
      pointer-events: none
      top: 45%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_last_cleaning_time
    prefix: 'Last Clean: '
    style:
      border-color: 'rgb(34, 154, 210)'
      border-left-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 80%
      font-weight: bold
      left: 1%
      pointer-events: none
      top: 60%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: vacuum.xiaomi_vacuum_cleaner
    style:
      background-color: '#cccccc'
      border-color: 'rgb(34, 154, 210)'
      border-radius: 6px
      color: 'rgb(255, 255, 255)'
      font-family: Trebuchet MS
      font-size: 130%
      font-weight: bold
      right: 40.25%
      top: 40%
      transform: 'translate(0%,-50%)'
    tap_action: more-info
    type: state-label
  - entity: sensor.vacuum_cleaned_area
    prefix: 'Area: '
    style:
      color: '#27e116'
      font-family: Trebuchet MS
      font-size: 80%
      font-weight: bold
      left: 13%
      pointer-events: none
      top: 75%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_cleaning_time
    prefix: 'Time: '
    style:
      color: '#27e116'
      font-family: Trebuchet MS
      font-size: 80%
      font-weight: bold
      left: 70%
      pointer-events: none
      top: 75%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_cleanmainbrush
    style:
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 76%
      font-weight: bold
      pointer-events: none
      right: 1%
      top: 30%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_cleansidebrush
    style:
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 76%
      font-weight: bold
      pointer-events: none
      right: 1%
      top: 45%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_cleanfilter
    style:
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 76%
      font-weight: bold
      pointer-events: none
      right: 1%
      top: 15%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: sensor.vacuum_sensordirtyleft
    style:
      border-color: 'rgb(34, 154, 210)'
      border-right-style: solid
      color: '#ffffff'
      font-family: Trebuchet MS
      font-size: 76%
      font-weight: bold
      pointer-events: none
      right: 1%
      top: 60%
      transform: 'translate(0%,-50%)'
    type: state-label
  - entity: vacuum.xiaomi_vacuum_cleaner
    icon: 'mdi:bell-ring'
    service: vacuum.locate
    style:
      color: '#00dfff'
      left: 80%
      top: 90%
    tap_action: call-service
    type: icon
  - entity: vacuum.xiaomi_vacuum_cleaner
    icon: 'mdi:home'
    service: vacuum.return_to_base
    style:
      color: '#00dfff'
      left: 65%
      top: 90%
    tap_action: call-service
    type: icon
  - icon: 'mdi:stop'
    style:
      color: '#00dfff'
      left: 35%
      top: 90%
    tap_action:
      action: call-service
      service: vacuum.stop
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: icon
  - icon: 'mdi:play'
    style:
      color: '#00dfff'
      left: 20%
      top: 90%
    tap_action:
      action: call-service
      service: vacuum.start
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: icon
  - icon: 'mdi:crosshairs'
    style:
      color: '#00dfff'
      left: 50%
      top: 90%
    tap_action:
      action: call-service
      service: vacuum.clean_spot
      service_data:
        entity_id: vacuum.xiaomi_vacuum_cleaner
    type: icon
image: 'https://nwzimg.wezhan.hk/contents/sitefiles3603/18017532/images/1950553.png'
type: picture-elements

Finally - (Desktop) Dashboard

Page (1) - Landing page - (Map Info, Calendar Events, and location obfuscated)

Page (4) - LG WebOS Remote - available in HACS store

(Mobile) Dashboard

Scrolling Down information (calendar events redacted)

Conclusion

I hope you like my Home Assistant interface, and even maybe had a few ideas to take away. I use that main dashboard page 80% of the time. I try to keep that one clean and not add anything I don't need. These pages let me quickly interact with Home Assistant in the times that I do need to manually interact or check sensors within the condo.

Question

What dashboards do you use? Send me a link below!

#8: Home Assistant Dashboard