Diagrama de estados de MediaPlayer

Este es el diagrama de estados que estamos siguiendo en esta parte de vídeos:

Vídeos. La clase Videos

En primer lugar, cambiamos los vídeos de ubicación. Los pasamos de la carpeta raw a la sdcard del emulador, en una carpeta a la que llamamos LSEDapps. También metemos ahí los 5 archivos de texto.

Además, pasamos los vídeos a formato mp4 para que sean reconocidos por Android. De esta manera han pasado de ocupar 250 MB a 16 MB.

Continuamos con la clase Videos.
En ella, construimos un objeto de tipo VideoView y lo inicializamos. Ponemos listeners para saber cuándo los vídeos están preparados o terminados. Lo hacemos con los métodos OnPreparedListener y OnCompletionListener pasándole como parámetro mp(de MediaPlayer).

Creamos también un método playVideo que vinculamos al vídeo en cuestion de manera que el parámetro que le pasamos es un string con el path del vídeo:

sdcard/LSEDapps/volver.mp4 es un ejemplo del path de uno de los videos que tenemos llamado volver.

En cuanto al VideoView.xml del layout que es como el diseño que tendrá la pantalla(en este caso la de reproducción de vídeos), tenemos un < VideoView y un < EditText donde pondremos un texto.

Ahora el problema al que nos estamos enfrentando es al de concatenar vídeos para que se reproduzcan de manera consecutiva.

Librerías de C++ (IV). Problema resuelto

Ya hemos solucionado el problema que nos surgió el otro día y que os lo hicimos llegar a través de este blog.

La solución, simple pero difícil de darse cuenta, residía en la función
static {
System.loadlibrary("libtraductor");
}
donde libtraductor es el nombre del archivo .so.

Pues bien, aunque el código compilaba, lo cierto es que luego no se llegaba a ejecutar el emulador. Basta con cambiar libtraductor por traductor, manteniendo libtraductor como nombre del archivo .so.

De esta manera, tenemos:

static {
System.loadlibrary("traductor");
}

Un poco de diseño gráfico

Hacer una aplicación para Android no solo consiste en escribir líneas de código, el diseño gráfico es muy importante. Una aplicación puede estar muy bien programada y ser muy útil, pero si la interfaz de usuario no está lograda, simplemente no nos gusta.

Cuando alguien entra en una aplicación, lo primero que ve es el icono que tiene que pulsar para entrar en ella. Queremos iconos llamativos, diferentes, que tengan algo especial. Pero esto no es tan fácil como parece.

Para hacer nuestro icono hemos utilizado Photoshop. Nos hemos basado en los iconos que hay en iOS, ya que la forma que tiene es un cuadrado con borde redondeado. Tiene un efecto parecido al del icono de la App Store, que hemos conseguido aplicando varias capas y filtros. Sobre esta base hemos puesto una imagen del avatar que interpreta los signos en nuestra aplicación, un borde plateado, y listo.

Vídeos

Hoy hemos empezado con los vídeos ya que estamos bloqueados en la parte de las librerías de C++; problema que intentaremos solventar en la próxima reunión con Rubén.
Esta parte es independiente de las librerías, es decir, podemos hacerlas por separado y, al final, unirlas. Las librerías son necesarias para saber qué vídeos exactamente hay que reproducir.

Por eso, de momento, vamos a ver cómo reproducir un vídeo cualquiera en nuestra aplicación.
Primeramente vinculamos el botón reproducir a una clase llamada Videos, en la que programaremos todo lo relacionado.
En una carpeta llamada raw, ubicada en res, guardamos todos los vídeos que contienen el avatar representando las distintas letras y/o palabras.
Este es, de momento, el avatar que tenemos para la reproducción de los vídeos



Sin embargo, el primer intento de código no ha salido como esperábamos pues nos sale un problema que aún no tenemos detectado. Os dejamos el problema desde el punto de vista del código:



y desde el punto de vista del emulador:

Librerías de C++ ( III ) Problema.

Vamos a poner aquí unas cuantas líneas de código que nos parecen interesantes.

Hemos puesto lo siguiente para permitir que se pueda escribir en la tarjeta de memoria:

< uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/ >

Siguiendo con la sdcard, escribimos andoid:installlocation="preferExternal" para instalar la aplicación en la tarjeta, en caso de que la interna no tenga suficiente capacidad, como es precisamente nuestro caso.

También, con la línea de código pretendemos que no se vaya la luz de la pantalla mientras se reproduzca un vídeo:
< uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/ >

Sin embargo, cuando ejecutamos la aplicación con el emulador, algo falla pues nos aparece un mensaje de error que nos obliga a cerrar el programa.
Aquí podéis verlo:

Librerías de C++ ( II )

Primeramente, aunque no tenga que ver con esta parte en sí, hemos creado unas trazas para localizar errores en caso de que ocurriesen.

Prosiguiendo con lo anterior, ahora tenemos que cargar la librería, para lo que usamos lo siguiente:

static {
System.loadlibrary("libtraductor");
}

que, recordemos, libtraductor es el nombre del archivo .so.

Lo siguiente es meter unos archivos de texto en la sdcard del teléfono. Como no tenemos un teléfono android físicamente, hemos dado con una herramienta muy útil para usar la sdcard del emulador del teléfono.
Se trata de abrir eclipse con la Perspectiva DDMS. Esta perspectiva nos da varias nuevas posibilidades que os iremos comentando según las vayamos utilizando.
En esta primera imagen vemos que muestra estadísticas sobre la consumición de memoria por parte de la aplicación.



En esta perspectiva, en mnt/sdcard, metemos los 5 archivos de texto requeridos, que era nuestro objetivo, tal y como se muestra en la imagen:

Segunda parte: Librerías de C++

Esta segunda parte consta del traductor a LSE en C++ importado como una librería.

Para poder utilizar este traductor y trabajar con él se ha utilizado el NDK de Android.
Además, hemos instalado (24h de instalación) Cygwin, una colección de herramientas ideadas para proporcionar un comportamiento similar a los sistemas Unix en Microsoft Windows. Es decir, Cygwin es un entorno Linux para Windows.

¿Qué hemos hecho con ello?

En primer lugar creamos en nuestro proyecto una carpeta llamada jni.
Dentro de la carpeta jni deben estar las clases en código nativo (en este caso C++) y el makefile. Los makefiles son los ficheros de texto que utiliza la herramienta de generación o automatización de código make para llevar la gestión de la compilación de programas. Se podrían entender como los guiones de la película que quiere hacer make.

Desde el Cygwin ejecutamos en el directorio de nuestra aplicación la instrucción ndk-build.
Se crea un archivo con extensión .so (shared object). Archivo que metemos en la carpeta (que se crea por defecto al ejecutar) libs/armeabi. Lo llamamos libtraductor.so

Aquí os dejamos una imagen de la compilación con cygwin:

Primer Hito: Resumen de lo conseguido

Tras el primer hito del curso, este es el resumen de la primera parte de la práctica, ya finalizada:

Tenemos una pantalla de bienvenida con las siguientes características:
Activity con un Thread para controlar el tiempo
A los 3 segundos para y se cambia la pantalla de bienvenida por el menú principal de la aplicación
Utilizamos la clase Intent para lanzar una nueva Activity que será el menú principal
Menú principal:
Tiene un cuadro para insertar texto y el botón de traducir


En res/drawable_hdpi está el icono de la aplicación, y es el que aparecerá en el móvil
En res/drawable está menu_background.jpg que es la imagen que sale en la pantalla incial
En res/values/strings se definen los Strings que se usan en los ficheros .xml
Además están las carpeta res/layout y res/layout-finger

En estos ficheros XML en layout, se configura la interfaz gráfica de la aplicación
pantallaincial.xml
ImageView: para mostrar una imagen
main.xml
TextView: una etiqueta que muestra una frase
EditText: cuadro para introducir el texto a traducir
Button: botón de traducir
ImageView: logo del proyecto Consignos

El archivo AndroidManifest.xml describe los componentes de la aplicación:
Activities, services, broadcast receivers, and content providers.
Nombra a las clases que implementan cada uno de los componentes y publica sus capacidades (por ejemplo, que los mensajes puedan manejar Intent).
En nuestra aplicación hay dos actividades, cada una lanzada por un intent

Logo Consignos

Posteriormente usaremos una serie de videos que muestran la traducción a lengua de signos LSE.
Como son videos del proyecto Consignos, tendremos que poner el siguiente logo
en la parte de abajo de la aplicación.
Simplemente en la carpeta drawable ubicada en res colocamos la imagen deseada, mientras que en main.xml construimos un < ImageView relacionado con la imagen introducida. La ponemos en modo wrap_content para que se ajuste al tamaño de la pantalla en cuanto al ancho.
Este es la nueva imagen de la aplicación con la última modificación:

Aspecto de la aplicación

En res->values->strings.xml creamos un texto llamado 'instrucciones', que contiene un subtexto 'Inserte texto'.

En res->layout->main.xml, construiremos un < TextView que llamará al texto antes mencionado, que actúa a modo de etiqueta.
Siguiendo en esta clase, creamos un nuevo texto con < EditText.

Volviendo a strings.xml, creamos un nuevo string, esta vez llamándolo 'traducir'. El contenido de este texto será el que aparezca en el botón que creamos a continuación:
< Button, centrándolo horizontalmente de esta manera:
android:layout:gravity="center_horizontal".

Así se ve la aplicación:



Cuando pulsamos sobre el cuadro de texto, tenemos la posibilidad tanto de escribir con nuestro teclado como de escribir con el teclado habilitado por el móvil como se muestra a continuación:

Primeros pasos: Arranque de la aplicación

Hemos llamado al proyecto 'Lenguaje de signos'.
El primer objetivo es crear una pantalla de carga de duración unos 3 segundos que nos lleve posteriormente a la pantalla principal de la aplicación.
Al crear un proyecto en android, aparecen unas carpetas y archivos ya por defecto.
Una de ellas, drawable_hdpi, ubicada en la carpeta res, contiene el logo de la aplicación. Hemos creado un nuevo logo y guardado en formato jpg incluyéndolo en dicha carpeta. Este es el aspecto de la aplicación:



De nuevo en res creamos otra carpeta llamada 'drawable' en la que trabajaremos posteriormente.
Confeccionamos también un archivo PantallaInicial.xml en res->Layout.
Por defecto se crea un archivo LenguajeDeSignosActivity.java encargado de que salte la pantalla; con su método onCreate(es básicamente lo que se ejecuta, parecido al main de java).
Especificamos dentro del archivo .java el tiempo(en milisegundos) que dure la pantalla de espera. En nuestro caso 3000ms (=3 segundos): long m_dwSplashTime=3000;
Un hilo new Thread()será el encargado de ir contando esos segundos.
Este es el aspecto que tiene la pantalla de espera que aparece cuando pinchamos en el icono:



Construimos también un método protected void onPause para parar la aplicación cuando llegue una llamada, mensaje de texto o similares, con su correspondiente método onResume() para volver a la aplicación una vez que estamos en pausa.

Creamos otra clase en src->lenguaje.signos a la que llamamos 'MenuPrincipal', también con su método public void onCreate.
Modificamos el AndroidManifest.xml para que cambie de pantalla.