Bildergalerie

Die Editor-Oberfläche im Überblick und darunter die bisher gesammelten Ansichten von Werkzeugleiste, Einstellungen und Widget-Paletten sowie eine animierte Poti-Demo. Klicke auf ein Bild, um es in voller Auflösung zu öffnen. Die Aufnahmen zeigen den Entwicklungsstand zum Zeitpunkt der Aufnahme.

Die Editor-Oberfläche im Überblick

Links wählst du Widgets aus der Palette. In der Mitte gestaltest du deine Visualisierung auf der Rasterfläche. Rechts bearbeitest du die Eigenschaften des ausgewählten Widgets. Die obere Werkzeugleiste bietet unter anderem Einstellungen, Entitäten, Projekte und den Wechsel zur Runtime.

Widgetliste und Pakete

Die Widget-Palette ordnet die verfügbaren Widgets nach Gruppen und installierten Paketen. Klappe eine Gruppe auf, um ihre Widgets auszuwählen, oder finde passende Einträge über die Suche.

Einstellungen – Allgemein (Bild 1)

In den allgemeinen Einstellungen aktivierst du Umsteigerhinweise, legst das automatische Speichern und die App-Sprache fest und wählst die Farben der Andockpunkte im Editor. Über die weiteren Reiter verwaltest du Widget-Pakete und Tools.

Einstellungen – Allgemein (Bild 3)

Weitere allgemeine Einstellungen umfassen den Material-Design-Projektstandard, Wiederverbindung und Zustands-Entprellzeit, die Browserinstanz-ID sowie Projektzugänglichkeit. Für die Runtime legst du Titel, Favicon und das Scrollverhalten fest.

Einstellungen – Widget-Pakete (Bild 1)

Widget-Pakete lassen sich lokal, aus dem Katalog oder über GitHub auswählen. Der Katalog zeigt Beschreibung, Lizenz, Paketversion, Installationsstatus und benötigte Studio-Version. Vor der Installation externer Pakete bestätigst du den Risikohinweis; Testpakete sind zusätzlich gekennzeichnet.

Einstellungen – Widget-Pakete (Bild 2)

Unter den Katalogeinträgen findest du die installierten Widget-Pakete als Karten mit Symbol, Version, Schnittstellenversion, Widget-Anzahl und Lizenz. Die Karten bieten Aktionen zum erneuten Laden und Deinstallieren. Ein Link öffnet den Webkatalog mit Zusatztools im Browser.

Einstellungen – Tools (Bild 1)

Im Tools-Reiter wählst du zusätzliche Editor-Tools lokal, aus dem Katalog oder über GitHub aus. Die Paketkarten zeigen Beschreibung, Lizenz, Version, Installationsstatus und benötigte Studio-Version. Hier sind das Tools-Testpaket und der Colorpicker zu sehen. Vor der Installation bestätigst du den Risikohinweis; Tool-Aktionen werden nach Vorschau und Bestätigung ausgeführt.

Einstellungen – Tools (Bild 2)

Unter den Katalogeinträgen stehen die installierten Tool-Pakete mit Symbol, Version, Schnittstellenversion und Lizenz. Die Karten bieten Aktionen zum erneuten Laden und Deinstallieren sowie eine Übersicht der enthaltenen Tools. Hier sind der Colorpicker und die Test-Seitenfarbe zu sehen.

Werkzeugleiste (Bild 1)

Die Werkzeugleiste öffnet Seiten, Widget-Palette, Einstellungen, Entitäten, Dateien und Projekte. Filter und Auswahlliste helfen beim Finden und Auswählen von Widgets. Daneben stehen Aktionen für Ebenen, Import und Export, Duplizieren und Löschen sowie Ausschneiden, Kopieren und Einfügen bereit.

Werkzeugleiste (Bild 2)

Die Werkzeugleiste verbindet die wichtigsten Studio-Bereiche mit der Widget-Auswahl und den Bearbeitungsaktionen. Ohne ausgewähltes Widget sind viele dieser Aktionen deaktiviert.

Seitenleiste – Seite

Im Reiter ANSICHT bearbeitest du die Eigenschaften der aktuellen Seite. Der geöffnete Bereich CSS-Hintergrund bietet Bildauswahl, Hintergrundfarbe und Einstellungen für Wiederholung, Position und Größe. Weitere aufklappbare Bereiche enthalten Schrift und Text, Optionen, Navigation, Anwendungsleiste und responsive Einstellungen. Die Seitengruppen benötigen keine Aktivierungscheckboxen.

Widgets – Datenfluss

Die Gruppe HA Grafik – Datenfluss enthält Wert-Berechnung, Wert-Verbindung und Wert-Konverter. Mit diesen Widgets kannst du Werte berechnen, zwischen Widgets verbinden und umwandeln.

Widgets – Spezial

Die Spezial-Widgets umfassen Dashboard in widget, SVG-Line, SVG LineBox und SVG LineBox Math. Sie ergänzen die Visualisierung um eingebettete Dashboards, SVG-Verbindungen und LineBox-Funktionen für Werte und Berechnungen.

Widgets – UGSo Technic

Das Paket UGSo Technic bietet sieben Widgets für Fenster, Schalter, Lichtdimmer, Raumansichten, Uhr und Datum, Thermostat und Temperatur sowie Statuslisten. Die Palette zeigt die einzelnen Widgets mit passenden Symbolen.

Widgets – Wetter und Heizung

Das Paket Wetter und Heizung enthält acht Widgets: Allgemeines Diagramm, Balkendiagramm für zwei Wochen, Wetter-Widget, Übersicht über Heizräume, METEORED-Wetter-Widget, Fensterstatus-Übersicht, Meinen Vermieter informieren und Allgemeine Heizparameter. Die Palette zeigt sieben Original-Vorschaubilder und ein Briefsymbol für die Vermieterbenachrichtigung.

Poti und Wert-Verbindungen im Editor

Aufbau der folgenden Runtime-Demo: Das Poti ist mit der SVG-Line verbunden. Ein Wert-Koppelpunkt versorgt die zusätzliche Anzeige über eine Wert-Verbindung. Im Editor sind die Anschlüsse und der Verlauf der Verbindungen sichtbar.

Poti, Linienanimation und Wertanzeige

Animierte Runtime-Demo: Das Poti liefert einen Zahlenwert für die SVG-Line und die verbundenen Wertanzeigen. Die laufenden Striche veranschaulichen den Fluss. Die Aufnahme verwendet eine reduzierte Bildrate; einzelne Zwischenstände der Anzeigen können dadurch versetzt erscheinen.

Widgets – HA Grafik Interaktiv

Die Gruppe HA Grafik – Interaktiv enthält Universal Element, Calendar, Terminkalender, Checkbox, Schieberegler, Tabelle, Lauftext, Werteliste, Schalten, Radialer Schieberegler und Dropdown. Sie bietet Widgets für Eingaben, Schaltaktionen und die Darstellung von Kalendern, Tabellen und Wertelisten.