Inspiriert worden bin ich von katschung auf reddit mit seinem Pokémon-Style Floorplan und ich wollte dieser Idee gerne auf OpenHAB nacheifern um gehirngerecht steuerbare Oberflächen für mein Smarthome zu generieren.
Ich erstelle ein Standard-svg mit Inkscape in einer bestimmten Struktur. Diese will ich dir wie folgt erklären, damit du in der Lage bist, für deine Situation auch so einen Floorplan zu erstellen.
Funktionen
- im SVG
- Automatisches Umschalten in Tag-Nachtmodus
- keine doppelten Bilder benötigt
- Einzelne und kombinierte Lichtquellen im Nachtmodus
- Lichtkegel kann allgemein angepasst werden
- Lichtkegelintensität kann pro Lichtquelle angepasst werden
- Lichtkegel kann auf Räume Beschränkt werden
- Nebeleffekt pro Raum (zur Darstellung hoher Luftfeuchte)
- Automatisches Umschalten in Tag-Nachtmodus
- durch Widgets (diese werde ich in separaten Seiten dokumentieren)
- Kamera Widget: Button zum Aufrufen eines Kamerabilds in HLS oder MJPEG
- Lampen-Widget
- Ein/Aus bei kurzem Anklicken (Mobil) / Linksklick (Desktop)
- Erweitertes Menü bei langem Anklicken (Mobil) / Rechtsklick (Desktop)
- Lampenfarbe entsprechend Lichtfarbe
- Thermostat-Widget (Wiederverwendeung des Lampen-Widgets mit anderem Symbol und anderer Farbskala)
- Erweiterte Informationen bei Anklicken
- Farbänderung entsprechend Messwerten
- Pokemon-Widget (zum Visualisieren von Umgebungseffekten)
- Anzeigen von Messwerten oder Prognosen als Lebensleiste, einschließlich Einheiten
- Max. Lebenspunkte Absolut oder mit zusätzlichem Item möglich
- Anzeigen zusätzlicher Werte in zeitlicher Abfolge, z.B. Prognosen für Folgetage
- Evolution / Änderung beim Überschreiten von Grenzwerten
- Speziell: Richtungs-Kreis z.B. zur Visualisierung von Windrichtungen
- Erweiterte Informationen bei Anklicken
- Anzeigen von Messwerten oder Prognosen als Lebensleiste, einschließlich Einheiten
- Glow-Widget (zum Visualisieren von Glow-Effekten, z.B. für Heizung und Bildschirme)
- simple Glow-Aura an einem Objekt (z.B. blau für eingeschaltete Bildschirme, rot für laufende Heizungen)
- Erweitertes Menü beim Anklicken (zum Steuern der Objekte, z.B. Heizungssteuerung)
Umsetzung des SVG-Floorplans
Räume erstellen
Ich erstelle die Räume in Inkscape. Allerdings hab ich an vielen Stellen manuell nochmal nachgearbeitet. Achte darauf, dass die Breiten- und Höhenangaben Pixeln entsprechen. Sonst wird die manuell Nachbearbeitung später komplex. Den Fehler habe ich gemacht, eine Rückrechnung und Umwandlung ist dann gar nicht mehr so einfach.
Erstelle deine Räume dann jeweils in einzelnen Gruppen. Jeder Raum muss eine Gruppe sein. Darin können sich dann auch weitere Gruppen für einzelne Möbel oder sonstige Gegebenheiten befinden, die zum Raum gehören. Diese Unterteilung ist wichtig, um später Effekte auf einen Raum begrenzen zu können.
Erst wenn du ganz zufrieden mit deinem Floorplan bist, solltest du mit dem nächsten Schritt weitermachen, denn von hier aus wir viel manuell im XML-Code passieren.
Das sollte dieser Bereich hier sein:
<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 …> Konfigurieren
Räume
Die Räume werden alle in den <defs .. >-Bereich übertragen. In meinem Beispiel stehen diese alle unter dem Kommentar
<!-- Room-Definitions, to make the rooms reusable and avoid defining them twice: light mode and dark mode -->Dabei muss jeder Raum eine sprechende id und das Attribut openhab=“true“ besitzen. Die id um den Raum eindeutig zu definieren und openhab=“true“, damit OpenHAB nachher weiß, dass es mit diesem Objekt interagieren kann.
Texturen zentralisieren (optional)
Unter dem Kommentar
<!-- Floor-Pattern Definitions, to save some code -->definiere ich eine Reihe von Texturen, die in den Räumen wiederverwendet werden. Das verringert Code und macht Änderungen später einfacher.
Nebel-Effekt
<!-- Animated fog -->Dieser Block definiert den Effekt. Den kannst du genau so übernehmen. Oder modifizieren. Aber ich bin sehr glücklich damit. Ich zeige mir damit an, wenn in einem Raum eine hohe Luftfeuchte herrscht. Seit dem lüftet meine Frau auch viel mehr =)
Regen-Effekt
<!-- Rain -->Dieser Block definiert ein paar Formen, welche wie Regen aussehen, wenn sie sich bewegen. Es handelt sich hierbei um einen fertigen Regen-Block, der an mehreren Stellen dann gesetzt werden kann.
Licht- und Schatten-Effekte
Hierfür sind mehrere Konfigurationen notwendig. Auf die Zwecke gehe ich wie folgt ein.
<!-- Color-Definition for the Night-Mode -->Dieser Block definiert die Farbverschiebung, die für Dunkelheit verwendet werden soll. Ich habe mich hier für ein dunkles Anthrazit entschieden. Mit dieser Farbverschiebung wir dein Floorplan automatisch angepasst und du benötigst keine zwei Versionen davon.
<!-- Gradient definition (be strong at the center and weak at the edge: this definition approximates a logarithmic gradient) -->Hier wird der Lichteffekt definiert. Ich habe mich für eine Variante entschieden, die den Kern sehr Hell und die Randbereiche dunkel macht, allerdings nicht linear. Hier wird eine logarithmische Kurve näherungsweise dargestellt, um einen hellen Kern und dann schnell schwächer werdende Bereiche darzustellen. Kann auch so übernommen werden.
<!-- 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>
<!-- ... -->Die konkreten Positionen, Größen und Zuordnungen deiner Lichtquellen. Hier musst du Anpassungen vornehmen. In dem Beispiel oben hab ich gleich zwei Fälle.
terace_garden_light ist eine einzelne Lichtquelle. Position wird mit cx und cy gesetzt, und der Radius mit r gesetzt. fill=“url(#light_gradient)“ ist obligatorisch, das lässt sich nach meinem derzeitigen Stand nicht zentral setzen. Es setzt den allgemeinen Lichteffekt konkret für diesen Fall. id muss wieder sprechend und eindeutig sein und openhab=“true“, damit OpenHAB das Licht hier später ein- und ausschalten kann.
terace_perch_light ist eine Gruppe von Lichtquellen, die gleichzeitig schalten können. Wenn du mehrere Lichter hast, die das eben tun, ohne alles einzeln zu konfigurieren.
<!-- Room sepatations (to prevent, that light areas are seen in other rooms) -->
<!-- ... -->
<mask id="bedroom_colorRestoreMask">
<rect width="100%" height="100%" fill="white" />
<use href="#bedroom_light" />
</mask>
<!-- ... -->Die Masken, die die Lichteffekte auf einzelne Räume begrenzen. Du willst nicht, dass eine Lichtquelle auch einen anderen geschlossenen Raum beeinflusst. Hier werden die zusammengehörigen Bereiche definiert. Dabei wird jede Maske mit <rect … /> mit weiß gefüllt. Diese Masken sind in Graustufen definiert und bestimmen, an welchen Stellen, wie die definierten Lichtquellen angezeigt werden. Mit dieser Füllung erstmal nirgendwo.
<use href=“#bedroom_light“ /> setzt dann den Lichteffekt auf die Maske für den Raum.
Zentrale Definitionen
<style id="style1">
.nighttime ~ .night {
filter: url(#nightFilter);
}
.hide { display: none; }
.fog { filter: url(#fogFilter); }
.opacity0 { opacity: 0; }
.opacity1 { opacity: 1; }
</style>Dieser Bereich definiert und setzt zentral ein paar Einstellungen.
- .nighttime ~ .night stellt den Nachtfilter dar, sobald OpenHAB die Klasse .nighttime an das richtige Objekt setzt
- .hide blendet Elemente aus. Konkret hier ist das der Regeneffekt, der Standardmäßig ausgeschaltet ist und von OpenHAB aktiviert werden kann
- .fog setzt den Nebel-Effekt
- .opacity0, .opacity1 steuern Aura-Effekte von Bildschirmen, sodass eingeschaltete Bildschirmgeräte entsprechend dargestellt werden können
Inhalts-Blöcke
<!-- 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" />Dieser Teil ist unterhalb der Definitionen und ein echtes Element. OpenHAB fügt hier die Klasse .nighttime hinzu, wenn es Nacht wird. Damit werden dann alle Licht- und Schatteneffekte schtbar.
<!-- 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)" />An dieser Stelle werden die definierten Räume konkret gesetzt. Jeweils zweimal. Einmal als Tag-Version und einmal für nachts. Dabei werden die oben definierten Masken zugeordnet, damit die Nachtversion für Lichtquellen an diesen Stellen ausgespart wird.
<!-- 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>Zum Schluss der Regen. Hier wird einfach der Regen-Kasten mehrfach im SVG verteilt, damit überall in den Außenbereichen Tropfen zu sehen sind.
Vollständiges SVG-Beispiel
Aufklappen
<?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>Deine SVG ist jetzt vielleicht schon fertig. Es fehlt noch die Verbindung zu OpenHAB und deinen Items, auf die reagiert werden soll.
Verknüpfung mit OpenHAB
Lege eine Page als Canva-Layout an.
Danach sind einige Konfigurationen nötig. Die Widgets lassen sich alle über die GUI konfigurieren. Normalerweise wäre das bei den SVG-Elementen auch der Fall. Da wir allerdings viele <use …>-Elemente verwenden, um Wartung und Aufwand zu sparen, funktioniert das leider nicht. Daher werde ich hier auch einen Auszug einer Beispielkonfiguration angeben.
Tag/Nacht
daytime_listener:
stateItems:
- siDaytime
stateOffAsStyleClass: daytime_listener:nighttime
stateOnAsStyleClass: daytime_listener:daytimeDer Daytime-Listener dient nur dazu, die Information entgegenzunehmen, ob gerade Tag oder Nacht ist. Das muss ein Switch-Item sein. Meines verwendet den Sonnenstand aus dem Astro-Binding. daytime_listener ist die id des SVG-Elements (welches openhab=“true“ gesetzt haben muss). stateOffAsStyleClass: daytime_listener:nighttime setzt die Klasse nighttime für das Element, wenn das Tag/Nacht-SwitchItem siDaytime ausgeschaltet ist
Switch siDaytime "Tag" { channel="astro:sun:local:position#elevation" [profile="system:hysteresis", lower="0 °"] }
Nebel-Effekt
office:
stateItems:
- siOfficeFog
stateOnAsStyleClass: office:fogÄhnlich geht es hier mit dem Nebeleffekt weiter, allerdings auf die Räume mit ihren jeweiligen ids. Der Raum office bekommt die Klasse fog zugewiesen, wenn die Luftfeuchte hoch ist. Diese ermittel ich aus einem ESP32 mit ESPHome
Switch siBedroomFog { channel="mqtt:topic:myMosquitto:Arduino_51:680_humidity" [profile="system:hysteresis", lower="58 %"] }Lichtkegel
office_alex_light:
stateAsOpacity: true
stateItems:
- OfficeAlex_HelligkeitHier setze ich einfach die Lichtstärke für die id office_alex_light . Der Lichtkegel kann so mehr oder weniger stark ausgeprägt sein, abhängig vom Dimmer-Level. Die Gruppen können vernachlässigt werden und sind relevant für mein semantisches Namensschema und für einen dynamischen Lichteffekt. Der zweite Kanal kann eine Lampe ausschalten, wenn sie sich eine Zeit lang nicht via Zigbee gemeldet hat.
Dimmer OfficeAlex_Helligkeit "Licht" <DimmableLight> (igOfficeAlexLight,tgLSinterrupt)["Control", "Brightness"] { autoupdate="false", channel="mqtt:topic:myMosquitto:HueBulbOfficeAlex:brightness", channel="mqtt:topic:myMosquitto:HueBulbOfficeAlex:availability" }
Regen
rain:
stateItems:
- siRain
stateOffAsStyleClass: rain:hide
stateOnAsStyleClass: rain:showAuch hier geht es nur darum, das Element rain im SVG zu aktivieren um anzuzeigen, wenn es gerade regnet. Das ermittel ich mittels OpenWeatherMap und einer Map, die condition-id auf ein Switch umsetzt, entsprechend der Doku von OWM.
Switch siRain "Wetterlage" (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
Die Widgets dokumentiere ich in separaten Seiten. Auch gehe ich hier nicht auf die Konfiguration ein, da diese mittels GUI konfigurierbar sind.
Beispiel-Konfiguration
Beispiel-Konfiguration
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
Pingback: Pokémon Widget für OpenHAB - Smarthome DIY - Heimautomatisierung selbst gemacht
Pingback: Licht-Steuer-Widget für OpenHAB - Smarthome DIY - Heimautomatisierung selbst gemacht
Pingback: Aura-Schatten-Widget für OpenHAB - Smarthome DIY - Heimautomatisierung selbst gemacht
Pingback: Kamera-Popup-Widget für OpenHAB - Smarthome DIY - Heimautomatisierung selbst gemacht