5

I am working on a web application where I have to show the temperature, humidity, wind speed, wind direction etc. I am using google.visualization.Gauge() to show other things but I want to show wind direction on a compass. Does anyone know about any (jQuery/javascript/etc) compass available that I can use for a website/webapp? Thanks

AL̲̳I
  • 2,441
  • 4
  • 29
  • 50
  • 1
    How would you know which way I'm sitting? All the other things can be sensed from the environment, your computer would have to have a compass in it. – sachleen Jul 17 '12 at 15:53
  • @Kris.Mitchell [iOS device API for compass](http://tripleodeon.com/2011/10/taking-a-new-device-api-for-a-spin/) [demo](http://jamesgpearce.github.com/compios5/) – sachleen Jul 17 '12 at 15:55
  • @sachleen Or it's purely for visualisation purposes rather than being relative to the direction you're facing. The wind is still blowing southwest, for example, regardless of whether you're facing east or north. – Anthony Grist Jul 17 '12 at 15:55
  • @sachleen, he wants to show the direction the wind is coming from. your computer doesn't matter, because if you orient yourself to north, then the wind direction he wants to show is correct. – Michael Dillon Jul 17 '12 at 15:56
  • @AnthonyGrist That's not how a compass works. There are weather sensors all over the place that services like Google read weather data from. – sachleen Jul 17 '12 at 15:57
  • @sachleen stop trolling. – lynks Jul 17 '12 at 15:58
  • @MichaelDillon ah I get it now. my bad. If you just take a compass face and put a div with an arrow image on it, you can rotate it using [CSS transforms](http://davidwalsh.name/css-transform-rotate) – sachleen Jul 17 '12 at 15:59
  • Sorry for not stating this in my question.... I have sensors to get the wind direction... I just want to display it on the Web..... for that I need a compass widget/API to show the direction.... Thanks... – AL̲̳I Jul 18 '12 at 07:57

2 Answers2

5

Here's my approach using only CSS. Uses transforms to rotate the needle. DEMO You can also use the jQuery Rotate plugin.

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);
}​
sachleen
  • 30,730
  • 8
  • 78
  • 73
1

HTML5 and it's Canvas will make short work of this.

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

I'm just posting it here for completeness, personally I'd still stick to a javascript library.

lynks
  • 5,599
  • 6
  • 23
  • 42
  • Note to those who arrived here searching for a way to build a dial gauge ... please see my HTML5 answer here [http://stackoverflow.com/questions/36236814](http://stackoverflow.com/questions/36236814/wind-direction-on-a-compass-wunderground/36242222#36242222) – Yogi Mar 26 '16 at 23:59