Wertanzeige mit Farbverlauf

[dentech]

Und mit welchem Tool erstellt ihr sowas?

[trax]

... geht mit EDOMI Boardmittel = dynamische Vordergrundfarbe: hsl({140-(4*#)}, 75%, 55%)

[uzi10]

... geht mit EDOMI Boardmittel = dynamische Vordergrundfarbe: hsl({140-(4*#)}, 75%, 55%)

Kannst du eventuell auch einen Screenshot machen? Sieht toll aus

[trax]

wenn's hilft ... ist aber wirklich nur ein Wertanzeiger (Polar - Kontur) mit der dyn. Vordergrundfarbe / sowie ein statisches zweites (darunterliegendes) Element als Hintergrund/Bereichsanzeige
wertanzeige.PNG bereichsanzeige.PNG

[uzi10]

oh dankeschön. funktioniert gut .. ist eine gute Variante gegen die Designs mit Farben die sich in Stufen ändern

[dentech]

Das ist alles super, bekommt man sowas auch mit Boardmitteln hin? Die Vordergrundfarbe darf ja leider kein -linear-gradient enthalten, oder?

https://knx-user-forum.de/filedata/f...64&type=medium

Vielen Dank für die Hilfe.

[shortyle]

Das ist alles super, bekommt man sowas auch mit Boardmitteln hin?

Geht auch mit Boardmitteln, ist aber etwas tricky und bedarf "relativ" viel Aufwand für das Ergebnis:

Ergebnis:
Bildschirmfoto 2021-03-29 um 16.52.43.png

des bedarf es:
1x Hintergrundfarbe (Farbverlauf)
1x Hintergrundfarbe (Farbe der Visu mit Opazität 1)
1x Vordergrundfarbe (Farbe der Visu mit Opazität 0.9)
5x Universalelemente (als Hintergrund und Abdeckung)
1x Wertanzeige (Wertanzeigebalken)
1x Universalelement (Temperaturanzeige als Wert)

1x iKO mit der aktuellen Temperatur allerdings invertiert (dazu in einer Logik einfach den Temperaturwert mit -1 multiplizieren und auf ein eigenes iKO ausgeben
1x iKO/GA mit der aktuellen Temperatur

Wichtig zu wissen ist, dass der Wertanzeiger den Farbverlauf um so weiter verdeckt je kälter es wird...sprich von rechts nach links.
Mit dem Farbverlauf kann natürlich solange rumexperimentiert werden, bis es einem gefällt.


und so wird es gemacht:
Bildschirmfoto 2021-03-29 um 16.58.25.png

1x Hintergrundfarbe (Farbverlauf) - diese bildet den farbigen Hintergrund.

-webkit-linear-gradient(left, rgba(3,155,229,1) 0%, rgba(251,192,45,1) 50%, rgba(230,81,0,1) 100%);

1x Hintergrundfarbe (Farbe der Visu mit Opazität 1) - diese sorgt dafür, dass mit einem im Vordergrund liegenden UE das Ganze wie ein Balken/Kreis aussieht

rgba(117,117,117,1)

1x Vordergrundfarbe (Farbe der Visu mit Opazität 0.9) - diese sorgt für das gleiche Ergebnis wie bei der Wertanzeige die Definition der Bereichsanzeige

rgba(117,117,117,0.9)

Die UE am Besten auch in dieser Reihenfolge anlegen, so kann man sich die Z-Index Vergabe ersparen:
1x UE
- Größe 200x200
- Hintergrundfarbe (Farbverlauf)
- Radius 100 an allen 4 Ecken (damit es ein Kreis wird)

1x UE -> wird mittig vor das erste UE platziert, damit der Hintergrund als Balken erscheint
- Größe 170x170
- Hintergrundfarbe (Hintergrundfarbe der Visu mit Opazität 1)
- Radius 85 an allen 4 Ecken (damit es ein Kreis wird)

3x UE -> dienen zur Abdeckung im unteren Bereich, damit es kein geschlossener Kreis ist
- Größe 100x50
- Hintergrundfarbe (Farbe der Visu mit Opazität 1)
- 1 UE wird 45° gedreht, ein anderes -45° und das Letzte ohne Drehung

1x Wertanezeige
- Größe 200x200
- Typ: Polar Kontur; Größe: 105%; Richtung: invertiert; Startwinkel: 30; Endwinkel: 330; Zeigerstärke: 17; Bereichsanzeige: unsichtbar; Minimum: -40 ; Maximum: 20
- KO1: iKO mit invertierter Temperatur
- Vordergrundfarbe (Farbe der Visu mit Opazität 0.9)

1x UE -> für die aktuelle Temperatur
- Größe und Farbe nach Belieben
- KO1: iKO/GA mit aktueller Temperatur

Viele Spaß beim Nachbauen.

[uzi10]

shortyle wie sind die Einstellungen für den Wertanzeigebalken?? eine HSV Farbe oder RGB?
oder verdeckt einfach der eine graue Balken die Wertanzeige verkehrt?
Verstehe ich das richtig?

[shortyle]

Ich habe in der Beschreibung oben noch einmal etwas korrigiert. Bei dem Wertanzeiger handelt es sich nicht um einen Hintergrundfarbe sondern um eine (Vordergrund)Farbe.

uzi10 der Wertanzeigebalken hat nur die Vordergrundfarbe (Farbcode = Hintergrundfarbe der Visu als rgba) mit einer leichten Transparenz (0.9 Opazität).
Die Wertanzeige verdeckt also, mit seiner leicht transparenten Farbe, die noch nicht erreichte Temperatur, daher muss dieser gegen den Uhrzeigersinn (von rechts nach links) laufen.

[KarstenPI]

Hallo.
Ich habe soweit alles hinbekommen. Nur "KO1: iKO mit invertierter Temperatur" macht mir Sorgen. Wie invertiere ich die Temperatur?

[shortyle]

In einer Logik „mal -1“ rechnen und dann hast du den negativen Wert

[KarstenPI]

Super. Mit dem Logikeditor stehe ich noch auf Kriegsfuss. Kannst du mir das bitte etwas ausführrlicher beschrieben? Also welche Logikelemente benötige ich?

[shortyle]

Den Multiplikator Baustein nehmen (ist in den mathematischen LBS Ordner)

an E1 die tatsächliche gemessene Temp.
bei E2 trägst du einfach „-1“ ein

an A1 dann eine Ausgangsbox ungleich leer und dort dann das invertierte iKO hinterlegen

[KarstenPI]

Den Multiplikator Baustein nehmen (ist in den mathematischen LBS Ordner)

an E1 die tatsächliche gemessene Temp.
bei E2 trägst du einfach „-1“ ein

an A1 dann eine Ausgangsbox ungleich leer und dort dann das invertierte iKO hinterlegen

Soweit ... *staun* Und wie bekomme ich aus dem Viso dann Zugriff? Mir wird die Ausgangsbox irgendwie nicht angezeigt. :-(

image.png

[shortyle]

Das hab ich jetzt nicht so recht verstanden.
Anbei wie ich es gemacht habe. Das Runden davor kann man machen, muss man aber nicht.

5B676C33-B8FA-4ED2-9A28-18B4304A5ED7.jpg