Colorpicker - inventwo/ioBroker.vis-inventwo GitHub Wiki

Colorpicker

Baue dir mit diesem Widget einen Colorpicker zusammen, wie du ihn brauchst.

Preview_Colorpicker

Mithilfe von verschiedenen Reglern kannst du jederzeit deine Wunschfarbe einstellen.

Allgemein

Anleitung: Über den Link kommt ihr jederzeit, aus dem VIS Editor zu dieser Anleitung Objekt ID: Pfad des Datenpunktes Transparenz Wert: (Optional) Datenpunkt für Transparenz (Wert von 0 bis 1) Beschriftung: Beschriftung des Widgets

Colorpicker

Farbmodell: Wähle zwischen HEX, HEX 8, RGB, HSV, HSL und CIE Ausrichtung: Bedienelemente horizontal oder vertikal Farbkreis: Farbkreis anzeigen colorpicker_wheel Slider für HUE: Anzeigen eines Slider um den HUE Wert zu ändern colorpicker_hue Slider für Sättigung: Anzeigen eines Slider die Sättigung zu ändern colorpicker_saturation Slider für Helligkeit: Anzeigen eines Slider um Helligkeit zu ändern colorpicker_brightness Slider für Rot-Kanal: Anzeigen eines Slider um den Rot-Wert zu ändern colorpicker_channel_red Slider für Grün-Kanal: Anzeigen eines Slider um den Grün-Wert zu ändern colorpicker_channel_green Slider für Blau-Kanal: Anzeigen eines Slider um den Blau-Wert zu ändern colorpicker_channel_blue Slider für Transparenz: Anzeigen eines Slider um Transparenz zu ändern colorpicker_opacity Slider für Temperatur: Anzeigen eines Slider um Farbtemperatur zu ändern colorpicker_temperature

CSS inventwo Widget

Colorpicker

Breite: Die Breite, bzw. Höhe bei waagerechter Ausrichtung, der einzelnen Bedienelemente Abstand zwischen Slider: Abstand zwischen den einzelnen Bedienelementen Breite der Regler: Größe der Regler, um die Bedienelemente zu bedienen Abstand um den Reglern: Abstand zwischen Regler und Rand der Bedienelemente

Hintergrund

Farbe: Hintergrundfarbe des Widgets 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

Text

Farbe: Textfarbe 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

Position: Ausrichtung des Bildes/Icons. Anfang - Mitte - Ende, innerhalb des Widgets Abstände: Freies verschieben des Bildes

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

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

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.


Zum nächsten Widget: Image