Compass spinning javascript problem with angle - rotate/translate

Question

Hi

i'm building a compass for the iphone, duh, just for experiment purpose and to learn how to do it, in javascript, with phonegap.

now i'm already able to get the degrees, i was able to apply the deg 0-360 to a div (let's call it the "wheel") using the webkit-transform translateZ (or i could use rotate)

but i have a bug:

when the wheel goes from 0deg to 359deg everything is ok, but when the degree goes to 0deg again, instead of smoothly spin in that direction (clockwise), it spin rapidly again anti-clockwise to the positin 0deg...

i dont know i'm clear because is not easy to explain without an example....'

basically my problem is to find the right script to move the wheel starting with the value 0-360 that i can get easily from the iphone.

any suggestions are welcome.

Answer 1

Roll over when you get bigger than 360. Here's a sample: http://gutfullofbeer.net/rotate.html

[edit] I've updated the code to deal with counter-clockwise rotation. Here's what my jQuery-based Javascript looks like:

  $(function() {
    var rotator = function(class, inc) {
      var degrees = 0;
      return function() {
        $('.' + class)
          .css({'-webkit-transform': 'rotate(' + degrees + 'deg)'})
          .css({'-moz-transform': 'rotate(' + degrees + 'deg)'})
          ;
        degrees += inc;
        if (degrees > 360) degrees -= 360;
        if (degrees < 0) degrees += 360;
      };
    };
    setInterval(rotator('clockwise', 2), 33);
    setInterval(rotator('counter-clockwise', -2), 33);
  });

Answer 2

i dont see any button to make comments...sorry but i have to write here... this is my code

deg is the value that the iphone give to me ant it can 0 to 360.

document.getElementById('mycompass').style.webkitTransform = "rotateZ("+-deg+"deg)";

when 'mycompass' goes to 359 and then 0, it rotates all way back...

in you example i can have values bigger than 360 so it doesn't work for me...

where is my error?