direzione del vento su una bussola wunderground

sto facendo jquery da wunderground api, e il mio jquery è un buon lavoro. ma il porblem è in wunderground api i gradi di direzione del vento, iwant ottengo gradi del vento sulla bussola e trovo in stackoverflow questa risposta in alcune domande:

CSS:

#compass { width: 380px; height: 380px; background-image:url('http://sofit.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

 

Voglio applicare questo css nel mio tempo jquery ma non so come. e questa demo per questo css: http://jsfiddle.net/adb2A/

questa è la mia 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"); } }); }); }

Come build un comparatore

La domanda chiede come build un comparatore per visualizzare le informazioni sulla direzione del vento. Questo snippet di codice ti mostra come crearne uno che abbia un aspetto professionale con una quantità minima di codice. Può essere facilmente adattato ad altre applicazioni e dati.

Originariamente OP aveva cercato di ottenere questo risultato con un elenco lungo e complesso di trasformazione CSS. Tuttavia, una soluzione molto più semplice consiste nell’utilizzare il tag CANVAS con un’immagine di sfondo in scala e un ago indicatore posizionato dynamicmente.

Il codice minimo nudo è mostrato sotto. E con un po ‘di stile in più, come mostrato nello snippet completo, puoi ottenere un comparatore di livello professionale per qualsiasi applicazione.

PROVA LA DEMO

Per visualizzare la demo, fai clic su “Mostra snippet di codice” e quindi su “Esegui snippet di codice” (potrebbe essere necessario scorrere verso il basso per vederlo). La demo mostra la direzione attuale del vento per Berlino, in Germania. Fare clic sul pulsante “test” per animare l’indicatore.

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