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

[avenger11 (Seb)]

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

Architecture

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

views:
  - type: custom:grid-layout
    title: HomePlay
    background: var(--background)
    layout:
      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.

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

      cards:
         - type: custom:button-card
           entity: sensor.temperature_min_max
           name: Temperature
           template:
               - 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
high_low_temp:
   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

TASK BAR

Custom Cards used from HACS

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

• Lovelace-Layout-Card by Thomas loven.
• Swipe-card by Bram Kragten.
• Button-card by RomRider.
• Lovelace-Card-mod by Thomas loven
• Atomic Calendar Revive by marksie1988
• Kiosk Mode by NemesisRE
• Clock weather card by pkissling

Custom integration from HACS

• Fontawesome by Thomas loven.
• Browser_mod by Thomas loven.

Credit

• inspired by the great work of Mattias Persson & lukevink

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

Star my repo, if you like what you see

Github Repository | code

I hope you find this interesting !

Seb

[avenger11 (Seb)]

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

[Benjaminh86]

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

[Benjaminh86]

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

[avenger11 (Seb)]

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)

Seb

[Benjaminh86]

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

[Benjaminh86]

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 ?
Thanks

[Benjaminh86]

here is a screenshot; it can help!

[avenger11 (Seb)]

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.

     styles:
         card:
           - 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,

[avenger11 (Seb)]

@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
              variables:
                picture: '/local/person/seb.jpg'  #Picture in WWW folder
                travel_time: "[[[ return states['sensor.seb_work_travel_time'].state ]]]"

[Benjaminh86]

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

[Recurvus]

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…

[avenger11 (Seb)]

Hi,

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

What is your error message ?

Seb

[Jarne_Roussard]

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?

[Montreal666]

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

[avenger11 (Seb)]

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

[avenger11 (Seb)]

@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.

Home

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

[Montreal666]

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

[tobyv (Tobias Voth)]

Hello seb,

this is a fantastic design 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

Greetings, Tobi

[tecnolive (Giuseppe)]

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