Really pleased I found the Picture Elements Card

I’ve been using lovelace for a while, and was getting really frustrated with the limited amount of modding that could be done to the front end. I really wanted to apply CSS styles without adding custom cards (as this doesn’t work with my browser on my Kindle Fire7).

However… I stumbled across the Picture Elements card as I wanted to create a floorplan. It was only then that it dawned on me that pretty much anything can be created using this card given some time and effort. I’m a web designer, so using photoshop to build the backgrounds came fairly naturally!

Anyhew - here is where I’m at so far. I have to give a big shout out to [TeNpoLe21] though as I’ve been heavily inspired by his design in another post!

It’s not entirely there yet, but I’m fairly happy with how it’s coming along!


Wow, looks really great.


OK, I have to ask this… Do you have invisible entities over the images? If yes, then how?

They are all images layered - here is an example of the code for the dark grey switches:

##  Outside  ##    
          - type: image
            image: /local/rooms/icons/roomBack.png
              top: 58%
              left: 25.5%
              width: 47%

          - type: state-label
            entity: group.outside
            prefix: "Outside - "
              top: 58%
              left: 11.5%
              color: white
              font-weight: lighter
          - type: image
            entity: group.outside
            image: /local/rooms/icons/switchOff.png
            tap_action: toggle
              "off": /local/rooms/icons/switchOff.png
              "on": /local/rooms/icons/switchOn.png  
              top: 58%
              left: 41%
              width: 3.5%
1 Like