{"id":2651,"date":"2025-04-05T20:06:59","date_gmt":"2025-04-05T19:06:59","guid":{"rendered":"https:\/\/ipsview.brownson.at\/?p=2651"},"modified":"2025-04-05T20:20:49","modified_gmt":"2025-04-05T19:20:49","slug":"floorplan-erstellen","status":"publish","type":"post","link":"https:\/\/ipsview.brownson.at\/?p=2651","title":{"rendered":"Floorplan erstellen"},"content":{"rendered":"

Erstellung eines Floorplans<\/h1><\/div>

Da es immer wieder mal Fragen zur Erstellung eines Floorplans gibt, m\u00f6chte ich dem Thema auch mal einen Beitrag widmen.<\/h3>\n<\/div>
<\/div><\/div><\/div><\/div><\/div>
<\/div>
<\/div><\/div>
<\/div>\n
<\/div><\/div><\/div>
<\/a><\/span><\/mask><\/g><\/g><\/clipPath><\/filter><\/defs><\/svg><\/div><\/div><\/div>
<\/div><\/div><\/div>

Floorplan platzieren<\/h1><\/div>

Als ersten Schritt platzieren wir den Floorplan auf der Seite.<\/h3>\n

Wichtig ist, dass wir das Bild als eigenst\u00e4ndiges Steuerelement auf der Zeichenfl\u00e4che platzieren (die Konfiguration als Hintergrundbild einer Seite ist hier nicht zu empfehlen, da es bei einer Anpassung der Seitengr\u00f6\u00dfe zu einer Verschiebung der Bedienelemente kommen kann.<\/h3>\n

Wir platzieren also das Steuerelement „Bild“ auf unsere Seite und Laden unseren Floorplan im Property-Editor.<\/h3>\n<\/div>

<\/h3>\n<\/div>
<\/div><\/div><\/div>

Alternativ k\u00f6nnt ihr den Floorplan auch als MediaImage einbinden.<\/h3>\n

Dazu legt ihr in Symcon einfach ein MediaObjekt in der Konsole an und speichert den Floorplan dort ab.<\/h3>\n

In IPSView k\u00f6nnt ihr den Floorplan dann als MediaImage in die View einbinden.<\/h3>\n

Vorteil dabei, die Floorplan Images belasten nicht die Gr\u00f6\u00dfer eurer View, m\u00fcssen aber beim erstmaligen Laden der View vom Server geladen werden. Danach werden sie am Client zwischengespeichert.<\/h3>\n<\/div>

<\/h3>\n<\/div>
<\/div><\/div><\/div>
<\/a><\/span><\/mask><\/g><\/g><\/clipPath><\/filter><\/defs><\/svg><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div>
<\/div>
<\/div><\/div>
<\/div>\n
<\/div><\/div><\/div>
<\/a><\/span><\/mask><\/g><\/g><\/clipPath><\/filter><\/defs><\/svg><\/div><\/div><\/div>
<\/div><\/div><\/div>

Steuerelemente<\/div><\/h1><\/div>

Im n\u00e4chsten Schritt k\u00f6nnt ihr bereits die einzelnen Steuerelemente eures Floorplans platzieren.<\/h3>\n

Beispielsweise einen ToggleButton zum Schalten eines Lichtes.<\/h3>\n<\/div>
<\/div><\/div><\/div>

Oder auch ein einfaches VariableLabel zur Darstellung der aktuellen Temperatur im Raum.<\/h3>\n<\/div>
<\/div><\/div><\/div>
<\/a><\/span><\/mask><\/g><\/g><\/clipPath><\/filter><\/defs><\/svg><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div>
<\/div>
<\/div><\/div>
<\/div>\n
<\/div><\/div><\/div>

\n
Layer<\/div>\n<\/div><\/h1><\/div>

Um euch die Arbeit im Designer etwas zu erleichtern, k\u00f6nnt ihr das Floorplan Image auch per Drag & Drop in den Hintergrund Layer verschieben und diesen auf „Durchsichtig“ schalten.<\/h3>\n

Dadurch wird verhindert, dass ihr das Image versehentlich ausw\u00e4hlt und verschiebt.<\/h3>\n<\/div>
<\/div><\/div><\/div>
<\/a><\/span><\/mask><\/g><\/g><\/clipPath><\/filter><\/defs><\/svg><\/div><\/div><\/div>
<\/div><\/div><\/div><\/div><\/div>
<\/div>
<\/div><\/div>
<\/div>\n
<\/div><\/div><\/div>
<\/a><\/span><\/mask><\/g><\/g><\/clipPath><\/filter><\/defs><\/svg><\/div><\/div><\/div>
<\/div><\/div><\/div>

Seite<\/h1><\/div>

Final empfehle ich euch bei den Einstellungen der Seite noch die Option „Gr\u00f6\u00dfe an Container Breite anpassen“.<\/h3>\n

Dadurch passt sich die Seite automatisch an die verf\u00fcgbare Breite in eurem Container an und die Gr\u00f6\u00dfenverh\u00e4ltnisse werden nicht verzerrt.<\/h3>\n<\/div>
<\/div><\/div><\/div><\/div><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17],"tags":[171,81,170],"class_list":["post-2651","post","type-post","status-publish","format-standard","hentry","category-howto","tag-bild","tag-floorplan","tag-image"],"_links":{"self":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/2651","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2651"}],"version-history":[{"count":6,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/2651\/revisions"}],"predecessor-version":[{"id":2675,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=\/wp\/v2\/posts\/2651\/revisions\/2675"}],"wp:attachment":[{"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2651"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2651"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ipsview.brownson.at\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2651"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}