type: picture-elements
image: /local/floorplan/303/floorplan.png
elements:
- type: custom:simple-weather-card
entity: weather.wo_de_jia
name: ' '
primary_info:
- extrema
secondary_info:
- humidity
style:
top: 20%
left: 88.5%
width: 22%
card_mod:
style: |
ha-card {
background-color: transparent;
box-shadow: none;
}
How can you add a background image?
Here is mine. 
My layout is based on phone use since most things work either automated or by using rocker switches. There are a couple of conditional card for media and alarm that are hidden by default. The top card is used for notifications (sensor battery lvl <10%, trash pickup days, MOT info, heating system pressure warnings). Rooms show some info for lights, covers and AC. Clicking on rooms will open a subview with thermostat and additional options.
3 Likes
Very nice. Currently working on rebuilding a similar view.
Looks really great, love it!
couldn’t find in videos how you layout the top left honeycomb buttons (with or without the honeycomb menu), and how they interact by showing / hiding elements on the floorplan.
Can you please share code for that too? I’m getting tired of rectangle shaped buttons.
Thats a card I made that’s not publicly available. Not optimised for public use… You can achieve something similiar just by using Custom Button Card and giving it a honeycomb background of somesort. Mine is pure CSS without images but for the less experienced, I would suggest an image.
Thanks mate,
I thought about image background on custom button card… but less sure of how to line them up, I guess I should try with absolute positioning and it would look just as great, but I’ll have to try it, I expect the button will not enjoy being on top of each other
I’m looking to build something similar with 3 floors, so probably adding a swipe card to switch between floors, replacing existing floor plan with picture elements.
Really impressed by your work too, very rare to combine all these skills, it could have been 3-5 different people and a lot of patience to achieve this
Anyway, if you ever want to share that other card, I think I would have something to learn there too, nothing scares me anymore 
You’d be best using margin-left and margin-right etc. you can use minus for your margins aswell so -30px would push it back that many pixels.
Growing up I’ve been doing web design stuff but was also interested in media and graphic design eventually this grew to programming but 3d modelling and things of that nature was a hobby. Over time the collection of knowledge has allowed me to achieve things I vision, I just like how now I can see something I want as a result and feel confident enough to achieve it with the knowledge I’ve gained over the years. This isn’t to say I don’t review or google and check tutorials myself to refresh my memory for certain things.
Hello Sian
make plans for the others, I love your work. i am ready to pay you
My heat pump card
details explained here:
1 Like
HI
what did you use to create or convert your photo to cartoon characters?
thanks
Bitmoji is what I used
1 Like
fantastic thanks so much
a while ago I posted a short video about an animated gif. I was asked if I wanted to make a complete video of my dashboard with picture elements. I took that question way too seriously… < making this video took me almost as much time as building the complete dashboard 
.
Anyways: check full video on Youtube
Examples:
19 Likes
Wow that’s nuts man! Very cool and I can only image the amount of time and fine tuning it has taken to get to the current state!
wow that is incredible
1 Like