openhabforum.de

Hi,
bei meinem widget in OH 3 benötige ich zur Farbmanipulation aus einem hex-Farbwert die RGB-Werte.

Wie bekommt man von #3366ff die RGB-Werte 51, 102, 255 ?

So ähnlich hätte ich mir das gedacht:

Code: Alles auswählen

style:
  background: "=rgb((#3366ff).Rot+10, (#3366ff).Grün+25, (#3366ff).Blau-100)"

Vielen Dank für Ideen.

lg
Matthias

Hier ein paar Beispiele:

Code: Alles auswählen

background: linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%); 
background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%); 
            linear-gradient(122deg, rgba(34,193,195,1) 0%, rgba(253,187,45,1) 100%)

background: radial-gradient(circle, rgba(238,86,153,1) 0%, rgba(148,187,233,1) 100%); 
            radial-gradient(circle, rgba(238,86,153,1) 30%, rgba(148,187,233,1) 100%)
            radial-gradient(circle, lightgreen, yellow, lightblue 20%, #6fa8dc 60% ,#ffe74c 95%)
            
            radial-gradient(circle, red, yellow, green 30%, rgba(148,187,233,1) 100%)
            radial-gradient(circle, lightgreen,yellow,#20B2AA 20% #6fa8dc 60%,#ffe74c 95%)

Unter dieser URL solltest du einen Online-Converter finden.

Das wäre bei dir dann rgb(51, 102, 255).
oder:

Code: Alles auswählen

style:
  background: rgb(51, 102, 255)

Ich bin mir aber nicht sicher, was du mit den anderen Farben machen willst, bzw. was das mit den Additionen und Subtraktionen soll.

Danke für die Antwort peter-pan.

Die Online-Converter erklären mir den Rechenweg nicht.

Die Farbmanipulation benötige ich für einen einen Farbverlauf deren Farben von einem Item und einem Index (oh-repeater) abhängig sind.

Bin jetzt selber drauf gekommen, dass in #3366ff die drei Grundfarben einfach extrahiert werden können -> Rot=33 Grün=66 Blau=ff.

itemFarbe = #3366ff

Code: Alles auswählen

Number.parseInt(props.itemFarbe.substring(1,3),16) = 51
Number.parseInt(props.itemFarbe.substring(3,5),16) = 102
Number.parseInt(props.itemFarbe.substring(5,7),16) = 255

Somit kann ich weitere Berechnungen machen.

lg
Matthias

Also, ausprobiert habe ich es nicht, aber mutmaßlich ginge es auch so:

Code: Alles auswählen

var itemFarbe    = "#3366ff" 
val Color cFarbe = Color.decode(itemFarbe)
val red          = cFarbe.red
val blue         = cFarbe.blue
val green        = cFarbe.green

Kann auch sein, dass es getRed, getBlue und getGreen sind, oder dass Color nicht ohne import zur Verfügung steht

ma37c4 hat geschrieben: ↑26. Okt 2022 17:28 Die Online-Converter erklären mir den Rechenweg nicht.

Sorry, das habe ich auf Basis des Code-Schnipsel missinterpretiert. Aber du bist ja dann selbst die Lösung mit der JavaScript-Funktion gefunden.

Darf man fragen, wie das fertige Widget aussieht und was es macht ?

Hi Udo,

udo1toni hat geschrieben: ↑26. Okt 2022 19:14 Also, ausprobiert habe ich es nicht, aber mutmaßlich ginge es auch so:
Code: Alles auswählen
var itemFarbe    = "#3366ff" 
val Color cFarbe = Color.decode(itemFarbe)
val red          = cFarbe.red
val blue         = cFarbe.blue
val green        = cFarbe.green
Kann auch sein, dass es getRed, getBlue und getGreen sind, oder dass Color nicht ohne import zur Verfügung steht

das sieht nach Script innerhalb einer Rule aus.

Im Widget direkt klappt das nicht.

Mit Widget-Variablen hab ich mir schon die Nächte um die Ohren gehauen.

lg
Matthias

peter-pan hat geschrieben: ↑26. Okt 2022 21:29
ma37c4 hat geschrieben: ↑26. Okt 2022 17:28 Die Online-Converter erklären mir den Rechenweg nicht.
Darf man fragen, wie das fertige Widget aussieht und was es macht ?

Ja - siehe: viewtopic.php?t=7451

ma37c4 hat geschrieben: ↑26. Okt 2022 21:36 Ja - siehe: viewtopic.php?t=7451

Danke für die Info Matthias. Das Widget muss ich mir mal genauer anschauen, ob ich das mit meinen AVM-Thermostaten auch benutzen kann.

Zurzeit habe ich eine Abwandlung eines Thermostat-Widgets für diesen Zweck im Einsatz. Das auch mit Farb- und Formverläufen arbeitet.

thermostat.jpg

Etwas ähnliches hab ich mir auch aus einem Music-Player-Widget abgeleitet:

sonos.jpg

Bei beiden Widgets besteht auch neben der Möglichkeit von Farb- und Formgestaltung auch die Möglichkeit die Grösse zu beeinflussen.

ma37c4 hat geschrieben: ↑26. Okt 2022 21:34 Hi Udo,
udo1toni hat geschrieben: ↑26. Okt 2022 19:14 Also, ausprobiert habe ich es nicht, aber mutmaßlich ginge es auch so:
Code: Alles auswählen
var itemFarbe    = "#3366ff" 
val Color cFarbe = Color.decode(itemFarbe)
val red          = cFarbe.red
val blue         = cFarbe.blue
val green        = cFarbe.green
Kann auch sein, dass es getRed, getBlue und getGreen sind, oder dass Color nicht ohne import zur Verfügung steht
das sieht nach Script innerhalb einer Rule aus.

Im Widget direkt klappt das nicht.

Stimmt ja, wobei Dein Number.ParseInt ja auch nur eine Methode des Datentyps ist. Der Datentyp Color könnte schon vorhanden sein. Also vielleicht so:

Code: Alles auswählen

Color.decode("#3366ff").red
Color.decode("#3366ff").blue
Color.decode("#3366ff").green

Wie gesagt, nicht ausprobiert.

peter-pan hat geschrieben: ↑26. Okt 2022 22:22
ma37c4 hat geschrieben: ↑26. Okt 2022 21:36 Ja - siehe: viewtopic.php?t=7451
Danke für die Info Matthias. Das Widget muss ich mir mal genauer anschauen, ob ich das mit meinen AVM-Thermostaten auch benutzen kann.

Zurzeit habe ich eine Abwandlung eines Thermostat-Widgets für diesen Zweck im Einsatz. Das auch mit Farb- und Formverläufen arbeitet.
thermostat.jpg

Etwas ähnliches hab ich mir auch aus einem Music-Player-Widget abgeleitet:
sonos.jpg

Bei beiden Widgets besteht auch neben der Möglichkeit von Farb- und Formgestaltung auch die Möglichkeit die Grösse zu beeinflussen.

Deine Thermostat-Widgets sehen super aus!

Ich brauchte was für die gezielte Auswahl der Soll-Temperatur wg. der Funk-Latenz der Homematic-Thermostate bzw. dem Verbund von Radiator-Ventil, Wand-Thermostat und Fenster-Kontakt.

openhabforum.de

HEX >>> RGB

HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB

Re: HEX >>> RGB