Erstellung eines Floorplans

Da es immer wieder mal Fragen zur Erstellung eines Floorplans gibt, möchte ich dem Thema auch mal einen Beitrag widmen.

Floorplan platzieren

Als ersten Schritt platzieren wir den Floorplan auf der Seite.

Wichtig ist, dass wir das Bild als eigenständiges Steuerelement auf der Zeichenfläche platzieren (die Konfiguration als Hintergrundbild einer Seite ist hier nicht zu empfehlen, da es bei einer Anpassung der Seitengröße zu einer Verschiebung der Bedienelemente kommen kann.

Wir platzieren also das Steuerelement „Bild“ auf unsere Seite und Laden unseren Floorplan im Property-Editor.

Alternativ könnt ihr den Floorplan auch als MediaImage einbinden.

Dazu legt ihr in Symcon einfach ein MediaObjekt in der Konsole an und speichert den Floorplan dort ab.

In IPSView könnt ihr den Floorplan dann als MediaImage in die View einbinden.

Vorteil dabei, die Floorplan Images belasten nicht die Größer eurer View, müssen aber beim erstmaligen Laden der View vom Server geladen werden. Danach werden sie am Client zwischengespeichert.

Steuerelemente

Im nächsten Schritt könnt ihr bereits die einzelnen Steuerelemente eures Floorplans platzieren.

Beispielsweise einen ToggleButton zum Schalten eines Lichtes.

Oder auch ein einfaches VariableLabel zur Darstellung der aktuellen Temperatur im Raum.

Layer

Um euch die Arbeit im Designer etwas zu erleichtern, könnt ihr das Floorplan Image auch per Drag & Drop in den Hintergrund Layer verschieben und diesen auf „Durchsichtig“ schalten.

Dadurch wird verhindert, dass ihr das Image versehentlich auswählt und verschiebt.

Seite

Final empfehle ich euch bei den Einstellungen der Seite noch die Option „Größe an Container Breite anpassen“.

Dadurch passt sich die Seite automatisch an die verfügbare Breite in eurem Container an und die Größenverhältnisse werden nicht verzerrt.