Creating Home Assistant status dashboard

My favorite aspect of my Home Assistant Lovelace UI is a status overview dashboard that I built using the default Markdown card and a few simple YAML scripts. In this article, I will show you examples that you can easily customize for your own dashboard.

Greeting


BREAKING CHANGE IN HOME ASSISTANT 2022.7

This code will no longer work in the latest Home Assistant version. Instead of using the surrogate pair to display emojis (e.g., {{‘\uD83D\uDE34’}}) as described below, you can paste the emoji symbol directly into your text / code (e.g., 👉)
Greeting card

This is a simple Markdown card with an underlying sensor.

content: '{{ states(''sensor.greeting'') }} {{user}} '
style: |
  ha-card {
    font-family: helvetica neue, helvetica, Arial;
    color: 'rgba(255, 255, 255, 0.7)';
    font-size: 25px;
    font-weight: 300;
    letter-spacing: '-0.05vw';
  }
theme: dark
type: markdown

The sensor was adapted from matt8707’s configuration:

template:
  - sensor:
      - name: Greeting
        icon: mdi:hand-wave
        state: >-
           {% set t = now().hour %}
           {% if t <= 1 %} Good night {{'\uD83D\uDE34'}}
           {% elif t <= 3 %} Good night {{'\uD83D\uDE34'}}
           {% elif t <= 5 %} Good night {{'\uD83D\uDE34'}}
           {% elif t <= 7 %} Good morning {{'\uD83C\uDF73'}}
           {% elif t <= 9 %} Good morning {{'\uD83C\uDF73'}}
           {% elif t <= 11 %} Good morning {{'\uD83C\uDF73'}}
           {% elif t <= 13 %} Good afternoon {{'\U0001F60A'}}
           {% elif t <= 15 %} Good afternoon {{'\U0001F60E'}}
           {% elif t <= 17 %} Good afternoon {{'\U0001F44B\U0001F3FB'}}
           {% elif t <= 19 %} Good evening {{'\U0001F44B\U0001F3FB'}}
           {% elif t <= 22 %} Good evening {{'\U0001F60C'}}
           {% elif t <= 23 %} Good evening {{'\U0001F974'}}
           {% else %} Good evening {{'\U0001F974'}}
           {% endif %}

Timer card

Timer card

This card is only active when I have a timer active on my Google Home Mini device. For a detailed tutorial, please refer to this article:

This is the card setup:

type: conditional
conditions:
  - entity: sensor.kitchen_timer
    state: active
card:
  entities:
    - sensor.kitchen_timer
  type: custom:timer-bar-card
  theme: dark

Status dashboard

My status card displays important information based on a few lines of YAML and HTML code. The underlying card type is a simple Markdown card:

content: >-

MESSAGE 1
MESSAGE 2
MESSAGE 3

style: |
  ha-card {
    font-family: helvetica neue, helvetica, Arial;
    color: 'rgba(255, 255, 255, 0.7)';
    font-size: 14px;
    font-weight: 400;
    letter-spacing: '-0.05vw';
  }
theme: dark
type: markdown

Now let’s look at some examples of these messages:

ALERT – HIGH HUMIDITY

Warning example
  {% if states('sensor.indoor_humidity')|float > 50 %}  <p>{{
  "\uD83D\uDEA8" }}<font color=red><b>WARNING:</b></font> High average indoor
  <b>humidity at {{ states('sensor.indoor_humidity') }}%</b>. Run the
  dehumidifier or open the windows. Outdoor humidity is currently {{
  state_attr('weather.home','humidity') }}%. {% else %} {% endif %}

ALERT – car gas level

 {% if states('sensor.car_tank_level') == 'unavailable' %} {% elif
  states('sensor.car_tank_level')|float < 15 %}  <p>{{ "\uD83D\uDEA8"
  }}<font color=red><b>WARNING:</b></font> Your car is running out of gas,
  current gas tank level is {{ states('sensor.car_tank_level') }}% ({{
  states('sensor.car_range') }} miles range)</p> {% else %} {% endif %}

Vacuum status

Vacuum status example
  {% if 'cleaning' in states('vacuum.roborock') %} <p>{{ "\uD83E\uDD16"
  }}<b>Roborock is cleaning</b> the apartment (started {{
  (states('sensor.roborock_last_clean_duration')|float / 60)|round(0) }} mins
  ago) <a href=/lovelace-01/vacuum><ha-icon
  icon="mdi:chevron-double-right"></ha-icon></a></p> {% else %} {% endif %}

SHOPPING LIST

  {% if states('sensor.shopping_list')|float > 1 %} <p>{{ "\uD83D\uDED2" }}
  There are <b>{{ states('sensor.shopping_list') }} items</b> on the shopping
  list<a href=/shopping-list><ha-icon
  icon="mdi:chevron-double-right"></ha-icon></a> {% elif
  states('sensor.shopping_list')|float > 0 %}  <p>{{ "\uD83D\uDED2" }} There is
  <b>{{ states('sensor.shopping_list') }} item</b> on the shopping list<a
  href=/shopping-list><ha-icon icon="mdi:chevron-double-right"></ha-icon></a> {%
  else %} {% endif %}

time sensitive message

This message only appears at a specific time
  {% if (now().weekday() in (2,) and now().hour > 16) %} <p> {{ "\uD83D\uDDD1"
  }} Tomorrow is <b>trash pickup day</b>, move the bins outside.</p> {% else %}
  {% endif %}

CALENDAR

Calendar example
  <p>{{ "\uD83D\uDCC6" }} Next event on the Family calendar is
  <b>{{state_attr('calendar.family', 'message')}}</b><a
  href=/lovelace-01/calendar><ha-icon
  icon="mdi:chevron-double-right"></ha-icon></a></p>

HOME ASSISTANT UPDATE

  {% if states('sensor.current_version') == states('sensor.latest_version') %}
  {% else %} <p>{{ "\uD83C\uDD95" }} Home Assistant update available (latest
  version is {{states('sensor.latest_version')}})<a
  href=/hassio/update-available/core><ha-icon
  icon="mdi:chevron-double-right"></ha-icon></a></p>  {% endif %}

Now playing

Now Playing card

Finally, this conditional card will appear if a specific media_player is active:

card:
  cards:
    - hold_action:
        action: none
      image: /local/headers/now_playing.png
      tap_action:
        action: none
      type: picture
    - artwork: cover
      hide:
        volume: true
      idle_view:
        when_idle: true
        when_paused: true
      style: |
        ha-card {
            height: 120px
        }
      type: custom:mini-media-player
      entity: media_player.apple_tv_living_room
  type: vertical-stack
conditions:
  - entity: media_player.apple_tv_living_room
    state: playing
type: conditional

Styling and other tips

I am also using a few styling elements to make the Home Assistant status dashboard look better (see style: in the markdown code). You can apply these after installing card-mod from the HACS store. You can then apply CSS to almost any Home Assistant card.

For emoji elements (e.g., {{‘\uD83D\uDE34’}}), please refer to my tutorial Using emoji in Home Assistant.

My theme in this configuration is the Clear Dark Theme.

Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Article

Universal TV control with Home Assistant

We use cookies to improve your experience on our site and to show you relevant advertising. To find out more, please refer to our privacy policy.