Come mostrare la direzione del vento su una bussola

Question

Sto lavorando a un'applicazione web in cui devo mostrare la temperatura, l'umidità, la velocità del vento, la direzione del vento ecc. Sto usando google.visualization.Gauge() per mostrare altre cose ma Voglio mostrare la direzione del vento su una bussola. Qualcuno sa di una bussola (jQuery/javascript/etc) disponibile che posso usare per un sito web/webapp? Grazie

Answer 1

Ecco il mio approccio utilizzando solo CSS. Usa trasformazioni per ruotare l'ago. DEMO È inoltre possibile utilizzare il plug-in jQuery 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); 
}​ 

Answer 2

HTML5 e la sua tela ne faranno un lavoro breve.

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

sto solo postando qui per completezza, personalmente avrei ancora attenersi a un libreria javascript.