vis-2 2.20: Seiten aus Geräten, neue Widgets

Bluefox

Hallo zusammen,

vis-2 2.20 ist da. Das Update bringt einige größere Neuerungen mit:

Seiten automatisch aus vorhandenen Geräten erstellen. vis-2 erkennt die verfügbaren Geräte und legt passende Widgets an.
Zwei neue Widget-Sets: Kacheln für das Raster-Layout und kompakte Anzeigen für Grundrisse.
Schnellerer Start: Besonders bei großen Projekten wird die erste Seite deutlich früher angezeigt.

Seiten automatisch aus Geräten erstellen

Über Neue Seite → Aus Geräten … oder über den Eintrag Geräte in der Werkzeugleiste könnt ihr eine Seite aus den bereits vorhandenen Geräten erstellen.

vis-2 sucht nach Geräten, die es anhand ihrer Typen und Eigenschaften erkennt. Anschließend könnt ihr sie nach Räumen oder Gewerken sortieren. Je nach Auswahl entstehen entweder mehrere Abschnitte auf einer Seite oder einzelne Seiten für die jeweiligen Räume, die auch in der Navigation erscheinen können.

Für jedes erkannte Gerät wählt vis-2 ein passendes Widget aus: Schaltbare Geräte bekommen beispielsweise einen Schalter, einstellbare Werte einen Schieberegler und reine Messwerte eine entsprechende Anzeige. Für Thermostate, Rollläden, Fenster und Dimmer gibt es eigene Widgets.

Vor dem Erstellen könnt ihr die Namen der Geräte ändern und einzelne Geräte aus der Auswahl entfernen. Erst danach wird die Seite angelegt. Die gesamte Erstellung lässt sich mit einem einzigen Undo-Schritt rückgängig machen.

Die erstellten Seiten verwenden das Raster-Layout. Die Widgets ordnen sich automatisch an und passen sich an die verfügbare Bildschirmbreite an. Dadurch lässt sich dieselbe Seite auf einem Smartphone, Tablet und Desktop verwenden.

Zwei neue Widget-Sets: Relativ und Absolut

Mit vis-2 2.20 kommen zwei neue Widget-Sets mit insgesamt 27 Gerätetypen hinzu. Dazu gehören Schalter, Dimmer, RGB-Lampen, Thermostate, Messwerte, Rollläden, Fenster, Schlösser, Kameras, Saugroboter, Mediengeräte, Wetter, Diagramme und Tabellen.

Beide Sets bieten eine einheitliche Gestaltung: eine Karte mit dem Gerätenamen, einem gut lesbaren Wert und den Bedienelementen. Die Farben richten sich nach dem verwendeten Theme. Neu dabei sind auch die Themes modernDark und modernLight.

Der Unterschied zwischen den beiden Sets liegt darin, wo und wie die Widgets angeordnet werden.

Relativ: Kacheln im Raster

Ein relatives Widget füllt seine Zelle im Abschnitt aus. Für die Darstellung gibt es drei Varianten:

Name oberhalb des Wertes
Name und Wert nebeneinander in einer Zeile
Eine farbige Kachel, deren Farbe den aktuellen Zustand anzeigt

Diese Widgets eignen sich für normale Bedienseiten, auf denen Geräte übersichtlich angeordnet werden sollen.

Absolut: Geräte direkt auf dem Grundriss

Absolute Widgets sind für Seiten gedacht, auf denen ein Grundriss, ein Gebäudeplan oder ein anderes Hintergrundbild liegt. Die Geräte werden direkt an den passenden Positionen auf diesem Bild platziert.

Damit sie möglichst wenig vom Grundriss verdecken, sind sie zunächst sehr kompakt: Ein kleiner Ring in der Farbe des aktuellen Zustands markiert die Position. Er leuchtet, damit man das Gerät auch auf einem unruhigen Hintergrund schnell findet.

Je nach gewählter Form zeigt der Marker mehr oder weniger Informationen. Eine breite Form stellt Symbol und Wert in einer Kapsel dar. Eine quadratische Form zeigt nur den Wert. Unter dem Marker können zusätzlich der Gerätename und der aktuelle Zustand erscheinen.

Auch das Einrichten der Widgets geht schneller: Wenn ihr einen Datenpunkt auswählt, übernimmt das Widget die bereits im Objekt hinterlegten Informationen. Dazu gehören beispielsweise Name, Einheit, Wertebereich und das Symbol des Kanals. Diese Angaben müsst ihr nicht noch einmal manuell eintragen.

Abschnitte im Raster-Layout

Neue Seiten und neue Projekte verwenden jetzt standardmäßig das Raster-Layout mit Abschnitten. Bereits vorhandene Seiten behalten ihr bisheriges Layout.

Für die Abschnitte gibt es im Eigenschaftenbereich einen eigenen Tab Abschnitt. Dort könnt ihr unter anderem Folgendes einstellen:

Kopfzeile: Titel, Untertitel, Symbol, Trennlinie und Link zu einer anderen Seite
Darstellung: Hintergrundfarbe, Hintergrundbild, Rahmen, abgerundete Ecken, Schatten, Glaseffekt und Panel-Design
Sichtbarkeit: abhängig von Benutzergruppe, Bildschirmbreite oder dem Wert eines Datenpunkts
Auf- und Zuklappen: manuell oder abhängig von einer Bedingung. Die gewählte Darstellung bleibt im Browser erhalten.
Bindings: Auch Abschnittseigenschaften können dynamisch an Datenpunkte gebunden werden, beispielsweise die Rahmenbreite an {javascript.0.alarm}.

Abschnitte lassen sich direkt auswählen und per Drag-and-drop verschieben. Die übrigen Abschnitte machen dabei automatisch Platz.

Die Runtime startet schneller

Wir haben die Ladezeit der Runtime reduziert. Die erste Seite wird insbesondere bei größeren Projekten deutlich schneller angezeigt.

Die folgenden Werte wurden mit einem Tablet-Profil gemessen. Dabei liefen CPU und WLAN unter simulierten, eingeschränkten Bedingungen.

Projekt	Vorher	Jetzt
Kleines Projekt	7 s	4,5 s
Projekt mit 760 Widgets	23 s	9 s
Desktop	1,5 s	0,6 s

Dafür wurden mehrere Dinge geändert:

Die JavaScript-Dateien sind insgesamt kleiner: 3,4 MB statt 4,6 MB.
Anfragen werden parallel statt nacheinander verarbeitet.
Die Projektdatei wird komprimiert übertragen und kann aus dem Browser-Cache geladen werden.
Zuerst werden die Widget-Sets geladen, die für die erste Seite benötigt werden.
Aus widgets.html wird nur noch der Teil geladen, den das Projekt tatsächlich verwendet.
Seiten, die ausschließlich React-Widgets verwenden, müssen nicht mehr auf die Bibliotheken von vis-1 warten.

KI-Assistent im Editor

Der KI-Assistent ist direkt im Editor verfügbar. Ihr beschreibt, welche Geräte oder Funktionen auf der Seite erscheinen sollen. Der Assistent sucht die passenden Datenpunkte, erstellt die Seite und öffnet sie anschließend.

Änderungen lassen sich mit einem Tastendruck rückgängig machen. Außerdem werden Antworten jetzt formatiert dargestellt, und auch längere Antworten werden zuverlässig verarbeitet.

Den benötigten API-Schlüssel hinterlegt ihr in der Instanzkonfiguration von vis-2 unter KI-Assistent.

Weitere Verbesserungen im Editor

Auch an der täglichen Arbeit mit dem Editor haben wir einiges verbessert:

Tooltips mit Bildern erklären viele Attribute. Dazu gehören Layout, Raster, Navigation, Abschnittseigenschaften und gängige CSS-Eigenschaften.
Widgets lassen sich auf Touchscreens mit dem Finger auswählen, verschieben und in der Größe ändern.
Widgets können direkt durch Ziehen verschoben werden, ohne sie vorher auswählen zu müssen. Ein einfacher Klick verschiebt sie nicht mehr versehentlich um einen Pixel.
Beim Ziehen eines Widgets an den Bildschirmrand scrollt die Seite automatisch mit.
Die Reihenfolge geöffneter Seiten-Tabs lässt sich per Drag-and-drop ändern.
Bei Feldern für Symbole oder Bilder gibt es eigene Schaltflächen für die Symbolauswahl und den Dateibrowser.
Die Suche in der Widget-Palette findet auch Widget-Sets, beispielsweise metro.

Technische Änderungen

vis-2 verwendet jetzt React 19 und MUI 9 sowie @iobroker/gui-components.

Wichtig für Entwickler von Widget-Sets: Widget-Sets, die für eine ältere React-Version entwickelt wurden, werden erkannt und mit einer verständlichen Meldung übersprungen, anstatt die gesamte Seite zum Absturz zu bringen. Welche Widget-Sets betroffen sind, zeigt ein Dialog sowohl im Editor als auch in der Runtime.

Fehlerbehebungen

Neben den neuen Funktionen enthält das Update zahlreiche Fehlerkorrekturen. Hier eine Auswahl:

jQui-Widgets stellen border-radius wieder korrekt dar.
Der Push-Modus von Schaltern funktioniert wieder auf Touchscreens.
Swipe lässt sich wieder zum Scrollen verwenden.
Gruppen in multi-views werden korrekt dargestellt.
Der Hintergrund erstreckt sich wieder über die gesamte Seite.
Der Dark Mode in iFrames und echarts wurde korrigiert.
Die Einstellung „States Debounce Time“ wirkt wieder wie vorgesehen.
Die analoge Uhr wird wieder richtig herum angezeigt.

Die vollständige Liste findet ihr im Changelog auf GitHub.

Vielen Dank an @typhosj für die zahlreichen Fehlerberichte und Pull Requests!

Hinweis zum Update

Wenn im web-Adapter der Datei-Cache aktiviert ist, aktualisiert bitte den Adapter auf Version 9.1.15. Ältere Versionen können nach dem Speichern eine veraltete Projektdatei ausliefern.

Feedback, Fehlerberichte und Verbesserungsvorschläge könnt ihr direkt hier im Thread oder als Issue auf GitHub einreichen.

Viel Spaß mit vis-2 2.20!

mcm1957

Bezüglich neuer / angepasster Widgets siehe auch dieses Topic: https://forum.iobroker.net/topic/85584/vis-2.0-ab-version-2.20.x

Bluefox

Wegen der Umstellung auf React 19, müssen auch alle Widget Sets umgestellt werden. Das wird am Anfang ein bisschen Chaos verursachen, aber man muss durch. Viele, für welche ich verantwortlich bin, Widget-Sets sind schon umgestellt und alles liegt im latest. Auch vis-2 wird eine Weile noch im latest liegen, bis viele Widget-Sets nicht umgestellte werden

OliverIO

@Bluefox

ja, bitte nicht so schnell in stable schieben.
Will hier auch nochmal die auf die Bitte nach ein wenig mehr Statistik für die Entwickler hinweisen. Im speziellen auf die Anzahl welche widgets insgesamt aus den widgetsets verwendet werden, so das man sehen kann wo es sich lohnt mehr Arbeit zu investieren.
https://forum.iobroker.net/topic/85414/meeting-für-iobroker-core-dev-admin-21.10.26-20-30/3
Kann man dann ja morgen dann besprechen was wie möglich wäre

wendy2702

Also für mich liest sich der Text leider KI generiert.

„ Vor dem Anlegen lassen sich Namen ändern und einzelne Geräte abwählen. Das Ganze ist ein Schritt im Undo.“

Undo ist für gewöhnlich ein rückgängig machen der letzten Änderung, Abwählen ist bei „mir“ eigentlich was anderes.

Definiere „Tablet“ —> Der Start ist schneller, auf einem Tablet bei großen Projekten mehr als doppelt so schnell

Was bitte schön ist ein „Ruhiger Name“ —> Beide sehen gleich aus: eine Karte, darauf ein ruhiger Name über einem großen Wert und die Bedienung am unteren Rand.

Fragezeichen was das bedeutet —> Relativ ist eine Kachel, die ihre Zelle im Abschnitt ausfüllt. Es gibt drei Anordnungen: Name über dem Wert, eine Zeile oder eine Kachel in der Farbe des Zustands.
Absolut ist für Seiten mit einem Grundriss darunter. Dort ist ein Gerät ein Marker, nicht größer als eine Münze: ein Ring in der Farbe des Zustands, der leuchtet, damit man ihn auf einem unruhigen Bild findet. Wie viel er zeigt, entscheidet seine Form: breit ist er eine Kapsel mit Symbol und Wert, quadratisch zeigt er nur den Wert. Wahlweise steht noch der Name oder auch der Zustand darunter.

Mehr suche ich jetzt nicht aber möglicherweise kann man mir das auch alles erklären.

Community Forum

NEWS