Hello all,
I’m trying to make a floorplan of my home using the ha-floorplan. I have followed some tutorials online but can’t seem to get it right. I can see the floorplan in my dashboard and when I click it, the lights go on but the dashboard doesn’t change (SVG’s should blend).
For simplicity I’ve only added 2 SVG’s and 1 light.
This is my config.yaml:
views:
- title: Floorplan
path: floorplan
icon: 'mdi:floor-plan'
theme: lovelace-blue-blur
panel: true
cards:
- type: 'custom:floorplan-card'
style: >
ha-card {
max-width: 150vh;
margin: 0 auto;
background: none;
}
config:
image: http://my_ip:8123/local/community/flooraplan_test2/floorplan_opt.svg
stylesheet: http://my_ip:8123/local/community/floorplanner_home.css
rules:
- entities:
- light.woonkamer
tap_action:
action: 'toggle'
state_action:
action: call-service
service: floorplan.style_set
service_data:
element: "${entity.entity_id.replace('light.', 'light_overlay.')}"
style: |
>
if( entity.state !== "on" )
return "display: none;";
let hue = 0;
let sat = 0;
if( entity.attributes.hs_color )
{
hue = entity.attributes.hs_color[0];
sat = entity.attributes.hs_color[1];
}
if(sat < 10)
{
return '
display: block;
filter:
brightness(calc( ${entity.attributes.brightness} / 255));'
}
return '
display: block;
filter:
sepia(100%)
hue-rotate(calc( ${hue}deg-55deg))
saturate(calc( ${sat}%*2))
brightness(calc( ${entity.attributes.brightness}/255));
'
My CSS code:
svg, svg * {
pointer-events: all !important;
cursor: auto !important;
}
#light-overlays image {
display: none;
mix-blend-mode: lighten;
}
#light-overlays image.light-on {
display: block;
}
#areas path {
stroke: transparent;
stroke-width: 0;
}
I’ve created my SVG with Inkscape resulting in this optimized SVG:
<?xml version="1.0" encoding="UTF-8"?>
<svg width="1920mm" height="1080mm" version="1.1" viewBox="0 0 1920 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g id="background"><image id="main-background" width="1920" height="1080" preserveAspectRatio="none" xlink:href="http://192.168.68.58:8123/local/community/flooraplan_test2/floorplan0000.png"/><g id="light-overlays"><image id="light_overlay.woonkamer" width="1920" height="1080" preserveAspectRatio="none" xlink:href="http://192.168.68.58:8123/local/community/flooraplan_test2/floorplan0008.png"/></g></g><g id="areas"><g id="area.woonkamer"><path id="path1" d="m18.048 346.93 232.62-254.68 1620.4 411.1-226.61 491.32-1628.4-413.11z" fill="none" stroke="#000"/><use id="light.woonkamer" xlink:href="#path1"/></g></g></svg>
When I inspect my dashboard, I get an error but I don’t know what it means:
floorplan.js?hacstag=1883234941043:131 SyntaxError: Unterminated string constant (13:9) (at floorplan.js?hacstag=1883234941043:16:104348)
at ee.raise (floorplan.js?hacstag=1883234941043:16:104348)
at Pe.readString (floorplan.js?hacstag=1883234941043:16:137224)
at Pe.getTokenFromCode (floorplan.js?hacstag=1883234941043:16:133742)
at Pe.readToken (floorplan.js?hacstag=1883234941043:16:128849)
at Pe.nextToken (floorplan.js?hacstag=1883234941043:16:128718)
at Pe.next (floorplan.js?hacstag=1883234941043:16:128166)
at z.parseReturnStatement (floorplan.js?hacstag=1883234941043:16:68176)
at z.parseStatement (floorplan.js?hacstag=1883234941043:16:64377)
at z.parseBlock (floorplan.js?hacstag=1883234941043:16:71460)
at z.parseStatement (floorplan.js?hacstag=1883234941043:16:64777) {expression: '>\nif( entity.state !== "on" )\n return "display: n…s(calc( ${entity.attributes.brightness}/255));\n\'\n', entityId: 'light.woonkamer', hass: {…}, svgElement: use#light.woonkamer.floorplan-click}
This is what I can see:
Does anybody see what I’m doing wrong?
Thanks in advance!
Greets, Arne