A different take on designing a Lovelace UI

Mattias_Persson · January 11, 2020, 11:09pm

Hey, I’m sharing my configuration https://github.com/matt8707/hass-config

Important

As of 2024, this repository is no longer maintained. While I will not be updating this project, pull requests addressing future breaking changes are welcome. I want to thank everyone for their contributions and support on this project. Seeing it rise as the community’s top topic of all time has been truly overwhelming.

I am now shifting my focus to a new project called ha-fusion. It aims to be a modern, easy-to-use, and performant custom dashboard built from scratch. I hope you’ll check it out!

https://github.com/matt8707/ha-fusion

Home Assistant Container on a Synology DiskStation DS918+ NAS. Wall mounted tablet (Galaxy Tab A 10.1) using Fully Kiosk Browser. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection.

If you like anything here, be sure to my repo!

Installation

How do I install this theme?

There’s no install button. I’m sharing my full configuration

Can you please add this to HACS?

No, because this is not a custom card or integration

Where do I even start?

INSTALL.md explains how to get started

Features

Dashboard (Lovelace) using custom button-card and layout-card
Portrait, landscape and mobile view - responsive_demo.mp4 [mirror]
Less cluttered interface by displaying more information in a popup
Loading animation for slow responding entities
Adding tap audio feedback to the UI for wall-mounted tablet
Icon CSS animations based on entity state

https://raw.githubusercontent.com/matt8707/hass-config/master/www/img/animations.gif(image larger than 3 MB)

Sidebar

Time and date with greeting based on time of day
Entities that are on, using natural language
Mailbox counter to show received mail
Temperature with emoji based on weather conditions
Important calendar information
Other conditional alerts

Footer

Popups that supports notifications.

Popups

Long press a button to show settings and information pertaining to the entity, using browser_mod. Light popups are automatically created using the light button-card template with Mushroom

Media

Conditionally display media players based on the last active device. If nothing is active for 15 minutes, a poster of the last downloaded movie/episode is shown (Plex, Radarr, Sonarr). Swipe to reveal non-active media players

Theme

card-mod is used for the styles in include/themes.yaml and each popup also contain styles depending on content.
I’ve made a tool to help with css element selectors - https://matt8707.github.io/card-mod-helper/

Screenshots

nas	vacuum
nas2716×1511 266 KB	vacuum2188×1591 213 KB

misc
multi3891×1849 431 KB

Hardware

click to expand

Vendor	Product	Integration	Description
Ubiquiti	UniFi Dream Machine	unifi	Router, controller, switch and access point
Synology	DiskStation DS918+	synology_dsm	4x4TB NAS - matt8707/docker-compose-dsm
Raspberry	Pi 3 Model B+	shell_command	Bluetooth communication - matt8707/docker-compose-rpi
Samsung	Galaxy Tab A SM-T510	custom	Wall mounted tablet in hallway by the front door
Philips	Hue	hue	Bridge, 15 bulbs, 3 motion sensors, 2 dimmer switches
Apple	iMac	shell_command	All-in-one desktop computer
SwitchBot	SwitchBot Bot	custom	Bluetooth device that mechanically turns on my computer
Xiaomi	Mi Roborock S50	xiaomi_miio	Robot vacuum with lidar - xiaomi-cloud-map-extractor
Broadlink	RM4 Pro, HTS2 cable	broadlink	Infrared transmitter for AC unit with temp/humidity sensor
Gosund	SP112	esphome	3x tuya wifi plugs with power monitoring, flashed with ESPHome
Belkin	WeMo	wemo	2x wifi plugs and 1x motion sensor
Google	Nest Mini	cast	Not really used, Google sent me one
Deltaco	SH-P01	tuya	Cheap wifi plug for balcony LED lights
Phoscon	ConBee II	custom	Zigbee USB gateway using zigbee2mqtt
Xiaomi	Aqara MCCGQ11LM	mqtt	3x zigbee door/window contact sensors
Apple	TV 4K	apple_tv	2x set-top-boxes that streams content from Plex
Sony	Bravia KDL-55W905A	braviatv	2013 mid-range 55" 1080p 3D TV
Samsung	UE50RU6025KXXC	custom	2019 low-range 50" 4K HDR TV
Sony	PlayStation 5	custom	Game console - State, sleep and wake #ps5 thread
Apple	iPhone X	ios	Home Assistant Companion App for iOS

Note: I do not recommend “Belkin WeMo” or “Deltaco SH-P01”

aFFekopp · January 12, 2020, 4:15am

Really nice setup looks super clean.

I guess the blur effect on the pop-up cards background is achieved with popup-backdrop-filter.js?

dubsix · January 12, 2020, 5:50am

Thanks for sharing, really shows the versatility of lovelace

postlund · January 12, 2020, 7:40am

Feel free to try the beta component that supports tvOS 13. I’m always looking for testers.

COX · January 12, 2020, 8:03am

Hi,

This is a great idea. Really great use for PictureElements.

Thank you for sharing.

Codec303 · January 12, 2020, 8:12am

I like it, looks very similar to Apples ‘Home’ interface, but I like the addition of the light brightness in the icons also.

Argo · January 12, 2020, 8:21am

Hey, this is beautiful. Apple can not compete here.

tpx01 · January 12, 2020, 5:08pm

Just wow! You really went all in here. I love it!

atvking · January 12, 2020, 5:23pm

Just when I thought I had finished with a polished interface using TileBoard, you go ahead and post this and now I’m reconsidering all my choices … Great job!

BrianHanifin · January 12, 2020, 7:45pm

I have been wanting to do something new with my UI. Thank you for sharing this! I going to have a play later this week.

Mattias_Persson · January 12, 2020, 7:54pm

Thanks and yes!

Mattias_Persson · January 12, 2020, 7:57pm

Yeah I definitely drew a lot of inspiration from homekit.

Mattias_Persson · January 12, 2020, 8:09pm

Your work on this is greatly appreciated @postlund

I’ve had your integration since the first beta but it stops working after a while. Like the media title gets stuck in the previous episode with no artwork. Not even a reboot fixes it and I have to reinstall it.

Not sure why this is happening so if you can point out how to debug it I will provide logs.

tpx01 · January 12, 2020, 8:12pm

Could you share the raw background image? @Mattias_Persson

Mattias_Persson · January 12, 2020, 8:23pm

I cant find the original but here is the background from my psd file.

postlund · January 12, 2020, 9:21pm

That sounds kinda serious. I have another issue open that is kinda similar (maybe related?):

When you say reboot, do you mean rebooting the Apple TV or Home Assistant/Hass.io/…? And by re-install, you mean that you have to remove the integration and add it again (pair and all that)?

Some logs would be greatly appreciated. These should be sufficent:

logger:
  logs:
    pyatv: debug
    custom_components.apple_tv: debug

I would prefer if you could post them on GitHub instead of here as it helps when tracking past issue. You can use the issue mentioned above if you feel that it is close enough to what you see, otherwise create a new one here:

Thanks a lot for helping me testing this!

alt_smarthouse · January 12, 2020, 10:33pm

Amazing work! Super clean and looks a joy to use!
Did you manage to replace the “more info” modal content somehow?

I have mini-graph-cards that when clicked are showing the default (kinda ugly) lovelace history graph, and would love to replace the content there with something else.

henrikrox · January 13, 2020, 9:19am

@Mattias_Persson stupid quesiton, for all the image files, dont i need to edit all of them in photoshop so it works with other languages?

If so do you want to share .psd files, i really suck at GUI design. Materful work

SimplyGardner · January 13, 2020, 11:00pm

Wooooow!! I absolutely love the theme. It looks super neat and modern and exactly what I was looking for. Really like the left side bar - really makes it look like a dashboard that is meant to be used and user friendly. Well done!

filikun · January 14, 2020, 10:34am

I would really love to see how your interface looks like on the phone. I guess it’s not the same as this but still would be really cool to see.