Hallo zusammen,
vis-2 2.20 ist da, und es ist das größte Update seit Langem. Die drei wichtigsten Punkte vorweg:
Eine fertige Seite aus den eigenen Geräten, mit einem Klick und ohne ein einziges Widget von Hand zu ziehen
Zwei neue Widget-Sets für die Geräte im Haus: Kacheln für das Raster und Marker für den Grundriss
Der Start ist schneller, auf einem Tablet bei großen Projekten mehr als doppelt so schnell
[image: 01-runtime-raeume.jpg]
Seite aus Geräten
Unter Neue Seite → Aus Geräten … (oder Geräte in der Werkzeugleiste für die geöffnete Seite) sucht vis-2 alles, was der Typ-Detektor in eurer Installation kennt. Es sortiert die Geräte nach Räumen oder Gewerken und baut daraus Abschnitte: einen pro Raum auf einer Seite oder eine Seite pro Raum mit Eintrag in der Navigation.
Aus dem, was sich schalten lässt, wird ein Schalter. Was sich stellen lässt, wird ein Schieberegler, was sich nur lesen lässt, wird ein Messwert. Thermostate, Rollläden, Fenster und Dimmer bekommen ihre eigenen Widgets. Vor dem Anlegen lassen sich Namen ändern und einzelne Geräte abwählen. Das Ganze ist ein Schritt im Undo.
[image: 02-assistent-geraete.jpg]
Die Seiten nutzen das Raster-Layout, passen also aufs Handy genauso wie auf den Monitor. Die Abschnitte brechen von selbst um:
[image: 04-runtime-handy.jpeg]
Neue Widget-Sets „Relativ“ und „Absolut“
vis-2 bringt jetzt zwei eigene Widget-Sets mit 27 Gerätetypen mit, darunter Schalter, Dimmer, RGB, Thermostat, Messwert, Rollladen, Fenster, Schloss, Kamera, Sauger, Medien, Wetter, Diagramm und Tabelle. Beide sehen gleich aus: eine Karte, darauf ein ruhiger Name über einem großen Wert und die Bedienung am unteren Rand. Alle Farben kommen aus dem Theme, auch aus den neuen Themes modernDark und modernLight.
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.
[image: 05-grundriss-marker.jpeg]
Wählt man den Datenpunkt aus, übernimmt das Widget, was das Objekt schon weiß: Name, Einheit, Grenzen und das Symbol des Kanals. Nichts davon muss man noch einmal eintippen.
Abschnitte im Raster-Layout
Neue Seiten und neue Projekte starten jetzt im Raster mit Abschnitten, bestehende Seiten behalten ihr Layout. Für die Abschnitte gibt es einen eigenen Tab Abschnitt in den Attributen:
Kopfzeile mit Titel, Untertitel, Symbol, Linie und Link auf eine andere Seite
Hintergrund, Hintergrundbild, Rahmen, Eckenradius, Schatten, Glas-Effekt und Panel-Look
Sichtbarkeit nur für bestimmte Benutzergruppen, nur bei bestimmten Seitenbreiten oder nur solange ein Datenpunkt eine Bedingung erfüllt
Auf- und zuklappbar, auch per Bedingung. Der Browser merkt sich, was man gewählt hat.
Jedes Attribut eines Abschnitts kann ein Binding sein, z. B. {javascript.0.alarm} als Rahmenbreite.
Abschnitte lassen sich per Klick auswählen und per Ziehen verschieben, die anderen machen Platz.
[image: 03-editor-abschnitt.jpg]
Schneller
Die Runtime zeigt die erste Seite deutlich früher. Gemessen mit einem Tablet-Profil (4-fach langsamere CPU, WLAN):
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
Die Gründe dafür:
3,4 MB statt 4,6 MB JavaScript
Anfragen laufen parallel statt nacheinander
Die Projektdatei kommt komprimiert über HTTP und aus dem Browser-Cache.
Die Widget-Sets der ersten Seite werden zuerst geladen.
Von widgets.html landet nur das in der Seite, was das Projekt wirklich benutzt.
Eine Seite nur mit React-Widgets wartet nicht mehr auf die vis-1-Bibliotheken.
KI-Assistent
Im Editor gibt es rechts unten einen Assistenten: Man beschreibt, was auf die Seite soll, und er sieht sich die Datenpunkte an, baut die Seite und öffnet sie. Mit einem Tastendruck macht man es rückgängig. Antworten werden formatiert dargestellt, und auch lange Antworten kommen jetzt sicher an. Den API-Schlüssel trägt man in der Instanzkonfiguration von vis-2 unter KI-Assistent ein.
[image: 07-ki-assistent.jpeg]
Komfort im Editor
Tooltips mit Bild erklären viele Attribute: Layout, Raster, Navigation, alle Abschnitts-Attribute und die gängigen CSS-Attribute.
Widgets lassen sich mit dem Finger auswählen, verschieben und in der Größe ändern.
Ein Widget kann man ziehen, ohne es vorher auszuwählen. Ein reiner Klick verschiebt es nicht mehr um einen Pixel.
Beim Ziehen an den Rand scrollt die Seite mit.
Die Tabs der offenen Seiten lassen sich per Ziehen umsortieren.
Ein Feld kann Symbol oder Bild sein: Neben dem Feld öffnen zwei Knöpfe die Auswahl der Standard-Symbole bzw. den Dateibrowser.
Die Suche in der Palette findet auch Widget-Sets, z. B. metro.
[image: 06-tooltip-bild.jpeg]
Unter der Haube
vis-2 läuft jetzt auf React 19 und MUI 9 mit @iobroker/gui-components.
Wichtig für Entwickler von Widget-Sets: Ein Widget-Set, das für ein älteres React gebaut wurde, wird erkannt und mit einer verständlichen Meldung übersprungen, statt die Seite abstürzen zu lassen. Welche Sets betroffen sind, zeigt ein Dialog im Editor und in der Runtime.
Fehlerbehebungen
Es sind Dutzende Korrekturen dabei. Eine Auswahl:
jQui-Widgets zeichnen border-radius wieder.
Push-Modus der Schalter auf Touchscreens funktioniert.
Swipe lässt sich wieder scrollen.
Gruppen in multi-views werden gezeichnet.
Der Hintergrund deckt die ganze Seite ab.
Dark Mode bei iFrame und echarts ist korrigiert.
„States Debounce Time“ wirkt wieder.
Die analoge Uhr steht nicht mehr auf dem Kopf.
Die vollständige Liste steht im Changelog.
Ein großes Dankeschön an @typhosj für die vielen Fehlerberichte und Pull Requests!
Hinweis zum Update
Wer im web-Adapter den Datei-Cache eingeschaltet hat, sollte web auf 9.1.15 aktualisieren. Ältere Versionen können nach dem Speichern eine veraltete Projektdatei ausliefern.
Feedback, Fehler und Wünsche bitte hier im Thread oder als Issue auf GitHub.
Viel Spaß beim Ausprobieren!
