EDOMI - Zeigt her eure Visus!

[stonie2oo4]

Ich weiß, ich weiß . Steht noch auf der Todo Liste

[mwKNX]

Habs hinbekommen,
Hab jetzt eibfach eine Schleimspur ohne Eckenradien erstellt und diese von Kreismittelpunkt bis Kreismittelpunkt in der Größe veränderbar gemacht.
Dazu noch ein Element links welches nur den restlichen fehlenden Radius grün färbt sobald der Regler nach rechts geschoben wird.

Wie wäre es, wenn du deine Vorgehensweise im Wiki erklärst?

[j3sk0]

Absolut richtig - hatte ich schon laaaange vor... Aber man kommt ja zu nix Vielleicht hat jemand Lust ein Beispielprojekt zu erstellen, dass die wichtigsten Features (Visu) ein wenig präsentiert?!

*push* Vielleicht hat ja jemand Lust, vielleicht auch ein kleines Video zu machen....

[stonie2oo4]

Habs hinbekommen,
Hab jetzt eibfach eine Schleimspur ohne Eckenradien erstellt und diese von Kreismittelpunkt bis Kreismittelpunkt in der Größe veränderbar gemacht.
Dazu noch ein Element links welches nur den restlichen fehlenden Radius grün färbt sobald der Regler nach rechts geschoben wird.
Schön währe halt, wenn sich der grüne Balken während dem Schieben verändert, nicht erst beim loslassen (@gaert, Wink mit dem Zaunpfahl )

Und hier noch die ersten Entwürfe meiner Visu, dmit ich nicht das ganze Thema nur mit meinen Problemen zumülle :P.
Bin noch nicht so ganz glücklich mit der Menüführung, aber mir ist bis jetzt noch nichts besseres eingefallen.

1.JPG
2.JPG

[gaert]

Na logisch (Variante Bargraf): Die %-Angabe bezieht sich auf die gesamte Breite der "Schleifbahn" - Du musst quasi noch 2xRadius abziehen... Der Knopf "parkt" ja nicht bei 0, sondern sein Mittelpunkt(!) ist bei 0 bzw. Max.

[stonie2oo4]

Hey, ihr 2 seid echt genial
Das mit dem umrechnen war mir klar, jedoch zeig ich euch lieber nicht was/wo ich gerechnet hab .

Also die Größe der "Schleimspur" scheint nun fast zu passen.
Hier ein paar Bilder, damit man erkennt was ich meine:
Der obere ist mit Bargraf und der untere mit veränderter Größe (überlagerten Balken).

1.JPG
Bild 1: Alles Super

2.JPG
Bild 2: Oben (Bargraf) Hintergrund wir ausgeblendt/ überdeckt (Wird wohl auch nicht anderst möglich sein?)
"Schleimspur" hinkt bei beiden hinterher
Beim überlagertem Balken ist der Eckenradius nicht ausgebildet da noch keine 10px breit

3.JPG
Bild 3: Oben (Bargraf) "Schleimspur" hat aufgeholt, beim unteren fehlt noch ein bisserl

4.JPG
Bild 4

5.JPG
Bild 5: Oben "Schleimspur" setzt zum Überholvorgang an

6.JPG
Bild 6: passt



Ich glaub das liegt irgendwie an den Eckenradien, das es nicht zu 100% passt.
Habt ihr vieleicht noch ne Idee wie man das in den Griff bekommt?

[MrMirror]

Achso, sorry missverstanden: Ich meine natürlich bei mir die Objektgröße,nicht die Hintergrundfarbe! Die bleibt bei mir unverändert.

[gaert]

Ja nee... Bei der Hintergrundfarbe ist die absolute Breite des Sliders egal... Der Gradient wird (hier) in Prozent definiert und passt sich somit automatisch der Breite des Sliders (bzw. der "Schleimspur") an.

[MrMirror]

Ich mach das so: {#/255*160} wobei bei mir 160 Pixel die Gesamtbreite des Sliders ist.

[gaert]

Du musst beim "Bargraf" (also der Hintergrundfarbe) noch umrechnen schätze ich:

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

...sorgt für 0..100% - das KO muss also Werte von 0..100 liefern.

Falls das KO z.B. 0..255 liefert:

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

[stonie2oo4]

Ich mach das so, dass bei 0 mein Hintergrund Transparent ist und ab >0 wird er dann orange

Ich merk schon, der Teufel steckt im Detail .
Hab jetzt mal beides probiert, also mit 2 überlagerten Balken und mit Bargraph. Aber beide sind noch nicht perfekt.

Nr.1: 2 Balken
1.JPG

3.JPG

Seht ihr das? Bei 26% ist der grüne Balken vor dem Kreis und bei 65% würde es dann passen.
Woran kann das liegen?

Nr.2: Bargraf 9
2.JPG

1. Irgendwie klappts mit dem Wert nicht richtig, Balken ist Kreis immer vorraus.
2. Ab 1% Verschwindet der Untergrund (sollte eigentlich aussehen wie mit Balken).
Geht das überhaupt mit dem Bargraf?

[MrMirror]

Ich mach das so, dass bei 0 mein Hintergrund Transparent ist und ab >0 wird er dann orange, ich habe ja auch abgerundete Ecken (genau hinschauen), und das funktioniert einwandfrei! Wie gesagt sicherlich nicht das einfachste... siehe gaerts-Lösung aus #179, aber es funktioniert ;-)

[gaert]

Eben... (runde Ecken) Daher: Hintergrundfarbe

Ist im Prinzip ganz einfach: Die Hintergrundfarbe wird vom KO verändert, also aus rgb({#},{#},0) wird z.B. rgb(255,255,0).

Die "Bargraf"-Farbe definiert einfach einen linearen Gradienten und setzt den KO-Wert für die "Größe" des Gradienten in Prozent ein. Die Farbe selbst (bzw. die beiden Farben des Gradienten) sind dagegen fix angegeben. Das Ganze sieht nur so kompliziert aus, weil der Gradient quasi abgeschnitten wird, denn sonst hätte man einen weichen Verlauf.

[stonie2oo4]

Also das mit der Größe hab ich hinbekommen, ist ja echt genial, was man da alles machen kann .
Einziges Problem is, das es mit Eckenradien nicht so gut funtioniert, daher bei dir eckig?

1.JPG
Bild1: links schwarzer Strich

2.JPG
Bild 2: Nicht richtig abgerunded

3.JPG
Bild3: Sieht gut aus

Aber das mit dem Bargraf, blick ich noch nicht ganz.
Muss ich mal noch weiter probieren .
Falls nicht, meld ich mich wieder.

[gaert]

Oder eine dynamische Hintergrundfarbe verwenden - als Demo ist ja die Farbe "Bargraf (9)" ab Werk dabei...