Nest hub inspired Lovelace Dashboard

I was unhappy with my previous layout for my dashboard, that is shown on a computer screen attached to a Rpi that resides in my living room bookcase. I really like the clean look of the Nest Hub’s screens, and that inspired me to make this. It’s highly specific to my screen and things, but if you want to have a look at the yaml it’s available here. Hoping to inspire someone!

37 Likes

Hi Isabella,

Very neat design! I like the custom miniature temperature/graphs and your decluttering elements. I’m parsing thru your code trying to figure out how to copy the temperature graphs now. I have never done custom UI before in my home assistant though and I’ve run into a snag. I wonder if you might have a chance to help me?

I found the mini-graph-card-bundle.js in the github custom-lovelace folder and copied it to the same location as mine, referenced it in ui-lovelace yaml as

resources:
- url: /local/custom-lovelace/mini-graph-card-bundle.js
  type: module

but I can’t seem to get home assistant to recognize the custom card and I get the error “custom element doesn’t exist”.

I noticed that your ui-lovelace yaml references a different mini-graph-card.js file in a “community_plugin” folder. Is this file different?

Thanks!

EDIT: Nevermind, got it working! Thanks

1 Like

How did you get it working?

Use this

1 Like

Looks really nice! Curious to see how it scales on mobile . Would you mind sharing some mobile screenshots in portrait mode? :smile:

That Home Feed card is amazing. How did you set that up?

I was interested too, so I looked at the lovelace code and searched…

1 Like

This view is specifically made for a 24" screen I use as a dashboard, and doesn’t scale for mobile at all. It could probably be done, but the intent of this view is to show on this particular screen, so I won’t make it responsive at all. I use Custom compact header to make this the default view for the dashboard (has it’s own login) and my original default view is mobile friendly, but set up a totally different way, since it can also be pressed.

Totally makes sense! Great :wink:

1 Like

Has anyone made a “copy” of this with dynamic resolution? I really LOVE this look, one of the best looking dashboard out there.

1 Like

+1 I could do with something like that.

My cast :wink:
My custom view for the Nest Hub

Nice, please show the config (in a seperate thread). (Alvast bedankt).

seperate thread :wink:

Im trying to get it to working but im getting unable to parse YAML: YAMLException: unknown tag !include

Are you still getting this message ?
it means in your yaml file there is a reference to a non-existing file or object