Really pleased I found the Picture Elements Card

Configuration Frontend
1

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!

30
301059×616 107 KB

5 Likes
2

Wow, looks really great.

3

Awesome!

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

4

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
            style:
              top: 58%
              left: 25.5%
              width: 47%

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