Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)
1. 1
Desarrollo de Aplicaciones Multiplataforma
Desarrollo de Aplicaciones Móviles
Sensores
Brújula, Acelerómetro, Geolocalización
Jesús Fontecha Diezma
2. ¿Qué es una brújula?
2
¿Qué es un acelerómetro?
¿Qué es un (instrumento) GPS?
3. ¿Qué es una brújula y para qué sirve?
3
Instrumento que permite
determinar la orientación con
respecto a la superficie
terrestre, a través de una
aguja que indica la dirección
del norte magnético.
¡Giróscopo!
• Desventaja
• ¡Alteraciones magnéticas!
¿Qué es un acelerómetro y para qué sirve?
Sensor que mide: los cambios
inducidos por fuerzas
gravitatorias y la aceleración
(o la aceleración bajo el efecto
de la gravedad).
MEMS
Microelectromechanical Systems
4. ¿Qué es un GPS y para qué sirve?
4
Sistema Global de Navegación
por Satélite que nos permite
fijar a escala mundial la
posición de un objeto, una
persona, un vehículo o una
nave.
Integración de sensores
GPS ¡El GPS es el origen
de los datos!
¿Y si el origen es la web?
Geolocalización
6. Emulación de sensores
1
2
¡Para Android Nativo!
Centrado en Blackberry
Poco soporte
Errores. Pobre emulación
No es trivial emular la aplicación
3
Emulador Android
Aplicaciones de simulación
Emulador “online”
4
Móvil real
6
7. Brújula
Instrumento que permite
determinar la orientación con
respecto a la superficie terrestre, a
través de una aguja que indica la
dirección del norte magnético.
Obtiene la orientación en grados (0° a 359.99°) hacia
dónde apunta el dispositivo.
Obtiene la orientación en grados (0° a 359.99°) hacia
dónde apunta el dispositivo en un intervalo regular.
Interrumpe la obtención de valores de orientación.
navigator.compass.getCurrentHeading(onSuccess, onError, [compassOptions]);
Éxito Error Opciones
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError( error) {
alert(‘Error:' + error.code);
}
7
8. Opciones
frequency (Number): Frecuencia a la que se calculan los grados de orientación en milisegundos (100)
filter (Number): Grados de orientación para determinar una obtención exitosa de watchHeading.
function onSuccess(heading) {
alert('Heading: ' + heading.magneticHeading);
};
function onError( error) {
alert(‘Error:' + error.code);
}
Propiedades
• magneticHeading (Number): grados en ese instante.
• trueHeading (Number): grados relativos al polo norte geográfico (valor negativo=error).
• headingAccuracy (Number): grados de desviación entre polo norte magnético y real.
• timestamp (milliseconds): milisegundos transcurridos desde las 0h del 01/01/1970 GMT.
• code: Código de error CompassError.COMPASS_INTERNAL_ERR
CompassError.COMPASS_NOT_SUPPORTED
// Actualiza el valor de la brújula cada 3 segundos
var options = { frequency: 3000 };
watchID = navigator.compass.watchHeading(onSuccess, onError, options);
Ejemplo
8
9. EJERCICIO 1:
1. Descargar e importar el proyecto “TestBrujula”
2. Programar la función startWatch() para que recoja valores de
orientación cada 2 segundos.
3. Programar las funciones onSuccess y onError.
1. onSuccess: escribe en la pantalla el valor de orientación.
2. onError: muestra un ‘alert’ con el código de error.
4. Programar la función stopWatch() para detener la recolección de
datos de orientación.
EJERCICIO 2:
1. Añadir al html inicial, el icono “round_arrow_right.png”
contenido en “/img”.
2. Modificar la función onSuccess para rotar “arrow” según
los grados recogidos de la brújula cada 2 segundos.
<div id=“arrow”><img src=“img/round_arrow_right.png”></div>
arrow.css(‘-webkit-transform’, ‘rotate(‘ + arrowOrientation + ‘deg)’);
9
10. Acelerómetro
Sensor que mide: los cambios
inducidos por fuerzas gravitatorias
y la aceleración (o la aceleración
bajo el efecto de la gravedad).
A tener en cuenta:
• Distribución coordenadas
• “estandarizado” o necesidad de calibración
• Efecto Gravedad
• aceleración sometida al efecto de la gravedad
en la coordenada correspondiente (9,8m/s²)
• Precisión
• Se mide en “G”: aceleración que puede
soportar/detectar el móvil (±2G)
• 0 G Caída libre
• 1G Objeto en superficie terrestre
• +1G Montaña rusa, avión combate,…
• Ruido
• Variabilidad en la señal del acelerómetro
• Filtrado señal 10
11. Obtiene la aceleración de los ejes x, y, z; y el
timestamp.
Obtiene la aceleración (x,y,z) y el timestamp
en un intervalo regular.
Interrumpe la obtención de valores de aceleración.
navigator.accelerometer.getCurrentAcceleration(onSuccess, onError);
Éxito Error
function onSuccess(acceleration) {
alert('Acceleration X: ' + acceleration.x + 'n' +
'Acceleration Y: ' + acceleration.y + 'n' +
'Acceleration Z: ' + acceleration.z + 'n' +
'Timestamp: ' + acceleration.timestamp + 'n');
};
function onError() {
alert('onError!');
}
var options = { frequency: 3000 }; // Actualiza cada 3 segundos
var watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
Opciones
navigator.accelerometer.watchAcceleration(onSuccess, onError, [options]);
11
12. EJERCICIO 1:
1. Descargar e importar el proyecto “TestAcelerometro”
2. Programar la función startWatch() para que recoja
valores de aceleración cada segundo.
3. Programar las funciones onSuccess y onError.
1. onSuccess: escribe en la pantalla el valor de las
coordenadas x, y, z y el timestamp.
2. onError: muestra un ‘alert’ con el mensaje de
error “Fallo al recoger datos del acelerómetro”.
4. Programar la función stopWatch() para detener la
recolección de datos del acelerómetro.
EJERCICIO 2:
1. Programar la función startMoving() que recoge
valores de aceleración cada 0,5 segundos.
• En caso de éxito en la recogida de estos
valores, se deberá llamar a la función
moveObject, que mueve el objeto por la
pantalla teniendo en cuenta los valores (x,y)
de aceleración obtenidos.
• El resultado se muestra en la página
object.html 12
13. Geolocalización
Nos permite la posición de un
objeto en la tierra, mediante el uso
de GPS y señales de red
(WiFi, RFID, Bluetooth, GSM)
Obtiene la posición actual del dispositivo en un objeto
Position
Observa cambios en la posición del dispositivo según
las opciones dadas.
Interrumpe la obtención de valores de posición.
navigator.geolocation.getCurrentPosition(onSuccess, onError, [options]);
Éxito Error Opciones
function onSuccess(position) {
alert(‘Latitud: ' + position.coords.latitude);
};
function onError( error) {
alert(‘Error:' + error.code);
}
13
14. function onSuccess(position) {
alert(‘Latitud: ' + position.coords.latitude);
};
Opciones
enableHighAccuracy (Boolean): Especifica si queremos una
alta precisión en los cálculos. Por ejemplo, usando GPS en
lugar de la red.
Timeout (Number): Máximo valor de tiempo permitido para
intentar obtener una posición. Si tardamos más tiempo que
‘timeout’ en conseguir una localización, se llama a ‘onError’.
maximumAge (Number): Indica aceptar la posición obtenida
en el tiempo especificado (nunca mayor al timeout).
function onError( error) {
alert(‘Error:' + error.code);
}
Propiedades
• coords (Coordinates): grados en ese instante.
• timestamp (milliseconds): milisegundos transcurridos desde las 0h del 01/01/1970 GMT.
• code: Código de error
• message: Detalles del error
PositionError.PERMISSION_DENIED
PositionError.POSITION_UNAVAILABLE
PositionError.TIMEOUT
• latitude (Number) : Latitud en grados.
• longitude (Number) : Longitud en grados.
• altitude (Number) : Altitud en metros.
• accuracy (Number) : Precisión en metros del par (latitud,longitud).
• altitudeAccuracy (Number) : Precisión en metros de la altitud.
• heading (Number) : Dirección del viaje en grados, respecto al norte geográfico.
• speed (Number) : Velocidad de viaje del dispositivo en m/s.
14
15. EJERCICIO 1:
1. Descargar e importar el proyecto “TestGeoLoc”.
2. Programar la función getPosition() para que recoja valores de localización con estos
requisitos:
• Habilitación de la opción enableHighAccuracy
• Fijar el timeout a 10 segundos.
3. Completar la función onSuccess para que muestre todos los datos posibles de
localización debidamente formateados en una tabla.
• Mostrar la fecha y hora en la que se ha obtenido la localización en lugar de su valor
en milisegundos (dado por ‘timestamp’).
4. Programar la función onError para mostrar un mensaje de alerta con el código del error y
el mensaje de error.
15
16. ¿Y si probamos a mostrar la posición en un mapa de google?
var point = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
// Initialize the Google Maps API v3
var map = new google.maps.Map(document.getElementById('map_canvas'), {
zoom: 16,
center: point,
mapTypeId: google.maps.MapTypeId.ROADMAP
});
// Place a marker
new google.maps.Marker({
position: point,
map: map
});
16