dirección del viento en un compás wunderground

Hago que el clima sea jQuery de wunderground api, y mi respuesta es que funciona bien. pero el pérfido está en el nivel de api de los grados de dirección del viento, quiero obtener grados de viento en la brújula y encuentro en Stackoverflow esta respuesta en algunas Preguntas:

CSS:

#compass { width: 380px; height: 380px; background-image:url('http://sofes.miximages.com/javascript/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); }​ 

html

 

quiero aplicar este CSS en mi clima de jquery, pero no sé cómo. y esta demostración para este css: http://jsfiddle.net/adb2A/

este es mi jquery:

  var x = document.getElementById("demo"); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } function showPosition(position) { var location = position.coords.latitude + "," + position.coords.longitude; jQuery(document).ready(function(weather) { $.ajax({ url : "http://api.wunderground.com/api/eb7a37c339cfd624/geolookup/conditions/forecast10day/lang:AR/q/"+location+".json", dataType : "jsonp", success : function(data) { var html = '
'; html += '

درجة حرارة الان ' + data.current_observation.temp_c + '

' html += '

شعور بها ' + data.current_observation.feelslike_c + '

' html += '

الرطوبة ' + data.current_observation.relative_humidity + '

' html += '

الضغط الجوي ' + data.current_observation.pressure_mb + '

' html += '

كمية هطول الامطار ' + data.current_observation.precip_today_in + '

' html += '
'; $("#news").append(html).hide().fadeIn("slow"); ///10days/// var dayArray = data.forecast.txt_forecast['forecastday']; var html = '
'; for(var i=0; i<dayArray.length; i+=2) html += '

'+data.forecast.txt_forecast.forecastday[i]['title']+ " : " +data.forecast.txt_forecast.forecastday[i]['fcttext_metric']+'

' html += '
'; $("#10").append(html).hide().fadeIn("slow"); } }); }); }

Cómo construir un medidor de cuadrante

La pregunta es cómo construir un indicador de cuadrante para mostrar la información de dirección del viento. Este fragmento de código muestra cómo crear uno que se vea profesional con una cantidad mínima de encoding. Se puede adaptar fácilmente a otras aplicaciones y datos.

OP intentó originalmente lograr esto con una larga y compleja lista de transformación de CSS. Sin embargo, una solución mucho más simple es usar la etiqueta CANVAS con una imagen de fondo escalada y una aguja indicadora posicionada dinámicamente.

El código mínimo simple se muestra a continuación. Y con un poco de estilo adicional, como se muestra en el fragmento completo, puede lograr un indicador de línea de aspecto profesional para cualquier aplicación.

INTENTA LA DEMO

Para ver la demostración, haga clic en “Mostrar fragmento de código” y luego en “Ejecutar fragmento de código” (es posible que deba desplazarse hacia abajo para verla). La demostración muestra la dirección actual del viento para Berlín, Alemania. Haga clic en el botón “probar” para animar el indicador.

CSS

 #compass { background: url(YourGaugeBackground.jpg); background-size: cover; } 

Javascript:

 function setCompass(degrees) { var x, y, r, ctx, radians; ctx = window.compass.getContext("2d"); radians = 0.0174533 * (degrees - 90); x = ctx.canvas.width / 2; y = ctx.canvas.height / 2; ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height ); ctx.beginPath(); ctx.lineWidth = 10; ctx.moveTo(x, y); ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians)); ctx.stroke(); } 

HTML

  
 function setCompass(degrees) { var x, y, r, ctx, radians; ctx = window.compass.getContext("2d"); // subtract 90 so that north is up then convert to radians radians = 0.0174533 * (degrees - 90); // calc compass centre x = ctx.canvas.width / 2; y = ctx.canvas.height / 2; r = x * 0.8; // clear ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height ); ctx.beginPath(); // optional styling ctx.strokeStyle = "rgba(255,0,0,0.5)"; ctx.fillStyle = "rgba(255,0,0,0.5)"; ctx.lineCap = 'round'; ctx.shadowOffsetX = 4; ctx.shadowOffsetY = 4; ctx.shadowBlur = 2; ctx.shadowColor = "rgba(0, 0, 0, 0.5)"; // draw compass needle ctx.lineWidth = 10; ctx.moveTo(x, y); ctx.lineTo(x + r * Math.cos(radians), y + r * Math.sin(radians)); ctx.stroke(); } // ajax call for city weather data function getWeatherForecast() { var url = 'http://api.wunderground.com/api/eb7a37c339cfd624/geolookup/conditions/forecast10day/lang:EN/q/Germany/Berlin.json'; $.getJSON(url, function(data) { window.debug.innerHTML = JSON.stringify(data, false, ' '); $('#status').html( //'' + data.location.city + ', ' + data.location.country_name + ': ' + data.current_observation.temperature_string + ', ' + 'Wind ' + data.current_observation.wind_string + ', ' + data.current_observation.wind_degrees + '°' ); setCompass(data.current_observation.wind_degrees); }); } $('#test').click(function() { $(this).attr('disabled', true); var d=0, id = setInterval(function() { setCompass( d ); d += 10; if (d > 360) { clearInterval(id); $('#test').attr('disabled',false); getWeatherForecast(); } }, 100); }); $(document).ready(function() { getWeatherForecast(); }); 
 #compass { background: url(http://i.imgur.com/44nyA.jpg); background-size: cover; } body { font-family: sans-serif; } #debug { background-color: aliceblue; border: 1px solid black; padding: 0.5em; width: 90%; height: 50em; display: block; } 
   scroll down to view json data
Berlin, Germany
json data source: Weather Underground