Hello everyone,
in the last few days I spent a few hours trying to make my floorplan work in HA, but failed … even with the help of GPT and Gemini. So I need the help of real humans, not AI in this 
I installed floorplan from HACS, in my browser console when I load my floorplan dashboard I see it loads:
Floorplan for Home Assistant (ha-floorplan)
Version 1.1.3
floorplan.js?hacstag=188323494114:54
The svg floorplan is disaplyed in my dashboard, I also added just for testing a small card to display my grid voltage, under the floorplan, just to see an value that updates every few seconds, so I know HA works, and it updates that value every few seconds, but in the svg floorplan I’m not able to make any update, the only way I can push an update in my floorplan svg is if I run some commands in console
In the svg I made in Inkskape and also checked in Notepad++ have an text element with this ID and a few rect elements with a different ID:
- a blue one that act’s as a background for the temperature text when HVAC_state is COOLING
- an orange one when the state is HEATING
- and an IDLE gray background
<rect
style="opacity:0;fill:#4f5963;fill-opacity:1;stroke:none;stroke-width:0.0323243;stroke-dasharray:none;stroke-opacity:1"
id="temperature-kitchen-background-idle"
width="36.77013"
height="16.953259"
x="54.706646"
y="100.7277"
rx="1.1891836"
ry="1.4058295" /><rect
style="display:inline;opacity:0;fill:#ed8a12;fill-opacity:1;stroke:none;stroke-width:0.0323243;stroke-dasharray:none;stroke-opacity:1"
id="temperature-kitchen-background-heating"
width="36.77013"
height="16.953259"
x="54.70665"
y="100.7277"
rx="1.1891836"
ry="1.4058295" /><rect
style="display:inline;opacity:0;fill:#12a5ed;fill-opacity:0;stroke:none;stroke-width:0.0323243;stroke-dasharray:none;stroke-opacity:1"
id="temperature-kitchen-background-cooling"
width="36.77013"
height="16.953259"
x="54.70665"
y="100.7277"
rx="1.1891836"
ry="1.4058295" />
First I tried to use display:none in original svg, for each background and from YAML we wanted to set display:block when the state changes. It didn’t work, the last try was to ditch the display:none and use opacity to 0 by default, and change that to 1 in YAML when the state changes.
My YAML for the floorplan is this bellow … there ware so many versions but it doesn’t matter, the root problem is probably the fact that I get this undefined element in the source code
Here are the first few lines in my dashboard source code when I use Inspect element on the svg file displayed in my dashboard page:
<floorplan-card><template shadowrootmode="open"><!---->
<ha-card class="type-custom-floorplan-card"><template shadowrootmode="open"><!----> <!--?lit$560518135$--> <slot></slot> </template>
<!--?lit$478753728295$-->
<div class="content" style="dummy:;">
<floorplan-element data-floorplan-ref="element-undefined"><template shadowrootmode="open"><!---->
<div id="floorplan-container">
<div id="floorplan"><svg width="100%" height="100%" viewBox="0 0 386.46384 357.58038" version="1.1" id="svg5" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="height: 100%; width: 100%; margin: auto; cursor: default; opacity: 1; display: block;">
<script>console.log("SVG DOM Loaded");</script>
<defs id="defs2">
In console log I donțt see any log message inserted in the SVG (as you can see above) or in the YAML code as you can see bellow, no other messages are logged in the console except the ones with all the cards loaded by HA.
But manual DOM manipulation via the console works (the IDs in my SVG are correct).
The card is rendering the SVG but data-floorplan-ref is staying undefined.
The YAML I use now … showing the SVG but not updating any value in the temperature text or the background of that temperature text, none update when I change the state of my thermostat from heating to idle to heating or cooling…
type: custom:floorplan-card
config:
image: /local/floorplan/binder-penthouse-plan-v1.8.svg?v=1.8
full_update: true
on_ready:
- service: floorplan.execute
service_data:
code: |
console.log("--- FLOORPLAN INITIALIZED AND READY ---");
rules:
- name: Kitchen Master Control
entities:
- climate.kitchen_thermostat
element: temperature-kitchen
state_action:
action: call-service
service: floorplan.execute
service_data:
code: >
console.log("--- STATE CHANGE DETECTED ---");
const entityObj = entity; // Provided by floorplan
const action = entityObj.attributes.hvac_action || 'idle';
const currentTemp = entityObj.attributes.current_temperature ||
'--';
console.log(`Action: ${action}, Temp: ${currentTemp}`);
// 1. Update Temperature Text
floorplan.text_set('temperature-kitchen', currentTemp + '°');
// 2. Logic for background elements
const bgMapping = {
'heating': 'temperature-kitchen-background-heating',
'cooling': 'temperature-kitchen-background-cooling',
'idle': 'temperature-kitchen-background-idle'
};
Object.entries(bgMapping).forEach(([key, elementId]) => {
const targetOpacity = (action === key) ? 1 : 0;
// Use direct style_set
floorplan.style_set(elementId, `opacity: ${targetOpacity}; display: inline !important;`);
});
tap_action:
action: more-info
Anyone around that can point me in the right direction ? WHy that undefined element is shown there ? Probably that is the reason everything I tried in YAML doesn’t work.
Thank you in advance 
, and I’m showing you again an simple code, not AI generated, that should just add the temperature in that svg element, I made a video maybe you can spot what might be wrong if you see my workflow
ohhh … and I lost so many hours because of this stupid mistake 
