am make weather jquery wunderground api , , jquery working . porblem in wunderground api wind direction degrees , iwant wind degrees on compass , find in stackoverflow answer in questions :
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: 1s ease; -webkit-transition: 1s ease; -o-transition: 1s ease; transition: 1s ease; } #compass:hover #arrow { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); } html
<div id="compass"> <div id="arrow"></div> </div> i want apply css in jquery weather dont know how . , demo css : http://jsfiddle.net/adb2a/
this jquery :
var x = document.getelementbyid("demo"); if (navigator.geolocation) { navigator.geolocation.getcurrentposition(showposition); } else { x.innerhtml = "geolocation not supported 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 = '<div style="color: black;text-align:right;direction: rtl;">'; html += '<h2>درجة حرارة الان ' + data.current_observation.temp_c + '</h2>' html += '<h3>شعور بها ' + data.current_observation.feelslike_c + '</h3>' html += '<h3>الرطوبة ' + data.current_observation.relative_humidity + '</h3>' html += '<h3>الضغط الجوي ' + data.current_observation.pressure_mb + '</h3>' html += '<h3>كمية هطول الامطار ' + data.current_observation.precip_today_in + '</h3>' html += '</div>'; $("#news").append(html).hide().fadein("slow"); ///10days/// var dayarray = data.forecast.txt_forecast['forecastday']; var html = '<div id="10days" style="color: black;text-align:right;direction: rtl;">'; for(var i=0; i<dayarray.length; i+=2) html += '<div class="container center-block"><div class="row "><div class="col-md-8 col-md-offset-2"><h3>'+data.forecast.txt_forecast.forecastday[i]['title']+ " : " +data.forecast.txt_forecast.forecastday[i]['fcttext_metric']+'</h3></div>' html += '</div></div>'; $("#10").append(html).hide().fadein("slow"); } }); }); }
how build dial gauge
the question asks how build dial gauge display wind direction information. code snippet shows how create 1 looks professional minimal amount of coding. can adapted other applications , data.
op tried accomplish lengthy , complex list of css transformation. yet, simpler solution use canvas tag scaled background image , dynamically positioned indicator needle.
the bare minimum code shown below. , bit of styling, show in full snippet, can achieve professional looking dial gauge application.
try demo
to view demo, click "show code snippet" , "run code snippet" (you may need scroll down see it). demo displays current wind direction berlin, germany. click "test" button animate gauge.
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
<canvas id="compass" height=200 width=200></canvas> function setcompass(degrees) { var x, y, r, ctx, radians; ctx = window.compass.getcontext("2d"); // subtract 90 north convert 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 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( //'<img src="' + data.current_observation.icon_url + '">' + 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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <button id="test">test</button> scroll down view json data<br> <canvas id="compass" height=200 width=200></canvas> <div id="status">berlin, germany</div> json data source: <a href="http://api.wunderground.com" target="_blank">weather underground</a><br> <textarea id="debug" spellcheck=false></textarea>
Comments
Post a Comment