Changed it to this:
<g
id="switch.afzuigkap_power_group"
transform="matrix(0.01772951,0,0,0.01772951,443.23034,62.929346)"
<g
id="switch.afzuigkap_power">
The switch.afzuigkap_power_group does not exist, should I create this switch?
You may not need to. Does it work with the above?
It did not work. I’ve changed the setup now. Created a box and dependign on the state it wil show an icon. this icon rotates inside the box. works fine.
Is it also possible to make an icon mirror (hor or vert.)
great. I’m going to try this. thanks
I’m finally getting around to migrating (on a test host) from the old old Floorplan card to the new shiny Floorplan card. However, I’m hitting an odd bug.
With the same SVG file as I’m already using I’m getting lots of cannot find element 'binary_sensor.blah' in SVG file. For example:
10/08/2021, 19:08:14 WARNING CONFIG Cannot find element 'binary_sensor.bathroom_window_contact' in SVG file
SVG file:
image: /local/floorplan/config/home/floorplan.svg
Yet, when I do
% grep binary_sensor.bathroom_window_contact ~/.homeassistant/www/floorplan/config/home/floorplan.svg
id="binary_sensor.bathroom_window_contact"
Some things are found, and it’s mostly the ones I put in first. It doesn’t seem to be a layer issue since found and missing entities are in the same layers. It doesn’t seem to be a file size issue since there’s found entities later on than the missing ones. It doesn’t even seem to be naming. Indeed I can find nothing in common.
Any thoughts as to where I should look next?
I would use Inkscape’s FIND feature and search the SVG that way. Once the element has been located try deleting it and reinserting and see if that makes a difference. Maybe there is some sort of corruption or outdated formatting in your current SVG?
I need a little help because I’m at a loss. I can’t seem to get the card to display a full floorplan, only a sliver of it. I made the floor plan in the 1024x768 size because it was suggested, however I just need the ground floor which is very wide and not very tall, so the plan takes up 100% of the width but only 30% of the height. Below is my yaml config and how the card looks. My css file is empty. I’m sure I’m missing something obvious, I would love any help. Thank you 
cards:
- type: horizontal-stack
cards:
- type: 'custom:floorplan-card'
style: |
svg {
height: auto !important;
width: auto !important;
}
config:
image: /local/floorplan/floorplan.svg
stylesheet: /local/floorplan/floorplan.css
log_level: info
console_log_level: info
defaults:
hover_action: hover-info
tap_action: more-info
rules:
It might be because of what you say here ^^^^^^
Assuming you use Inkscape you might mean you have gone to FILE>>DOCUMENT PROPERTIES and set a custom size? If so you have probably made that too small for your actual image? Just set the custom size so the rectangle that shows that is the same size as your actual image. Play around with the custom size values and you should see the rectangle get bigger and smaller. If that doesn’t help you will need to post a copy of your SVG for us to look at.
Resizing it didn’t help, looks basically the same. The svg file is here: FloorplanFTF/floorplan.svg at 15549b52cdadcfa0230e57f0cf7b2c287c80e0f1 · frantathefranta/FloorplanFTF · GitHub
Not sure if that’s the best way to post that.
I don’t know enough to know why your SVG is getting clipped but I was able to use some options to make it work from here: How to Handle Size and Expand Floorplan - Floorplan for Home Assistant So for a start don’t horizontal stack it. When I removed that I had full width but it was clipped at the bottom. This was fixed with the full_height option
- panel: true
cards:
- config:
# log_level: info
image:
location: /local/floorplan/floorplan.svg
cache: false
stylesheet:
location: /local/floorplan/floorplan.css
cache: true
rules:
full_height: true
type: 'custom:floorplan-card'
This works for me too however it’s not what I want, as this just shows a single card in one dashboard/view. I would like this to show up as a card among more cards. Or am I setting it up wrong? I know the panel: true option makes the view show up as just one card, right?
Technically it makes the card full width. You can have this with other cards but I recommend having this as a full width card and the other cards above or below. Here is one I have:
Edit: You could try without the panel:true option and see if it will work for you just with full_height:true but as I said I don’'t do that.
- panel: true
cards:
- type: vertical-stack
cards:
- type: 'custom:floorplan-card'
config:
stylesheet:
location: /local/floorplan/floorplan.css
cache: true
image:
location: /local/floorplan/floorplan_devices.svg
cache: true
defaults:
hover_action:
action: hover-info
tap_action:
action: more-info
rules:
- entities:
- device_tracker.gargoylelan
- device_tracker.netgearwapbedroomlan
- device_tracker.unifi_alfrescolan
- device_tracker.rumpus_ap_workgroup
- device_tracker.webserverlan
- device_tracker.arduinosolarlan
- device_tracker.00_25_22_19_d1_54 #Freenas server 192.168.1.174
- device_tracker.ipcamworkgroup
- binary_sensor.sprinkler_controller_status
- binary_sensor.sprinkler_controller_lower_status
- device_tracker.opencanary_workgroup
- device_tracker.adguard_workgroup
name: Switches
state_action:
action: call-service
service: floorplan.class_set
service_data: '${(["on", "home"].includes(entity.state)) ? "always-invisible" : "always-visible"}'
- entities:
- zwave.aeotec_dsa02203_z_stick_s2
- zwave.aeotec_zw132_dual_nano_switch
- zwave.aeotec_zw111_nano_dimmer
name: textSensors
state_action:
service: floorplan.text_set
service_data: '${entity.state ? entity.state.replace(/\s{2,}/g,"") : "---"}'
- entities:
- sensor.pantry_tablet_battery_level
name: textSensors
state_action:
service: floorplan.text_set
service_data: '${entity.state ? entity.state.replace(/\s{2,}/g,"") + "%" : "---"}'
- entities:
- switch.tp_link_smart_plug_da0e
- switch.washing_machine
- switch.pantry_tablet_screen
name: Toggle Device Switches
tap_action:
action: call-service
service: switch.toggle
state_action:
service: floorplan.class_set
service_data:
class: '${(entity.state === "on") ? "always-visible" : "always-invisible"}'
- type: horizontal-stack
cards:
- type: history-graph
entities:
- sensor.speedtest_ping
- sensor.speedtest_download
- sensor.speedtest_upload
show_header_toggle: true
title: Internet Speed
- type: history-graph
entities:
- sensor.power_generation
- sensor.energy_generation
- sensor.aeotec_zw132_dual_nano_switch_voltage
show_header_toggle: false
title: Solar Panels
I’m now trying it like this, however it now cuts it off for some reason again…
Also adding more cards above or below doesn’t make them show up. I think I’m putting them at the right indentation but not sure. This is now my lovelace.yaml:
- title: Background
path: background
panel: true
cards:
- type: vertical-stack
cards:
- type: 'custom:floorplan-card'
config:
# log_level: info
image:
location: /local/floorplan/floorplan.svg
cache: false
stylesheet:
location: /local/floorplan/floorplan.css
cache: true
rules:
full_height: true
- type: entities
entities:
I really appreciate your help btw
Hmmm that is odd as I justed pasted your YAML into my system and:
You can try a SHIFT-F5, and hit the three dots top right and RELOAD RESOURCES and same dots again and REFRESH. Try a different browser as well
P.S. When you get this working make your image bigger so it fits higher resoltuion screens. Mine is around 10000 pixels wide!
It’s possible, but it’s the same one that works in the original Floorplan and the previous version of this card
Find finds it, which doesn’t surprise me, but I can try removing and adding a fresh one, and worst case rebuild the whole thing 
Thanks
Welll, bleep me, that worked…
WTF
At least now I “only” have to go and re-create a few dozens of carefully placed shapes 
Thanks
I tried all that but it still stays cut off. I don’t know if something else is interfering with this but I don’t have any modifications on that particular view. It’s these from HACS:
battery-state-card.js
floorplan.js
card-mod.js
fold-entity-row.js
hui-element.js
layout-card.js
multiple-entity-row.js
mini-graph-card-bundle.js
stack-in-card.js
text-divider-row.js
banner-card.js?v=1
button-card.js
button-text-card.js
card-tools.js
custom-header.js
swipe-card.js
Thanks for the advice on making it bigger, I’ll definitely do that when this works haha.
So it works fine without the vertical stack? I just tried adding an entity and it is working fine for me with or without the vertical stack. There is something unusual about your SVG I thnk because of how it gets clipped if full_height: true isn’t added.
Unfortunately I have to sign off for two days as I am going away so hopefully someone else might chime in.
The only other thing to perhaps do just to get it working is I assume this is the background of your floorplan and you will put all the inteactivity on top? If so you can just screen capture the image and save as PNG or export it to PNG from within Inkscape. Then create a new SVG in inkscape and import the PNG as the background image and then go from there. This is how I started my floorplan because I created it in SweetHome3D first. I now just have a bunch of icons and other elements layered on top of it.
Someone else more knowledgable about SVGs might pop in with some better assistance if that won’t work for you. Good luck!
It doesn’t work now with or without the vertical stack. Still clipped on the side. I’ll try to redo the svg file with your instructions, we will see if that helps
Edit: It helped, now I can see the whole plan. Procedure was: Export to PNG > Import back in inkscape > save as SVG.
Now onto making it big
