Integración de guia1 y guia2 utilizando la aplicación Mixare

Transcripción

1 Facultad de Ingeniería y Arquitectura Escuela de Ingeniería en Sistemas Programación en Dispositivos Móviles Integración de guia1 y guia2 utilizando la aplicación Mixare Responsable Ing. César Augusto González Rodríguez Colaboradores Bryan Josué Rodríguez Parada Alexandra María Cañas Tovar José Antonio Sánchez Delgado Luis Alejandro González Taller Sistema de geo localización de espacios físicos de la FIA Requisitos de los participantes Conocimientos básicos de JAVA y XML. Preferiblemente un móvil (smartphone) con gps, Sistema operativo Android 2.2 o superior. Duración del taller 1 horas 2012 Página 1

2 Qué es Mixare? Mixare (Mix Augmented Reality Engine) es un navegador de realidad aumentada para Android e ios desarrollado por Peer Internet Solutions y licenciado como GNU GPL v3. Mixare puede funcionar en los siguientes modos: Independiente. Como aplicación que muestra puntos de interés obtenidos de Wikipedia. Invocado desde un enlace HTML. Utiliza los puntos que se le indiquen desde el enlace. Invocado desde otra aplicación. Versión modificada. Como única aplicación basada en mixare Su estructura de clases se puede dividir en varios grupos. Obteniendo como resultado: Para poder recuperar los datos de nuestro servidor es necesario construir un JSON así como el que se muestra de ejemplo a continuación, con las mismas características. Dependerá de los datos que se necesiten para que dicho JSON se le agreguen más o menos datos Página 2

3 { "status": "OK", "num_results": 3, //número de resultados obtenidos "results": [ //nombre del Grupo de Datos recibidos en el JSON { "id": "2827", // id del POI "lat": " ", // latitud "lng": " ", //longitud "elevation": "1737", //altitud "title": "Penegal", //titulo "distance": "9.756", // distancia de radio type : 1, // tipo de POI "webpage": "http%3a%2f%2fwww.suedtirolerland.it%2fapi%2fmap%2fgetmarkertplm%2f%3fmar ker_id%3d2827%26project_id%3d15%26lang_id%3d9", { "id": "2821", "lat": " ", "lng": " ", "elevation": "1865", "title": "Gantkofel", "distance": "9.771", type : 4, "webpage": "", { "id": "2829", "lat": " ", "lng": " ", "elevation": "2116", "title": "Roen", "distance": "17.545", type : 13, "webpage": "http%3a%2f%2fwww.suedtirolerland.it%2fapi%2fmap%2fgetmarkertplm%2f%3fmar ker_id%3d2829%26project_id%3d15%26lang_id%3d9" ] Observaciones: Los comentarios que se pusieron anteriormente son para hacer referencia al tipo de datos que se obtendrían del servidor para describir un POI que se coloque a través de Mixare en realidad aumentanda utilizando la cámara del celular Android. Es importante que si se desea realizar su propia aplicación utilizando Mixare respete el orden de realización del JSON mientras se esta haciendo a través del servicio web; ya que este es el formato que Mixare ocupa para leer los datos de una BD propia. Mixare es un proyecto de software libre muy extenso de modificar, por lo cual elegimos que para el presente taller se modificara la parte en la cual se dibujan los iconos que permiten renocer los POI s creados en el taller pasado, haciendo uso de realidad aumentada. Para 2012 Página 3

4 desarrollar lo mencionado anteriormente es necesario modificar las siguientes clases que se encuentran dentro del paquete org.mixare a) Modificando la clase de java Marker.Java Agrega las siguientes sentencias dentro de abstract public class Marker implements Comparable<Marker> en la parte de la declaración de variables globales. CODIGO 1: //-----AGREGADOS private int idpoi; protected int tipopoi; // Luego debemos de modificar el constructor de la clase, para que reciba las coordenadas georeferenciales, el DataSource es decir la conexión hacia la BD, el tipo de poi que queremos ver y el Id_Poi para poder identificarlo y extraer la información del mismo por medio del DataSource. Con esto definimos cualquier objeto tipo marcador Por favor modifica el constructor de la siguiente manera: CODIGO 2: public Marker(String title, double latitude, double longitude, double altitude, String link, DataSource datasource, int tipopoi, int idpoi) { super(); this.active = false; this.title = title; this.mgeoloc = new PhysicalPlace(latitude,longitude,altitude); if (link!= null ){ this.url="webpage:" + link; this.underline = true; this.datasource = datasource; this.id=datasource.gettypeid()+"##"+title; //Controlar idpoi y tipopoi por cada Marker this.idpoi=idpoi; this.tipopoi=tipopoi; Además modifica los setters y getter de los nuevos atributo agregados idpoi y tipopoi, de la siguiente manera: 2012 Página 4

5 CODIGO 3: // AGREGADOS public int getidpoi() { return idpoi; public void setidpoi(int idpoi) { this.idpoi = idpoi; public int gettipopoi() { return tipopoi; public void settipopoi(int tipopoi) { this.tipopoi = tipopoi; // Por favor busca el siguiente método dentro de Marker.Java public boolean fclick(float x, float y, MixContext ctx, MixState state) y modifica la siguiente sentencia: evthandled = state.handleevent(ctx, URL,0) como se muestra a continuación CODIGO 4: evthandled = state.handleevent(ctx, URL, idpoi); Observación: Si usted visualiza dentro de Marker.Java se encuentran los métodos que permiten establecer lo que es un objeto tipo marcador, como se debe de dibujar, cuales serán sus vistas, cuales son sus componentes de información, etc. Por lo cual si desea profundizar más le recomendamos ver los siguientes métodos: public void drawcircle(paintscreen dw, Context ctx) private void ccmarker(mixvector originalpoint, Camera viewcam, float addx, float addy) public void draw(paintscreen dw, Context ctx) public void drawtextblock(paintscreen dw) 2012 Página 5

6 b) Modificando la clase de java POIMarker.Java Agrega las siguientes sentencias dentro de public class POIMarker extends Marker en la parte de la declaración de variables globales. CODIGO 5: // AGREGADO GTWORLD public enum TYPE { WIKIPEDIA, BUZZ, TWITTER, OSM, MIXARE, GTWORLD ; public static final int E_ADMINISTRATIVO = 1; public static final int E_E_SUPERIOR = 2; public static final int BIBLIOTECA = 3; public static final int OTROS = 4; public static final int BAR = 5; public static final int CAFE = 6; public static final int RESTAURANTE = 7; public static final int ZOOLOGICO = 8; public static final int MUSEO = 9; public static final int HOSPITAL = 10; public static final int UNIVERSIDAD = 11; public static final int SUPERMERCADO = 12; public static final int JOYERIA = 13; public static final int PIZZA = 14; public static final int CASINO = 15; public static final int RESIDENCIA = 16; public static final int ESCUELA = 17; Modifiquemos el constructor en donde colocamos todos los atributos en un objeto tipo marcador, esto nos permitirá dibujar el POI en la cámara; es decir lo que realizara POIMarker.Java es hacer el respectivo constructor de toda la información relevante que nos permite visualizar en realidad aumentada los POI que hemos creado anteriormente. Codigo 6: public POIMarker(String title, double latitude, double longitude, double altitude, String URL, DataSource datasource,int tipopoi, int idpoi) { super(title, latitude, longitude, altitude, URL, datasource,tipopoi,idpoi); Luego debemos de conocer cual icono de POI debemos colocar por lo cual coloca el siguiente método: 2012 Página 6

7 Codigo public void drawcircle(paintscreen dw, Context ctx) { if (isvisible) { float maxheight = dw.getheight(); dw.setstrokewidth(maxheight / 100f); dw.setfill(false); dw.setcolor(getcolour()); double angle = 2.0 * Math.atan2(10, distance); double radius = Math.max( Math.min(angle / 0.44 * maxheight, maxheight), maxheight / 25f); /* AQUI se coloca el tipo de POI que es y que ira representado por el icono */ if (distance < 100.0) othershape(dw); else{ dw.paintcircle(cmarker.x, cmarker.y, (float) radius); Bitmap bit=null; switch(tipopoi){ case E_ADMINISTRATIVO: R.drawable.administration); case E_E_SUPERIOR: R.drawable.highschool); case BIBLIOTECA: R.drawable.library); case OTROS: R.drawable.notvisited); case BAR: R.drawable.bar); case CAFE: R.drawable.coffee); case RESTAURANTE: R.drawable.restaurant); 2012 Página 7

8 case ZOOLOGICO: R.drawable.zoo); case MUSEO: R.drawable.artmuseum); case HOSPITAL: R.drawable.hospitalbuilding); case UNIVERSIDAD: R.drawable.university); case SUPERMERCADO: R.drawable.supermarket); case JOYERIA: R.drawable.jewelry); case PIZZA: R.drawable.pizzaria); case CASINO: R.drawable.casino); case RESIDENCIA: R.drawable.condominium); case ESCUELA: R.drawable.school); if(bit!=null) dw.paintbitmap(bit, cmarker.x-24,cmarker.y-26); 2012 Página 8

9 Observación: Como se observa el icono del POI es asignado y por ultimo se comprueba que la variable tipo BIT la cual contiene el bitmap sea distinta de null; llamando asi al método paintbitmap, el cual nos permite dibujar en la cámara los POI. Por ultimo en el paquete org.mixare busque la clase llamada MixMap.Java. Dicha clase contiene un switch que permite colocar el icono del POI dentro del mapa. Esta clase es la que nos permite colocar los POI utilizando la API de GOOGLE MAP Por lo cual busca el método public void createoverlay() y quita el modo comentario del switch hasta esta sentencia. mapview.getoverlays().add(new MarkerOverlay(point,bmp)); */ c) Agrega tu clave MD5 para ver los mapas Abre el archivo BATCH.txt y sigue las instrucciones que aparecen en dicho archivo. Ahora coloca tu clave dentro de tu aplicación en la clase MixMap.Java y busca el método public void oncreate y modifica la siguiente línea código: Codigo 8: mapview= new MapView(this, "0UYhFd0yFVh0bVQvZ0QE22EOocMxWsQv7NMdlNw"); Lo que se encuentra subrayado es la clave que tienes que sustituir por la que acabas de generar. d) Modificando el AndroidManifest.xml Para utilizar Mixare desde nuestra aplicación debemos de modificar nuestro archivo manifest agregando las siguientes sentencias, dentro de <application></application> CODIGO 9: <activity android:name="org.mixare.mixview" android:label="@string/app_name" android:launchmode="singletop" android:screenorientation="landscape" > <intent-filter> <action android:name="android.intent.action.view" /> <category android:name="android.intent.category.default" /> <category android:name="android.intent.category.browsable" /> <data android:mimetype="application/mixare-json" android:scheme="http" /> <data android:mimetype="application/mixare-json" android:scheme="content" /> <data android:mimetype="application/mixare-json" android:scheme="file" /> 2012 Página 9

10 </intent-filter> <intent-filter> <action android:name="android.intent.action.search" /> </intent-filter> <meta-data android:name="android.app.searchable" /> <meta-data android:name="android.app.default_searchable" android:value="org.mixare.mixview" /> </activity> <activity </activity> <activity android:name="org.mixare.mixlistview" android:launchmode="singletop" android:screenorientation="user" > <intent-filter> <action android:name="android.intent.action.search" /> </intent-filter> <meta-data android:name="android.app.searchable" /> android:name="org.mixare.mixmap" android:launchmode="singletop" android:screenorientation="user" > <intent-filter> <action android:name="android.intent.action.search" /> </intent-filter> <meta-data android:name="android.app.searchable" /> </activity> <activity android:name="org.mixare.data.datasource" /> <activity android:name="org.mixare.data.datasourcelist" /> Además debes de agregar el siguiente permiso, para utilizar los mapas desde la aplicación creada dentro de <application> </application> CODIGO 10: <uses-library android:name="com.google.android.maps" /> 2012 Página 10

11 Ahora necesitamos cambiar una sentencia de la clase MenuOpcionesActivity.Java en el método protected void onlistitemclick(listview l, View v, int position, long id) Como verás ahi se encuentra un switch el cual en el CASE 1 debemos de quitar en comentario una instrucción la cual es la siguiente: CODIGO 11: //startactivity(i); Debes quitarle la doble pleca. Esta instrucción lo que permite es levantar mixare en nuestra aplicación. Por lo cual es importantísimo que realice el cambio anterior. e) Prueba de la aplicación completa Se observa un POI creado anteriormente junto con su respectivo nombre y localización respecto al punto en donde me encuentro Página 11

12 El punto azul es nuestra localización y el punto de abajo es el POI mostrado en la cámara anteriormente Página 12