Widget Erklärungen ab Version 2.x.x - inventwo/ioBroker.vis-inventwo GitHub Wiki
Vorab möchten wir Euch kurz die Unterschiede zwischen den Widget-Typen beim Universal- & Multi-Widget erläutern:
Switch: Ein einfacher Schalter. Er kann wahlweise true/false (boolean) oder auch jeden x-beliebigen Wert schalten.
Button/State: Ein einfacher Taster. Dieses Widgets funktioniert ähnlich wie die Powertaste einer Fernbedienung oder der Klingelknopf. Beim Betätigen wird ein x-beliebiger Wert gesendet. Bei jedem Push, der selbe Wert! Da dieses Widget ein Taster ist, gibt es keine Rückmeldung zum Status!
Navigation: Mit diesem Widget schaltet ihr zwischen den verschiedenen VIEWS
Background: Dieses Widget kann nur lesen und nichts schalten! Ich nutze es zum Beispiel als Hintergrund für die Value Widgets (Bordmittel) oder für die Slider. So erhalte ich ein einheitliches Design der VIS. Man kann dieses Widget auch zum Anzeigen von Zuständen nutzen. Z.B. für die Erreichbarkeit von Netzwerkgeräten o.Ä., da hier nichts geschaltet werden muss.
Wert erhöhen oder verringern: ... (Beschreibung folgt)
View in PopUp: Eine Möglichkeit, eine ganze View als PopUp anzuzeigen um ggf. weiter Navigationen zu vermeiden.
Diese Typen können beim Universal- und auch beim Multi-Widget jeder Zeit geändert werden und werden im Feld Widget Typ: definiert.
Ein Widget für die Navigation, als Button, als Schalter oder als Background. Dieses Widget lässt sich im Nachhinein auf den passenden Typen umstellen, ohne die CSS Einstellungen zu verlieren. Das macht das 'Copy & Paste' sehr einfach. Man erstellt sich einmal ein Widget mit dem gewünschtem Layout und man kann es ohne Probleme durch 'Kopieren und Einfügen' auf seiner View (oder im Projekt) verteilen. Danach stellt man den passenden Typ (Switch, State, Navigation, Background) ein und haucht dem Widget Leben ein.
Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung
Widget Typ: Switch, State, Navigation, Background (Erklärung siehe oben)
Objekt ID: Der Pfad zum Datenpunkt
Typ: Boolean oder String
Wert falsch/wahr: Hier wird der gewünschte Wert, der beim Schalten genutzt werden soll, eingetragen. Bei 'Boolean ist keine Eingabe nötig, es wird automatisch 'true/false' geschaltet (oder geprüft)
Beschriftung falsch/wahr: Hier wird die Bezeichnung, die im Widget angezeigt werden soll, eingetragen.
Bild falsch/wahr: Die Pfade zum Bild/Icon
Hintergrund
Farbe: Hier wird die Hintergrundfarbe des Widgets eingesetzt.
Farbe Aktiv: Hier wird die Hintergrundfarbe für ein aktives Widgets eingesetzt.
Transparenz: Die Tranzparenz in diesen Feld bezieht sich nur auf das Widget selbst (inkl. Schatten und Umrandungen) und nicht auf den Inhalt! 0 ist ausgeblendet, 1 ist voll sichtbar. Zwischenwerte werden mit . eingeben. Beispiel: 0.5 für 50% Deckkraft.
Ecken
Abrundungen: Hier können alle Ecken des Widgets einzeln abgerundet werden
Inhalt
Stil: Die Ausrichtung des Inhaltes, ob es ein horizontales oder vertikales Widget sein soll.
Ausrichtung: Hier wird die Ausrichtung des Inhalts festgelegt. Anfang - Mitte -Ende (mit oder ohne Abstand zwischen Txte und Icon), innerhalb des Widgets
Reihenfolge: Hier wird festgelgt ob der Text vor oder nach dem Icon angezeigt werden soll
Inhalt Transparenz: Die Tranzparenz in diesen Feld bezieht sich nur auf den Inhalt des Widget (Text und Icon)! 0 ist ausgeblendet, 1 ist voll sichtbar. Zwischenwerte werden mit . eingeben. Beispiel: 0.5 für 50% Deckkraft.
Text
Farbe: Textfarbe
Größe. Schriftgröße in px
Position: Ausrichtung der Beschriftung. Anfang - Mitte - Ende, innerhalb des Widgets
Abstände: Hier könnt ihr feste Abstände der Beschrifftung zum Rand des Widgets festlegen.
Bild
Größe: Hier wird die Bildgröße in px festgelegt
Position: Ausrichtung des Bildes/Icons. Anfang - Mitte - Ende, innerhalb des Widgets
Abstände: Hier könnt ihr feste Abstände für das Bild zum Rand des Widgets festlegen.
Drehung: Das Bild lässt sich in jeder Richtung drehen. Angegeben wird der Wert in Grad, ohne Einheit. Auch negative Zahlen sind möglich.
Spiegeln: Horizontales Spiegeln des Bildes.
Blinkintervall falsch/wahr: Bild bei falsch oder wahr blinken lassen. Eingabe in Millisekunden ohne Einheit.
Farbe falsch/wahr: Hier können Icons in Wunschfarbe eingefärbt werden. 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 Wünschfarbe passt.)
Schatten außen
X Y Versatz: Der Verstaz zum Rand des Widgets in px
Blur: Dieser Wert steuert die Härte des Schattens. Je größer der Wert, desto weicher der Schatten
Größe: Die Größe des Schattens in px
Farbe: Hier wird die Farbe des Schatten eingesetzt.
Farbe Aktiv: Hier wird die Farbe für den Schatten eines aktiven Widgets eingesetzt.
Schatten innen
X Y Versatz: Der Verstaz zum Rand des Widgets in px
Blur: Dieser Wert steuert die Härte des Schattens. Je größer der Wert, desto weicher der Schatten
Größe: Die Größe des Schattens in px
Farbe: Hier wird die Farbe des Schatten eingesetzt.
Farbe Aktiv: Hier wird die Farbe für den Schatten eines aktiven Widgets eingesetzt.
Umrandungen
Breite: Stärke der Umrandung in px
Stil: Stil der Umrandung. Solid - Dotted - Groove u.v.m
Farbe: Hier wird die Farbe der Umrandung eingesetzt.
Farbe Aktiv: Hier wird die Farbe für die Umrandung eines aktiven Widgets eingesetzt.
Ein Widget für die Navigation, als Button, als Schalter oder als Background. Dieses Widget lässt sich im Nachhinein auf den passenden Typen umstellen, ohne die CSS Einstellungen zu verlieren. Das macht das 'Copy & Paste' sehr einfach. Man erstellt sich einmal ein Widget mit dem gewünschtem Layout und man kann es ohne Probleme durch 'Kopieren und Einfügen' auf seiner View (oder im Projekt) verteilen. Danach stellt man den passenden Typ (Switch, State, Navigation, Background) ein und haucht dem Widget Leben ein.
Der Unterschied zum oben erklärtem Universal-Widget, das Widget kann auf mehrere States prüfen!
Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung
Widget Typ: Switch, State, Navigation, Background (Erklärung siehe oben)
Objekt ID: Der Pfad zum Datenpunkt der geschaltet werden soll.
Typ: Boolean oder String
Wert falsch/wahr: Hier wird der gewünschte Wert, der beim Schalten genutzt werden soll, eingetragen. Bei 'Boolean ist keine Eingabe nötig, es wird automatisch 'true/false' geschaltet
Beschriftung falsch: Hier wird die Bezeichnung, die im Widget angezeigt werden soll, eingetragen.
Bild falsch: Die Pfade zum Bild/Icon
Anzahl der Zustände: Hier wird die Anzahl der zu prüfenden Zustände festgelegt.
Objekt ID: Der Pfad zum Datenpunkt der geprüft werden soll.
Wert wahr: Hier wird der gewünschte Wert, auf den geprüft werden soll, eingetragen.
Beschriftung wahr: Hier wird die Bezeichnung, die im Widget angezeigt werden soll, eingetragen.
Bild wahr: Die Pfade zum Bild/Icon
Blinkintervall wahr: Bild bei 'wahr' blinken lassen. Eingabe in Millisekunden ohne Einheit.
Hintergrund Aktiv: Hier wird die Hintergrundfarbe für ein aktives Widgets eingesetzt.
Schatten aussen aktiv: Hier wird die Farbe für den Schatten eines aktiven Widgets eingesetzt.
Schatten innen aktiv: Hier wird die Farbe für den Schatten eines aktiven Widgets eingesetzt.
Umrandung aktiv: Hier wird die Farbe für die Umrandung eines aktiven Widgets eingesetzt.
Farbe wahr: Hier können Icons in Wunschfarbe eingefärbt werden. 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 Wünschfarbe passt.)
Hintergrund
Farbe: Hier wird die Hintergrundfarbe des Widgets eingesetzt.
Transparenz: Die Tranzparenz in diesen Feld bezieht sich nur auf das Widget selbst (inkl. Schatten und Umrandungen) und nicht auf den Inhalt! 0 ist ausgeblendet, 1 ist voll sichtbar. Zwischenwerte werden mit . eingeben. Beispiel: 0.5 für 50% Deckkraft.
Ecken
Abrundungen: Hier können alle Ecken des Widgets einzeln abgerundet werden
Inhalt
Stil: Die Ausrichtung des Inhaltes, ob es ein horizontales oder vertikales Widget sein soll.
Ausrichtung: Hier wird die Ausrichtung des Inhalts festgelegt. Anfang - Mitte -Ende (mit oder ohne Abstand zwischen Txte und Icon), innerhalb des Widgets
Reihenfolge: Hier wird festgelgt ob der Text vor oder nach dem Icon angezeigt werden soll
Inhalt Transparenz: Die Tranzparenz in diesen Feld bezieht sich nur auf den Inhalt des Widget (Text und Icon)! 0 ist ausgeblendet, 1 ist voll sichtbar. Zwischenwerte werden mit . eingeben. Beispiel: 0.5 für 50% Deckkraft.
Text
Farbe: Textfarbe
Größe. Schriftgröße in px
Position: Ausrichtung der Beschriftung. Anfang - Mitte - Ende, innerhalb des Widgets
Abstände: Hier könnt ihr feste Abstände der Beschrifftung zum Rand des Widgets festlegen.
Bild
Größe: Hier wird die Bildgröße in px festgelegt
Position: Ausrichtung des Bildes/Icons. Anfang - Mitte - Ende, innerhalb des Widgets
Abstände: Hier könnt ihr feste Abstände für das Bild zum Rand des Widgets festlegen.
Drehung: Das Bild lässt sich in jeder Richtung drehen. Angegeben wird der Wert in Grad, ohne Einheit. Auch negative Zahlen sind möglich.
Spiegeln: Horizontales Spiegeln des Bildes.
Blinkintervall falsch: Bild bei falsch blinken lassen. Eingabe in Millisekunden ohne Einheit.
Farbe falsch: Hier können Icons in Wunschfarbe eingefärbt werden. 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 Wünschfarbe passt.)
Schatten außen
X Y Versatz: Der Verstaz zum Rand des Widgets in px
Blur: Dieser Wert steuert die Härte des Schatten. Je größer der Wert, desto weicher der Schatten
Größe: Die Größe des Schattens in px
Farbe: Hier wird die Farbe des Schattens eingesetzt.
Schatten innen
X Y Versatz: Der Verstaz zum Rand des Widgets in px
Blur: Dieser Wert steuert die Härte des Schatten. Je größer der Wert, desto weicher der Schatten
Größe: Die Größe des Schattens in px
Farbe: Hier wird die Farbe des Schattens eingesetzt.
Umrandungen
Breite: Stärke der Umrandung in px
Stil: Stil der Umrandung. Solid - Dotted - Groove u.v.m
Farbe: Hier wird die Farbe der Umrandung eingesetzt.
Ein Widget um einfach nur ein Bild anzuzeigen. Außerdem können abhängig vom Wert eines Datenpunktes zwei unterschiedliche Bilder angezeigt werden.
Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung
Objekt ID: Der Pfad zum Datenpunkt der geschaltet werden soll.
Wert: Hier wird der gewünschte Wert, auf den geprüft werden soll, eingetragen.
Bild falsch/wahr: Die Pfade zum Bild/Icon
Klick durchlassen? Wenn ausgewählt, kann durch das Widget durchgeklickt werden um zum Beispiel einen dahinterliegenden Schalter zu betätigen
Ecken
Abrundungen: Hier können alle Ecken des Widgets einzeln abgerundet werden
Bild
Drehung: Das Bild lässt sich in jeder Richtung drehen. Angegeben wird der Wert in Grad, ohne Einheit. Auch negative Zahlen sind möglich.
Spiegeln: Horizontales Spiegeln des Bildes.
Inhalt Transparenz: Die Tranzparenz in diesen Feld bezieht sich nur auf den Inhalt des Widget (Text und Icon)! 0 ist ausgeblendet, 1 ist voll sichtbar. Zwischenwerte werden mit . eingeben. Beispiel: 0.5 für 50% Deckkraft.
Blinkintervall falsch/wahr: Bild bei falsch oder wahr blinken lassen. Eingabe in Millisekunden ohne Einheit.
Farbe falsch/wahr: Hier können Icons in Wunschfarbe eingefärbt werden. 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 Wünschfarbe passt.)
Schatten außen
X Y Versatz: Der Verstaz zum Rand des Widgets in px
Größe: Die Größe des Schattens in px
Größe innen: Die Größe des Bereich hinter dem Bild. Nutze diese Einstellung bei größeren Bildern um den Schatten weiter nach außen zu schieben.
Farbe: Hier wird die Farbe des Schatten eingesetzt.
Farbe Aktiv: Hier wird die Farbe für den Schatten eines aktiven Widgets eingesetzt.
Die Slider. Das Besondere an unseren Slidern, es lassen sich alle relevanten Daten ein- und ausblenden. Die Größen der Balken und Knöpfe und die Radien lassen sich einstellen. Ein Highlight, jeder Slider lässt sich stufenlos um -45°/45° drehen. (Folgende Einstellungen sind bei beiden Widgets identisch)
Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung
Objekt ID: Der Pfad zum Datenpunkt
Min. Wert: Minimum Wert des Sliders
Max. Wert: Maximum Wert des Sliders
Schritt: Gebe hier an in welchen Schritten/Stufen du den Slider bewegen möchtest
Ausrichtung: Hier kann der Slider um 45 Grad in beide Richtungen gekippt werden
Beschriftung: Text, der unter dem Slider steht
Text voranstellen: Text, der vor dem Wert stehen soll
Text anhängen: Text, der hinter dem Wert stehen soll
Zeige Min/Max Wert Wenn ausgewählt, wird der Minimum- und Maximum-Wert angezeigt
Zeige Wert Wenn ausgewählt, wird der aktuelle Wert angezeigt
Wert erst beim loslassen setzen: Wenn ausgewählt, wird der Wert erst beim loslassen in den Datenpunkt geschrieben
Invertiere Min/Max: Wenn ausgewählt, wird der Slider gespiegelt. Minimum- und Maximum-Wert tauschen die Seiten
Slider Balken
Größe: Die Höhe/Breite des Balkens in px
Farbe: Farbe des Balkens
Rundung: Hiermit können die Ecken des Balkens abgerundet werden
Slider Regler
Größe: Die Größe des Reglers in px
Farbe: Farbe des Reglers
Rundung: Hiermit können die Ecken des Reglers abgerundet werden
Text
Farbe: Farbe der Texte
Wert Farbe: Farbe des aktuellen Werts
Größe: Die Schriftgröße
Ein ..
Ein Widget um sich ein JSON als Tabelle anzeigen zu lassen. Die Tabelle bietet für einzelne Spalten verschiedene frei konfigurierbare Formatierungen wie Zahlen, Datum & Uhrzeit, Bild und Boolean. Außerdem kann per Klick auf die Spaltenüberschrift die Tabelle sortiert werden.
Achtung: Ein Eintrag im Feld 'Attribut in JSON' ist bei unserem Widget zwingend nötig. Ihr könnt sie euch über den 'Tabellenkopf' anzeigen lassen und dann in das Feld 'Attribut in JSON' eintragen.
Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung
Objekt ID: Der Pfad zum Datenpunkt
Tabellenkopf: Wenn ausgewählt, wird der Tabellenkopf angezeigt
Tabellenkopf fixieren: Wenn ausgewählt, bleibt der Tabellenkopf beim scrollen immer oben sichtbar
Zeilenlimit: Anzahl der anzuzeigenden Zeilen
Scrollen vertikal: Wenn ausgewählt, kann vertikal gescrollt werden
Scrollen horizontal: Wenn ausgewählt, kann horizontal gescrollt werden
Aktualisierung (Sekunden): Gebe hier ein Intervall ein um die Tabelle zu aktualisieren. 0 = bei Datenpunktänderung. (Funktioniert nicht Datenpunkttyp ein Object ist. Gebe dann ein Intervall ein)
Überschrift, wenn JSON leer ist (...): Hier kannst du eigene Spaltenüberschriften eintragen, wenn das JSON leer ist
Spaltenanzahl: Anzahl der Spalten
Zeige Spalte: Wenn ausgewählt, wird die Spalte angezeigt.
Spaltenüberschrift: Setze hier eine Überschrift für die Spalte. Ersetzt den Attributnamen im Tabellenkopf.
Attribut in JSON: Trage hier das Attribut aus dem JSON ein, welches in dieser Spalte angezeigt werden soll. So kannst du die Reihenfolge der Spalten beeinflussen.
Platzhalter wenn Zeile leer ist: Zeige einen alternativen Text, wenn der Wert leer ist.
Spaltenbreite: Gebe der Spalte eine feste Breite, damit diese immer die gleiche Größe behält, wenn sich der Inhalt ändert.
Textausrichtung: Horizontale Ausrichtung des Textes innerhalb der Spalte
Format: Formatiere den Wert
Format = datetime
Datum/Zeit Format: Trage hier das Format des Datums und/oder der Zeit ein
Format Hilfe: H = Stunden, i = Minuten, s = Sekunden, S = Millisekunden, d = Tag, M = Monat, m = Monatszahl, y = Jahr
Format = image
Bildgröße: Größe des Bilds in px
Format = boolean
Zeige als Checkbox: Boolesche Werte werden als Checkbox angezeigt
Farbe falsch/wahr: Farbe der Checkbox
Format = number
Nackommastellen: Anzahl Nachkommastellen
Dezimaltrennzeichen: Ändere hier das Dezimaltrennzeichen
Tausendertrennzeichen: Ändere hier das Tausendertrennzeichen
Schwellenwerte aus Dp: Hier Datenpunkt eintrage, um Objekt aus Datenpunkt zu nehmen
Schwellenwert aus Text: Trage hier die Schwellenwerte ein
Mit Schwellenwerte kannst du den Werd und/oder den Hintergrund der ganzen Zeile einfärben. Beachte beim erstellen die Reihenfolge. Sobald eine Prüfung zutrifft werden die restlichen ignoriert! Das Objekt für die Schwellenwerte ist bei beiden das gleiche:[ {"comparator":"<=", "value":2, "color":"#ff0000", "background":"#333333"}, {"comparator":"<=", "value":2, "color":"#ffff00"} ]
comparator: Gebe hier den Vergleichsoperator an (Zulässige Operatoren: ==, <=, >=, <, >, !=)
value: Der Wert, bei dem der Zustand wahr ist.
color: Textfarbe für den Wert.
background: Hintergrundfarbe für die ganze Zeile.
Ein ..