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
Nessun commento:
Posta un commento