A different take on designing a Lovelace UI

Hey, I’m sharing my configuration, with this great community, for what I consider is a different take on designing a Lovelace UI.
https://github.com/matt8707/hass-config


Hass.io installed on a Raspberry Pi 3 Model B+ and my use case is a wall mounted tablet [Samsung 10.1"] displaying Home Assistant in Fully Kiosk Browser and on desktop applicationize (chrome). I’ve opted for local control only but I expose my configuration to homekit with Apple Tv acting as a hub for remote connection.

Features

The sidebar

Markdown Card inside a Picture Elements Card to create dynamic templates.

  • Time and date with greeting based on time of day.
  • Lights and switches that are on, using natural language.
  • Temperature with emojis based on weather conditions.
  • Important calendar information.
  • Time since a person left home.

Sidebar footer

The three icons at the bottom in order


Lights and sensors

All Philips Hue lights with sensors in hallway, bathroom and walk-in closet.

  • Modified (CSS+JS) vertical Light Entity Card for easier touch control.
  • If applicable, show a Light Entity Card color wheel.
  • Custom SVG icons to reflect current color.
  • Brightness percentage in a Circle sensor.


Switches

Media

The idea is to conditionally display media player controls based on last active device such as Apple TV, Playstation 4, Spotify or Plex. If nothing is active then a poster of last downloaded movie/episode is shown (Radarr/Sonarr). But since tvOS 13 integration is broken atm I’m putting this as a TODO .

84 Likes

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?

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.

3 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:

1 Like

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

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!

1 Like

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!

Yeah I definitely drew a lot of inspiration from homekit.

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.

1 Like

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!

1 Like

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.

1 Like

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

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.