Universal Widget - inventwo/ioBroker.vis-inventwo GitHub Wiki
Mit dem Widget kannst du Datenpunkte schalten, durch Views schalten, Text, Bilder und/oder Werte anzeigen u.v.m.
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/wahr: Text der beim jeweiligen Zustand angezeigt wird Bild falsch/wahr: Bild das beim jeweiligen Zustand angezeigt wird
CSS inventwo Widget
Hintergrund
Farbe: Hintergrundfarbe des Widgets Farbe Aktiv: Hintergrundfarbe des Widgets bei Zustand wahr 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/wahr: Bild bei falsch oder wahr blinken lassen. Eingabe in Millisekunden ohne Einheit. Farbe falsch/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
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 Aktiv: Farbe des Schattens bei Zustand wahr 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 Aktiv: Farbe des Schattens bei Zustand wahr 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 Farbe Aktiv: Farbe des Schattens bei Zustand wahr
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: Multi