コンパスの風向を表示する方法

私は温度、湿度、風速、風向などを表示しなければならないウェブアプリケーションで作業しています。私はgoogle.visualization.Gauge（）を使って他のものを表示していますが、私はコンパスに風の方向を示したい。誰も私がウェブサイト/ webappのために使用できる任意の（jQuery/javascript/etc）コンパスを知っていますか？ありがとうコンパスの風向を表示する方法

出典

2012-07-17 AL̲̳I

どのようにあなたは私が座っているどの方法を知っているだろうか？他のすべてのことは環境から感知することができます。コンピュータにはコンパスが必要です。 – sachleen

@ Kris.Mitchell [コンパス用のiOSデバイスAPI]（http://tripleodeon.com/2011/10/taking-a-new-device-api-for-a-spin/）[デモ]（http：// jamesgpearce.github.com/compios5/） – sachleen

@sachleenあなたが直面している方向に相対的ではなく、単に視覚化のためです。風は、南西に向かっているかどうかにかかわらず、南西に向かって吹いています。 –

私のアプローチはCSSだけです。変形を使用して針を回転させます。 DEMOjQuery Rotateプラグインを使用することもできます。

HTML

<div id="compass"> 
    <div id="arrow"></div> 
</div>

CSS

#compass { 
    width: 380px; 
    height: 380px; 
    background-image:url('http://i.imgur.com/44nyA.jpg'); 
    position: relative; 
} 
#arrow { 
    width: 360px; 
    height: 20px; 
    background-color:#F00; 
    position: absolute; 
    top: 180px; 
    left: 10px; 
    -webkit-transform:rotate(120deg); 
    -moz-transform:rotate(120deg); 
    -o-transform:rotate(120deg); 
    -ms-transform:rotate(120deg); 

    -moz-transition: all 1s ease; 
    -webkit-transition: all 1s ease; 
    -o-transition: all 1s ease; 
    transition: all 1s ease; 
} 

#compass:hover #arrow { 
    -webkit-transform:rotate(0deg); 
    -moz-transform:rotate(0deg); 
    -o-transform:rotate(0deg); 
    -ms-transform:rotate(0deg); 
}

出典

2012-07-17 16:11:44 sachleen

HTML5とキャンバスでは、この短い作業を行います。

http://www.tutorialspoint.com/html5/canvas_drawing_lines.htm

私は個人的に、私はまだJavaScriptライブラリに固執するだろう、完全を期すためにここでそれを掲示しています。

出典

2012-07-17 16:02:25 lynks

ここに来て、ダイヤルゲージを作成する方法を探している人には注意してください。私のHTML5の回答はこちら[http://stackoverflow.com/questions/36236814](http://stackoverflow.com/questions/） 36236814 /風向-on-a-compass-Wunderground/36242222＃36242222） – Roberto

コンパスの風向を表示する方法

答えて

関連する問題