Kategorien
JavaScript & jQuery Programmierung

jQuery Knob: Canvasbasierter Drehknopf für virtuelle Thermostate

Schon gut. Natürlich ist das folgend vorgestellte jQuery-Plugin Knob nicht für virtuelle Thermostate erdacht worden. Vielmehr lässt sich mit dem flexibel konfigurierbaren Drehrädchen so ziemlich alles steuern, was man üblicherweise mit solchen Bedienelementen im Web steuert. Es eignet sich beispielsweise für die Lautstärkenregelung, die Erhöhung von Helligkeit und/oder Kontrast, das Spulen innerhalb von Medien, eben ganz generell die Einstellung beliebiger Werte in Web Apps.

jQuery Knob funktioniert sogar auf Touchscreens

Der jQuery Knob ist ein rein Javascript- und HTML5-basierter Drehregler, der sowohl auf Touchscreens, wie auch mit Mausrad und Tastatur verwendet werden kann. Hat der Benutzer Javascript deaktiviert, wird der Bereich, in dem eigentlich der Knob zu sehen sein sollte, als reines Input-Element des Typs Text angezeigt. Die Knobifizierung des Input-Elements erfolgt durch die Vergabe der Klasse „dial“. Den eigentlichen Canvas zeichnet sich das Plugin per Anwendungslogik zum gegebenen Zeitpunkt selbst. Auf Grafikdateien wird komplett verzichtet.

Mit HTML5 Data-Attributen fügt man dem Input-Element Optionen hinzu, die sich sowohl auf das Verhalten wie auch auf die Optik auswirken können. So konfiguriert man Mindest-, wie Höchstwerte, legt einen Endpunkt fest, schaltet die Steuerung aktiv oder inaktiv (für reine Infodisplays) und kümmert sich um das Layout des Reglers, der im Standard in einer an Tron angelehnten Optik daherkommt. Alternativ zur Verwendung von Data-Attributen kann die Konfiguration auch über entsprechende Werte innerhalb des eigentlichen Funktionsaufrufes erfolgen.

Knob mit Konfiguration über Data-Attribute…

$(".dial").knob({
                'min':-50
                ,'max':50
                })

… oder direkt im Function-Call.

Wenige Hooks erlauben eine Auswertung und Weiterverarbeitung der getroffenen Einstellungen. Dreht ein User am Knob und stellt einen Wert ein, so kann dieser Wert on release als Trigger weiterer Funktionen, etwa lauter oder leiser, heller oder dunkler, etc. genutzt werden. Ebenso möglich ist aber auch das kontinuierliche Triggern entsprechender Funktionen über den Hook „change“. Hier würde nicht erst beim Erreichen der Endposition eine Funktion ausgelöst, sondern während des gesamten Drehvorgangs, gut bei Lautstärkenanpassungen. Zu guter Letzt lässt sich eine Funktion an das Zeichnen des Canvas, also das Entstehen des Knob knüpfen.

Entwickler Anthony Terrien stellt das Plugin unter MIT-Lizenz auf GitHub bereit. Nach seinen Angaben läuft es in allen modernen Browsern, sowie dem IE ab Version 9. Eine Dokumentation im eigentlichen Sinne liefert Terrien nicht. Allerdings ist die Funktionsvielfalt doch recht überschaubar und so sollte der interessierte jQuery-Afficionado auch so ganz gut zurechtkommen. Immerhin ist der Code vernünftig kommentiert und sauber strukturiert.

Eine Demoseite gibt einen guten Überblick über die verschiedenen Konfigurationen und optischen Möglichkeiten.

Von Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design.

4 Antworten auf „jQuery Knob: Canvasbasierter Drehknopf für virtuelle Thermostate“

Also für den normalen Desktop-User halte ich die Bedienelemente für eher ungeeignet. Ich habe jedoch die Demo-Seite eben mit dem iPhone geöffnet, und muss zugeben, dass sich hierfür mit Sicherheit ein paar gute Einsatzmöglichkeiten finden lassen! Denn da geht die Bedienung sprichwörtlich gut von der Hand :)

Anwendungsgebiete dürfte es sehr wenige geben. Selbst unter Mobilen Geräten wäre am Ende ein Eingabefeld besser / schneller, wenn man mal Steuermöglichkeiten von Medien absieht. Bei solchen Drehknöpfen muss ich sofort an Musikprogramme wie Abelton Live oder Synthies denken. Der Javascript Moog Synth von Google hatte glaub auch Drehknöpfe, soweit ich mich erinnern kann.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.