My Hass.io and Lovelace setup Updated

Share your Projects! Dashboards & Frontend
1

After a lot of work and research i managed to make it all work really stable and give it a decent easy to use look.

The styling is heavily customized trough CSS using card_modder the theme i use has little to nothing to do with the final look. Some custom component have been modified as well to serve my needs in term of style…

I am sharing my lovelace.yaml file for reference that you can download here:

You can download a folder containing the images used for the background, the divider and card header here:
https://drive.google.com/open?id=1ak5slqP7pXY7qxxxxOx4uUWZsHGrC9lH

I want to thanks the creators and the whole Home Assistant community for all the help they share, without that i would have never managed it.

Main screen

01_main
01_main1920×1072 628 KB

3D Floor Plan with bright layers to represent the lights status.

01_floorplan
01_floorplan1920×1072 620 KB

Alarm Panel

01_alarm
01_alarm1920×1072 477 KB

Electricity consumption with Grafana integration

01_hydrio
01_hydrio1920×1072 456 KB

System

01_system
01_system1920×1072 503 KB

Thanks again…

37 Likes
2

Looks nice.
What tool did you use for the top view in image 2?

Thanks, Jens

3

Thank you.
For the 3D plan i used Sweet Home 3D it<s a nice open source software.

2 Likes
4

Verry nice!!

How did you get the round corners on the cards ?

Tanks for sharing.

1 Like
5

Can you share you config and your theme?

1 Like
6

Thank you i used card_modder using css i will share the method a bit later on this tread.

7

Yes i will a bit later share all this i just need to get it organized and cleaned up from all my passwords…

9

Did you get HA Floorplan working in Lovelace? If so, how?

10

No i use picture-elements for that purpose

11

Ok this the final look i wanted some sort of translucent frosted tinted glass with a nice little shadow.

To achieve this you need to modify each card with CSS code using (card_modder) custom card that you can download here: https://github.com/thomasloven/lovelace-card-modder.
Thanks to Thomas for sharing it.

demo
demo1920×1018 372 KB

Here is the code in my lovelace.yaml file i used for my alarm view

  - type: custom:card-modder
    card:    
      type: entities
      entities:
        - entity: sensor.motentrance
          secondary_info: last-changed
        - entity: sensor.motbathroom
          secondary_info: last-changed
        - entity: sensor.motkitchen 
          secondary_info: last-changed
        - type: divider
        - type: weblink
          name: Arlo Web  ---  https://arlo.netgear.com/#/cameras
          icon: mdi:cctv
          url: https://arlo.netgear.com/#/cameras
    style:
     background-image: url("/local/cardback.png")              
     background-repeat: no-repeat                                      
     background-color: rgba(0,0,0,0.0)
     background-size: 100% 100%
     border-radius: 20px
     border: solid 1px rgba(100,100,100,0.3)
     color: grey
     box-shadow: 5px 5px rgba(0,0,0,0.6)

And this is the transparent PNG image i created in photoshop to texture the cards.

cardback

1 Like
12

Very awesome interface! I’m a bit new to HA and finally getting enough components put together and have a decent start at my Lovelace UI. How did you get the light entities to show the dimmer on the UI without having to click it? (In addition to the switch on/off)?

13

Inspired by that second card, I downloaded Sweet Home 3D (it’s great!). Is your view dynamic? The lights seem to be on/off in your view, depending on the HA state? How have you implemented that?

1 Like
14

Hi @vjmindlab firstly awesome work love the rounded corners will be using that for my my own setup so cheers for the inspiration. I see that you have implemented power consumption, I have been trying to tackle this myself and wondered if you could share your config or repo so I can see how you have gone about it. I am 99% there just having trouble with the stats sensors retaining data for previous month etc. I was going to go try pulling it from influx tonight but saw this post.

Cheers

15

Absolutely love main panel look. Is theme doing everything? Round cards, background image…?

16

Thank you i used slider-entity-row.js search for that on the forum and you will find.

1 Like
17

Thanks by using picture-elements.

18

Thank you. For the power consumption part i only used the Home Assistant included module nothing else and no special code.

19

No i use card modder and modify most of the look by CSS code.

20

Great work!

On a side note, it appears you have a C02 sensor (on conditions card with temps, etc) - may I ask what sensor you are using. I want c02 sensors inside my house, but they seem very expensive…

21

I have the nest protect expensive but has nice functions