Skip to content

Universal Widget

Jannis edited this page Nov 25, 2023 · 17 revisions

Universal

Mit dem Widget kannst du Datenpunkte schalten, durch Views schalten, Text, Bilder und/oder Werte anzeigen u.v.m.

preview_universal_widget

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