Cómo mostrar la dirección del viento en una brújula

Question

Estoy trabajando en una aplicación web donde tengo que mostrar la temperatura, la humedad, la velocidad del viento, la dirección del viento, etc. Estoy usando google.visualization.Gauge() para mostrar otras cosas, pero Quiero mostrar la dirección del viento en una brújula. ¿Alguien sabe acerca de cualquier brújula (jQuery/javascript/etc) disponible que pueda usar para un sitio web/aplicación web? Gracias

Answer 1

Aquí está mi enfoque usando solo CSS. Utiliza transformaciones para rotar la aguja. DEMO También puede usar el complemento 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 y su lienzo hará un breve trabajo de esto.

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

sólo estoy aquí para publicar integridad, personalmente todavía me quedo con una biblioteca de Javascript.