My Hass.io and Lovelace setup Updated

Can you share you config and your theme?

1 Like

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

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

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

No i use picture-elements for that purpose

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.

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

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)?

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

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

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

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

1 Like

Thanks by using picture-elements.

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

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

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…

I have the nest protect expensive but has nice functions

Thanks. I’m familiar with picture elements but the brightness of the entire picture seems to change to show the different rooms lit up or not lit up. Is that through picture elements or through the sweet home image itself?

I did one setup in Sweet Home without light and one with light then i saved them and brought them in Photoshop to cut the lighten image in rooms, save all parts transparent PNG files… After that you map them with picture elements, .

Wow amazing! Could you post your sweet home file so i can use it as a baseline for my apartment, they are surprisingly similar

1 Like

thanks. Look like it senses CO (carbonmonoxide) and not CO2 (carbondioxide), though? Subtle, but important difference

1 Like