Angulo Digital - Web, SEO, SEM, Social Media y Apps
Agencia digital colombiana especializada en desarrollo web y de aplicaciones móviles, SEO, e-Commerce, marketing digital y entrenamiento en herramientas digitales.
PhoneGap 3.3
Módulo: Acceder al Acelerómetro
Nivel: Introductorio - Básico
Módulo: Acceder al Acelerómetro
Función:
accelerometer
Métodos:
getCurrentAcceleration
watchAcceleration
clearWatch
Argumentos:
accelerometerSuccess
accelerometerError
accelerometerOptions
Habilitar el Acelerómetro en todas las plataformas
Por línea de comandos, debemos activar la API del Acelerómetro, como si fuera un plugin. Esto se hace de la siguiente manera:
$ cordova plugin add org.apache.cordova.device-motion
$ cordova plugin ls
[ 'org.apache.cordova.device-motion' ]
$ cordova plugin rm org.apache.cordova.device-motion
Esto habilita el Acelerómetro en todas las plataformas (iOS, Android, Windows Phone, BlackBerry 10), pero se deben verificar los siguientes permisos:
Android (en el archivo res/xml/config.xml)
<feature name="Accelerometer">
<param name="android-package" value="org.apache.cordova.devicemotion.AccelListener"/>
</feature>iOS (en el archivo config.xml)
<feature name="Accelerometer">
<param name="android-package" value="org.apache.cordova.devicemotion.AccelListener" />
</feature>Windows Phone (en el archivo Properties/WPAppManifest.xml)
<Capabilities>
<Capability Name="ID_CAP_SENSORS" />
</Capabilities>
Taller Práctico con Acelerómetro
A continuación, llevaremos a cabo un ejercicio práctico, en el que trabajaremos con la función acceloremeter y sus respectivos métodos y argumentos:
1. Escibimos la base de nuestro proyecto en un archivo index.html
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script src="cordova.js"></script>
<script charset="utf-8">
</script>
</head>
<body>
<div id="accelerometer">Cargando el acelerómetro...</div>
<button onclick="stopWatch();">Detener acelerómetro</button>
</body>
</html/* Creamos una variable para que se encargue de rastrear el valor del método watchAcceleration */var watchID = null;/*Esperamos a que el dispositivo cargue las librerías de la API de PhoneGap*/ document.addEventListener("deviceready", onDeviceReady, false);/* La función onDeviceReady se declara, teniendo como parámetro único la activación de la función startWatch */ function onDeviceReady() { startWatch(); }/* Se declara la función startWatch, que se encargará de establecer los parámetros para el rastreo del acelerómetro y su frecuencia */ function startWatch() { /* Se detectará la aceleración cada 3 segundos - 3000 milisegundos */ var options = { frequency: 3000 }; watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options); }/* Detener el rastreo de la aceleración */ function stopWatch() { if (watchID) { navigator.accelerometer.clearWatch(watchID); watchID = null;}}
/* Se define la función que establecerá y mostrará los valores de la aceleración */
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
/* Se define la función que se activará, en caso de que ocurra un error al tratar de acceder al acelerómetro */
function onError() {
alert('Ha ocurrido un error al tratar de activar el sensor de aceleración de su dispositivo móvil');
}
Este ejercicio, ha sido tomado de la documentación oficial de PhoneGap 3.3 (Apache Cordova) - API Acelerómetro (http://docs.phonegap.com/en/edge/cordova_accelerometer_accelerometer.md.html#Accelerometer).
A continuación veremos el código completo del ejercicio. Hasta el momento no hemos utilizado ninguna librería para la parte gráfica del front-end, como jQuery Mobile, KendoUI o Lungo.tapquo
<!DOCTYPE html>
<html>
<head>
<title>Acceleration Example</title>
<script src="cordova.js"></script>
<script charset="utf-8">
var watchID = null;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() { startWatch(); }
function startWatch() {
var options = { frequency: 3000 };
watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
}
function stopWatch() {
if (watchID) {
navigator.accelerometer.clearWatch(watchID);
watchID = null;
}
}
function onSuccess(acceleration) {
var element = document.getElementById('accelerometer');
element.innerHTML = 'Acceleration X: ' + acceleration.x + '<br />' +
'Acceleration Y: ' + acceleration.y + '<br />' +
'Acceleration Z: ' + acceleration.z + '<br />' +
'Timestamp: ' + acceleration.timestamp + '<br />';
}
function onError() {
alert('Ha ocurrido un error al tratar de activar el sensor de aceleración de su dispositivo móvil');
}
</script>
</head>
<body>
<div id="accelerometer">Waiting for accelerometer...</div>
<button onclick="stopWatch();">Stop Watching</button>
</body>
</html> Este ejercicio, tiene un resultado muy básico, e indiscutiblemente no se acerca a lo que debe ser una mobile app ya finalizada, pero permite entender cómo activar el acelerómetro del móvil utilizando la API de PhoneGap 3.3.
PhoneGap - Acceder al Acelerómetro
By Angulo Digital - Web, SEO, SEM, Social Media y Apps
PhoneGap - Acceder al Acelerómetro
Acceder al Acelerómetro del móvil con PhoneGap, por medio de la función accelerometer y de los métodos getCurrentAcceleration, watchAcceleration, clearWatch, accelerometerSuccess, accelerometerError y accelerometerOptions
