mercoledì 13 febbraio 2013

Bussola in HTML5/PhoneGap

Usando il codice del post precedente e PhoneGap e' possibile realizzare una semplice applicazione in HTML5 per visualizzare una bussola su un dispositivo mobile

Il codice per generare l'esempio e' il seguente
------------------------------------------------------------

<!DOCTYPE html>
<html>
  <head>
    <title>Bussola</title>

    <script type="text/javascript" charset="utf-8" src="cordova-2.4.0.js"></script>
    <script type="text/javascript" charset="utf-8">

var surface;
var android;
var angle = 0;

function drawCanvas() {
    surface = document.getElementById("myCanvas");

    if (surface.getContext) {
        android = new Image();
        android.onload = loadingComplete;
        android.src = "./img/compass.jpg";
    }
}

function loadingComplete(e) {
    var surfaceContext = surface.getContext('2d');
    surfaceContext.fillStyle = "rgb(255,255,255)";
    surfaceContext.fillRect(0, 0, surface.width, surface.height);
    surfaceContext.save();
    surfaceContext.translate(android.width * 0.5, android.height * 0.5);
    surfaceContext.rotate(angle* 0.0174532925199432957);
    surfaceContext.translate(-android.width * 0.5, -android.height * 0.5);
    surfaceContext.drawImage(android, 0, 0);
    surfaceContext.restore();
}


    var watchID = null;
    document.addEventListener("deviceready", onDeviceReady, false);

    function onDeviceReady() {
        bussola();
    }

    function bussola() {
        var options = { frequency: 300 };
        watchID = navigator.compass.watchHeading(onSuccess, onError, options);
    }

    function onSuccess(heading) {
        var element = document.getElementById('heading');
        element.innerHTML = 'Heading: ' + heading.magneticHeading;
angle = heading.magneticHeading;
drawCanvas();

    }

    function onError(compassError) {
        alert('Compass error: ' + compassError.code);
    }
</script>
</head>

<body onload="drawCanvas();">
<div align=center>
        <canvas id="myCanvas" width="256" height="256">
            <p>Your browser doesn't support canvas.</p>
        </canvas>
</div>
    
    <div align=center id="heading">Waiting for heading...</div>
   
  </body>
</html>

------------------------------------------------------------

Per visualizzare il comportamento dell'applicazione e' stato utilizzato Ripple


La cosa positiva e' che, essendo stata sviluppata con PhoneGap ,questa applicazione puo' essere utilizzata su Android, Iphone e molti altri dispositivi