Androideity

Programación android en español, tutoriales, documentación, noticias, smartphones, tablets, programación android, aplicaciones android

Uso de la Librería PanoramaGL en Android usando Eclipse

| | 8 Comentarios

Twitter: @JaimeYesidLeon

Las herramientas con las que contamos los desarrolladores de aplicaciones en Android cada día crece como espuma y fortalece la plataforma del robot verde; así que el problema no es la falta de herramientas sino el conocerlas, por eso en este post muy sencillo traigo un “Hola Mundo” para una librería que me gustó mucho y que se llama PanoramaGL, con la cual podrás ver fotos panorámicas en tu aplicación, así que si te interesa agregar esta funcionalidad a tu aplicación sigue leyendo para ver de qué se trata.

Hace unas pocas semanas Google dio a conocer la última versión de sus sistema operativo Android, el cual ya va en 4.2 y que se sigue llamando Jelly Bean como su versión anterior 4.1. La versión 4.2 promete una mejoras importantes dentro de las cuales surgió una que me llamó mucho la atención: Photo Sphere; una
funcionalidad de la cámara con la cual podrás capturar y visualizar fotos de 360°. Genial ¿no?
En este video podrás recordar o ver (si no lo has hecho antes) de lo que se trata Photo Sphere:

Sin duda alguna esta nueva funcionalidad es bastante interesante, pero sería muchísimo más interesante si los desarrolladores de aplicaciones para Android pudiéramos aprovechar este recurso e incluirlo en aplicaciones que necesitan de un recurso más liviano que un video pero más interactivo que una foto plana.
Imagina que estás desarrollando una aplicación que necesita mostrar el interior de una casa que está a la venta, un almacén que estas promocionando, un sitio turístico que deseas dar a conocer, el interior de un automóvil que deseas mostrar a tus clientes, ¿no crees que una foto panorámica sería la solución perfecta? Si crees que sí, de seguro la librería que hoy te traigo será una solución muy buena para este tipo de necesidades.

PanoramaGL

PanoramaGL fue la primera librería para Android (también para iOS) Open Source que implementó la propiedad de visualizar fotos panorámicas tanto en el eje X como Y, para ser usadas en el desarrollo de aplicaciones móviles. En la página oficial PanoramaGL  podrás encontrar todo lo que necesitas saber sobre esta librería, como un HelloWorld, descargar el código fuente, recursos externos y características propias, aunque podemos destacar para nuestro interés que se puede usar en versiones de Android 2.0 en adelante, soporta OpenGL 1.0 en adelante, tiene zoom y movimiento sensorial, osea que puedes usar por ejemplo el Acelerómetro para hacer que se mueva la foto que estás visualizando. Algo muy interesante también es la facilidad de poder implementar el protocolo JSON para visualizar Fotos desde una URL.

Para que puedas ver de qué se trata esta librería te recomiendo que visites su página y te enteres de todas sus geniales características, pero si quieres ver ya de que se trata, te dejo el siguiente video (no tan claro) en donde se puede ver un ejemplo de lo que hace la librería.

Como lo dijimos al inicio del post, vamos a ver un “HolaMundo” del uso de esta librería para que pueda ser aprovechada en nuestros proyectos, así que empecemos:

1. En el primer paso vamos a descargar los archivos necesarios para utilizar PanoramaGL y como es lógico pensar necesitamos la librería .jar para ser usada en nuestro proyecto, así que la descargamos de la siguiente dirección:  http://panoramagl-android.googlecode.com/files/libglues.zip

La segunda descarga que vamos a hacer será de los archivos de compatibilidad, pero ¿qué son esos archivos? Son ficheros que nos ayudan para que podamos usar nuestro código en diferentes arquitecturas de hardware sin importar si el dispositivo Android tiene un procesador con arquitectura ARM, x86 o MIPS, así que debes descargarlos de la siguiente dirección:
http://panoramagl-android.googlecode.com/files/libglues.zip

Lo último y más bonito que debemos tener para hacer nuestro proyecto son las imágenes que vamos a mostrar. Es muy importante que estas imágenes tengan las siguientes características:

a. Que su tamaño NO exceda los 1024 x1024 pixeles de tamaño, ya que la librería no soporta más de este tamaño. Es cierto que es una limitante pero pues no todo puede ser color de rosa.

b. Lo segundo que debes tener presente (aunque sea obvio), es que las imágenes de que vayas a visualizar deben ser de tipo esféricas, que no sean planas, ya que la librea lo que hace es como una especie de “estiramiento” de la misma y las acomoda al formato panorama; estas imágenes esféricas se ven extrañas en un visualizador de imágenes común, pero cuando las visualizas correctamente se ven muy bonitas.  Pero si no eres fotógrafo, o no sabes cómo tomar una foto esférica (como es mi caso) pues muy sencillo bájate una de internet, en mi caso use la de la siguiente dirección:
http://www.pananoias.com/wp-content/gallery/equirectangulares/rocodromo.jpg y después de la descarga le cambie el tamaño a 1024×512 pixeles. Eso lo hace muy fácil el editor de imágenes de Windows, no sé cómo se haría en Mac
o Linux. De todas maneras al final del post te dejaré el código fuente del
proyecto.

2. Con los archivos necesarios para el proyecto, ya podremos empezar a codificar lo que necesitamos del proyecto, para esto creamos un proyecto a tu necesidad y con el nombre que le desees dar, la versión, y si tiene la última versión del ADT para Eclipse podrás elegir el Theme:

3. Con nuestro proyecto creado, lo siguiente será copiar los archivos que descargamos a nuestro proyecto, así que vamos a lugar en donde descargamos los archivos y aquel que se llama “libglues”, se descomprime y quedaría una carpeta llamada libs, la cual contiene las siguientes carpetas:

Estas carpetas que están dentro de la  llamada libs son las que debes copiar dentro de tu proyecto; también debes copiar dentro de tu carpeta libs la librería PanoramaGL_0.1.jar que también descargaste, así que tu proyecto debería ir quedando de la siguiente manera:

4. Con nuestros archivos ya dentro de las carpetas respectivas lo que debemos hacer es vincular la librería PanoramaGL_01.jar a nuestro proyecto; una forma de hacerlo es dando clic derecho sobre el proyecto, seleccionar la opción “Properties”, seguido seleccionas la opción “Java Build Path” y al costado derecho seleccionas la pestaña “Libraries”; seguido das clic en el botón “Add JARS..” y en la ventana que se abre debes elegir la librería PanoramaGL_0.1.jar y por último das clic en el botón “OK”. La imagen a continuación muestra cómo se debe ver antes de dar clic en “OK”, pero en el video que está al final de este post podrás ver los pasos de este punto con mayor detalle así como el resto de la construcción del proyecto.

5. Con los archivos necesarios dentro del proyecto, vamos a colocar a nuestras protagonistas, la fotos panorámicas o esféricas que queremos visualizar, como dije al inicio deben ser fotos esféricas, el enlace que les deje muestra la siguiente imagen:

Como pueden ver casi no se puede diferenciar claramente de qué se trata el lugar, pero cuando lo veamos implementados en nuestro proyecto van a ver lo bonito que queda; así que descargamos la imagen, le damos un tamaño máximo de 1024 pixeles y la guardamos en nuestra carpeta llamada “raw”, que si no la tienes creada la debes adicionar a tu proyecto dentro de la carpeta “res”, a mi imagen le di el nombre de rocodromo.jpeg, y así va quedando el proyecto:

6. Tenemos todos los archivos que necesitamos, ahora faltaría un poco de código para ver unas lindas imágenes panorámicas, así que abrimos nuestra clase que para nuestro caso la llamamos PanoramaGL.java y las cosas que debe tener son las siguientes:

a. Los import necesarios son los siguientes:

import com.panoramagl.PLImage;
import com.panoramagl.PLSphericalPanorama;
import com.panoramagl.PLView;
import com.panoramagl.utils.PLUtils;
import android.os.Bundle;

Aquellos que empiezan con “panoramagl” son aquellos que se refieren a la librería que previamente importamos, y que son necesarios para los objetos que crearemos a continuación.

b. Hacemos que nuestra clase extienda como PLView para heredar los elementos necesarios, así que nuestra clase seria PanoramaGL.java extends PLView.

c. Creamos un objeto de tipo PLSphericalPanorama el cual llamamos panorama.

d. Modificamos el objeto panorama para que tome la imagen que tenemos guardada en la carpeta “raw”:

panorama.setImage(this.getCurrentGL(),
PLImage.imageWithBitmap(PLUtils.getBitmap(this, R.raw.rocodromo)));

e. Por último escribimos la línea de código para que la “Activity” creada tome la imagen y la muestre.

Quedando el código de la siguiente manera:

Y así con este sencillo y corto código ya tenemos nuestra imagen cargada en nuestros proyecto, aquí una imagen que muestra cómo se inicia cuando el proyecto comienza:

Pero cómo lo bonito es verlo en vivo, a continuación te dejo un video en donde se muestra paso a paso la creación del proyecto y se puede ver cómo funciona en un dispositivo real:

Nota:  Si detectas algún error en el código, en la explicación, escrito o en el video, por favor escríbenos y con mucho gusto la corregimos. Agradecemos tu ayuda.
Nota 2: El proyecto queda alojado en GitHub , por lo tanto solo tendrás que descargar el proyecto y verificar si tienes alguna duda. Abajo te dejo el enlace directo para la descarga.

Comparte este post

Acerca de: jaime

Hola, mi nombre es Jaime Yesid Leon, soy de Bogotá–Colombia, soy Ingeniero Electrónico, me encanta la electrónica, los microcontroladores y la programación. Practico futbol, leo mucho y no dejo los video-juegos para nada. Hago lo que me gusta y desde que conocí el SO Android me enamore y por eso estaré aquí aportando mi granito de arena a Androideity, una pagina genial.

Sígueme en Twitter

Leer todos mis artículos

También puede interesarte

Comentarios de este artículo

  • http://twitter.com/seba_cipolat sebastian cipolat

    Muy interesante Jaime lo voy a tener en cuenta.
    una pregunta sabes o probastes si en lugar de usar una foto esférica como la que mostras usamos una foto tomada con un telefono en el modo panorama se veria bien?

    saludos.

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola sebastian,

      Gracias por tu comentario bueno y tan rapido :)

      Si lo probe con una foto panorámica pero no se ve muy bien, a menos que sea una panorámica 360.
      En el video que deje al final pueder ver lo bien que quedan las fotos esfericas, ya que pareciera que tuviera un aspecto 3d, pero con una panoramica al ser plana no vas a tener esa “profundidad”.
      Puedes probar con cualquier foto, pero esta libreria esta destinada a mostrar fotos esfericas.

      Un saludo

      Jaime Leon

      • Javier

        Hola Jaime.

        Tengo un problema, a pesar de tener las librerias importadas no me funcionan los metodos

        panorama.setImage(this.getCurrentGL(), PLImage.imageWithBitmap(PLUtils.getBitmap(this, R.raw.rocodromo)));

        La versión ha cambiado a 0.2, puede ser por eso?
        Gracias

  • carlos

    Es interesante estoy realizandolo el programa me corre pero al emularlo me sale el hello world, coloque la imagen del post con un tamaño de 512*512 pixeles no se cual es el problema ,agradeceria si me echas una mano

    • http://twitter.com/JaimeYesidLeon Jaime Leon

      Hola Carlos,
      Descargaste el proyecto?,

      Si me puedes decir cual es el error para ayudarte mejor.

      Saludos

      Jaime

  • aras

    Hola Jaime, primero quiero felicitar y agradecer por este gran aporte.

    Es posible colocar alguna otra imagen u objeto que reciva eventos sobre la imagen panoramica(por ejemplo, la imagen de una persona y simular movimientos)? como puedo hacerlo?

    Gracias de antemano.

  • Michael

    Jaime primero que todo Excelente aporte.

    Quisiera preguntarle una cosita, puedo colocar varias imagenes para que vaya de un lado a otro, algo asi como un pequeño Street View, muchas gracias antemano y espero pronta respuesta.

  • pablo

    Hola Amigos, alguno sabe alguna libreria buena para recortes de imagenes, que deje grabar en el formato y peso que uno quiera? gracias pablo@idish.co