PhoneGapでコンパスアプリ

以前PhoneGapのgeolocationを使ってランニングアプリを作ってたんですが、どうもGPSの精度のせい？で、10分ぐらい走ると数百メートルの計算ずれがおこり、それがうまく解決できず、ほったらかしにしてたんですが、ひさびさに気分転換にさわってみようと思ったら、1.4.1までバージョンが上がってました。

で作り直すのはまた今度ということで、今回はCanvasを使ってシンプルなコンパスアプリを作ってみました。Canvasもほとんどさわった事がなく、2,3時間格闘しながらなんとか描画までいけました。

Canvasがわかってないので、ちょっと残念な感じになってしまいましたが「しんぷるいずべすと」ということで、よしとしておこう。。。

【HTML】

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
    <meta name="viewport" content="width=default-width; user-scalable=no" />
    <title>PhoneGap</title>
	  <link rel="stylesheet" href="master.css"  media="screen">
	  <script src="phonegap-1.4.1.js"></script>
	  <script src="jquery.js"></script>
	  <script src="main.js"></script>
  </head>
<body>
<h1>Compass</h1>
<canvas id="compassCanvas" width="300" height="300"></canvas>
<div id="heading">Waiting for heading...</div>
</body>
</html>

【main.js】

$(function(){
    var compass_watchID = null;

    $(window).bind("load", function(){
        document.addEventListener("deviceready", onDeviceReady, false);
    });
    function onDeviceReady() {
        startWatch();
    }
    function startWatch() {
        var compass_options = { frequency: 3000 };
        compass_watchID = navigator.compass.watchHeading(compass_onSuccess, compass_onError, compass_options);
    }
    function compass_onSuccess(heading) {
        compass_view(heading.magneticHeading);
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
    }
    function compass_view(heading) {
        var canvas = document.getElementById("compassCanvas");
        var cx = canvas.getContext("2d");
        var centerX = centerY = 150;
        canvas.width = canvas.width;
        cx.beginPath();
        cx.strokeStyle = "#FFF";
        cx.arc(centerX, centerY, 100, 0, 2 * Math.PI, true);
        cx.translate(centerX, centerY);
                cx.font = "bold 21px 'serif'";
                cx.fillStyle = "#FFF";
                for(var i = 0; i < 60; i++){
                  if(i == 0) {
                    var str = "N";
                    cx.fillText(str, -8, -62);
                  }
                  if(i == 15) {
                    var str = "E";
                    cx.fillText(str, 62, 8);
                  }
                  if(i == 30) {
                    var str = "S";
                    cx.fillText(str, -8, 74);
                  }
                  if(i == 45) {
                    var str = "W";
                    cx.fillText(str, -74, 8);
                  }
                  cx.save();
                  cx.rotate(i/60 * 2 * Math.PI);
                  cx.moveTo(0, -100);
                  if(i % 5 == 0){
                    cx.lineTo(0, -75);
                  }
                  else{
                    cx.lineTo(0, -85);
                  }
                  cx.restore();
                }
                cx.stroke();
        cx.rotate(heading * Math.PI / 180);
        cx.moveTo(0, 0);
        cx.lineTo(0, 0 - 100);
        cx.stroke();
    }
    function compass_onError() {
        var element = document.getElementById('heading');
        element.innerHTML = '方位:エラーが発生しました。';
    }
});