DHOB (IU5SGN): Ripple

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

giovedì 7 febbraio 2013

Testare PhoneGap con Ripple

Uno dei problemi maggiori di PhoneGap e' quello di non poter usare il debugger integrato nell'Android SDK in quanto tutto il codice e' Javascript

Per questo motivo puo' essere utile testare il solo codice HTML5 e PhoneGap in un ambiente esterno e la soluzione puo' essere utilizzare Ripple, una estensione per Chrome che permette questo tipo di operazione

Per prova e' stato utilizzato il codice del post precedente ed e' stato configurato un web server locale nel quale sono stati inseriti i file della cartella assets del progetto