From the tutorial playlist i sent above, the code can be found here YouTube/Home Assistant Floorplan at master · Sian-Lee-SA/YouTube · GitHub. Because the outlines are svg paths then floorplan-card would be best.
@sian
Hi. Do you know how to remove the glare from this screenshot below. It is coming from the light source.
The Affect reflections hides it somewhat, but the light glare one still remains.
Would be great if there is a setting to remove it. Right know I just move the light source around and hide them behind objects, but it is tricky sometimes since light bounces off from different direction depending on the angle.
Did you find a solution?
No. I have not put much effort in it
I ve found a solution:
ha-card {
--divider-color: rgba(0, 0, 0, 0);
}
2 Likes
@gabrielmiranda
Great you found it ! ))
Prepared a post about styling it, all credits to you!
1 Like
I get the feeling that the floor material may have a high reflection or specular or you may have the light source a bit too low? Try playing with the floor material… 3D Design isn’t my strongest area so you might find better support for that in forums that are more specific to that category.
Edit: There might be an option within the floor object where you can adjust something that might help. Just right click the object then goto object properties.
A consistent issue I see here with dashboards/cards is that the fonts are too big and there’s way too much white space. How do we fix that? We could make some much sexier dashboards with greater control over padding/margins and font sizes.
Does anyone use it with panel mode? I’m having a problem with the background image. It doesn’t fit the screen resolution and gets clipped.
@Hellis81 unfortunately, the images are no longer available at http://www.hoppvader.nu/bilder/washing_machine.zip
Any possibility to repost them? Thanks!
The file is there, don’t know why it’s not working.
When I click the link I get an error but if I select the link text and copy paste it works
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 