Visualisierung in DOMIQ/Remote

Die Registerkarte „Display“ (Visualisierung) ist ein fortschrittlicher Grafikeditor, der direkt in den DOMIQ-Konfigurator integriert ist. Er ermöglicht die Erstellung interaktiver Bedienpanels für das Haus. Diese Funktion ist das Markenzeichen des Systems und erlaubt die Steuerung der Installation über die DOMIQ/Remote-App, die DOMIQ/Display-Panels sowie über jeden beliebigen Webbrowser.

1. Aufbau der Benutzeroberfläche #

Der Editor ist in mehrere Schlüsselbereiche unterteilt, die den Designprozess erleichtern:

1. Button-Leiste (Unter der Registerkarte „Display“): Enthält Werkzeuge zur Verwaltung der gesamten Visualisierung, wie das Hinzufügen neuer Bildschirme und Ebenen, das Kopieren/Einfügen von Elementen sowie Funktionen zum Importieren/Exportieren von -Dateien. Hier finden Sie auch die Schaltfläche „.xml“, die die fertige Konfiguration in den Speicher des Base-Moduls überträgt.
2. Struktur (Linke Seite „Structure“): Zeigt den hierarchischen Baum Ihres Projekts an. Auf der Hauptebene befinden sich Bildschirme („Screen“), innerhalb derer sich Ebenen („Layer“) und einzelne Steuerelemente befinden können.
3. Attributtabelle (Unten links): Wenn Sie auf ein beliebiges Element in der Strukturliste oder direkt im Editor klicken, erscheinen hier dessen detaillierte Parameter (z. B. X/Y-Koordinaten, zugewiesener Kommunikationskanal, Hintergrundbild).
4. Visualisierungs-Editor (Rechte Seite): Eine interaktive Vorschau, in der Sie Steuerelemente per Drag & Drop auf dem ausgewählten Hintergrund platzieren können.

2. Schlüsselbegriffe: Bildschirme und Ebenen #

1. Bildschirm (Screen): Dies ist die Basisansicht, die einer einzelnen Bedienoberfläche in der Anwendung entspricht. Jeder Bildschirm muss eine eindeutige ID haben. Der Bildschirm mit dem Namen „main“ wird beim Start der Steuerungs-App als erster angezeigt. Für jeden Bildschirm können Sie ein eigenes Hintergrundbild festlegen (z. B. einen Grundriss mit einer empfohlenen Auflösung von 800×600 px) oder eine URL zu einer Grafik angeben, die auf externen Servern gehostet wird. Dies ist besonders nützlich, wenn Sie Grafiken mit höheren Auflösungen und größeren Dateigrößen verwenden möchten.
2. Ebene (Layer): Dient zur Gruppierung von Steuerelementen (z. B. „Beleuchtung“, „Heizung“). Ebenen sind äußerst praktisch, da ihre Sichtbarkeit kollektiv gesteuert werden kann – so kann beispielsweise durch Klicken auf eine einzige Schaltfläche in der Visualisierung eine ganze Gruppe von Symbolen ein- oder ausgeblendet werden, was die Übersichtlichkeit der Benutzeroberfläche erheblich verbessert.

Ansicht des Bildschirms Haus (House) mit den Ebenen Licht (Lights) und Temperatur (Temperature):

3. Arten der verfügbaren Steuerelemente #

Sie erstellen die Visualisierung aus fertigen Elementen, die Sie aus der Liste im Visualisierungs-Editor (Visualization Editor) in den Projektbereich ziehen:

1. Licht (Light): Das universellste Steuerelement. Es kann zum Ein-/Ausschalten von Lampen, zur Steuerung von Rollläden (Modus Auf/Ab/Stop) oder zur Anzeige des Status von Bewegungsmeldern verwendet werden.
2. Schalter (Switch): Dies ist eine bistabile Schaltfläche, die zur Steuerung einer beliebigen ID auf Ein/Aus-Basis dient. Im Gegensatz zu einer normalen Schaltfläche zeigt der Schalter seinen aktuellen Status direkt in der Visualisierung an.
3. Toggle (Steuerungsart): Im Visualisierungseditor erscheint „Toggle“ (Ein/Aus) nicht als eigenständiges Bedienelement in der Liste „Neu“, ist jedoch eine zentrale Steuerungsart für das Element Licht. Die Auswahl dieser Option bewirkt, dass jedes Antippen des Symbols auf dem Bildschirm abwechselnd die Befehle on undoff an den zugewiesenen Kanal sendet.
4. Dimmer: Ein dediziertes Steuerelement zur Bedienung von dimmbaren Ausgängen. Ein kurzes Drücken funktioniert wie ein Schalter (Ein/Aus), während ein langes Gedrückthalten (länger als eine Sekunde) eine stufenlose Helligkeitsänderung startet. Auf dem Steuerelement wird der Prozentwert der Helligkeit angezeigt.
5. Wert (Value) / Temperatur (Temperature): Diese zeigen numerische Daten an, wie die aktuelle Temperatur, Luftfeuchtigkeit oder den Energieverbrauch.
6. Text: Ermöglicht es, beliebige Textinhalte in der Visualisierung zu platzieren. Es kann einen in der Konfiguration eingegebenen statischen Text anzeigen oder dynamisch Inhalte von einer ausgewählten ID abrufen (z. B. den Namen des aktuell abgespielten Titels oder den Status einer Logikvariable).
7. RGBW: Ein fortschrittliches Steuerelement zur Steuerung von Farblicht. Standardmäßig zeigt es die aktuelle Lichtfarbe an. Nach dem Anklicken öffnet sich eine Vollbildansicht mit einem Farbauswahlring sowie Schiebereglern für Helligkeit und Sättigung. Es unterstützt vier Kanäle: Rot, Grün, Blau und optional Weiß.
8. Kamera (Camera): Ermöglicht die Platzierung eines Fensters mit einer Live-Ansicht aus einem MJPEG-Stream in der Visualisierung.
9. Bild (Image): Dient zum Hinzufügen statischer Grafiken (z. B. Logos).
   

Eine ausführliche Beschreibung der Benutzeroberfläche finden Sie HIER

4. Erstellungsprozess (Schritt für Schritt) #

1. Vorbereitung der Ressourcen: Laden Sie zunächst Hintergrundgrafiken und eigene Symbole in der Registerkarte „Ressourcen“ hoch. Um Dateien in dieser Registerkarte hochzuladen, nutzen Sie eine der folgenden Methoden:
   1. Klicken in das Vorschaufenster: Klicken Sie nach Auswahl des entsprechenden Ordners in der Dateistruktur (linke Seite) direkt in das Vorschaufenster (großer Bereich auf der rechten Seite des Bildschirms). Dadurch wird das Systemfenster zur Dateiauswahl von der Festplatte Ihres Computers geöffnet.
   2. Drag & Drop-Methode: Sie können die ausgewählten Dateien auch einfach aus einem Ordner auf Ihrem Computer ziehen und direkt im Vorschaufenster des Browsers ablegen.
2. Bildschirm hinzufügen: Klicken Sie in der Registerkarte „Display“ auf „+ Bildschirm“ (+ Screen), vergeben Sie einen Namen und wählen Sie einen Hintergrund aus der Liste.
3. Anordnung der Elemente: Ziehen Sie die im Fenster des Visualisierungseditors befindlichen Bedienelemente (z. B. Licht) auf das Hintergrundbild.
4. Parameter konfigurieren: Tragen Sie in der Attributtabelle den entsprechenden Kanal ein (z. B. LCN.relay.0.10.1), wählen Sie ein Grafikdesign und legen Sie die Steuerungsart fest (z. B. Schalter oder Dimmer).
5. Speichern: Klicken Sie nach Abschluss der Arbeiten auf „Speichern“.

Endergebnis auf einem iPad (iOS):

Für Benutzer des neuen Base 2.0-Moduls läuft diese Registerkarte dank der erhöhten Rechenleistung des Geräts deutlich schneller. Zudem ermöglicht der größere FLASH-Speicher die Speicherung wesentlich grafikintensiverer Projekte, ohne dass man sich Sorgen um die Systemleistung machen muss.