I was inspired by katschung on Reddit with his Pokémon-Style Floorplan, and I wanted to recreate this idea in OpenHAB to generate brain-friendly, easy-to-control interfaces for my smart home.
I create a standard SVG with Inkscape in a specific structure. I’ll explain this structure to you so that you’ll be able to build such a floorplan for your own setup.
Features
- in the SVG
- Automatic day-night switch
- No duplicate images required
- Individual and combined light sources in night mode
- Light cone can be adjusted in general
- Light cone intensity can be adjusted per light source
- Light cone can be limited to rooms
- Fog effect per room (to represent high humidity)
- Automatic day-night switch
- through widgets (I will document these on separate pages)
- Camera widget: button to open a camera stream in HLS or MJPEG
- Lamp widget
- On/Off with short tap (mobile) / left click (desktop)
- Extended menu with long tap (mobile) / right click (desktop)
- Lamp icon color corresponds to actual light color
- Thermostat widget (reuse of the lamp widget with different symbol and color scale)
- Extended information on click
- Color change according to measurement values
- Pokémon widget (for visualizing environmental effects)
- Display of measurements or forecasts as a health bar, including units
- Max HP absolute or extended with additional item
- Show additional values over time, e.g. forecasts for following days
- Evolution / change when thresholds are exceeded
- Special: Direction circle, e.g. for visualizing wind directions
- Extended information on click
- Display of measurements or forecasts as a health bar, including units
- Glow widget (for visualizing glow effects, e.g. for heating and screens)
- Simple glow aura around an object (e.g. blue for active screens, red for running heaters)
- Extended menu on click (to control the objects, e.g. heating control)
Implementation of the SVG Floorplan
Creating rooms
I create the rooms in Inkscape. However, in many places I had to rework things manually. Make sure the width and height values correspond to pixels. Otherwise, manual adjustments later will get complicated. I made that mistake — back-calculating and converting is not that easy afterwards.
Create your rooms in separate groups. Each room must be one group. Inside those groups, you can have further subgroups for furniture or other elements that belong to the room. This structure is important so that later, effects can be restricted to a single room.
Only once you are fully satisfied with your floorplan should you move on to the next step, since from here on a lot of manual editing in the XML code will be necessary.
This is the relevant section:
<sodipodi:namedview id="namedview1" pagecolor="#000000" bordercolor="#000000" borderopacity="0.25" showgrid="true" showguides="true">
<inkscape:grid id="grid1" units="px" originx="0" originy="0" spacingx="16" spacingy="16" empcolor="#0099e5" empopacity="0.30196078" color="#0099e5" opacity="0.14902" empspacing="2" dotted="false" gridanglex="30" gridanglez="30" visible="true" />
</sodipodi:namedview><defs …> Configuration
Rooms
All rooms are moved into the <defs .. > section. In my example they are all placed under the comment
<!-- Room-Definitions, to make the rooms reusable and avoid defining them twice: light mode and dark mode -->Each room must have a meaningful id and the attribute openhab=”true”. The id uniquely identifies the room, and openhab=”true” tells OpenHAB that it can interact with this object.
Centralize textures (optional)
Under the comment
<!-- Floor-Pattern Definitions, to save some code -->I define a set of textures that can be reused across rooms. This reduces code and makes later changes easier.
Fog effect
<!-- Animated fog -->This block defines the fog effect. You can use it as is or modify it. I’m very happy with it. I use it to show when humidity in a room is high. Since then, my wife also airs out much more often =)
Rain effect
<!-- Rain -->This block defines a few shapes that look like rain when animated. It’s a ready-to-use rain block that can be placed in multiple areas.
Light and shadow effects
Several configurations are necessary for this. Here’s how I approach them:
<!-- Color-Definition for the Night-Mode -->This block defines the color shift for darkness. I chose a dark anthracite. With this, your floorplan automatically switches, and you don’t need two separate versions.
<!-- Gradient definition (be strong at the center and weak at the edge: this definition approximates a logarithmic gradient) -->This defines the light effect. I chose a version with a very bright center and quickly fading edges, not linear but approximating a logarithmic curve. This way you get a realistic bright core with softer fall-off. You can copy this as is.
<!-- Light-Area definitions (where are your light sources?) -->
<!-- ... -->
<circle cx="420" cy="60" r="512" fill="url(#light_gradient)" id='terace_garden_light' openhab="true" />
<g id='terace_perch_light' openhab="true">
<circle cx="620" cy="330" r="192" fill="url(#light_gradient)" />
<circle cx="520" cy="430" r="192" fill="url(#light_gradient)" />
</g>
<!-- ... -->Here you define the exact positions, sizes, and assignments of your light sources. In the example above I show two cases:
terace_garden_light is a single light source. Position is set with cx and cy, radius with r. fill=”url(#light_gradient)” is mandatory; it applies the general light effect to this source. The id must again be unique and descriptive, and openhab=”true” lets OpenHAB toggle it later.
terace_perch_light is a group of light sources that can be switched together. Useful if you have multiple lights that always operate simultaneously.
<!-- Room separations (to prevent light areas from spilling into other rooms) -->
<!-- ... -->
<mask id="bedroom_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#bedroom_light" />
</mask>
<!-- ... -->These masks restrict light effects to individual rooms. You don’t want a light source illuminating another closed room. Each mask is filled white using <rect … />. Masks work in grayscale and determine where the defined light sources are visible. Initially with white fill, nothing shines through.
<use href=”#bedroom_light” /> then applies the light effect specifically to the bedroom mask.
Central definitions
<style id="style1">
.nighttime ~ .night {
filter: url(#nightFilter);
}
.hide { display: none; }
.fog { filter: url(#fogFilter); }
.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }
</style>This section defines and applies a few central settings:
- .nighttime ~ .night applies the night filter when OpenHAB adds the .nighttime class to the relevant object
- .hide hides elements (here: the rain effect, off by default until activated by OpenHAB)
- .fog applies the fog effect
- .opacity0, .opacity1 control aura effects of screens so that active devices are displayed accordingly
Content blocks
<!-- Listener for the daytime switch. Automatically sets plan to daytime mode during day. -->
<circle cx="2" cy="2" r="2" id='daytime_listener' openhab="true" />This part sits below the definitions and is a real element. OpenHAB adds the .nighttime class here when it becomes night. This triggers all light and shadow effects.
<!-- Setup the rooms -->
<use class="light" href="#outside" />
<use class="night" href="#outside" mask="url(#outside_colorRestoreMask)" />
<use class="light" href="#office" />
<use class="night" href="#office" mask="url(#office_colorRestoreMask)" />
<use class="light" href="#livingroom" />
<use class="night" href="#livingroom" mask="url(#wohnzimmer_colorRestoreMask)" />
<!-- ... -->
<use class="light" href="#bedroom" />
<use class="night" href="#bedroom" mask="url(#bedroom_colorRestoreMask)" />
<use class="light" href="#Walls" />
<use class="night" href="#Walls" mask="url(#Walls_colorRestoreMask)" />This is where the defined rooms are actually placed, twice each: once for daytime and once for nighttime. The masks defined above are assigned so that light sources cut out the dark areas properly at night.
<!-- Rain -->
<g id="rain" openhab="true" class="hide">
<use href="#raingroup" x="0" y="0" />
<use href="#raingroup" x="400" y="-250" />
<use href="#raingroup" x="544" y="0" />
<use href="#raingroup" x="6" y="250" />
<use href="#raingroup" x="560" y="250" />
<use href="#raingroup" x="0" y="500" />
<use href="#raingroup" x="544" y="500" />
</g>Finally, the rain. Here the rain group is distributed multiple times across the SVG so that raindrops appear in all outside areas.
Complete SVG Example
Expand
<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="console.log('modified')" width="672" height="832" viewBox="0 0 672 832" version="1.1" id="svg1" xml:space="preserve" inkscape:version="1.3.2 (091e20e, 2023-11-25, custom)" sodipodi:docname="PokeMecklar.svg" inkscape:export-filename="PokeMecklar.png" inkscape:export-xdpi="96" inkscape:export-ydpi="96">
<style id="style1">
.nighttime ~ .night {
filter: url(#nightFilter);
}
.night {
filter: url(#grayFilter);
}
.hide { display: none; }
.fog { filter: url(#fogFilter); }
.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }
</style>
<defs id="defs1">
<!-- Color-Definition for the Night-Mode -->
<filter id="nightFilter">
<feColorMatrix type="matrix"
values="0.05 0.05 0.05 0 0
0.05 0.05 0.05 0 0
0.05 0.05 0.05 0 0
0 0 0 1 0"
id="feColorMatrix1" />
</filter>
<!-- Gradient definition (be strong at the center and weak at the edge: this definition approximates a logarithmic gradient) -->
<radialGradient id="light_gradient">
<stop offset="0%" stop-color="black" stop-opacity="1" />
<stop offset="10%" stop-color="black" stop-opacity="0.7" />
<stop offset="25%" stop-color="black" stop-opacity="0.4" />
<stop offset="50%" stop-color="black" stop-opacity="0.15" />
<stop offset="80%" stop-color="black" stop-opacity="0.05" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
</radialGradient>
<linearGradient id="blackToGray" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="black" stop-opacity="1" />
<stop offset="20%" stop-color="black" stop-opacity="1" />
<stop offset="100%" stop-color="black" stop-opacity="0" />
</linearGradient>
<!-- Light-Area definitions (where are your light sources?) -->
<circle cx="208" cy="140" r="256" fill="url(#light_gradient)" id='wintergarden_light' openhab="true" />
<circle cx="208" cy="190" r="256" fill="url(#light_gradient)" id='wintergarden_tv' openhab="true" />
<g id='livingroom_background_light' openhab="true">
<circle cx="350" cy="110" r="256" fill="url(#light_gradient)" />
<circle cx="350" cy="170" r="256" fill="url(#light_gradient)" />
<circle cx="260" cy="440" r="256" fill="url(#light_gradient)" />
<circle cx="300" cy="440" r="256" fill="url(#light_gradient)" />
</g>
<circle cx="270" cy="360" r="512" fill="url(#light_gradient)" id='livingroom_diningtable_light' openhab="true" />
<circle cx="350" cy="240" r="192" fill="url(#light_gradient)" id='stone_light' openhab="true" />
<circle cx="450" cy="172" r="256" fill="url(#light_gradient)" id='office_julia_light' openhab="true" />
<circle cx="386" cy="172" r="192" fill="url(#light_gradient)" id='office_pc_julia_light' openhab="true" />
<circle cx="450" cy="300" r="256" fill="url(#light_gradient)" id='office_alex_light' openhab="true" />
<circle cx="386" cy="300" r="192" fill="url(#light_gradient)" id='office_pc_alex_light' openhab="true" />
<!-- ... -->
<circle cx="460" cy="670" r="512" fill="url(#light_gradient)" id='bedroom_light' openhab="true" />
<circle cx="420" cy="60" r="512" fill="url(#light_gradient)" id='terace_garden_light' openhab="true" />
<g id='terace_perch_light' openhab="true">
<circle cx="620" cy="330" r="192" fill="url(#light_gradient)" />
<circle cx="520" cy="430" r="192" fill="url(#light_gradient)" />
</g>
<!-- Room sepatations (to prevent, that light areas are seen in other rooms) -->
<mask id="wohnzimmer_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#wintergarden_light" />
<use href="#livingroom_background_light" />
<use href="#livingroom_diningtable_light" />
<use href="#stone_light" />
<use href="#wintergarden_tv" />
</mask>
<mask id="office_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#office_julia_light" />
<use href="#office_alex_light" />
<use href="#office_pc_julia_light" />
<use href="#office_pc_alex_light" />
</mask>
<!-- ... -->
<mask id="bedroom_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#bedroom_light" />
</mask>
<mask id="outside_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#terace_garden_light" />
<use href="#terace_perch_light" />
</mask>
<!-- Rain -->
<g id="raingroup">
<circle cx="0" cy="0" r="2" fill="blue">
<animate attributeName="cy" from="0" to="170" dur="0.6s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="0.6s" repeatCount="indefinite" />
</circle>
<circle cx="20" cy="150" r="2" fill="blue">
<animate attributeName="cy" from="150" to="300" dur="0.85s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="0.85s" repeatCount="indefinite" />
</circle>
<circle cx="35" cy="10" r="2" fill="blue">
<animate attributeName="cy" from="100" to="300" dur="0.7s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="0.7s" repeatCount="indefinite" />
</circle>
<circle cx="50" cy="0" r="2" fill="blue">
<animate attributeName="cy" from="0" to="150" dur="1s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="1s" repeatCount="indefinite" />
</circle>
<circle cx="70" cy="150" r="2" fill="blue">
<animate attributeName="cy" from="150" to="350" dur="1.1s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="1.1s" repeatCount="indefinite" />
</circle>
<circle cx="90" cy="200" r="2" fill="blue">
<animate attributeName="cy" from="200" to="350" dur="0.9s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="0.9s" repeatCount="indefinite" />
</circle>
<circle cx="100" cy="40" r="2" fill="blue">
<animate attributeName="cy" from="40" to="200" dur="1.2s" repeatCount="indefinite" />
<animate attributeName="opacity" values="1;0" dur="1.2s" repeatCount="indefinite" />
</circle>
</g>
<!-- Animated fog -->
<filter id="fogFilter" x="0" y="0" width="100%" height="100%" primitiveUnits="userSpaceOnUse">
<!-- Nebel erzeugen -->
<feTurbulence type="fractalNoise" baseFrequency="0.05 0.02" numOctaves="2" result="turb" >
<animate attributeName="baseFrequency"
values="
0.05 0.02;
0.06 0.03;
0.05 0.04;
0.04 0.03;
0.05 0.02"
dur="120s" repeatCount="indefinite" />
</feTurbulence>
<feGaussianBlur in="turb" stdDeviation="2" result="blurred" />
<!-- Alphakanal der Gruppe -->
<feMorphology in="SourceAlpha" operator="erode" radius="0" result="erodedAlpha" />
<!-- Radius in px: ca. 5 Pixel Rand weglassen -->
<!-- Nebel auf verkleinerte Maske beschränken -->
<feComposite in="blurred" in2="erodedAlpha" operator="in" result="fogMasked" />
<feColorMatrix in="fogMasked" type="matrix" values="
0 0 0 0 1
0 0 0 0 1
0 0 0 0 1
0 0 0 0.6 0" result="fog" />
<feComposite in="fog" in2="SourceGraphic" operator="over" />
</filter>
<!-- Floor-Pattern Definitions, to save some code -->
<pattern id="floor_office_julia_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile1980" />
</pattern>
<image id="tile1980" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1980.png" />
<pattern id="floor_wintergarden_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile440" />
</pattern>
<image id="tile440" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile440.png" />
<pattern id="floor_corridor_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile472" />
</pattern>
<image id="tile472" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile472.png" />
<pattern id="floor_office_alex_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile1979" />
</pattern>
<image id="tile1979" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1979.png" />
<pattern id="floor_wohnzimmer_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile385" />
</pattern>
<image id="tile385" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile385.png" />
<pattern id="floor_terace_stone_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#stone_floor" />
</pattern>
<image id="stone_floor" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Game%20Corner%20interior/steone_floor.PNG" />
<pattern id="floor_terace_tiles_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile200" />
</pattern>
<image id="tile200" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile200.png" />
<pattern id="floor_childsroom_pattern" patternUnits="userSpaceOnUse" width="32" height="32">
<use href="#tile664" />
</pattern>
<image id="tile664" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile664.png" />
<image id="tile784" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile784.png" />
<image id="tile792" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile792.png" />
<image id="tile793" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile793.png" />
<image id="tile1299" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1299.png" />
<image id="tile1677" width="4.2333446" height="4.2333336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1677.png" />
<image id="tile1669" width="4.2333446" height="4.2333336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1669.png" />
<image id="tile1678" width="4.2333322" height="4.233336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1678.png" />
<image id="tile1661" width="4.2333446" height="4.2333336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1661.png" />
<image id="tile1653" width="4.2333446" height="4.2333336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1653.png" />
<image id="tile1654" width="4.2333322" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1654.png" />
<image id="tile1539" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1539.png" />
<image id="tile1547" width="8.4666662" height="12.700003" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1547.png" />
<image id="tile1555" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1555.png" />
<image id="tile1133" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133.png" />
<image id="tile1141" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141.png" />
<image id="tile1125" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1125.png" />
<image id="tile1803" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803.png" />
<image id="tile1803_mid" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803_mid.png" />
<image id="tile1803_short" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803_short.png" />
<image id="tile1803_short_right" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803_short_right.png" />
<image id="tile1803_short_mod" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803_short_mod.png" />
<image id="tile1803_right" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803_right.png" />
<image id="tile1803_small" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1803_small.png" />
<image id="radiator" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/radiator.png" />
<image id="radiator_extender" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/radiator_extender.png" />
<image id="tile048_mid" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile048_mid.png" />
<image id="tile048_closed" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile048_closed.png" />
<image id="tile048_upclosed" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile048_upclosed.png" />
<image id="tile048_left" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile048_left.png" />
<image id="tile048" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile048.png" />
<image id="tile049" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile049.png" />
<image id="tile050_end" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile050_end.png" />
<image id="tile050_end2" width="4.2333331" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile050_end2.png" />
<image id="tile051" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile051.png" />
<image id="tile051_small" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile051_small.png" />
<image id="tile051_open" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile051_open.png" />
<image id="tile052" width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile052.png" />
<image id="tile1662" width="4.2333331" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1662.png" />
<image id="tile1662_32" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1662.png" />
<!-- Room-Definitions, to make the rooms reusable and avoid defining them twice: light mode and dark mode -->
<g id="outside" openhab="true">
<path d="M 384,0 H 576 V 160 H 528 V 112 H 384 Z" id="terace1" class='floor' fill="url(#floor_terace_tiles_pattern)" />
<path d="m 608,80 h 64 V 320 H 528 v -64 h 48 v -96 h 32 z" id="terace2" class='floor' fill="url(#floor_terace_stone_pattern)" />
<path d="M 528,336 H 672 V 528 H 576 V 496 H 528 Z" id="terace3" class='floor' fill="url(#floor_terace_stone_pattern)" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-98-column-3.png" id="image1-52" x="-160" y="576" transform="rotate(-90)" />
<!--
<image width="96" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/flowers.png" id="image1-978" x="-576" y="-32" transform="scale(-1,1)" />
<image width="96" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/flowers.png" id="image1-978-7" x="-480" y="-32" transform="scale(-1,1)" />
-->
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-46" x="576" y="0" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-91" x="576" y="32" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-919" x="576" y="64" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/Outside.png" id="image1-221-3" x="576" y="96" />
<g id="g1" inkscape:label="grass">
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-6.png" id="image1-416" x="608" y="16" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-6.png" id="image1-416-7" x="640" y="32" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-7.png" id="image1-183" x="640" y="48" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-7.png" id="image1-183-8" x="640" y="0" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-5.png" id="image1-92" x="608" y="48" />
<image width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Outside/row-1-column-3.png" id="image1-350" x="608" y="0" />
</g>
<g>
<rect fill="black" width="48" height="96" x="528" y="160" />
<image width="32" height="96" xlink:href="/static/floorplan/icons/moderninteriors-win/1_Interiors/32x32/Theme_Sorter_Singles_32x32/26_Condominium_Singles_32x32/Condominium_Singles_32x32_26.png" x="-568" y="-270" transform="rotate(180)" />
<rect fill="url(#blackToGray)" width="48" height="96" x="528" y="160" />
</g>
</g>
<g id="office" openhab="true">
<rect id="floor_office_alex" class='floor' x="384" y="240" width="128" height="128" fill="url(#floor_office_alex_pattern)" />
<rect id="floor_office_julia" class='floor' x="384" y="128" width="128" height="112" fill="url(#floor_office_julia_pattern)" />
<g id="g46" style="display:inline;opacity:0.652;image-rendering:auto">
<use href="#tile049" id="image1-00-5-1-5-2" x="84.666664" y="23.62652" transform="matrix(1.8974746,0,0,3.7790193,223.31045,6.6976943)" />
<use href="#tile049" id="image1-00-5-1-5-2-6" x="114.29993" y="23.630901" transform="matrix(1.8895152,0,0,3.7790193,279.97645,6.6976943)" />
<use href="#tile1803_short_right" id="image1-656-7-4" x="110.0666" y="23.630901" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile1803_short" id="image1-55-3" x="88.899994" y="23.62652" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile1803_short_mod" id="image1-49" x="93.133331" y="23.62652" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile1803_short_mod" id="image1-49-1" x="97.366661" y="23.62652" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile1803_short_mod" id="image1-49-5" x="101.6" y="23.62652" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile1803_short_mod" id="image1-49-2" x="105.83333" y="23.62652" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="schraenke_julia">
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_wood.png" id="image1-30-2" x="495.94815" y="111.98061" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open_wood.png" id="image1-29-9-7" x="495.94815" y="175.97697" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open_wood.png" id="image1-29-9-3" x="495.94815" y="159.97914" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open_wood.png" id="image1-29-9-1" x="495.94815" y="143.98129" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open_wood.png" id="image1-29-9-0" x="495.94815" y="127.98347" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133_wood.png" id="image1-5-8" x="495.94815" y="191.96986" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141_wood.png" id="image1-08-8" x="495.94815" y="207.9677" />
</g>
<use id="chair_julia" href="#tile1299" x="91.01664" y="40.55109" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<g id="schreibtisch_julia" transform="matrix(3.7790177,0,0,3.7790193,-111.96994,-9.3001552)">
<use href="#tile1677" id="image1-17" x="131.23337" y="57.493183" />
<use href="#tile1669" id="image1-028" x="131.23335" y="53.259853" />
<use href="#tile1661" id="image1-68" x="131.23337" y="49.026524" />
<use href="#tile1661" id="image1-68-4-1" x="131.23334" y="44.793194" />
<use href="#tile1653" id="image1-12" x="131.23337" y="40.559864" />
<use href="#tile1677" id="image1-17-0" x="-139.70003" y="57.493176" transform="scale(-1,1)" />
<use href="#tile1669" id="image1-028-2" x="-139.70004" y="53.259846" transform="scale(-1,1)" />
<use href="#tile1661" id="image1-68-6" x="-139.70003" y="49.026516" transform="scale(-1,1)" />
<use href="#tile1661" id="image1-68-4-1-8" x="-139.7" y="44.793186" transform="scale(-1,1)" />
<use href="#tile1653" id="image1-12-1" x="-139.69997" y="40.559856" transform="scale(-1,1)" />
</g>
<use id="wall_part1" href="#tile051_small" x="114.29997" y="53.251095" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="display:inline;opacity:0.652;image-rendering:auto" />
<use id="wall_part2" href="#tile051_small" x="-88.899994" y="53.259853" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="display:inline;opacity:0.652;image-rendering:auto" />
<g id="kallax_alex" transform="matrix(3.7790177,0,0,3.7790193,16.012935,14.680165)">
<image width="4.2333293" height="4.2333341" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142.png" id="image1-61" x="127" y="57.486607" />
<image width="4.2333598" height="4.2289429" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64" x="126.99998" y="61.726528" />
<image width="4.2333598" height="4.2289429" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-5" x="126.99997" y="65.959854" />
<image width="4.2333598" height="4.2289429" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-1" x="126.99997" y="70.190994" />
<image width="4.2333598" height="4.2289429" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-4" x="126.99997" y="74.426514" />
<image width="4.2333598" height="4.2289429" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-1-1" x="126.99996" y="78.655457" />
<image width="4.2333598" height="4.2289429" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-4-1" x="126.99996" y="82.890976" />
</g>
<image id="kallax_alex_klein" width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142.png" x="447.95465" y="327.8688" />
<g id="werktisch_alex" transform="matrix(3.7790177,0,0,3.7790193,-47.978403,78.605277)">
<image width="4.2333374" height="4.233336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1677.png" id="image1-50" x="135.46666" y="74.426514" />
<image width="4.2333322" height="4.233336" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1678.png" id="image1-46" x="139.7" y="74.426514" />
<image width="4.2333322" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1654.png" id="image1-66" x="139.7" y="70.193184" />
<image width="4.2333398" height="4.2333331" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1653.png" id="image1-22" x="135.46666" y="70.193184" />
</g>
<use id="chair_alex" href="#tile1299" x="86.78331" y="70.184425" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<g id="schreibtisch_alex" transform="matrix(2.9567904,0,0,3.7790193,-16.583257,38.693369)">
<use href="#tile1677" id="image1-17-9" x="135.46667" y="74.426521" />
<use href="#tile1669" id="image1-028-8" x="135.46666" y="70.193192" />
<use href="#tile1661" id="image1-68-9" x="135.46667" y="65.959862" />
<use href="#tile1661" id="image1-68-9-5" x="135.46666" y="61.726517" />
<use href="#tile1661" id="image1-68-4-1-1" x="135.46663" y="57.493198" />
<use href="#tile1653" id="image1-12-3" x="135.46666" y="53.259869" />
<use href="#tile1677" id="image1-17-0-9" x="-143.93333" y="74.426514" transform="scale(-1,1)" />
<use href="#tile1669" id="image1-028-2-6" x="-143.93335" y="70.193184" transform="scale(-1,1)" />
<use href="#tile1661" id="image1-68-6-1" x="-143.93333" y="65.959854" transform="scale(-1,1)" />
<use href="#tile1661" id="image1-68-6-1-4" x="-143.93336" y="61.726524" transform="scale(-1,1)" />
<use href="#tile1661" id="image1-68-4-1-8-2" x="-143.93329" y="57.493191" transform="scale(-1,1)" />
<use href="#tile1653" id="image1-12-1-2" x="-143.93326" y="53.259861" transform="scale(-1,1)" />
</g>
<g id="g12-3" transform="matrix(1.8895022,0,0,1.8895102,207.98791,195.33734)">
<image width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133.png" id="image1-23-9" x="127" y="78.659851" />
<image width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141.png" id="image1-94-5" x="127.00002" y="87.126511" />
</g>
<image width="23.996569" height="23.996798" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1513.png" id="image1-406" x="390.74036" y="135.97736" />
<g id="g10-6" transform="matrix(2.4754433,0,0,3.7790193,69.581732,-129.284)">
<image width="6.4626174" height="6.3499961" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1499.png" id="image1-474-9" x="127" y="80.77652" />
<image width="6.4626174" height="6.3499961" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1491.png" id="image1-9501-3" x="127" y="74.426521" />
</g>
<g id="g10-6-3" transform="matrix(2.4754433,0,0,3.7790193,69.582012,-41.295856)">
<image width="6.4626174" height="6.3499961" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1499.png" id="image1-474-9-3" x="127" y="80.77652" />
<image width="6.4626174" height="6.3499961" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1491.png" id="image1-9501-3-1" x="127" y="74.426521" />
</g>
<g id="g10-6-3-5" transform="matrix(2.4754433,0,0,3.7790193,69.582012,-25.298032)">
<image width="6.4626174" height="6.3499961" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1499.png" id="image1-474-9-3-7" x="127" y="80.77652" />
<image width="6.4626174" height="6.3499961" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/Interior%20general/tile1491.png" id="image1-9501-3-1-5" x="127" y="74.426521" />
</g>
<g id="g12" transform="matrix(1.8895022,0,0,1.8895102,255.98142,195.27945)">
<image width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133.png" id="image1-23" x="127" y="78.659851" />
<image width="8.4666662" height="8.4666662" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141.png" id="image1-94" x="127.00002" y="87.126511" />
</g>
<g id="g11" transform="matrix(3.7790177,0,0,3.7790193,-127.96785,-33.296923)" style="fill:#666666;stroke:none;stroke-width:1;stroke-dasharray:none">
<image width="4.2333302" height="4.2333331" xlink:href="/static/floorplan/icons/radiator.png" id="image2" x="-148.1667" y="40.559853" transform="scale(-1,1)" />
<image width="4.2333293" height="4.2333269" xlink:href="/static/floorplan/icons/radiator_extender.png" id="image3" x="152.40004" y="40.559853" />
<image width="4.2333293" height="4.2333269" xlink:href="/static/floorplan/icons/radiator_extender.png" id="image4" x="156.63341" y="40.559853" />
<image width="4.2333293" height="4.2333269" xlink:href="/static/floorplan/icons/radiator_extender.png" id="image5" x="148.16667" y="40.559856" />
<image width="4.2333293" height="4.2333269" xlink:href="/static/floorplan/icons/radiator_extender.png" id="image6" x="160.8667" y="40.559853" />
</g>
</g>
<!-- ... -->
<g id="bedroom" openhab="true">
<rect id="floor_bedroom" x="384" y="608" width="128" height="128" fill="url(#floor_corridor_pattern)" />
<g id="wall_bedroom_upper">
<use width="4.233325" href="#tile049" id="image1-00-55-1-9-8" x="84.666664" y="150.62651" transform="matrix(1.8895073,0,0,3.7790193,223.98502,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use href="#tile049" id="image1-00-0-1-4-3-8-0" x="110.06667" y="150.62653" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use href="#tile049" id="image1-00-0-1-4-3-8-0-1" x="101.6" y="150.62651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use width="4.233325" href="#tile049" id="image1-00-55-1-9-5" x="97.366661" y="150.62651" transform="matrix(1.8948643,0,0,3.7790193,247.4602,6.6976943)" style="opacity:0.652;image-rendering:auto" />
</g>
<image id="door_bedroom" width="32" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile006.png" x="400" y="576" />
<g id="waescheschrank">
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142.png" id="image1-61-8-3-1" x="384" y="594" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133.png" id="image1-23-8-9-4" x="384" y="610" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141.png" id="image1-94-0-1-3" x="384" y="626" />
</g>
<g id="kleiderschrank_julia">
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142.png" id="image1-6b-8-3" x="384" y="624" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-61-8-3" x="384" y="640" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-5-8" x="384" y="656" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133.png" id="image1-23-8-5" x="384" y="672" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141.png" id="image1-94-0-4" x="384" y="688" />
</g>
<g id="kleiderschrank_alex">
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142.png" id="image1-61-8-0" x="384" y="680" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1142_open.png" id="image1-64-5-2-4" x="384" y="696" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1133.png" id="image1-23-8-9" x="384" y="712" />
<image width="16" height="16" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile1141.png" id="image1-94-0-1" x="384" y="728" />
</g>
<image width="80" height="46" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/bed_single.png" id="image1-007" x="432" y="604" />
<image width="80" height="74" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/bed.png" id="image1-58" x="432" y="646" />
<rect x="406" y="712" width="51" height="32" openhab="true" class="radiator" id="heizung_schlafzimmer" style="fill:#ff0000;fill-opacity:0;stroke:none;stroke-width:3.77902;stroke-dasharray:none" />
<g id="wall_bedroom_lower">
<g id="g41" transform="matrix(3.7790177,0,0,3.7790193,383.96331,54.691192)">
<use href="#radiator" id="image40" x="-12.700003" y="176.02652" transform="scale(-1,1)" />
<use href="#radiator_extender" id="image41" x="12.699972" y="176.02652" />
</g>
<use href="#tile049" id="image1-00-0-1-4-3-8-0-1-1" x="110.06667" y="188.7265" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use href="#tile049" id="image1-00-0-1-4-3-8-0-1-1-6" x="101.60001" y="188.7265" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use href="#tile049" id="image1-00-0-1-4-3-8-0-1-1-6-2" x="84.666664" y="188.7265" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use href="#tile1803_short" id="image1-55-4" x="93.133324" y="188.71774" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
<use href="#tile1803_short_right" id="image1-656-7" x="97.366661" y="188.7265" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:0.652;image-rendering:auto" />
</g>
</g>
<g id="Walls" style="opacity:0.652;image-rendering:auto">
<use href="#tile048_upclosed" id="image1-66-4-4-9" x="97.366661" y="120.99318" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<g id="g26">
<use href="#tile048_mid" id="image1-14-5" x="33.866665" y="116.75985" transform="matrix(3.7790177,0,0,1.8973915,64.00648,226.39627)" />
<use href="#tile048_mid" id="image1-14-5-3" x="33.866665" y="108.29318" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_upclosed" id="image1-66-4" x="33.866665" y="53.259853" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-7" x="33.866665" y="99.826515" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-37" x="33.866665" y="91.359848" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-71" x="33.866665" y="82.893181" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-8" x="33.866665" y="74.426514" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79" x="33.866665" y="65.959854" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-5" x="33.866665" y="57.493183" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<use href="#tile048" id="image1-60-8-0" x="33.866661" y="120.99757" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_left" id="image1-24" x="80.433334" y="6.6931887" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile051" id="image1-96-9-5" x="97.366661" y="137.92651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" style="opacity:1;image-rendering:auto" />
<use href="#tile050_end" id="image1-04" x="97.366661" y="125.22651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile050_end" id="image1-04-9-5" x="80.433342" y="78.655464" transform="matrix(3.7790177,0,0,3.7790193,64.006463,-249.25128)" style="opacity:1;image-rendering:auto" />
<use href="#tile050_end2" id="image1-63" x="97.366661" y="129.45984" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<g id="g23">
<use href="#tile048_mid" id="image1-14-5-79-2" x="80.433334" y="44.793186" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9" x="80.433334" y="65.959854" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8" x="80.433334" y="70.193184" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048" id="image1-60" x="80.433334" y="53.259853" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1" x="80.433334" y="57.493183" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-5-0-7-6" x="80.433334" y="27.859863" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-7-1-7-5-6" x="80.433334" y="36.326519" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_left" id="image1-272-0-8" x="118.53333" y="23.62652" transform="matrix(-3.7790177,0,0,3.7790193,831.90286,6.6976943)" style="opacity:1;image-rendering:auto" />
<use href="#tile050_end" id="image1-04-9" x="80.433342" y="78.655464" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile050_end2" id="image1-63-4" x="80.433334" y="82.893181" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<use href="#tile050_end2" id="image1-63-4-4" x="80.433334" y="82.893181" transform="matrix(3.7790177,0,0,3.7790193,64.006468,-249.26784)" style="opacity:1;image-rendering:auto" />
<g id="g27">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5" x="118.53333" y="65.959854" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-7" x="118.53333" y="74.426514" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9" x="118.53333" y="82.893181" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-9" x="118.53333" y="57.493183" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-1" x="118.53333" y="44.793186" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-7" x="118.53333" y="36.326519" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_left" id="image1-272-0" x="118.53333" y="23.62652" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-7-6" x="118.53333" y="27.859854" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_closed" id="image1-055-4-6" x="-122.76666" y="53.259853" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g40">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1" x="118.53333" y="95.593185" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4" x="118.53333" y="104.05984" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-9" x="118.53333" y="112.52651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_closed" id="image1-055-4-6-7" x="-122.76666" y="91.359856" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g43">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-9-2" x="118.53333" y="125.22651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-9-2-4" x="118.53333" y="129.45985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_closed" id="image1-055-4-6-7-3" x="-122.76666" y="120.99318" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g44">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-9-2-0" x="118.53333" y="142.15985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_closed" id="image1-055-4-6-7-9" x="-122.76666" y="137.92651" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g38">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5" x="118.53333" y="163.32651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5-8" x="118.53333" y="171.79317" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5-8-9" x="118.53333" y="180.25984" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-9-2-0-9-9" x="118.53333" y="154.85985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile051" id="image1-96-9-9" x="-122.76666" y="188.7265" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_closed" id="image1-055-4-6-7-6" x="-122.76666" y="150.62651" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g25">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-5" x="12.7" y="57.493183" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-7-1" x="12.7" y="65.959846" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5" x="12.7" y="74.426514" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-5-0" x="12.7" y="82.893188" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-7-1-7" x="12.7" y="91.359848" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4" x="12.7" y="99.826515" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-5-0-1" x="12.7" y="108.29317" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-7-1-7-2" x="12.7" y="116.75983" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1" x="12.7" y="125.22651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1-6" x="12.7" y="133.69318" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1-6-1" x="12.7" y="142.15985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_closed" id="image1-055" x="12.7" y="53.259853" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile051" id="image1-96-9-0" x="12.7" y="150.62651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g32">
<use href="#tile048_mid" id="image1-14-5-79-8" x="33.866665" y="125.22651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile050_end2" id="image1-63-5" x="33.866665" y="142.15985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile050_end" id="image1-04-6" x="33.866653" y="137.93089" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-8-9" x="33.866665" y="129.45984" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g45">
<use href="#tile048_mid" id="image1-14" x="67.73333" y="125.22651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile050_end2" id="image1-63-5-8" x="67.73333" y="142.15985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile050_end" id="image1-04-6-0" x="67.733337" y="137.92651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-0" x="67.73333" y="129.43355" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g34">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1-6-1-8" x="33.866665" y="154.85985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile051" id="image1-96-9" x="33.866665" y="188.7265" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_upclosed" id="image1-66-4-3" x="33.866665" y="150.62651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1-6-1-8-9" x="33.866665" y="163.32651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1-6-1-8-4" x="33.866665" y="171.79318" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-1-6-1-8-8" x="33.866665" y="180.25984" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g47">
<image width="16" height="32" xlink:href="/static/floorplan/icons/Pokemon/Tilesets/custom/tile051_open.png" id="image1-352" x="368" y="720" />
<use href="#tile048_upclosed" id="image1-66-4-4" x="80.433334" y="150.62651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5-2" x="80.433334" y="154.85985" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5-8-2" x="80.433334" y="163.32651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5-8-9-6" x="80.433334" y="171.79318" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-1-4-5-8-9-6-6" x="80.433334" y="180.25984" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<g id="g24">
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-7" x="12.699999" y="19.393179" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-5-5-0-7" x="12.699999" y="27.859856" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-7-1-7-5" x="12.699999" y="36.326511" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-4-4" x="12.699999" y="44.793186" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-9-5-7-94" x="12.7" y="10.926521" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_left" id="image1-66-2-1-5" x="-16.933332" y="6.6931887" transform="matrix(-3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
</g>
<use href="#tile050_open" id="image1-86" x="80.433334" y="188.7265" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-8-6" x="80.433334" y="104.05547" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-8-6-6" x="80.433334" y="112.52651" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_mid" id="image1-14-5-79-2-1-9-8-5-8" x="80.433334" y="95.593178" transform="matrix(3.7790177,0,0,3.7790193,64.00648,6.6976943)" />
<use href="#tile048_left" id="image1-272-0-8-1" x="118.53333" y="23.62652" transform="matrix(-3.7790177,0,0,3.7790193,831.90286,262.66325)" style="image-rendering:auto" />
</g>
</defs>
<sodipodi:namedview id="namedview1" pagecolor="#000000" bordercolor="#000000" borderopacity="0.25" showgrid="true" showguides="true">
<inkscape:grid id="grid1" units="px" originx="0" originy="0" spacingx="16" spacingy="16" empcolor="#0099e5" empopacity="0.30196078" color="#0099e5" opacity="0.14902" empspacing="2" dotted="false" gridanglex="30" gridanglez="30" visible="true" />
</sodipodi:namedview>
<!-- Listener for the daytime-Switch. To set the plan automatically to daytime-mode during daytime. -->
<circle cx="2" cy="2" r="2" id='daytime_listener' openhab="true" />
<!-- Setup the rooms -->
<use class="light" href="#outside" />
<use class="night" href="#outside" mask="url(#outside_colorRestoreMask)" />
<use class="light" href="#office" />
<use class="night" href="#office" mask="url(#office_colorRestoreMask)" />
<use class="light" href="#livingroom" />
<use class="night" href="#livingroom" mask="url(#wohnzimmer_colorRestoreMask)" />
<!-- ... -->
<use class="light" href="#bedroom" />
<use class="night" href="#bedroom" mask="url(#bedroom_colorRestoreMask)" />
<use class="light" href="#Walls" />
<use class="night" href="#Walls" mask="url(#Walls_colorRestoreMask)" />
<!-- Rain -->
<g id="rain" openhab="true" class="hide">
<use href="#raingroup" x="0" y="0" />
<use href="#raingroup" x="400" y="-250" />
<use href="#raingroup" x="544" y="0" />
<use href="#raingroup" x="6" y="250" />
<use href="#raingroup" x="560" y="250" />
<use href="#raingroup" x="0" y="500" />
<use href="#raingroup" x="544" y="500" />
</g>
</svg>Your SVG might already be finished at this point. What’s still missing is the connection to OpenHAB and the items that should react.
Linking with OpenHAB
Create a Page as a Canva layout.
After that, a few configurations are necessary. All widgets can be configured via the GUI. Normally, this would also be the case for SVG elements. However, since we are using many <use …> elements to reduce maintenance and effort, this unfortunately doesn’t work. That’s why I’ll also provide an excerpt of an example configuration here.
Day/Night
daytime_listener:
stateItems:
- siDaytime
stateOffAsStyleClass: daytime_listener:nighttime
stateOnAsStyleClass: daytime_listener:daytimeThe Daytime Listener is only used to receive the information whether it’s currently day or night. This must be a Switch item. Mine uses the sun elevation from the Astro binding. daytime_listener is the id of the SVG element (which must have openhab=”true” set). stateOffAsStyleClass: daytime_listener:nighttime assigns the class nighttime to the element when the day/night SwitchItem siDaytime is OFF.
Switch siDaytime "Day" { channel="astro:sun:local:position#elevation" [profile="system:hysteresis", lower="0 °"] }
Fog Effect
office:
stateItems:
- siOfficeFog
stateOnAsStyleClass: office:fogIt works similarly here with the fog effect, but applied to rooms with their respective ids. The room office gets the class fog when humidity is high. I measure this using an ESP32 with ESPHome.
Switch siBedroomFog { channel="mqtt:topic:myMosquitto:Arduino_51:680_humidity" [profile="system:hysteresis", lower="58 %"] }Light Cone
office_alex_light:
stateAsOpacity: true
stateItems:
- OfficeAlex_BrightnessHere I simply set the light intensity for the id office_alex_light. The light cone can thus be more or less pronounced, depending on the dimmer level. Groups can be ignored here; they are only relevant for my semantic naming scheme and for a dynamic light effect. The second channel can switch off a lamp if it hasn’t reported via Zigbee for a while.
Dimmer OfficeAlex_Brightness "Light" <DimmableLight> (igOfficeAlexLight,tgLSinterrupt)["Control", "Brightness"] { autoupdate="false", channel="mqtt:topic:myMosquitto:HueBulbOfficeAlex:brightness", channel="mqtt:topic:myMosquitto:HueBulbOfficeAlex:availability" }
Rain
rain:
stateItems:
- siRain
stateOffAsStyleClass: rain:hide
stateOnAsStyleClass: rain:showHere too, the goal is only to activate the element rain in the SVG to show when it’s currently raining. I determine this via OpenWeatherMap and a map that translates condition-id into a Switch, according to the OWM documentation.
Switch siRain "Weather condition" (sgEnvironment) { channel="openweathermap:onecall:api:mecklar:current#condition-id" [profile="transform:MAP", function="OWM_rainSwitch.map", sourceFormat="%s" ] }
200=ON
201=ON
202=ON
230=ON
231=ON
232=ON
300=ON
301=ON
302=ON
310=ON
311=ON
312=ON
313=ON
314=ON
321=ON
500=ON
501=ON
502=ON
503=ON
504=ON
511=ON
520=ON
521=ON
522=ON
531=ON
=OFF
Widgets
I document the widgets on separate pages. I also won’t go into their configuration here, since this can be done through the GUI.
Example Configuration
Code example
config:
activeIdx: 0
embedSvg: true
embeddedSvgActions:
daytime_listener:
stateItems:
- siDaytime
stateOffAsStyleClass: daytime_listener:nighttime
stateOnAsStyleClass: daytime_listener:daytime
office:
stateItems:
- siOfficeFog
stateOnAsStyleClass: office:fog
office_alex_light:
stateAsOpacity: true
stateItems:
- OfficeAlex_Helligkeit
rain:
stateItems:
- siRain
stateOffAsStyleClass: rain:hide
stateOnAsStyleClass: rain:show
terace_garden_light:
stateAsOpacity: true
stateItems:
- Terrasse_Helligkeit
terace_perch_light:
stateAsOpacity: true
stateItems:
- Terrasse_Helligkeit
fixedType: canvas
grid: 16
gridEnable: false
imageUrl: /static/floorplan/Poke.svg
label: ...
layoutType: fixed
order: "3"
scale: false
screenHeight: 1100
screenWidth: 800
showFullscreenIcon: true
sidebar: true
blocks: []
masonry: []
grid: []
canvas:
- component: oh-canvas-layer
config:
layerName: Controls
slots:
default:
- component: oh-canvas-item
config:
h: 40
w: 40
x: 451
y: 103
slots:
default:
- component: widget:ha_lightbulb
config:
dropshadow: Terrasse_Farbe
groupName: igTerrasseLight
switchItem: Terrasse_Helligkeit
- component: oh-canvas-item
config:
h: 34
w: 48
x: 752
y: 640
slots:
default:
- component: widget:ha_cam_popup
config:
camera: http://...
showControls: true
- component: oh-canvas-item
config:
h: 38
noCanvasShadow: true
w: 65
x: 484
y: 902
slots:
default:
- component: widget:ha_radiator_shadow
config:
groupName: igThermostatSchlafzimmer
radiatorItem: Arduino51_280Temp
roomItem: Arduino51_680Temp
- component: oh-canvas-item
config:
h: 96
w: 96
x: 576
y: 32
slots:
default:
- component: widget:ha_pokemon
config:
arrowColor: "#4682B4"
arrowHeight: 36px
arrowImage: f7:wind
between1: siWindBftFC
circleColor: "#444444"
circleWidth: 3px
direction: OpenWeatherMapWetterinformationen_Current_Windrichtung
direction_offset: "-136.5"
health1: siWindBft
max: 10
pokemon: "016"
pokemon2: "017"
pokemon3: "018"
rotateArrow: 90
threshold2: 3
threshold3: 6