Wall-mounted tablet dashboard config as seen in my YouTube video (https://www.youtube.com/watch?v=Wr7s_49w9VA)

Running HA OS on a Raspberry Pi 3B+. Using an Amazon Fire HD 10 running Android WallPanel for the dashboard.

All these are available in HACS.

layout-card

button-card

vertical-stack-in-card

lovelace-mushroom (used under the clock in the sidebar)

mini-media-player

browser-mod (optional, used for popups on the buttons on the bottom of the screen)

simple-weather-card

card-mod 3

Custom Brand Icons (optional, used in place of the built in MDI icons for some buttons)

Credit where credit is due: The layout of the dashboard was heavily inspired by matt8707's tablet dashboard, which you can find here: https://github.com/matt8707/hass-config. I reused some of the button-card templates, replaced the sidebar with a vertical-stack-in-card, and deleted the custom icon config so I could use the built-in MDI icons.

I'm sure there's probably code in there I don't need, as the actual card config doesn't even start until line 2696 😂... however it's been working great for me for more than 6 months now, so I haven't seen a reason to waste time removing it.

It's not necessary, but I recommend enabling the theme.yaml file on your tablet, as I designed this dashboard with that theme in mind. It's a smattering of stock HA, UI-Lovelace-Minimalist, and matt8707's theme, so it's a total mess too, but should work just fine.

If you don't have them already, add the following lines to your configuration.yaml to enable the themes folder:

frontend:
  themes: !include_dir_merge_named themes

This ensures that Home Assistant knows where to find your custom themes.

Sometimes a shadow will appear under the cards in the sidebar despite them being positioned inside a card that's supposed to remove them. Here's an example from my mobile dashboard:

I have no idea what causes this. If you're seeing something along these lines, don't worry, you can use card-mod to remove the shadow manually. Put this code below the card config (you may have to click show code editor first):

card_mod:
  style: |
    ha-card {
      box-shadow: none
    }

As mentioned in the video, I use some custom template sensors to return the day of the week and 12 hour time for usage at the top of the sidebar. To get these working on your instance, add the following code to your configuration.yaml:

sensor:
  - platform: template
    sensors:

12 hour time sensor:

timenew:
  friendly_name: "XTime"
  value_template: >
    {% set time = states('sensor.time') %}
    {% set hour = time[:2]|int %}
    {% set timenew = '{:2d}:{}'.format(hour if hour == 12 else hour % 12, time[3:5]) %}
    {% set hournew = timenew[:2]|int %}
    {% set hournew2 = (hournew + 12 if hournew == 0 else hournew) %}
    {{ '{:2d}:{} {}'.format(hournew2 if hournew2 == 12 else hournew % 12, timenew[3:5], 'PM' if hour>11 else 'AM') }}

Day of the week sensor:

weekday:
  friendly_name: Weekday
  value_template: >
    {% set weekday = now().weekday() %} 
    {% if (weekday == 0) %} Monday 
    {% elif (weekday == 1) %} Tuesday 
    {% elif (weekday == 2) %} Wednesday
    {% elif (weekday == 3) %} Thursday 
    {% elif (weekday == 4) %} Friday
    {% elif (weekday == 5) %} Saturday 
    {% elif (weekday == 6) %} Sunday
    {% endif %}

Month of the year sensor:

month:
  friendly_name: Month
  value_template: >
    {% set weekday = now().month %} 
    {% if (weekday == 1) %} January 
    {% elif (weekday == 2) %} February 
    {% elif (weekday == 3) %} March 
    {% elif (weekday == 4) %} April  
    {% elif (weekday == 5) %} May
    {% elif (weekday == 6) %} June 
    {% elif (weekday == 7) %} July 
    {% elif (weekday == 8) %} August 
    {% elif (weekday == 9) %} September 
    {% elif (weekday == 10) %} October 
    {% elif (weekday == 11) %} November 
    {% elif (weekday == 12) %} December 
    {% endif %}

Please star this repository if you find it useful! 😀