HomePlay - A Wall Tablet Dashboard [ Update Version 2.2.0][Aug 2023]

My take on Home Dashboard Design for Home Assistant.

I’m running Home Assistant OS Supervised VM hosted on a NAS DS920+. The Wall Mount tablet is a FireHD 10 from amazon running Fully Kiosk Browser.

See interaction on Youtube Home Assistant Dashboard Tablet : HomeOS - YouTube

Github Repository | code

Version 2.2.0

Version 2.1.0

Version 2.0.0


This is the keyplan for the layout.
The code for the custom:grid-layout can be edited within homeplay.yaml

  - type: custom:grid-layout
    title: HomePlay
    background: var(--background)
      margin: 0 #0.3vw
      padding: 0
      grid-gap: 0.7vw
      grid-template-columns: 0 1fr 56.5% 12.7% 0
      grid-template-rows: 3vw 53.1vw 5vw
      grid-template-areas: |
        "topbar topbar topbar topbar topbar"
        ". left center right ."
        "taskbar taskbar taskbar taskbar taskbar"

TOPBAR | Quick Glance at your house state

  • Dynamic Dual Tone Icon
  • Climat chips will change color based on heating or cooling
  • SVG Icons can be found under button_card_template/icon-svg-dualtone.yaml
  • Heavy use of template that are found in button_card_template directory
  • Popup for battery level (more to come)

These custom button are integrated in a custom:hui-element – horizontal stack center to the screen.

    - type: custom:hui-element
      card_type: horizontal-stack
         top: 1.5vw
         left: 50%

         - type: custom:button-card
           entity: sensor.temperature_min_max
           name: Temperature
               - topbar
               - icon_thermometer

LEFT COLUMN | Weather Card

Weather background change based on condition and day/night (screenshot from weather app). The background can be found in www/weather folder. I’m using the weather code from the Montréal Environnement Canada Integration and a Value template in configuration.yaml to differentiate between day and night.


One example: The high and low temperature in the card use a value template as well to format properly

### High and low temperature
   value_template: >
     ↑ {{ states('sensor.montreal_high_temperature') }}° ↓ {{ states('sensor.montreal_low_temperature') }}°

LEFT COLUMN | Calendar Card

  • Calendar Card from Atomic Calendar.
  • Heavily modified with Card Mod.


CENTER COLUMN | Home view map

  • Multiple floor by swaping or using the level button
  • Image change based on day and night
  • The floor plan have been designed in Sweet Home 3D and edited.

RIGHT SIDE | highlight card



Custom Cards used from HACS

Ensure to install those custom card before using this configuration via HACS

Custom integration from HACS


If you’d like to support me and future projects:

:star2: Star my repo, if you like what you see :slight_smile:

Buy Me A Coffee

Github Repository | code

I hope you find this interesting !



Let me know what you think and/or if you have question on the code.


I really like your dashboard. I’ll test it and let you know what I think.

1 Like

Hello avenger11,
I started looking at your code.
Can you tell me what is referring to sensor.maison_icon_code?

Hi Benjamin,

I think you referring to sensor.montreal_icon_code.
If that’s the case, it’s a sensor provided by the Montreal environment canada integration. (Weather integration)


Ok. I’m in France, so I don’t have this integration. I have to figure out how to fit it…

Hello Avenger11,
I have a problem with the card person on the right. I have no blur effect on the background. the card also does not take the foreground image.
can you help me ?


here is a screenshot; it can help! :sweat_smile:

Hi Benjamin,

I didn’t find a solution to have a blurry background yet.

Instead the following part of the code in HomePlay is my picture already blur for the background.

           - background-image: url('/local/person/seb-blur.jpg')

The image of my rounded picture is coming directly from person.your_name entity.
This can be change in the person parameter of Home assistant.

I’m planning to rewrite this part soon.

Hope this help,

@Benjaminh86 I redesign the person card to be more consistent, let me know what you think !


Now, just change the 2 variables (picture and travel time) in homeplay.yaml

              type: custom:button-card
              entity: person.sebastien_logeais
              template: person
                picture: '/local/person/seb.jpg'  #Picture in WWW folder
                travel_time: "[[[ return states['sensor.seb_work_travel_time'].state ]]]"

@avenger11 I tested the new person card. it is better than the previous one.

1 Like

Hi, im new to this and do really like your dashboard, and tried to install it on a new HA installation, but just got an error, have installede all of the custom things from HACS, but i think i am doing it wrong… I cannot find a guide on how to import a dashboard…


Yeah, integrate the dashboard of someone else is difficult but feasible.

What is your error message ?


Hello @avenger11

I’ve been looking at your beautiful dashboard and I’m planning to use it myself. I’ve already added the following folders to my config folder: www, thema, popup, custom_module_card, custom_icons, and custom_card_templates. However, I’m still getting this message. I don’t quite understand what’s going wrong. I hope you can help me?

Schermafbeelding 2023-08-08 144446

How did you manage to get both the hourly and daily forecast in clock-weather-card ?

it is completely custom, I’m starting from a Picture-elements card, adding multiple state-label and finishing with a weather-forecast card.

1 Like

@Montreal666 @Jarne_Roussard I’m currently changing the way the code was split, it will be easier to share. I started create a more extensive documentation for integration, starting by the weather card.

Can you try it out and let me know what are the issues ?


Thank you, just starting my Dashboard but will report back once I have a chance to try it out.

Hello seb,

this is a fantastic design :rocket: I would like to use it with my HA installation. You said you are still working on the code to make an import easier. Can you tell me a release date? Can‘t wait :grin:

Greetings, Tobi

Beautiful project, I would like to know when the new simplified version will be available