jquery.knobby.js – Drehknöpfe für Javascript

jquery.knobby.js ist ein jQuery-Plugin für Drehknöpfe mit Javascript. Diese Knöpfe sind für Eingaben mit Maus und Tastatur aber auch für Touch-Devices geeignet.

knobby-bright

knobby-dark

Ein Aufruf von $("input[name=...]).knobby(); wandelt ein HTML-Input in einen runden Button um, der sich durch kreisende Bewegungen mit gedrückter Maustaste oder auch mit einem Finger auf Touch-Geräten verstellen lässt.

Features

Es wird eine kleine Anzahl an Attributen unterstützt: min, max, step und turn. Die Attribute min und max geben die Grenzen vor – der Wert von max sollte größer sein als min damit der Knopf funktioniert.

Mit step lassen sich die kleinstmöglichen Schritte einstellen. Zum Beispiel step="10" für in Zehner-Schritten oder step=".5" damit der Wert auf ein halbes genau gerundet wird.

Mit dem turn-Attribut lässt sich die Anzahl der kompletten Umdrehungen festlegen. Standard ist dabei eine ganze Umdrehung also turn=“1″. Mit einem Wert von turn=".5" lässt der Drehknopf nur noch eine halbe Umdrehung zu und bei turn="10" zehn ganze Umdrehungen.

So lässt sich die benötigte Genauigkeit auf eine Vielzahl von Anwendungsfällen einstellen: für kleine Werte mit wenigen Zwischenschritten reicht ein niedrigerer turn – für eine breite Skala mit vielen Zwischenschritten ist vielleicht turn="4" besser geeignet.

Die Größe lässt sich nun mit dem Size-Attribut auch dynamisch ändern: size="(Button-Radius in em)"

In Planung ist derzeit noch eine Option für logarithmische Drehknöpfe (sodass höhere Werte zu größeren Intervallen führen). Außerdem soll das Plugin bald auch noch Multi-Touch-fähig werden!

Die Benutzung kann man auf der Demo-Seite ausprobieren und den gesamten Quellcode zum Download findet man in der neuesten Version bei Github.

 

CSS Background Image: Base64-Noise-Generator

Der Base64-Noise-Generator ist ein Online-Tool zum Erstellen von Base64-CSS-Background-Noise-PNGs:

base64-noise-generator

base64-noise-generator

Bild-Abmessungen, Farben und Stärke des Rauschens lassen sich frei definieren. Standardmäßig ist 8-Bit Farbtiefe aktiviert – es lässt sich auch auf 24-Bit umstellen, das ist aber nicht empfohlen:
Die 8-Bit-Variante ist meist um mehr als 50 Prozent kleiner, und da es bei einem Übergang zwischen 2 Farben nie mehr als 255 Abstufungen geben kann ist die Bild-Qualität identisch.

Die Zufalls-Funktion ist noch nicht ganz optimal. Verbesserungsvorschläge sind gern gesehen.
Aber ich denke man kann dem Generator schon damit ganz brauchbare Ergebnisse abgewinnen, wenn mann ein wenig herum-konfiguriert.


Update: Den Source-Code des Tools findet man auch auf Github.

Getagged mit: , ,

Transpozr – Chord-Sheets transponieren

Transpozr ist eine kleine Web-Anwendung mit der sich Akkorde (samt Lyrics) ganz einfach transponieren lassen.

transpozr

http://codeblock.at/transpozr/

Dazu die Akkorde in das linke Feld einfügen, in der Mitte bei den Plus- und Minus-Buttons die gewünschte Anzahl der Halbtonschritte einstellen und auf der rechten Seite erscheinen dann die transponierten Chords.

Das JavaScript-Programm, befindet sich in einer frühen Version. Aber leistet zumindest mir schon jetzt gute Dienste.

Derzeit geht das Tool beim Transponieren eher riguros vor und unterscheidet nicht zwischen verschiedenen Tonarten (zB.: ein C# und ein Db werden genau gleich behandelt und eventuelle Unterschiede gehen beim Transponieren verloren). Eventuell wird es in Zukunft eine Version geben, die die aktuelle Tonart erkennen kann und entsprechend richtig transponiert.

In dieser Version wird außerdem nur englische Notation unterstützt, das heißt ein deutsches H entspricht einem englischen B und ein deutsches B entspricht dem englischen Bb.

Getagged mit: , , ,
Top
Mit der Verwendung dieser Website stimmen Sie zu, dass personalisierbare Cookies für Analysezwecke gespeichert werden.