My throw at a Lovelace UI

Share your Projects! Dashboards & Frontend
, ,
1

Hi everyone, I’m sharing my own throw at a Lovelace UI dashboard: https://github.com/Tobiasn2005/Home-Assistant

Heavily inspired on the two projects referred to at the bottom of this page.

Home-Assistant

Supervised Home Assistant in a VirtualBox environment. My use case is a wall mounted Microsoft Surface Pro4 displaying Home Assistant in Full screen Chrome.

Node-Red

  • Using Node-Red to check and control the input settings on my receiver and tv and control a Broadlink remote to start different activities to watch TV, Netflix, Disney+ or Plex for example.
  • Also using Node-Red to collect the steps counter from the HA companion app on our phones and compare the values to declare the winner of the day! (see below)

Features

  • Dynamic 3D Floorplan: brightness mapped individual lights with custom popup controller.
  • Dynamic floorplan view, adjusts brightness based on calculated brightness of the sun.
  • Less cluttered interface displaying more information on a long press, inspired by Mattias Persson.
  • Custom rain card to display predicted rain in the next 2 hours - seperate repo here

Floorplan with controllable lights and heating control

  • A different take on designing a Lovelace UI using a Picture Elements Card in panel mode
  • Using a swiper card to swipe between ground and first floor
  • Camera view that pops up when motion is detected on the driveway.
  • Tap on the waste bin to see future dates for waste collection.

animations

animations

Full integration with Tesla Model 3 with history stats, seat heating and HVAC controls:

  • Ability to control seat heating and HVAC temperature from HA.
  • Updates in the car and from within the Tesla app are visible in HA as well.

animations

Devices with animated custom icons and Dutch Covid-19 stats. In the footer two buttons for updates and HA info.

animations

Conditionally displaying media player controls based on last active device such as Playstation 4 and Google Nest Mini. If nothing is active for 15 minutes then a poster of last downloaded movie/episode is shown. Swipe to reveal other than last active media players.

Media

  • Spotify album art, ability to choose favorite playlists and playback devices
  • Other media control of two Sonos Play Ones. A Marantz SR7007 receiver and the Samsung TV in the living room.
  • When PLEX is playing a full size image of the cover art is displayed instead.
  • During PLEX playback the last added movies and Series are displayed as well.

animations

The sidebar

A Picture Elements Card per view to create dynamic templates.

  • Time and date
  • Overlay of Spotife media playing
  • Temperature in and outside in minigraph
  • Christmas decoration when its time :slight_smile:
  • See household members presence and more-info when pressed
  • Ability to deserve a crown based on your amount of steps during the day
  • Popup in the side bar a day before the waste is collected showing the waste type
  • Other conditional alerts

animations

Weather

Custom card to display projected rain in the next 2 hours, using Buien Radar (Dutch weather service).
For more on this card, check out this repo

animations

My community Home Assistant topic

The guys and projects I took my inspiration from are both Mattias Persson and Luke Vink (great thanks to them!)

Mattias Persson Topic
https://community.home-assistant.io/t/a-different-take-on-designing-a-lovelace-ui/162594

Luke Vink Topic
https://community.home-assistant.io/t/floorplan-ui-with-color-synced-lights/169417

18 Likes
2

Oh my, I love you and hate you for what you just did to my foreseeable future.

6 Likes
3

this looks fantastic!

4

Really impressive! What did you use for your 3D-models? (They look amazing!)

5

Hey, thanks. I used Sweet Home 3D to create and draw them.
For a great article on making a 3D floorplan, check this out

Automate The Things – 2 Aug 19

Creating an Interactive 3D Floorplan in Home Assistant

How to create an interactive 3D floorplan in Home Assistant.

1 Like
6

Anybody know the best way to try and copy something like this for myself. I see the repo and I have tried with this and with others in the past to do some copy pasta and have failed miserably, any tips?

7

spaghetti code?

4 Likes
8

So I’m trying to get this mini weather card looking like yours, but it seems like it’s not reading any of the css? The weather card looks the same both with and without the css.


          - backdrop: false
            entity: weather.hjem
            name: ' '
            style: |
              :host {
                left: 31.4%;
                top:  85.5%;
                width: 17%;
                height: 7% !important;
                overflow: hidden;
                height: 8.5vw;
                background: none  !important;
                box-shadow: none !important;
                font-size: 1vw !important;
              }
              ha-card {
                background: none  !important;
                box-shadow: none !important;
                flex-flow: row-reverse !important;
                padding: 0 !important;
              }
              .weather__info--add{
                display : none !important;
              }
              .weather__info{
                flex-grow: 1;
                min-height: 0 !important;
                height: 2.4vw;
                margin-left: 0.6vw;
              }
              .weather__icon{
                margin-right:0.5% !important;
                margin-top: -3%;
                width: 2vw !important;
                height: 2vw !important;
                flex: 0 0 2vw !important;
              }
            tap_action:
              action: navigate
              navigation_path: /lovelace/4
            type: 'custom:simple-weather-card'

Without css on top and with css on bottom

image
image990×337 47.7 KB

9

Hmm, weird. What browser are you using? This is one of the things I copied out of Luke Vinks repo and just worked for me.

10

I’m on an iPad at the moment. Tried Safari, Chrome and Edge.
I’ve installed the Simple Weather Card and Card Mod. Is there something else I’m missing that needs to be installed? Is there something else somewhere else in your files that work together with this code?

The position style seems to work, cause when I change them it moves - but nothing happening to the look of it.

11

Really nice!

Just wondering how did you manage to control the seats heating.

12

@Tobiasn2005 Same question as @Gohlas how did you get the seat heating part? I looked through all your github files but couldn’t figure it out
Very nice layout!

13

It’s done through node-red ad well, but now with the new Tesla API calls I have to setup a refresh token every couple of days unfortuanately

14

Hi Tobias,

Really nice work, I prefer to communicate in Dutch, but I think people on this forum won’t like it :slight_smile:

I have a question regarding your WASHER icon. I have the same setup, was looking for this kind of SVG animation, BUT, after copying your code, the button isn’t appearing. The lovelace-ui text is referring to icon_WASHER, but where have you declared this one ? I already embedded the washer in custom button config

Can you help ?

PS: do you know where to get a SVG animated Curtain open / closed type of anime ?

Thx !!!

Bart

15

Hi @Tobiasn2005 that’s cool. Would you be able to share your seat heater node-red flow? Of course, if you don’t mind.

17

Hi Tobias,

I’m working on the same responsive UI for my car. BUT: how did you manage to create a tap_action on your picture ?

Kr,

Bart

18

Hi Bart,

Its a lot of different overlays calling scripts when tapped. See the Tesla.yaml in the pop-up folder.

19

Thank you @Tobiasn2005 very much

20

Hi @Tobiasn2005 ,
What homeassistant version are you on? Do you have any idea if your current setup would work with the latest homeassistant version? :slight_smile:

21

Hi @Tobiasn2005

I have long been using my own version of this theme from Luke and I have enjoyed your version of the Tesla dashboard and is implementing it for my own new Model 3

My Model 3 is a grey SR+ and do you have any tips to create the images of the car in the grey color - where did you get your sprites from

I have been looking into trying to do the same animations as the App does, but that will take a long time even though I have gotten the animations from the APP - but so far I would just like the same kind of images with the grey car

Thanks in advance :slight_smile: