Geek asks and answers

Wind direction with compass

am make weather jquery from the wunderground api, and my jquery it works well. but the sign is in the wunderground api in the direction of the wind direction, I get the degrees of wind on the compass, and I find this answer in stackoverflow in some 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: 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

<div id="compass">
  <div id="arrow"></div>
</div>​

I want to apply this css in my jquery weather, but I don't know how to do it. and this demo for this css: http://jsfiddle.net/adb2A/

this is my 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 = '<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");


 }
 });
 });
 }
0
source share
1 answer

How to build a scale indicator

, . , , . .

OP CSS. , CANVAS .

. , , .

, " ", " " (, , ). , . "", .

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 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(
      //'<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 to 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>
Hide result
0

More articles:


All Articles