smilyrating

[mixmastertobsi]

Hallo,

kennt jemand sowas, nur als Jquery/JS? Ich brauche einen Smiley animiert von "schlecht" zu "gut"

https://github.com/sujithkanna/SmileyRating

[Rolf B]

Hallo mixmastertobsi,

kenne ich nicht fertig, aber es sollte relativ übersichtlich machbar sein, sowas umzusetzen. Sogar ohne jQuery.

Es braucht nur genug Smilybilder (die 5 Basisbilder und ein paar Morphingzustände dazwischen), die man als Sprite zur Verfügung stellt und dann je nach Sliderposition auswählt.

Obwohl das von Dir verlinkte Projekt anders vorzugehen scheint. Die Bildersammlung finde ich darin nicht... Keine Ahnung wie er das hext. Aber vielleicht sind die Bilder auch nicht im Github.

Rolf

[Tabellenkalk]

Hallo,

Die Bildersammlung finde ich darin nicht... Keine Ahnung wie er das hext.

Weil

everything is drawn programatically

Gruß
Kalk

[Rolf B]

Hallo Tabellenkalk,

everything is drawn programatically

Aha. Steht wo? Ich Blindfisch finde nur

Drawn completely using android canvas

Aber wie auch immer - es sollte also über trickreiche SVG Manipulation oder auch Canvas-Zeichenoperationen ebenfalls machbar sein.

Rolf

[Tabellenkalk]

Hallo,

Steht wo?

im Issue-Bereich

Gruß
Kalk

[Rolf B]

Hallo mixmastertobsi,

ich habe mal ein bisschen gespielt

Bitte beachte: Das ist eine reine Grafikstudie, das ist kein fertiges Widget. Das Widget ist mit Maus und Tastatur getestet, nicht mit Touch, und das Thema Zugänglichkeit wird auch noch Arbeit brauchen.

Der Smily wird über ein SVG Element gebildet, das ich in das smilyrating-div einsetze und je nach eingestellter Wertung dynamisch verändere. Der Mund war die meiste Arbeit, das ist ein Linienzug aus zwei Bezierkurven (für oberen und untere Linie des Mundes), deren Parameter über 5 Stützpunkte, d.h. in 4 Intervallen, durch Interpolation gebildet werden. Der neutrale Mund ist eigentlich zu breit, ich hatte aber keinen Bock mehr, auch noch einen Schwall X-Koordinaten in die mouthRanges Tabelle aufzunehmen. Die sind jetzt fix, nur die Y-Koordinaten der Kontrollpunkte ändern sich.

Um nicht in Symbols zu ertrinken, habe ich alle privaten Eigenschaften eines SmileRating Objekts in einem privates-Objekt zusammengefasst. Das einzige öffentliche Property ist das rating-Property, zu dem es auch ein "rating" Event gibt auf das man sich für Änderungen am Rating registrieren kann.

Mit dem class Schlüsselwort in JavaScript bin ich auch noch nicht warm, abgesehen davon gibt's damit auch nicht wirklich private Elemente, darum ist die SmilyRating-Klasse nach klassischem Muster in eine IIFE gelegt und dient als Modul. Kann man auch in ein eigenes File auslagern.

So, ja. Es geht also. Feintuning und Accessibility ist nun für Dich :D

Ah - kleiner Bug, wenn man die Maus aus dem Widget rauszieht, merkt er nicht dass man den Button losgelassen hat. Für Dich zum fixen dringeblieben...

Rolf