HEX >>> RGB

GUI Relevanten, PaperUI, BasicUI, HabPanel ...

Moderatoren: seppy, udo1toni

ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

HEX >>> RGB

Beitrag von ma37c4 »

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

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: HEX >>> RGB

Beitrag von peter-pan »

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.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

Re: HEX >>> RGB

Beitrag von ma37c4 »

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

Benutzeravatar
udo1toni
Beiträge: 13857
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: HEX >>> RGB

Beitrag von udo1toni »

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 :)
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: HEX >>> RGB

Beitrag von peter-pan »

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 ?
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

Re: HEX >>> RGB

Beitrag von ma37c4 »

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. :roll:

lg
Matthias

ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

Re: HEX >>> RGB

Beitrag von ma37c4 »

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

Benutzeravatar
peter-pan
Beiträge: 2564
Registriert: 28. Nov 2018 12:03
Answers: 25
Wohnort: Schwäbisch Gmünd

Re: HEX >>> RGB

Beitrag von peter-pan »

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.
Du hast keine ausreichende Berechtigung, um die Dateianhänge dieses Beitrags anzusehen.
Pi5/8GB(PiOS Lite 64-bit(bookworm)/SSD 120GB - OH4.1.1 openhabian

Benutzeravatar
udo1toni
Beiträge: 13857
Registriert: 11. Apr 2018 18:05
Answers: 222
Wohnort: Darmstadt

Re: HEX >>> RGB

Beitrag von udo1toni »

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.
openHAB4.1.2 stable in einem Debian-Container (bookworm) (Proxmox 8.1.5, LXC), mit openHABian eingerichtet

ma37c4
Beiträge: 9
Registriert: 25. Jul 2021 22:17

Re: HEX >>> RGB

Beitrag von ma37c4 »

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.

Antworten