A different take on designing a Lovelace UI

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

Home Assistant Container on a Synology DiskStation DS918+ NAS. Use cases are a Galaxy Tab A 10.1 (wall mounted) tablet with Fully Kiosk Browser and homeassistant-desktop on macOS. My configuration is exposed to HomeKit with Apple TV acting as a hub for remote connection. I also support Nabu Casa.

Update 2022.3

New Footer

Removed the sidebar footer to make space for additional sidebar content. The new footer is placed at the bottom of the main layout and collapses on mobile.

Notifications

Using the notify variable you can add notifications to the footer. More examples here ui-lovelace.yaml#L476-L605

Default (false) Exclamation (true) Number (int)
return 1 !== 1; return 1 === 1; return 1 + 1;
false true int

Media Marquee

Scrolls the text if the title is longer than the width of the card

marquee

Button Tilt

Adds a 3D effect to any button-card using Vanilla-tilt.js

tilt

Fixes for HA 2022.3

Noteworthy changes

All releases - matt8707/hass-config/releases
All changes - matt8707/hass-config/commits/master

If you want, you can buy me a beer :blush:

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?
This post explains how to get started :tada:


Features

animations

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
  • Geofenced bus departures
  • Important calendar information
  • Other conditional alerts

Sidebar footer

  • Vacuum - card to control robot vacuum, with a live map
  • Information - monitor Home Assistant, tablet and NAS
  • Updates - lists Home Assistant release notes and HACS updates

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 light-popup-card and light-entity-card

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

media

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

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”

371 Likes
Custom Lovelace Card - Homekit style card
Magic Mirror like display but with Lovelace UI
Lovelace: custom sidebar card
Card Tools popup? (Homekit style card )
Wall Panel Options (HomeSeer to Home Assistant)
⭕ Lovelace Radial Menu Element
🔹 Card-mod - Add css styles to any lovelace card
Is this Dashboard possible?
Freelance work
My Lovelace UI - Custom Button and Browser Mod
Show me your vertical/mobile interfaces!
Creating my ideal Lovelace UI (WIP)
Share your project help
My throw at a Lovelace UI
Community Highlights, first edition!
Need advice on building a dashboard
Nolu - another take on Lovelace UI (WIP)
PLEX latest movies click to play
Automate Islamic Adhan (also called Azan or Azzan) or other prayer calls
Vacuum Interactive Map Card
Squeezebox media image bug since 0.117 or 0.118?
Lovelace UI & Dashboard: my Project
How to change theme of the Lovelace Dashboard
🔹 Browser_mod - turn your browser into a controllable device, and a media_player
Custom element doesn't exist: grid-layout
TileBoard - New dashboard for Homeassistant
No enitiy_id created Roborock S7
Hello from a HomeSeer HS4 Refugee
Lovelace: Power wheel card
Vertical alignment of custom-button-card in a grid
Blueprints for Lovelace Dashboards
Custom Lovelace Card - Homekit style card
Migrating Aeotec Z-Stick from HomeSeer to Home Assistant
Bwalarm (akasma74 edition)
Custom Lovelace Card - Homekit style card
🔹 Card-mod - Add css styles to any lovelace card
Custom Lovelace Card - Homekit style card
Custom Lovelace Card - Homekit style card

Really nice setup :+1: looks super clean.

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

1 Like

Thanks for sharing, really shows the versatility of lovelace

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

4 Likes

Hi,

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

Thank you for sharing.

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

Hey, this is beautiful. Apple can not compete here. :+1:

4 Likes

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

1 Like

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 :joy:… Great job!

7 Likes

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.

Thanks and yes!

2 Likes

Yeah I definitely drew a lot of inspiration from homekit.

1 Like

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.

Could you share the raw background image? @Mattias_Persson :smiley:

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

3 Likes

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!

3 Likes

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.

2 Likes

@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

1 Like

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!

1 Like

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.