hitode909の日記

趣味はマリンスポーツですの日記です

ダイヤル型ユーザーインターフェイスを実現するjQueryプラグイン

http://dl.dropbox.com/u/8270034/g/a39d14621c04e629c4df40943096b44e.png
ダイヤル型ユーザーインターフェイスを実現するためのjQueryプラグインを作りました.
ダイヤルは黒電話とかコンポのボリュームとかiPodのくるくるできる部位みたいなやつを指しています.
回転させると機械に入力を伝えられます.場所を取らず,直感的な操作ができて便利です.
たとえば,iPodのくるくるできる部位が定規みたいな形状なら場所を取って不快です.


簡単なデモです.iPod画像の上でマウスカーソルを時計回りに動かすとiPod画像が大きくなります.
http://hitode909.appspot.com/dial/ipod.html


こんな感じに書けます.jQueryオブジェクトにdialというメソッドができて,コールバックにはマウスの移動量が渡ってきます.単位はラジアンです.

$("img#ipod").dial(function(diff) {
    $(this).css("width", $(this).width() + diff * 10);
});


色をダイヤルで調整するデモです.マウスをゆっくり動かすとちょっとずつ色を調整したりできます.
http://hitode909.appspot.com/dial/color.html


盆で使うために作りました.盆では,ステージ上でマウスカーソルを時計回り,反時計回りに動かすと曲のテンポを調整できます.
http://higashi-dance-network.appspot.com/bon/


クリックし続けるのは疲れますが,マウスを動かすだけならそんなに疲れないので,人に優しいアプリケーションを作ることができます.
100を入力するときに,100回クリックする代わりに,100度マウスを動かすことができます.


GitHubに置いてあります.
https://github.com/hitode909/jquery-dial