In dieser Artikelserie zeige ich Dir die ioBroker VIS-Inventwo Widgets. Im Artikel schauen wir uns das Color Picker Widget genauer an.
Mit dem Inventwo Color Picker Widget kannst Du auf Deiner ioBroker VIS Visualisierung sogenannte Color-Picker einfügen. Mit diesem Widget kannst Du einen Farbwert über verschiedene Darstellungen (Drehregler oder Auswahl-Felder auswählen und in den konfigurierten Datenpunkt übernehmen.
Im ersten Schritt fügst Du dazu das Color-Picker Widget auf Deiner Visualisierung ein. Markiere dann das Widget und öffne auf der rechten Seite den Eigenschaftsbereich Allgemein. In diesem Bereich findest Du einige Optionen und Einstellungsmöglichkeiten des Widgets. Im ersten Schritt habe ich hier das zu steuernde Objekt (Datenpunkt) gewählt. In meinem Beispiel möchte ich über die Visualisierung ein Yeelight-Leuchtmittel farblich steuern. Ich habe dazu in den Objekten den Datenpunkt …control.rgb im Eigenschaftsfeld Objekt-ID hinterlegt. In den weiteren Einstellungen des Color Pickers wird dann zunächst das Farbmodell gewählt. In meinem Fall habe ich hier das Farbmodell HEX ausgewählt. Das Widget stellt folgende Farbmodelle zur Verfügung:
- HEX
- HEX8
- RGB
- HSL
- HSV
- CIE
Tipp:
Falls Du Dir nicht sicher bist, welches Format Dein Leuchtmittel verwendet, erstelle einfach einen eigenen Datenpunkt, wähle Deinen Datenpunkt als Objekt-ID aus und versuche mit den Farbwerten zu experimentieren. So siehst Du relativ einfach welches Farbmodell passt. In der Regel wird hier das HEX Farbmodell unterstützt.
Zudem kannst Du nun am Widget noch die Ausrichtung des Pickers sowie zusätzliche Optionen aktivieren. Zur Veranschaulichung habe ich hier im folgenden Screenshot alle Optionen aktiviert. Weiter kannst Du dem Picker noch eine Beschriftung hinzufügen, welche dann neben dem Color dargestellt wird.
Zudem unterstützt das Widget auch alle anderen CSS-Eigenschaften wie z.B. Größenangaben, Abstände, Darstellung von Ecken, Umrandungen sowie die Möglichkeit zur Erstellung eines Schattens. Also wie immer ein wirklich sehr gelungenes und Leistungsstarkes Widget aus dem Hause Inventwo 🙂
Ich hoffe Dir gefällt der Artikel. Ich freue mich über Deinen Kommentar oder Fragen zum Thema 🙂