Multi Widget - inventwo/ioBroker.vis-inventwo GitHub Wiki
Mit dem Widget kannst du Datenpunkte schalten, durch Views schalten oder einfach nur Text, Bilder und/oder Werte anzeigen
Allgemein
Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung Widget Typ: Verhalten des Widgets (Switch, State, Navigation, Background, Wert erhöhen oder verringern View in PopUp, HTTP) Objekt ID: Pfad des Datenpunktes Typ: Typ des Datenpunktwertes (boolean oder string) Vergleichsoperator: Ob Wert gleich, größer, kleiner sein muss, damit das Widget den Wahr-Zustand erhält Wert falsch/wahr: Werte die zum Schalten des Datenpunktes und zum Prüfen des Zustands genutzt werden Beschriftung falsch: Text der beim Zustand falsch angezeigt wird Bild falsch: Bild das beim Zustand falsch angezeigt wird Anzahl Zustände: Anzahl der Zustände die zu prüfen sind
Zustand[0, 1, 2, ...]
Prüfe auf: Auswahl ob auf Datenpunkt oder View geprüft werden soll (Standard ist abhängig vom Widget Typ. Bei Navigation und ViewInPopUp wird auf die View geprüft, bei den anderen auf einen Wert eines Datenpunktes.) Objekt ID: Pfad des Datenpunktes auf dessen Wert geprüft werden soll Vergleichsoperator: Ob Wert gleich, größer, kleiner sein muss, damit das Widget den Wahr-Zustand erhält Wert: Wert der angibt, dass der Zustand wahr ist View: View die angibt, dass der Zustand wahr ist Beschriftung wahr: Beschriftung, die bei Zustand wahr angezeigt wird
Hintergrund:
Hintergrund Aktiv: Hintergrundfarbe des Widgets bei Zustand wahr
Text:
Farbe Aktiv: Textfarbe bei Zustand wahr
Schatten außen
Farbe Aktiv: Farbe des Schattens bei Zustand wahr
Schatten innen
Farbe Aktiv: Farbe des Schattens bei Zustand wahr
Schatten Text
Farbe Aktiv: Farbe des Schattens bei Zustand wahr
Umrandungen
Farbe Aktiv: Farbe für die Umrandung bei Zustand wahr
Bild
Bild wahr: Bild das beim Zustand wahrangezeigt wird Bild wahr Blinkintervall: Bild wahr blinken lassen. Eingabe in Millisekunden ohne Einheit. Farbe wahr: Bild einfärben (HEX-Code notwendig!) (Da wir mit einem CSS Filter für Einfärbung arbeiten, gibt es die besten Ergebnisse, wenn das Icon in Schwarz vorliegt. Sollte dein Icon eine andere Ausgangsfarbe haben und die Einfärbung nicht passend aussehen, kannst Du einfach noch mal in das Farbfeld klicken und 'Enter' drücken ... so oft, bis die Wunschfarbe passt.) Farbe invertieren: Kehrt die Farbe des Bildes um. Wenn weiße Icons gewünscht sind und diese schwarz sind empfehlen wir diesen Haken zu setzen und keine Farbe anzugeben für besser Performance
CSS inventwo Widget
Hintergrund
Farbe: Hintergrundfarbe des Widgets Farbe Hover: Hintergrundfarbe wenn Cursor über dem Widgets ist (funktioniert nicht auf mobilen Geräten) Transparenz: Transparenz des Hintergrunds sowie Schatten, sofern eingestellt
Ecken
Abrundungen: Rundung der jeweiligen Ecke des Widgets
Inhalt
Stil: Ausrichtung des Inhalts (horizontal/vertikal) Ausrichtung: Ausrichtung zwischen den Inhaltselementen (Anfang/Mitte/Ende des Widgets, Platz dazwischen) Reihenfolge: Text vor oder nach Bild oder anderem Element Inhalt Transparenz: Transparenz des Inhalts Inhalts Typ: Auswahl zwischen Bild Uhr analog oder digital und HTML/Text. Weiter Informationen
Text
Farbe: Textfarbe Farbe Aktiv: Textfarbe bei Zustand wahr Größe. Schriftgröße in px Position: Ausrichtung der Textes. Anfang - Mitte - Ende, innerhalb des Widgets Textdekoration: Text unterstreichen, durchstreichen oder Linie über dem Text Abstände: Freies verschieben des Textes
Bild
Größe: Bildgröße in px Position: Ausrichtung des Bildes/Icons. Anfang - Mitte - Ende, innerhalb des Widgets Abstände: Freies verschieben des Bildes Drehung: Bild drehen Spiegeln: Horizontales Spiegeln des Bildes. Blinkintervall falsch: Bild bei falsch blinken lassen. Eingabe in Millisekunden ohne Einheit. Farbe falsch: Bild einfärben (HEX-Code notwendig!) (Da wir mit einem CSS Filter für Einfärbung arbeiten, gibt es die besten Ergebnisse, wenn das Icon in Schwarz vorliegt. Sollte dein Icon eine andere Ausgangsfarbe haben und die Einfärbung nicht passend aussehen, kannst Du einfach noch mal in das Farbfeld klicken und 'Enter' drücken ... so oft, bis die Wunschfarbe passt.) Farbe invertieren: Kehrt die Farbe des Bildes um. Wenn weiße Icons gewünscht sind und diese schwarz sind empfehlen wir diesen Haken zu setzen und keine Farbe anzugeben für besser Performance
Schatten außen
X Y Versatz: Der Verstaz zum Rand des Widgets in px Blur: Härte des Schattens. Je höher, desto weicher Größe: Größe des Schattens in px Farbe: Farbe des Schattens Farbe Hover: Farbe wenn Cursor über dem Widgets ist (funktioniert nicht auf mobilen Geräten)
Schatten innen
X Y Versatz: Der Verstaz zum Rand des Widgets in px Blur: Härte des Schattens. Je höher, desto weicher Größe: Größe des Schattens in px Farbe: Farbe des Schattens Farbe Hover: Farbe wenn Cursor über dem Widgets ist (funktioniert nicht auf mobilen Geräten)
Schatten Text
X Y Versatz: Der Verstaz zum Rand des Widgets in px Blur: Härte des Schattens. Je höher, desto weicher Farbe: Farbe des Schattens
Umrandungen
Breite: Stärke der Umrandung in px Stil: Stil der Umrandung. Solid - Dotted - Groove u.v.m Farbe: Farbe der Umrandung. Farbe Aktiv: Farbe für die Umrandung bei Zustand wahr Farbe Hover: Farbe wenn Cursor über dem Widgets ist (funktioniert nicht auf mobilen Geräten)
Zum nächsten Widget: Simple Slider