EDOMI - Zeigt her eure Visus!

[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...

[stonie2oo4]

Hey super, danke für die super schnelle Antwort .
Kannst du mir vieleicht auch noch auf die Sprünge helfen, mit welchem Befehl ich die X-Größe dynamisch verändern kann?

[MrMirror]

Hallo Ben,

Geht vielleicht auch einfacher, aber bei mir sind es 3 Elemente. Ganz unten der Graue Balken, dann kommt der orangene Balken und dann der eigentliche Slider. Der "Balken" ist einfach ein Standard-"Visuelement" mit dynamischem Design, welches je nach Wert des Status-KOs (absoluter Dimmwert) das Element in X-Größe verändert. Aufpassen muss man nur, da ja nicht 0-100 ankommt, sondern 0-255, also ggf. auf die gewünschte Pixelbreite umrechnen!

Gruß,
Christoph

[stonie2oo4]

MrMirror

Darf ich fragen wie du diese tollen Schieberegler hin bekommst?
Also ich mein damit wie man es anstellt, das der rote Balken mit der Helligkeit größer/kleiner wird.
Beiß mir da grad die Zähne aus.

Gruß Ben

[MrMirror]

Ja, in der Tat gibt es auch bei den Icons noch kleine Baustellen, zum Glück nicht in den Räumen. Aber WC und Wohnbereich sind noch "Kopieopfer" und noch nicht aktualisiert...

Was mir auch sehr lange Kopfzerbrechen bereitet hat ist das signalisieren der Statis. Da ich im wesentlichen grün und weiß als Grundfarben verwende wollte ich da etwas auffälliges, was aber gut ins Design passt... das ist dann dabei herausgekommen:

Visu_Status_An.png

Jetzt muss ich dann mal nach und nach die einzelnen Räume angehen

Ich kann mich aber nur wiederholen, finde die Visu zu erstellen sowas von extrem flexibel und wenn man es langsam angeht und sich erstmal mit den Grundfunktionen und vor allem Möglichkeiten vertraut macht, steht einem da wirklich alles offen! Absolut *DAUMEN HOCH* !!!

[saegefisch]

@MrMirror: Tolle Leistung! Auch wenn man es eine Weile wirken lässt oder im Detail schaut: Schöne Lösung, angenehm aufgebaut und wunderbar durchgängig (z.B. die schönen weißen Linien je Block mit dem grünen Themenlogo), ansprechende Farbwahl (sitze selbst gerade an einem "grauen Grundthema", habe aber eine andere Kontrastfarbe gewählt), sehr akkurat umgesetzt, coole Diagramme. Und das Sonnenauf/untergang ist in der Tat sehr gut gelungen...

Die Icons der Kinder sind herrlich. Frag' mich gerade, was da wohl für meine Mädels wählen müsste. Aber auf Eurem WC gibt es - mit dem Icon - wohl noch viel zu tun oder viel wegzuräumen...

Danke für Deinen Einblick in "Deinen Stand der Dinge"!

[saegefisch]

Viele nette Inspirationen gibt es hier: http://www.flaticon.com/

[Robby]

Danke für´s Icon...schon eingebaut