Grafiken sind SVG-Zeichnungen, die mit der Installation verknüpft sind: ein Grundriss, dessen Leuchten aufleuchten, ein Heizungsschema mit drehenden Pumpen, ein Energiefluss, dessen Pfeile mit der Leistung wandern, oder ein Sicherheitsplan, dessen Türkontakte rot werden. Sie erstellen diese im Administrationsbereich auf der Seite Grafiken; Bewohner platzieren sie auf ihren Ansichten (siehe „Grafiken auf Ihren Ansichten“). Die Seite Grafiken ist ein eigener Eintrag in der Seitenleiste unter der Gruppe GEBÄUDE, direkt neben Logik.
Eine Grafik besteht aus vier Elementen:
| Element | Beschreibung |
|---|---|
| Die Zeichnung | Ein SVG-Dokument: eine selbst erstellte oder exportierte Datei, ein Hintergrundbild oder eine leere Zeichenfläche, die mit Symbolen bestückt wird |
| Symbole | Fertige Formen aus der Bibliothek (Lampe, Jalousie, Pumpe, Wert-Pille…), die auf der Zeichnung platziert werden und deren Bindings und Aktionen vorkonfiguriert sind |
| Bindings | Regeln, die eine Form bei einer Wertänderung anpassen: Farbe, Text, CSS-Klasse, Position, Animation |
| Aktionen | Das Verhalten bei Tippen, Doppeltippen oder langem Drücken auf eine Form: Gerät schalten, Szene ausführen, Raum öffnen, Ansicht aufrufen |
Die Seite Grafiken. Die Tabelle listet jede Grafik mit der Anzahl ihrer Bindings und Aktionen auf sowie der Information, wo sie Platziert ist („2 Ansicht(en)“ oder „nicht platziert“). Jede Zeile bietet Bearbeiten, Duplizieren, Exportieren und Löschen. Über der Tabelle befinden sich Neue Grafik und Bundle importieren.
⚠️ Warnung: Das Löschen einer Grafik, die auf Ansichten platziert ist, entfernt auch diese Platzierungen – der Bestätigungsdialog zeigt an, auf wie vielen.
Eine Grafik erstellen
Klicken Sie auf Neue Grafik. Der erste Bildschirm fragt nach dem Ausgangspunkt der Zeichnung:
| Ausgangspunkt | Ablauf | Abmessungen der Grafik |
|---|---|---|
| Aus einer SVG-Datei | Ihre Zeichnung dient als Grafik. Symbole werden darüber platziert und bestehende Formen können direkt angebunden werden. | Dateieigene Abmessungen |
| Aus einem Hintergrundbild | Ein Foto, ein gescannter Plan oder eine gerenderte Ansicht dient als Hintergrund. Die Grafik wird sofort erstellt und gespeichert, das Bild auf dem Server abgelegt. | Bildabmessungen |
| Leere Komposition | Eine leere Zeichenfläche – rein für Symbole, z. B. ein Logo. Wählen Sie Breitbild 16:10, Klassisch 4:3, Quadratisch oder Benutzerdefiniert (Breite/Höhe). | Gewählte Abmessungen |
| Beispiele | Zwei vollständige, mitgelieferte Grafiken: Energiefluss und Pumpstation. Sie werden als bearbeitbare Kopien importiert; Gerätereferenzen werden nach Namen zugeordnet. | Abmessungen des Beispiels |
Die Abmessungen einer Grafik bilden ihr Koordinatensystem, das im Reiter Quelle unter Grafikabmessungen angegeben ist. Sie können dies später ändern; die gesamte Zeichnung skaliert proportional mit. Ein Hintergrundbild übernimmt immer die exakten Abmessungen der Bilddatei.
💡 Tipp: Ein helles Bild (weißes Papier) erfordert unabhängig vom Theme der App dunkle Linien. Wenn Sie mit einem hellen Hintergrundbild starten, wird die Einstellung Farben automatisch auf Helle Zeichnung gesetzt (siehe unten unter „Testen, Einstellungen, Export“).
Der Editor
Der Editor ist zweispaltig aufgebaut. Auf der linken Seite stellt die Vorschau die Grafik exakt so dar, wie sie in den Apps erscheint, ergänzt um eine Werkzeugleiste:
| Schaltfläche | Funktion |
|---|---|
| Symbol einfügen | Öffnet die Symbolbibliothek (siehe Symbole unten) |
| Verschieben | Kompositionsmodus: Symbol ziehen zum Verschieben, am orangen Eckpunkt ziehen zum Skalieren, anklicken zum Bearbeiten der Bindings, Entf zum Löschen, Escape zum Abwählen |
| Auswählen | Beliebige Form der Zeichnung anklicken, um sie auszuwählen und ihre Bindings zu bearbeiten – für gezeichnete Vektorformen statt Symbole |
| Schwenken, Zoom -, Zoom + | In der Vorschau navigieren und zoomen; das Mausrad zoomt ebenfalls; Klick auf die Prozentanzeige setzt auf 100 % zurück. Der Zoom betrifft nur die Arbeitsansicht im Editor |
Auf der rechten Seite befinden sich vier Reiter:
- Quelle – Name, SVG hochladen, Grafikabmessungen und der SVG-Quelltext selbst, der direkt bearbeitet werden kann. Darunter das Ergebnis der Sicherheitsbereinigung: „Die Zeichnung passiert die Bereinigung unverändert“ oder die Liste der entfernten Elemente.
- Symbole (n) – alle auf der Zeichnung platzierten Symbole sowie Andere Elemente für die Formen der Zeichnung selbst (siehe Symbole unten).
- Testwerte – Werte in die Vorschau einspeisen (siehe unten unter „Testen, Einstellungen, Export“).
- Einstellungen – Beschreibung, Farben, Einpassung, Hintergrund, zusätzliches CSS und Bilddateien (siehe unten unter „Testen, Einstellungen, Export“).
Funktion der Sicherheitsbereinigung. Der Server bereinigt jede Zeichnung beim Speichern: Skripte, Event-Handler, externe Links und externe Bilder werden entfernt, Animationen auf sichere Attribute beschränkt. Eine Zeichnung darf maximal 2 MB groß sein. Alle Änderungen durch die Bereinigung werden unter dem Quelltext aufgeführt.
Speichern. Änderungen werden erst in den Apps wirksam, wenn Sie auf Speichern klicken. Ist ein Binding oder eine Aktion unvollständig – etwa ein Symbol ohne zugewiesenes Gerät oder ein Selektor ohne Treffer –, wird das Speichern verweigert und der Editor öffnet die entsprechende Zeile mit einer Erklärung.
Symbole
Symbole sind der schnellste Weg zum Aufbau einer Grafik: Jedes Symbol enthält bereits die benötigten Bindings und Aktionen. Das Platzieren einer Lampe und die Auswahl des zugehörigen Schaltkanals genügen, um sie funktionsfähig zu machen.
Die Bibliothek. Klicken Sie auf Symbol einfügen. Der Dialog ist nach Kategorien gegliedert und enthält ein Suchfeld.
| Kategorie | Symbol | Darstellung und Funktion |
|---|---|---|
| Beleuchtung | Lampe | Der Glaskolben leuchtet auf, wenn das Licht eingeschaltet ist; Antippen schaltet um |
| Klima | Heizkörper | Ein Heizkörper mit Temperaturanzeige; Antippen öffnet den Raum |
| Klima | Lüfter | Rotiert im Betrieb; Antippen schaltet um |
| Öffnungen | Jalousie | Ein Fenster, dessen Behangbehang der tatsächlichen Behanghöhe folgt |
| Technikraum | Pumpe | Grün und rotierend im Betrieb; Antippen schaltet nach Bestätigung um |
| Technikraum | Ventil | Ein Zwei-Wege-Ventil mit hervorgehobener Durchflussseite; Antippen schaltet um |
| Technikraum | Behälter | Ein Tank, dessen Füllstand und Prozentwert dem realen Pegel folgen |
| Energie | Solarpanel | Eine PV-Anlage mit Anzeige der aktuellen Erzeugungsleistung |
| Energie | Batterie | Ein Akku, dessen Füllstand dem Ladezustand (SoC) entspricht |
| Energie | Netz | Der Netzanschluss, grün bei Netzeinspeisung, mit Leistungsanzeige |
| Energie | Wallbox | Ein Fahrzeug, das während des Ladevorgangs aufleuchtet, inklusive Ladeleistung |
| Beschriftung | Flusslinie | Eine gestrichelte Linie, deren Segmente bei Stromfluss wandern – schneller bei höherer Leistung, rückwärts bei Richtungsumkehr |
| Beschriftung | Analoger Wert | Eine Werte-Pille für beliebige Messwerte mit Einheit; Antippen öffnet das Gerät |
| Beschriftung | Text | Ein frei definierbares Textfeld; wie jedes Symbol skalier- und drehbar |
| Beschriftung | Statusanzeige | Ein farbiger Punkt mit Statusbezeichnung für Binäreingänge – offen / geschlossen, ein / aus |
| Navigation | Hotspot, Hotspot (breit) | Eine unsichtbare Touch-Fläche über einem Raum im Grundriss; Antippen navigiert zu Raum, Kategorie, Ansicht oder Gerät. Nur im Editor blau hinterlegt, nie in App |
| Eigene Symbole | Eigene SVG-Dateien | Selbst hochgeladene Icons (siehe unten) |
Hotspots. Ein Hotspot ist ein Symbol ohne eigene Grafik: ein unsichtbares Rechteck, dessen gesamte Fläche auf Berührung reagiert. Platzieren Sie je einen Hotspot über jedem Raum eines Grundrisses, passen Sie die Größe über den Eckpunkt an und definieren Sie das Ziel in der Aktion (Gehe zu Raum ist vorkonfiguriert). Zur einfachen Bearbeitung wird er im Editor bläulich dargestellt; Bewohner sehen die Fläche nicht.
Platzieren und Verschieben. Bei Auswahl eines Symbols wird es in der Mitte der Zeichnung eingefügt, die Vorschau wechselt in den Modus Verschieben und das Eigenschaftenfenster des Symbols öffnet sich. Ziehen Sie es an die gewünschte Stelle, ziehen Sie am orangen Eckpunkt zur Größenänderung oder tragen Sie die Werte unter Platzierung ein: X, Y, Skalierung und Drehung. An Zeichenfläche anpassen skaliert und zentriert das Symbol auf die volle Grafikgröße – ideal für reine Logo-Grafiken. Ein gestrichelter Rahmen markiert die Begrenzung der Zeichenfläche: Elemente außerhalb werden in den Apps abgeschnitten.
Das Symbol-Bedienfeld. Oben verknüpft das Feld Gerät sämtliche Bindings und Aktionen des Symbols mit einem einzigen Klick mit dem gewünschten Gerät – bei den meisten Symbolen ist dies die einzige erforderliche Einstellung. Unter der Platzierung listen drei Reiter die Bindings, Aktionen und Animationen des Symbols auf. Symbol entfernen löscht das Symbol mitsamt allen zugehörigen Zeilen.
Text. Das Symbol Text gibt den im Feld Text eingetragenen Inhalt wieder. Über die Skalierung passen Sie die Schriftgröße an; Farbe oder Sichtbarkeit lassen sich wie bei jedem anderen Element dynamisch anbinden.
Andere Elemente. Die Vektorformen der SVG-Zeichnung selbst werden unter Andere Elemente anhand ihrer ID aufgeführt – Formen ohne ID können nicht angebunden werden. Vergeben Sie IDs im Quelltext-Reiter oder klicken Sie Elemente mit dem Werkzeug Auswählen an; weisen Sie ihnen anschließend wie gewohnt Bindings und Aktionen zu. Zeilen, deren Selektor eine CSS-Klasse oder ein Pfad statt einer ID ist, werden unter Zeilen auf anderen Selektoren zusammengefasst.
Eigene Symbole. In der Kategorie Eigene Symbole können Sie über Symbol hochladen eigene SVG-Icons ergänzen – etwa Kameras, Logos oder spezielle Geräte:
| Feld | Bedeutung |
|---|---|
| SVG-Datei | Das Icon, maximal 256 KB. Durchläuft dieselbe Sicherheitsbereinigung wie eine Zeichnung |
| Name | Bezeichnung in der Bibliothek |
| Farben | Einfarbig färbt das Icon in der Textfarbe der Zeichnung ein (für dynamische Farbwechsel rot/grün). Farben beibehalten erhält die Originalfarben (nur ein-/ausblenden möglich) |
| Schlagwörter | Suchbegriffe für das Suchfeld |
Ein benutzerdefiniertes Symbol enthält keine vorkonfigurierten Verknüpfungen: Fügen Sie die gewünschten Bindings und Aktionen nach dem Platzieren manuell hinzu. Jede Grafik speichert eine eigene Kopie des Symbols; das Umbenennen oder Löschen in der Bibliothek hat keine Auswirkung auf bestehende Grafiken.
Bindings
Ein Binding verändert eine Form, sobald sich ein zugewiesener Wert ändert. Öffnen Sie ein Symbol (oder ein Element unter Andere Elemente) und wählen Sie den Reiter Bindings. Jede Zeile umfasst vier Bereiche:
Selektor – bestimmt die angesteuerte Form. Bei Bibliothekssymbolen ist dieser vordefiniert (#lamp_1 .body), bei gezeichneten Elementen entspricht er der Element-ID.
Quelle – bestimmt den Ursprung des Werts:
| Quelle | Felder |
|---|---|
| Gerät | Ein Gerät und eines seiner Gruppenobjekte – Schaltzustand, Leistungswert, Sensor-Messwert |
| Funktion | Eine Logikfunktion und einer ihrer Ausgänge (siehe „Funktionseinrichtung & Ausgänge“) |
| Statisch | Ein fest eingetragener Wert – ideal zum Testen von Regeln oder Erzwingen fester Zustände |
Was ändert sich – bestimmt die Auswirkung auf die Form:
| Typ | Wirkung | Zusätzliche Felder |
|---|---|---|
| Attribut | Setzt ein SVG-Attribut (fill, stroke, opacity, width…) | Attributname |
| Stil | Setzt eine CSS-Eigenschaft | Eigenschaftsname |
| Text | Ersetzt den Text der Form durch den Wert | Nachkommastellen, Einheit und Vorlage wie {value} {unit} |
| Klasse | Weist bei aktivem Zustand eine CSS-Klasse zu und entfernt sie bei inaktivem Zustand | Klassenname – kombinierbar mit Zusätzliches CSS |
| Sichtbarkeit | Blendet die Form bei aktivem Zustand ein, andernfalls aus | — |
| Transformation | Dreht, verschiebt oder skaliert die Form basierend auf dem Wert | Transformationsart |
| Animation | Steuert eine Animationszeile (siehe unten): Aktiv bei Ein, Geschwindigkeit (Dauer), Richtung nach Vorzeichen | Animation und Modus |
| Symbol (href) | Ersetzt die Form durch ein anderes #symbol der Zeichnung | — |
Zuordnung – wandelt den Eingangswert in den Zielwert der Form um:
| Zuordnung | Funktionsweise | Beispiel |
|---|---|---|
| Direkt | Wert wird 1:1 übernommen | Temperaturwert in ein Textfeld |
| Ein / Aus | Ein Ergebnis für Ein, ein anderes für Aus | #facc15 bei Ein, #64748b bei Aus für Lampenfarbe |
| Bereich | Skaliert einen Wertebereich linear auf einen Zielbereich; Auf Bereich begrenzen kappt Enden, Betrag nutzen ignoriert Vorzeichen | 0–100 % auf Behangverschiebung von −28 bis 0 |
| Schwellenwerte | Stufen: Werte bis Grenzwert liefern ein Ergebnis, gefolgt von weiteren Stufen und einem Standardwert Andernfalls | Bis 15 rot, bis 30 orange, sonst grün für Füllstand |
| Werteliste | Exakte Wertetabelle mit Standardwert Andernfalls | 1 → Offen, 0 → Geschlossen für Statusanzeige |
💡 Tipp: Die Bibliothekssymbole dienen als ideale Vorlage: Fügen Sie eine Statusanzeige ein und betrachten Sie deren drei Bindings – Punktfarbe (Ein / Aus), Ringfarbe (Ein / Aus) und Statustext (Werteliste). Passen Sie die beiden Begriffe in der Werteliste auf „Offen“ und „Geschlossen“ oder „Scharf“ und „Unscharf“ an.
Aktionen
Eine Aktion führt beim Berühren einer Form einen Befehl aus. Öffnen Sie den Reiter Aktionen eines Symbols oder weisen Sie einer gezeichneten Form eine Aktion zu.
| Feld | Optionen |
|---|---|
| Selektor | Die Form, die die Geste empfängt – in der Regel das gesamte Symbol |
| Geste | Tippen, Doppeltippen, Langes Drücken |
| Ausführung | Gerätewert setzen (mit Zu sendender Wert) · Gerät umschalten · Gerätewert schrittweise ändern · Raum des Geräts öffnen · Gerätedetails öffnen (zugehörige Kachelseite; sonst Raum) · Szene ausführen · Automation ausführen · Globalbefehl (Licht oder Jalousie für Gebäude, Raum oder Kategorie) · Gehe zu Ansicht · Gehe zu Raum · Gehe zu Kategorie |
| Bestätigung anfordern | Sicherheitsabfrage vor Ausführung, z. B. Pumpe starten?. Leer lassen für sofortige Ausführung |
Dieselbe Form kann mehrere Aktionen für unterschiedliche Gesten enthalten: Im Beispiel Pumpstation schaltet ein einfaches Antippen die Pumpe um (nach Bestätigung), während ein langes Drücken die Gerätedetails öffnet.
📘 Hinweis: Gerätebefehle, Szenen und Automationen werden direkt auf dem Server ausgeführt – unabhängig vom bedienenden Client. Raum des Geräts öffnen, Gerätedetails öffnen, Globalbefehl, Gehe zu Ansicht, Gehe zu Raum und Gehe zu Kategorie finden lokal in der jeweiligen App statt und können in der Administrator-Vorschau nicht ausgeführt werden.
📘 Hinweis: Benutzer sehen und nutzen nur Aktionen, für die ihr Benutzerkonto berechtigt ist. Ein Symbol, das mit einem Gerät außerhalb der freigegebenen Räume oder Kategorien verknüpft ist, bleibt für diesen Benutzer eine passive Zeichnung. Ein Globalbefehl auf Gebäudeebene ist Administratoren vorbehalten.
Animationen
Eine Animationszeile versetzt eine Form in eine kontinuierliche Bewegung – etwa ein rotierendes Pumpenrad, wandernde Segmente auf einer Linie oder eine blinkende Leuchte –, die über Bindings gestartet, gestoppt, beschleunigt oder in der Richtung umgekehrt werden kann.
| Feld | Bedeutung |
|---|---|
| Ziel | Die animierte Form (#pump_1 .rotor) |
| Attribut | Animiertes Attribut: transform für Bewegungen oder Attribute wie stroke-dashoffset oder opacity |
| Transformation | Bei transform: rotate, scale, translate, skewX, skewY – Drehungen erfolgen um den Mittelpunkt des Symbols |
| Von, Bis | Start- und Endwerte |
| Dauer | Zeit für einen Zyklus, z. B. 1s |
| Wiederholung | Anzahl der Durchläufe oder indefinite (endlos) |
| Start | indefinite bei Start über Binding, load für sofortigen Start beim Laden oder eine SMIL-Bedingung wie pump1.click; spin.end+1s |
| Ende, Fill | Standard-SMIL-Bedingungen für das Ende und den Zustand nach dem Stoppen |
Um eine Animation an die Installation zu koppeln, erstellen Sie ein Binding mit dem Typ Animation: Aktiv bei Ein startet und stoppt die Animation mit einem Status, Geschwindigkeit (Dauer) steuert den Zyklus über einen Messwert (Bereichszuordnung von Watt in Sekunden) und Richtung nach Vorzeichen kehrt die Bewegung bei negativen Werten um – das Symbol Flusslinie nutzt alle drei Optionen.
Testen, Einstellungen, Export
Testwerte. Der Reiter stellt für jeden angebundenen Datenpunkt ein Eingabefeld bereit, sodass Sie Werte manuell eingeben und die Reaktion der Vorschau prüfen können. Aktivieren Sie Live-Werte, um die Vorschau direkt mit den realen Werten der Installation zu speisen. Aktionen testen (erfordert aktive Live-Werte) bewirkt, dass Klicks in der Vorschau reale Befehle auf dem Server ausführen – Schalten von Geräten, Ausführen von Szenen und Automationen. Reine App-Aktionen (Raum öffnen, Globalbefehle, Ansichtenwechsel) werden protokolliert, aber nicht ausgeführt.
Einstellungen.
| Einstellung | Bedeutung |
|---|---|
| Beschreibung | Ein Hinweistext in der Übersicht |
| Farben | App-Theme folgen – Symbole und Texte übernehmen die Textfarbe der App; Helle Zeichnung – dunkle Linien unabhängig vom Theme (für weiße Hintergrundbilder); Dunkle Zeichnung – helle Linien unabhängig vom Theme |
| Einpassung | Verhalten innerhalb der Kachel: contain zeigt die gesamte Grafik vollständig, cover füllt die Fläche aus und schneidet Ränder ab |
| Hintergrund | Hintergrundfarbe der Zeichnung oder transparent |
| Min. Höhe (px) | Mindesthöhe der Kachel in Pixeln |
| Zusätzliches CSS | Ein Stylesheet für die Zeichnung – CSS-Klassen für Klassen-Bindings, Keyframes, Übergänge |
| Bilddateien | Referenzierte Bilder der Zeichnung (PNG, JPEG, WebP). Bild hochladen fügt eine Datei hinzu; Als Hintergrund verwenden setzt das Bild als Hintergrund und skaliert die Grafik entsprechend. Genutzte Bilder sind als in Verwendung markiert; beim Ersetzen bietet der Editor an, die bisherige Datei zu löschen |
Export und Import. Über Exportieren laden Sie eine Grafik als Bundle-Datei herunter: Zeichnung, Verknüpfungen, Einstellungen und Bilder in einer einzigen Datei. Bundle importieren auf der Seite Grafiken erstellt daraus eine neue Grafik. Verweise auf Geräte, Funktionen, Szenen und Ansichten werden nach Namen zugeordnet; nicht gefundene Bezüge werden entfernt und in der Import-Zusammenfassung aufgeführt. Auf diese Weise lassen sich Grafiken zwischen Installationen übertragen.
Datensicherung. Grafiken und benutzerdefinierte Symbole liegen in der Server-Datenbank und sind Bestandteil des Server-Backups (siehe „Backup & Wiederherstellung“). Eingebundene Bilddateien werden im Dateisystem abgelegt und sind nicht im Backup enthalten: Exportieren Sie die Grafik als Bundle, um Bilder und Zeichnung gemeinsam zu sichern.