Slider mit Bargraph

[crushervx]

Hallo zusammen,
ich bastel jetzt schon einige Stunden an einem simplen Slider mit dahinter liegendem Bargraph, aber ich bekomme es einfach nicht hin, dass der Bargraph bei einem kreisförmigen Slider, den Kreis-Mittelpunkt als 0% bzw. 100% Position nimmt.

So sieht das CSS für den Hintergrund derzeit aus.

-webkit-linear-gradient(left,
    #80e000 0%,
    #80e000 {#/255*100}%,
    #343434 {#/255*100}%,
    #343434 100%
) 

Daraus resultiert, dass der Bargraph bei werten über 127 zu weit rechts steht, und bei werten unter 127 zu weit links.

Bildschirmfoto 2017-04-18 um 16.28.09.png
Bildschirmfoto 2017-04-18 um 16.27.55.png

Die Grundeinstellungen sind wie folgt:
Bildschirmfoto 2017-04-18 um 16.30.09.png


Wie macht ihr das?

[crushervx]

Achso: Das Thema wurde hier schon diskutiert, aber ich konnte keine Lösung daraus ableiten.
https://knx-user-forum.de/forum/proj...der-übersicht
https://knx-user-forum.de/forum/proj...e-visus/page13

[hx5]

Kurz gesagt hat der Kreis im Element einen kürzeren Weg als der Bargraph. Leg den Bargraph in ein eigenes Universalelement hinter den Schieberegler und verkleiner dann das Universalelemtent bis es passt....

[crushervx]

Genau!
Der Slide-Bereich des Bargraph müsste eigentlich mit einem Offset von Radius anfangen und mit dem Selben Offset bei 100% aufhören.

Das mit dem 2. Universalement hatte ich mir auch schon überlegt, aber gehofft, dass es eine Lösung Mit CSS-Magie gibt, für die ich kein 2. Element brauche.

[crushervx]

Es geht:
Zettel & Stift rausgekramt, klargemacht, was ich überhaupt will, Mathe-Kenntnisse 8. Klasse hervorgekramt und Formel aufgeschrieben:

Hier umgesetzt als CSS-Regel:

-webkit-linear-gradient(left,
    #80e000 0%,
    #80e000 calc({#/255*100}% + {((1-#/(255/2))*10)}px),
    #343434 calc({#/255*100}% + {((1-#/(255/2))*10)}px),
    #343434 100%
) 

Erklärung: Die 10 in der Formel muss ersetzt werden, durch den jeweilen Slider-Radius.

Ergebniss:
Bildschirmfoto 2017-04-18 um 17.27.06.png
Bildschirmfoto 2017-04-18 um 17.26.53.png
Jetzt noch Abgerundete Ecken am Hintergrund und ich bin durch (vorerst) mit Slidern

[Inventor]

Hallo curshervx,

könntest du bitte deine Einstellungen für das Universalelement (Bargraf) einstellen, bekomme es mit den CSS-Regel leider nicht hin!?

Sehe ich das richtig das mit der CSS-Regel auch gleichzeitig der Hintergrund Farbe bestimmt wir?

Gruß Timo

[crushervx]

Hallo Timo,

Ja, korrekt.
#80e000 ist das Grün und
#343434 ist das Grau.

Das CSS oben enthielt noch einen Fehler. Der Hintergrund war am Anfang immernoch zu langsam und am Ende des Slidewegs zu schnell rechts.

Hier die Version die ich nun verwende, für CSS-Balken mit Einstellbaren mit Offsets links und rechts ( für Mittelpunkt des Slider-Knopfs).

-webkit-linear-gradient(left,
    rgba(0,0,255,0.5) 0%,
    rgba(0,0,255,0.5) calc({0/255*100}% + (( 1 - 0 / (255 / 2)) * (/*DURCHMESSER*/ / 2)) * 1px),

    rgba(255,0,0,0.5) calc({0/255*100}% + (( 1 - 0 / (255 / 2)) * (/*DURCHMESSER*/ / 2)) * 1px),
    rgba(255,0,0,0.5) calc({#/255*100}% + (( 1 - {#} / (255 / 2)) * (/*DURCHMESSER*/ / 2)) * 1px),

    rgba(0,0,0,0.5) calc({#/255*100}% + (( 1 - {#} / (255 / 2)) * (/*DURCHMESSER*/ / 2)) * 1px),
    rgba(0,0,0,0.5) calc(100% + (( 1 - 255 / (255 / 2)) * (/*DURCHMESSER*/ / 2)) * 1px),

    rgba(0,0,255,0.5) calc(100% + (( 1 - 255 / (255 / 2)) * (/*DURCHMESSER*/ / 2)) * 1px),
    rgba(0,0,255,0.5) 100%

) 

/*DURCHMESSER*/ muss überall durch die Breite des Balkens ersetzt werden, wie in dem Schiebregler angegeben

Ein folgender Screenshot macht die Funktion deutlich:
Bildschirmfoto 2017-04-23 um 02.57.57.png
Der Blaue Teil entspricht dem Offset, bei dem 0% anfängt, bzw. 100 % Aufhört.

Dieser wird berechnet indem man bei Druchmesser, den Wert Einträgt, der (bei einem horizontalen) Schiebregler bei Höhe steht.
Dies ist die Berechnungsgrundlage für den Mittelpunkt der Slider.

Bildschirmfoto 2017-04-23 um 03.06.18.png

Hoffe das war verständlich. Ist schon spät.

[Inventor]

Habs nun hinbekommen! Und noch mal danke!

[mfd]

Gibt es eine Möglichkeit die Zahl in der Mitte des Sliders "auszublenden"? Leider ist das manchmal eher störend als nützlich, vor allem wenn der Knopf in der Mitte des Sliders steht.
Ich hätte gerne einen "google-like" Schieberegler umgesetzt, aber das scheint schwieriger als gedacht...

Edit:
Ist das Verhalten, dass der Mauszeiger nicht der Knopf- bzw. der Stellwertposition entspricht irgendwie beeinflussbar?
Bei den ersten Vesuchen hatte ich auch den Fall, dass der Mauszeiger einen viertel Bildschirm weiter rechts war als der eingestellte Wert.
Ich habe zu dem Thema zwar ein paar Beiträge gefunden, diese sind aber über ein Jahr zurück, und keine wirklichen Lösungsvorschläge waren nicht dabei.

[mfd]

Hat niemand einen Tipp wie man einen Regler à la Google basteln könnte?
Irgendwie bekomme ich keine dünne Linie in Kombination mit einem größeren Regler-Knopf zustande...

[MrIcemanLE]

mfd dein Ziel ist sicher mit einem Visuelement auszukommen. Ich habe mehrere Elemente benutzt. Dann ist die Breite des Balkens auch kein Problem.
Zum ausblenden des Textes müsste sich gaert zu Wort melden. Das wäre in der Tat eine schöne Sache.

[stonie2oo4]

Ich mach die Schriftgröße einfach auf 1. Zwar nicht perfekt, aber fast nicht mehr wahrnehmbar.

[hx5]

Oder du baust die den Knopf/Anfasser selbst, der hier macht einen Halbkreis:
2017-08-25 10_45_43-EDOMI · Administration.png2017-08-25 10_47_27-EDOMI · Administration.png
2017-08-25 11_25_46-EDOMI · Visualisierung.png


Die Linie/Pfad und die Schleimspur sind aber zwei extra Elemente....

[MrIcemanLE]

hx5 hinter welchem Element liegt dann dein "Slider"?

Dein Knopf/Anfasser ist ein Universalelement, der sich je nach Wert auf einer Kreisbahn bewegt. Richtig?
"Schleimspur" (dunkel) ist fix und wahrscheinlich auch ein Universalelement / Bild
"Schleimspur" (hell) ist dann ein Drehregler? Wenn ja, dann könnte man das so auch auf Schieberegler umbauen.

off topic: Was versteckt sich hinter den beiden Icons? (Wenn ich fragen darf)

[hx5]

hx5 hinter welchem Element liegt dann dein "Slider"?

Dein Knopf/Anfasser ist ein Universalelement, der sich je nach Wert auf einer Kreisbahn bewegt. Richtig?
"Schleimspur" (dunkel) ist fix und wahrscheinlich auch ein Universalelement / Bild
"Schleimspur" (hell) ist dann ein Drehregler? Wenn ja, dann könnte man das so auch auf Schieberegler umbauen.

Der Dimmer besteht bei mir aus insgesamt 4 Elementen:
2017-08-25 13_31_39-EDOMI · Administration.png
2017-08-25 12_06_30-EDOMI · Administration.png
2017-08-25 13_24_42-EDOMI · Administration.png
2017-08-25 13_25_12-EDOMI · Administration.png

off topic: Was versteckt sich hinter den beiden Icons? (Wenn ich fragen darf)

Noch nichts, sind Platzhalter:
Zahnrad ist für die Einstellungen (Auto off, Dämmerung, Min/Max etc.)
Balken will ich mir mit dem Betriebstundenzähler einen ungefähren Verbrauch anzeigen lassen.