Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

18
Desarrollo de Aplicaciones Multiplataforma Desarrollo de Aplicaciones Móviles Sensores Brújula, Acelerómetro, Geolocalización Jesús Fontecha Diezma

description

Explicación básica del manejo de la brújula, el acelerómetro y los mecanismos de geolocalización del smartphone utilizando PhoneGap (Apache Cordova).

Transcript of Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

Page 1: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

1

Desarrollo de Aplicaciones MultiplataformaDesarrollo de Aplicaciones Móviles

SensoresBrújula, Acelerómetro,

GeolocalizaciónJesús Fontecha Diezma

Page 2: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

2

¿Qué es una brújula?¿Qué es un acelerómetro?

¿Qué es un (instrumento) GPS?¿Para qué sirven?

Page 3: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

3

¿Qué es una brújula y para qué sirve?

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).

MEMSMicroelectromechanical Systems

Page 4: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

4

¿Qué es un GPS y para qué sirve?

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

Page 5: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

¿Manos a la obra?

¿Cómo lo voy a probar?

5

Page 6: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

Emulación de sensores1

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”

4Móvil real

6

Page 7: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

BrújulaInstrumento 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

Page 8: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

Opcionesfrequency (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_ERRCompassError.COMPASS_NOT_SUPPORTED

// Actualiza el valor de la brújula cada 3 segundosvar options = { frequency: 3000 };watchID = navigator.compass.watchHeading(onSuccess, onError, options);

Ejemplo

8

Page 9: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

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

Page 10: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

AcelerómetroSensor 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

Page 11: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

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 segundosvar watchID = navigator.accelerometer.watchAcceleration(onSuccess, onError, options);

Opciones

navigator.accelerometer.watchAcceleration(onSuccess, onError, [options]);

11

Page 12: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

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

Page 13: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

GeolocalizaciónNos 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

Page 14: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

function onSuccess(position) { alert(‘Latitud: ' + position.coords.latitude);};

OpcionesenableHighAccuracy (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_DENIEDPositionError.POSITION_UNAVAILABLEPositionError.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

Page 15: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

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

Page 16: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

¿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 v3var map = new google.maps.Map(document.getElementById('map_canvas'), { zoom: 16, center: point, mapTypeId: google.maps.MapTypeId.ROADMAP});

// Place a markernew google.maps.Marker({ position: point, map: map});

16

Page 17: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

Reconocimiento de actividades

Aplicaciones de Realidad Aumentada

Etcétera…

17

Page 18: Brújula, Acelerómetro y Geolocalización con PhoneGap (Básico)

18

SensoresBrújula, Acelerómetro, Geolocalización

Jesús Fontecha Diezma