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

Guía N° 3 Universidad de El Salvador
Universidad de El Salvador
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
Guía N° 3 Universidad de El Salvador
¿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.
2012
Página 2
Guía N° 3 Universidad de El Salvador
{
"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": "46.43893",
// latitud
"lng": "11.21706",
//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": "46.49396",
"lng": "11.2088",
"elevation": "1865",
"title": "Gantkofel",
"distance": "9.771",
“type”: “4”,
"webpage": ""
},
{
"id": "2829",
"lat": "46.3591",
"lng": "11.1921",
"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
Guía N° 3 Universidad de El Salvador
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
Guía N° 3 Universidad de El Salvador
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:




2012
public void drawCircle(PaintScreen dw, Context ctx)
private void cCMarker(MixVector originalPoint, Camera
addX, float addY)
public void draw(PaintScreen dw, Context ctx)
public void drawTextBlock(PaintScreen dw)
viewCam,
float
Página 5
Guía N° 3 Universidad de El Salvador
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
Guía N° 3 Universidad de El Salvador
Codigo 7:
@Override
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:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.administration);
break;
case E_E_SUPERIOR:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.highschool);
break;
case BIBLIOTECA:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.library);
break;
case OTROS:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.notvisited);
break;
case BAR:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.bar);
break;
case CAFE:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.coffee);
break;
case RESTAURANTE:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.restaurant);
break;
2012
Página 7
Guía N° 3 Universidad de El Salvador
case ZOOLOGICO:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.zoo);
break;
case MUSEO:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.artmuseum);
break;
case HOSPITAL:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.hospitalbuilding);
break;
case UNIVERSIDAD:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.university);
break;
case SUPERMERCADO:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.supermarket);
break;
case JOYERIA:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.jewelry);
break;
case PIZZA:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.pizzaria);
break;
case CASINO:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.casino);
break;
case RESIDENCIA:
bit=BitmapFactory.decodeResource(ctx.getResources(),
R.drawable.condominium);
break;
case ESCUELA:
bit=BitmapFactory.decodeResource(ctx.getResources(), R.drawable.school);
break;
}
if(bit!=null)
dw.paintBitmap(bit, cMarker.x-24,cMarker.y-26);
}
}
}
2012
Página 8
Guía N° 3 Universidad de El Salvador
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
Guía N° 3 Universidad de El Salvador
</intent-filter>
<intent-filter>
<action android:name="android.intent.action.SEARCH" />
</intent-filter>
<meta-data
android:name="android.app.searchable"
android:resource="@xml/searchable" />
<meta-data
android:name="android.app.default_searchable"
android:value="org.mixare.MixView" />
</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:resource="@xml/searchable" />
</activity>
<activity
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"
android:resource="@xml/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
Guía N° 3 Universidad de El Salvador
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.
2012
Página 11
Guía N° 3 Universidad de El Salvador
El punto azul es nuestra localización y el punto de abajo es el POI mostrado en la
cámara anteriormente.
2012
Página 12