My 2020 redesigned Lovelace setup and some automations

alt_smarthouse · January 5, 2020, 7:37am

Hey HA folks, I decided to share my Lovelace and HA setup following a Twitter post and that some folks we’re asking me to share the theme.

I forced myself to refresh my dashboard for 2020 and got inspired by Nest hub inspired Lovelace Dashboard , thank you @teachingbirds !

Theme

The theme is called Nest and I made some light tweaks (nest.yaml)
For the background image, I just googled “blurred wallpaper” and got one of the darker ones

Shadows

I had issues with the shadows being clipped with overflow, and I hopped into the HA discord and got someone to help out, to set the overflow on the column to none so that shadows won’t clip
You can find that JS code here

* Badges annoy the crap out of me, I really want to change their color and legability somehow, suggestions welcome
Edit: @klogg suggested a way to fix this, see below, I’ve updated the badges as well

Custom Components

I used a few custom components and installed them with HACS which was a breeze.
Custom Header - https://github.com/maykar/custom-header
Custom button card - https://github.com/custom-cards/button-card - Amazingly flexible
Mini Graph Card - https://github.com/kalkih/mini-graph-card -> This one makes tons of difference, use it!
Animated weather - https://github.com/bramkragten/weather-card
And custom styling card as well.

Some notes and little things about this

The mini graph card allows you to add a few different entities to track, so in the Humidity graph, one of the lines is the outside humidity provided by darkSky and another is home provided by Ecobee.

I really love the little locks on top of the custom button, to prevent accidental triggering of a scene. This is especially important as I don’t want to arm the house in away mode while debugging HA When the house is asleep.

The Tesla battery graph has min and max for that day, so I can see how much I drove that day.
Speaking of Tesla, the first time I loaded HA on center screen, I felt like I’m part of the future. Being able to automate my house while my card drives itself is just

Scenes and automations

I have 3 scenes, and the are created in HA, and exposed to Siri via HomeKit and Alexa via custom Alexa routines that trigger HA. I strive to have feature parity between Siri and Alexa because I confuse between them all the time, so they might as well both do the same thing! (hoping that Ada will replace both in the future!)

This is all done in Node Red like so :

I am absolutely in LOVE with nodeRed + HA at this point, I see no end in possible automations.

Some more automations for inspiration

I am especially proud of this one, as this was bugging me and my wife and HA offered a real solution!

I have ceiling speakers and they are connected to an old amplifier that doesn’t have hdmi. I’ve connected Alexa to one input, and the TV to another.
With Harmony Hub, I set the input on the Amplifier to be TV when I detect that the TV is on, and when it’s off I set it back to Alexa. This way I can double use the same speakers, and given that my toddler loves to play with the amplifier and switch inputs, this works like clockwork and has made out life much easier.

My journey on this home automation started 6 month ago when I purchased my own home, and I don’t know how to stop, send help

This is the kit I currently am working with

https://kit.co/altryne/home-automation

Let me know what you think, comments and opinions are welcome!

EDIT: I couldn’t have done ANY of this without the help of this community, thanks everyone for sharing and being awesome. HA is sure not something easy to just get in to, but you guys make it easier for everyone. I googled every step and every card update!

poudenes · January 5, 2020, 7:50am

Very nice!!

jackcoach · January 5, 2020, 12:33pm

Hi @alt_smarthouse!
I like your design really much. I tried to implement it but I get an error when i use your JS code:

ReferenceError: fireEvent is not defined

I added that resource:

- url: /local/shadow-nest/custom.js
  type: js

My browser is the last version of Chrome.

Thank you very much

aFFekopp · January 5, 2020, 4:44pm

Thank you for posting that custom.js. That was exactly what I was looking for, to change the padding of the whole lovelace view.

alt_smarthouse · January 5, 2020, 7:44pm

Hey @jackcoach, not sure how much I can be of help, I pasted the exact code I have into the gist, and I didn’t run into this issue. Make sure your formatting is right.

If it helps, @thomasloven is the one who pointed me to this, and this was his link originally:

github.com

thomasloven/lovelace-state-switch/blob/e8227cefe6028e69f72672b7c32f0dcc48fed75a/src/main.js#L228-L244


// Monkey patch hui-view to avoid scroll bars in columns
customElements.whenDefined("hui-view").then( () => {
const HuiView = customElements.get("hui-view").prototype;
const oldRenderStyles = HuiView.renderStyles;
HuiView.renderStyles = function() {
  let original = oldRenderStyles();
  original.strings = [original.strings[0] + `
  <style>
    .column {
      overflow-y: hidden;
    }
  </style>
  `];
  return original;
}
fireEvent('ll-rebuild', {});
});

rjmcfadd · January 6, 2020, 1:50pm

Where do you put the JS code?

Thanks!

aholm1234 · January 6, 2020, 3:09pm

Nice theme - thanks for sharing !

Do you have a small guide for installing the background picture ? Sorry if it is obvious.

1 for the JS code - have no idea’er where to put it. But the shadows are clipped as described.

aFFekopp · January 6, 2020, 5:38pm

You have to create a file with that code somewhere in the “www” folder inside your config folder, for example filename.js

And then add

- url: /local/filename.js
  type: js

Under Resources in your ui-lovelace.yaml

poudenes · January 7, 2020, 9:46am

I get this error when I want restart after add the nest.yaml theme:

2020-01-07 10:45:54 ERROR (MainThread) [homeassistant.components.hassio] Invalid config for [frontend]: expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-background']. Got 'rgba(255,255,255,0.95);'
expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-border-radius']. Got '10px'
expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-box-shadow']. Got '10px 10px 17px -8px #A9A9A9'
expected a dictionary for dictionary value @ data['frontend']['themes']['ha-card-padding']. Got '25px;'
expected a dictionary for dictionary value @ data['frontend']['themes']['ha-label-badge-color']. Got '#fff'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-body1_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-caption_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-common-base_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-common-code_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-headline_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-subhead_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-font-title_-_font-family']. Got 'var(--primary-font-family)'
expected a dictionary for dictionary value @ data['frontend']['themes']['paper-item-icon-color']. Got 'var(--text-light-color)'
expected a dictionary for dictionary value @ data['frontend']['themes']['primary-color']. Got '#636B75'
expected a dictionary for dictionary value @ data['frontend']['themes']['primary-font-family']. Got 'Open Sans,sans-serif'
expected a dictionary for dictionary value @ data['frontend']['themes']['secondary-text-color']. Got '#5f6368'
expected a dictionary for dictionary value @ data['frontend']['themes']['text-light-color']. Got '#BAC0C6'
expected a dictionary for dictionary value @ data['frontend']['themes']['text-medium-color']. Got '#8c96a5'
expected a dictionary for dictionary value @ data['frontend']['themes']['text-primary-color']. Got '#FFF'. (See /config/configuration.yaml, line 16). Please check the docs at https://home-assistant.io/integrations/frontend/

aholm1234 · January 7, 2020, 11:14am

@poudenes I think you need a name on top. Like this picture:

aholm1234 · January 7, 2020, 11:23am

@alt_smarthouse

Fixed the background with this : background: ‘radial-gradient(#286a84, #212527)’ worked perfect !

But the shadow issue - Tried it all. New js. file in config/www - under Resources i tried both type js and module. But i cant get it to do the magic.

any change you can provide us with some print screen of the config file / ui-lovelace file ?

LavaGlass · January 7, 2020, 11:40am

Love the design!

You gave me the inspiration to redo my Lovelace and I’m loving it. Custom buttons are amazing! I have my Roller Door one set up to flash red when it is open.

Thanks for the example.

PS. Underneath the badges and above the entity card the weird spaces are just me blanking personal info.

Riley.

Edit: Some more views.

poudenes · January 7, 2020, 12:57pm

Yep… that was the problem… didn’t see it myself haha

alt_smarthouse · January 7, 2020, 4:23pm

I love this! Looks like mine a little bit! Love the color choices as well.

alt_smarthouse · January 7, 2020, 4:23pm

Hey, does the JS file load and run? Can you add some console.log('test') somewhere and see if it loads?

Iy2KoI · January 8, 2020, 4:59pm

Hi @jackcoach!
I had the same problem, I changed the “overflow-y: hidden;” to “overflow: unset;” and i got rid of the fireEvent and now it’s woking.

// Monkey patch hui-view to remove overflow and show borders
customElements.whenDefined("hui-view").then( () => {
const HuiView = customElements.get("hui-view").prototype;
const oldRenderStyles = HuiView.renderStyles;
HuiView.renderStyles = function() {
  let original = oldRenderStyles();
  original.strings = [original.strings[0] + `
  <style>
    .column {
      overflow: unset;
    }
  </style>
  `];
  return original;
}
});

jackcoach · January 8, 2020, 5:33pm

Hi @Iy2KoI!
Thank you very much! I found out that this code doesn’t work with the following plugin: layout-card

@thomasloven could you help me to edit this code and make it works with your plugin?

Thanks!

klogg · January 8, 2020, 5:49pm

Be annoyed no more…
As of today (I believe) lovelace-card-mod can style badges.

alt_smarthouse · January 8, 2020, 6:57pm

Thank you! @thomasloven thank you so much as well! Going to give this a go now!

Keestol · January 9, 2020, 12:45pm

Can you share the yaml cards of your temps and thermostat? looks amazing