アナログでタコメーター風な東京電力メーターを作ってみた

東電電力使用状況ガジェットを流用し、今度はアナログ的な電力メーターを作ってみた。
デザインの方は、以前WPFで作ったKMeterを流用した。
[東京電力メーター]
image
image2
今回、苦労したのはガジェットでの針の動き。
WPFとか、C#では針の座標を計算し線を描画していたけど、ガジェットでは、画像を指定しておけば、
後は、角度を指定してやれば、簡単に針が傾いてくれる。
例:
HTML側:

<g:image
 id=”needle”
 unselectable=”on”
 src=”img/needle.png”
 style=”position:absolute;left:60px;top:0px;width:13px;height:134px;z-index:10″ />

JavaScript側:

// 針を90度傾ける
needle.Rotation = 90;

角度を時計の針で例えると、
12時はRotation=0(360)
3時はRotation =90
6時はRotation=180
9時はRotation=270
と言った感じ。
これは楽だ。
だけど、今度は針をパッと表示しただけではアナログっぽくない。
0からスルスルと針が回ってくるアニメーションをさせたい。
これが意外と難しいというか、やり方が分からず少しハマった。
結局、setTimeout関数をループ処理の中で使って、時間差で針を描画するようにしたら
それっぽく表示できるようになった。

function test(){
 var cnt=0;
 // 0%から100%まで針を動かす
 for(i=0;i<=100;i++){
  cnt++;
  // 20ミリ秒ずつ遅らせて別関数を呼び出す
  setTimeout(“setRotation(” + i + “)”,20*cnt);
 }
}
function setRotation(_val){
 // 0%(180度)を基準に、引数で指定されたパーセントの値×2.7度
 // (100%までのトータル角度が270度だとすると1度傾けるのに2.7度)
 s.Rotation = 2.7 * _val + 180;
}

東京電力メーター


Leave a comment

メールアドレスが公開されることはありません。

CAPTCHA


*