Material-Design-Widgets

Material Design ist der umfangreichste Widgetsatz, den ioBroker kennt: rund fünfzig Bausteine nach Googles gleichnamiger Gestaltungsrichtlinie, dazu ein durchgängiges Farbschema, ein eigener Symbolvorrat und Diagramme. Viele der Visualisierungen, die man in der Gemeinschaft zu sehen bekommt, sind damit gebaut.

Zwei Adapter

Den Satz gibt es zweimal, und die Unterscheidung ist wichtig:

Die zweite Fassung stammt von typhosj und beruht auf der Arbeit von Scrounger. Sie deckt die Bausteine der ersten weitgehend ab und ergänzt sie um Advanced View in Widget und einen Schieberegler als Symbolknopf.

?> Für neue Projekte in vis-2 ist vis2-materialdesign die richtige Wahl. vis-materialdesign bleibt sinnvoll für bestehende vis-1-Projekte und für Seiten, die schon damit gebaut wurden. Beide gleichzeitig zu installieren, bringt nichts und verlängert nur die Ladezeit.

Was drin ist

Knöpfe

Das Herzstück des Satzes und der Grund für die große Zahl: Es gibt sechs Knopfarten, und jede davon in drei Bauformen: waagerecht beschriftet, senkrecht beschriftet und als reines Symbol.

Eingeben und einstellen

	Widget	Wofür
	Input	Textfeld für Zeichenketten und Zahlen
	Autocomplete	Eingabefeld mit Vorschlagsliste
	Select	Klappfeld für Werte, auch als Ja/Nein-Fassung
	Switch, Checkbox	Kippschalter und Ankreuzfeld
	Slider, Slider Round	Schieberegler, gerade oder als Ring

Anzeigen

	Widget	Wofür
	Value	ein Wert mit Einheit, Symbol und Farbe
	Progress, Progress Circular	Fortschritt als Balken oder Ring
	List	Liste mit Symbol, Text und Bedienelement je Zeile
	Icon List	Kachelgitter aus Symbolen
	Table	Tabelle aus einem JSON-Datenpunkt
	Alerts	farbige Hinweisleiste für Meldungen
	Calendar	Monats- und Terminübersicht
	Material Design Icon	ein einzelnes Symbol aus dem mitgelieferten Vorrat
	HTML Card	eigener HTML-Inhalt in einer Karte

Diagramme

	Widget	Wofür
	Line History Chart	Verlaufskurve aus aufgezeichneten Werten
	JSON Chart	Diagramm aus frei gelieferten Daten
	Bar Chart, Pie Chart	Balken- und Tortendiagramm

Seitenaufbau

	Widget	Wofür
	Top App Bar	Kopfleiste mit ausfahrbarem Menü; der übliche Rahmen einer Seite
	Dialog, Dialog iFrame	öffnet eine Ansicht oder eine fremde Seite als Fenster
	Masonry Views	setzt mehrere Ansichten als versetzte Kacheln zusammen
	Grid Views	dasselbe als gleichmäßiges Gitter

Hilfsmittel

	Widget	Wofür
	Preview Color Schemes	zeigt die eingestellten Farben zur Kontrolle an
	Installed Version	nennt die installierte Fassung des Satzes

Farben und Schriften

Der Satz bringt ein eigenes Farbschema für hell und dunkel mit, das für alle Widgets zugleich eingestellt wird, nicht pro Widget. Die Einstellungen stehen in der Instanz des Adapters. Das Widget Preview Color Schemes zeigt das Ergebnis auf der Seite an, ohne dass jedes Element einzeln geprüft werden muss.

Die Schriftarten werden ebenfalls dort gewählt. Sollen Google-Schriften zur Auswahl stehen, muss zusätzlich vis-google-fonts installiert sein.

Worauf zu achten ist

Ladezeit. Der Satz ist groß. Auf einem Wandtablet oder einem älteren Telefon macht sich das beim ersten Öffnen einer Seite bemerkbar. Wer nur wenige Bausteine braucht, fährt mit einem kleineren Satz besser.

Verlaufsdaten. Line History Chart braucht einen Aufzeichnungsadapter, siehe Werte aufzeichnen.

Die alte Fassung in vis-2. vis-materialdesign lässt sich in vis-2 verwenden, folgt dort aber weiterhin seinem eigenen Farbschema. Auf einer Seite, die sonst Material-Widgets benutzt, fällt das auf.