nicht angemeldet
Der Martin
Matthias Apsel
Der Martin
dedlfix
Der Martin
JürgenB
Der Martin
JürgenB
Hallo,
der eine oder andere kennt bestimmt diese "Walzencontrol" aus iPhone-Apps mit dem man z.B. die Uhrzeit oder das Datum einstellen kann.
Mal angenommen, man möchte dieses Control nachbauen, also z.B. eine Walze für die Minuten 1-60, wie würdet ihr das angehen? Wenn eine Zahl oben oder unten aus dem Sichtfeld läuft, dann am anderen Ende des DOMs wieder einhängen? Damit es diesen "endlos" Effekt gibt? Oder ist das die falsche Denkrichtung?
Viele Grüße
Siri
Hi,
der eine oder andere kennt bestimmt diese "Walzencontrol" aus iPhone-Apps mit dem man z.B. die Uhrzeit oder das Datum einstellen kann.
ich kenne sie nicht, stelle sie mir aber so vor, wie früher die Ziffernwalzen auf mechanischen Uhren oder Kalendern.
Mal angenommen, man möchte dieses Control nachbauen, also z.B. eine Walze für die Minuten 1-60, wie würdet ihr das angehen?
Erstmal korrigieren, dass die Minuten von 0..59 laufen. ;-)
Und dann eine Walze pro Ziffer vorsehen, nicht eine gemeinsame für die zweistellige Minutenanzeige.
Wenn eine Zahl oben oder unten aus dem Sichtfeld läuft, dann am anderen Ende des DOMs wieder einhängen? Damit es diesen "endlos" Effekt gibt?
Nö, einfacher. Ein positioniertes Hintergrundbild pro Stelle, das untereinander die Ziffern 0..9 (0..5 für die Minuten-Zehner) und dann nochmal die 0 enthält. Das kann man dann so positionieren, dass die richtige Ziffer angezeigt wird, und pixelweise verschieben für den Übergangseffekt. Die zweite 0 übrigens deshalb, damit man auch den Übergang von 9 zu 0 gleitend machen kann.
Soweit zur Visualisierung. Aber wie stellst du dir dir Bedienung eines solchen Controls vor? Ein zusätzliches Eingabefeld? Ich hätte da im Moment keine richtig gute Idee. Ich vermute, dass es auf dem Eifon mit Wischgesten (nach oben, nach unten) funktioniert. Aber die stehen dir ja auf einem herkömmlichen PC mit herkömmlichem Bildschirm nicht zur Verfügung. Also brauchst du auf jeden Fall eine Eingabemöglichkeit für "konventionelle" Geräte.
So long,
Martin
Hi,
der eine oder andere kennt bestimmt diese "Walzencontrol" aus iPhone-Apps mit dem man z.B. die Uhrzeit oder das Datum einstellen kann.
ich kenne sie nicht, stelle sie mir aber so vor, wie früher die Ziffernwalzen auf mechanischen Uhren oder Kalendern.
Ja, genau!
Mal angenommen, man möchte dieses Control nachbauen, also z.B. eine Walze für die Minuten 1-60, wie würdet ihr das angehen?
Erstmal korrigieren, dass die Minuten von 0..59 laufen. ;-)
;-) Das mach Sinn! ;-)
Nö, einfacher. Ein positioniertes Hintergrundbild pro Stelle, das untereinander die Ziffern 0..9 (0..5 für die Minuten-Zehner) und dann nochmal die 0 enthält. Das kann man dann so positionieren, dass die richtige Ziffer angezeigt wird, und pixelweise verschieben für den Übergangseffekt. Die zweite 0 übrigens deshalb, damit man auch den Übergang von 9 zu 0 gleitend machen kann.
Ein HG-Bild (so?):
0
1
2
3
4
5
6
7
8
9
0
Wenn ich jetzt aber die untere 0 nach oben schiebe, dann soll ja wieder die 1 auftauchen. Wie soll das mit bloser Verschiebung möglich sein?
Soweit zur Visualisierung. Aber wie stellst du dir dir Bedienung eines solchen Controls vor? Ein zusätzliches Eingabefeld? Ich hätte da im Moment keine richtig gute Idee. Ich vermute, dass es auf dem Eifon mit Wischgesten (nach oben, nach unten) funktioniert. Aber die stehen dir ja auf einem herkömmlichen PC mit herkömmlichem Bildschirm nicht zur Verfügung. Also brauchst du auf jeden Fall eine Eingabemöglichkeit für "konventionelle" Geräte.
Auf dem herkömmlichen Bildschirm kann ich mir Pfeil-Tasten vorstellen, die die Walze onmousedown weiterdrehen.
Viele Grüße
Siri
Om nah hoo pez nyeetz, Siri!
Ein HG-Bild (so?):
0
1
2
3
4
5
6
7
8
9
0
nein. (ohne zweite 0) ;-)
Wenn ich jetzt aber die untere 0 nach oben schiebe, dann soll ja wieder die 1 auftauchen. Wie soll das mit bloser Verschiebung möglich sein?
Mit dem modulo-Operator.
Auf dem herkömmlichen Bildschirm kann ich mir Pfeil-Tasten vorstellen, die die Walze onmousedown weiterdrehen.
besser wohl click.
Matthias
Hallo,
totale Verwirrung!
Der sichtbare Bereich sieht so aus:
4
5
6 <- Ausgewählt
7
8
Schiebe ich nach oben, siehts so aus:
6
7
8 <- Ausgewählt
9
0
Hab ich da den Martin mit der zweiten 0 falsch verstanden?
Viele Grüße
Siri
Om nah hoo pez nyeetz, Siri!
4
5
6 <- Ausgewählt
7
8Schiebe ich nach oben, siehts so aus:
6
7
8 <- Ausgewählt
9
0Hab ich da den Martin mit der zweiten 0 falsch verstanden?
Dann muss das Hintergrundbild sogar noch größer sein, weil du ja auch
9
0
1
2
3
brauchst. Die zweite Null bräuchtest du auch nur zum schön Aussehen für die transition.
Matthias
Hallo Matthias,
Ein HG-Bild (so?):
0
1
2
3
4
5
6
7
8
9
0nein. (ohne zweite 0) ;-)
wie machst du dann den Übergang von 9 zu 0 oder von 0 rückwärts zur 9?
Mit repeat-y? Daran habe ich nämlich bis eben nicht gedacht. :-)
Ciao,
Martin
Om nah hoo pez nyeetz, Der Martin!
wie machst du dann den Übergang von 9 zu 0 oder von 0 rückwärts zur 9?
Mit repeat-y? Daran habe ich nämlich bis eben nicht gedacht. :-)
Ich hab einfach nur an einen Zahlenwechsel gedacht, mit einer sichtbaren Ziffer und ohne Animation.
Matthias
Tach!
Wenn ich jetzt aber die untere 0 nach oben schiebe, dann soll ja wieder die 1 auftauchen. Wie soll das mit bloser Verschiebung möglich sein?
Nach Ablauf der Animation von 9 zu 0 positionierst du in einem Sprung auf die obere 0.
dedlfix.
Hallo,
Nach Ablauf der Animation von 9 zu 0 positionierst du in einem Sprung auf die obere 0.
Ah! machts da nicht Sinn zwei oder 3 Bilder zu haben, die ich oben oder unten anstückle (während die Animation läuft) um einen flüssigen Übergang zu haben?
Viele Grüße
Siri
Hallo,
Nö, einfacher. Ein positioniertes Hintergrundbild pro Stelle, das untereinander die Ziffern 0..9 (0..5 für die Minuten-Zehner) und dann nochmal die 0 enthält. Das kann man dann so positionieren, dass die richtige Ziffer angezeigt wird, und pixelweise verschieben für den Übergangseffekt. Die zweite 0 übrigens deshalb, damit man auch den Übergang von 9 zu 0 gleitend machen kann.
Ein HG-Bild (so?):
0
1
2
3
4
5
6
7
8
9
0
ja, genau so.
Wenn ich jetzt aber die untere 0 nach oben schiebe, dann soll ja wieder die 1 auftauchen. Wie soll das mit bloser Verschiebung möglich sein?
Das ist ein Sonderfall. In dem Fall musst du zuerst von der "unteren" 0 auf die obere umschalten (das fällt optisch nicht auf) und kannst dann wieder gleitend zur 1 gehen. Aber du brauchst auf jeden Fall eine Ziffer doppelt auf dem Streifen, damit du alle möglichen Übergänge dabei hast. Ich habe die 0 willkürlich vorgeschlagen, es hätte aber auch jede andere Ziffer stattdessen sein können - aber dann wird die Programmierung aufwendiger, weil noch ein Offset beachtet werden muss.
Soweit zur Visualisierung. Aber wie stellst du dir dir Bedienung eines solchen Controls vor?
Auf dem herkömmlichen Bildschirm kann ich mir Pfeil-Tasten vorstellen, die die Walze onmousedown weiterdrehen.
Okay, ist eine Möglichkeit. Eine komfortable Zifferneingabe wäre mir als User aber doch lieber.
Ciao,
Martin
Hallo,
Das ist ein Sonderfall. In dem Fall musst du zuerst von der "unteren" 0 auf die obere umschalten (das fällt optisch nicht auf) und kannst dann wieder gleitend zur 1 gehen. Aber du brauchst auf jeden Fall eine Ziffer doppelt auf dem Streifen, damit du alle möglichen Übergänge dabei hast. Ich habe die 0 willkürlich vorgeschlagen, es hätte aber auch jede andere Ziffer stattdessen sein können - aber dann wird die Programmierung aufwendiger, weil noch ein Offset beachtet werden muss.
Okay, dann hab ich#s verstanden.
Auf dem herkömmlichen Bildschirm kann ich mir Pfeil-Tasten vorstellen, die die Walze onmousedown weiterdrehen.
Okay, ist eine Möglichkeit. Eine komfortable Zifferneingabe wäre mir als User aber doch lieber.
Manchen ist eine Eingabe mit Spieltrieb lieber.
Merci!
Siri
Hallo Siri,
Manchen ist eine Eingabe mit Spieltrieb lieber.
dann musst du die Ziffern aber auch mit Dämpfung auf die Einrastposition einschwingen lassen. Und die Ziffern über und unter der gewählten werden gestaucht, um einen 3d-Effekt zu bekommen.
Gruß, Jürgen
Hallo,
dann musst du die Ziffern aber auch mit Dämpfung auf die Einrastposition einschwingen lassen. Und die Ziffern über und unter der gewählten werden gestaucht, um einen 3d-Effekt zu bekommen.
Das Einschwingen ist wohl kein Proplem, dass ist ja eine gedämpfte Schwingung.
Die perspektivsche Verzerrung macht mir da mehr "Sorgen", da hab ich noch keinen Ansatz. Da würde bestimmt dem ~dave was einfallen.
Viele Grüße
Siri
Hi Jürgen,
Manchen ist eine Eingabe mit Spieltrieb lieber.
dann musst du die Ziffern aber auch mit Dämpfung auf die Einrastposition einschwingen lassen. Und die Ziffern über und unter der gewählten werden gestaucht, um einen 3d-Effekt zu bekommen.
hui, jetzt wird's aber anspruchsvoll und verspielt! ;-)
Das mit dem Einschwingen find' ich aber irgendwie unpassend, denn ich kenne solche mechanischen Zählwerke von früher eigentlich nur mit langsam rotierenden Walzen, die gar nicht so viel "Fahrt" aufnehmen, dass man das Nachschwingen beim Stehenbleiben überhaupt wahrnehmen könnte. Du meinst vermutlich einen Effekt wie bei den alten einarmigen Banditen mit Mechanik.
Und was die Verzerrung angeht ... mal überlegen. Wir stellen uns eine Walze mit 10 Ziffern vor. Eine Ziffer belegt also inclusive Abstand einen Bogen von 36° auf dem Umfang. Meinst du, dass bei 36° Krümmung (also ±18° aus der Mittellage) die Verzerrung schon so deutlich ist? Der Verzerrungsfaktor wäre ja der Cosinus des Winkelabstand von der Mitte, also
cos(18°) ≈ 0.95
Also gerade mal 5% Stauchung am oberen und unteren Rand. Ich glaube nicht, dass das wirklich auffällt - jedenfalls nicht geometrisch. Was selbstverständlich auffällt, ist eine geänderte Farbwahrnehmung (oben, Mitte, unten) wegen unterschiedlicher Lichtreflexe. Das würde man wohl mit dem Entwurf des Bildes berücksichtigen.
Wenn man jetzt allerdings das ganze Control so gestaltet, dass oben und unten die nächste anschließende Ziffer noch zur Hälfte sichtbar ist, wäre der Verzerrungsfaktor an der Kante schon etwa 0.80, also 20% Stauchung. Das würde man schon wahrnehmen, glaube ich.
So long,
Martin
Hallo Martin,
Manchen ist eine Eingabe mit Spieltrieb lieber.
hui, jetzt wird's aber anspruchsvoll und verspielt! ;-)
genau, über Details habe ich jetzt nicht weiter nachgedacht.
Und noch eine verspielte Idee: die Ziffernwalze mit der Maus "anstoßen" und dann je nach "Schwung" mehr oder weniger weit auslaufen lassen, natürlich gedämpft und in einem Wellenpotential. Der Vergleich mit dem einarmigen Banditen war schon nicht schlecht.
Gruß, Jürgen
Hallo,
Manchen ist eine Eingabe mit Spieltrieb lieber.
dann musst du die Ziffern aber auch mit Dämpfung auf die Einrastposition einschwingen lassen. Und die Ziffern über und unter der gewählten werden gestaucht, um einen 3d-Effekt zu bekommen.hui, jetzt wird's aber anspruchsvoll und verspielt! ;-)
Ich würde da jemanden kennen, der bestimmt ein passendes Template in seinem Framework hat ;-)
Viele Grüße
Siri
Hallo,
kannst ja mal hier schauen, allerdings gibt's da keinen Endlos-Effekt...
vg ichbinich
Hallo,
..., allerdings gibt's da keinen Endlos-Effekt...
und genau der ist ja so interessant!
Viele Grüße
Siri
