Ocultando la barra de direcciones del navegador de Android

Introducción

Con los beneficios que las nuevas características de HTML5 y CSS3 traen a los desarrolladores de aplicaciones móviles cada día es mas frecuente que se desarrollen sitios y aplicaciones web diseñadas específicamente para estos dispositivos.

Las aplicaciones web móviles son en esencia una página web que emula en cierta medida el look-and-feel de las aplicaciones nativas para permitirle al usuario acceder a la funcionalidad de la aplicación con los beneficios (y desventajas) de una aplicación web pero con una experiencia similar a las aplicaciones convencionales.  Para hacer esto existen varios frameworks sin embargo hay ocasiones en las que es preferible no basarse en ellos sino implementar una página web estándar.

Ocultando la barra de direcciones en el navegador web de Android
Ocultando la barra de direcciones en el navegador web de Android

En esos casos probablemente la primera de las adaptaciones que se desea realizar es el ocultar la barra de direcciones del navegador ya que así se dará la impresión de aplicación nativa y no de página web convencional inmersa en un navegador.

En Android esto es posible lograr de cierta manera.  La barra de direcciones no puede ser eliminada por completo pero puede ser ocultada, es decir, no se verá durante la ejecución de la aplicación web móvil hasta que el usuario decida hacer el scroll necesario para acceder a ella.

Procedimiento

El procedimiento para lograr esto se basa en dos pasos que se deben realizar mediante Javascript.  El primero de ellos consiste en garantizar el la página web de la aplicación móvil cuenta con suficiente altura para poderse realizar.  Para esto se manipula el alto del body.  El segundo paso consiste en simular desde código un scroll lo que activará la característica del navegador de ocultar la barra de direcciones.

/**
 * Hide the URL address bar on standard Android's browser by setting enough
 * document height and auto scrolling to active the bar hiding feature
 */

function hideAddressBar()
{
  if(!window.location.hash)
  {
      if(document.height < window.outerHeight + 10)
      {
          document.body.style.height = (window.outerHeight + 50) + 'px';
      }

      setTimeout(function()
      {
      	window.scrollTo(0, 1);
      }, 50);
  }
}

Finalmente se invoca esta función una vez se ha cargado completamente (load) la página web, garantizando también que esto se haga durante los cambios de orientación del dispositivo.

/**
 * Start up procedure to hide the Android's URL bar
 */

window.addEventListener("load", function()
{

	if(!window.pageYOffset)
	{
		hideAddressBar();
	}

	window.addEventListener("orientationchange", hideAddressBar);

});

Enlaces

Experimentando un poco con el Canvas de HTML5

Introducción

Entre las muchas maravillas que nos trae HTML5 está el componente Canvas cuya funcionalidad es sorprendente en comparación con lo que nos tenía acostumbrados la versión anterior.  Durante este fin de semana decidí jugar un poco con el Canvas para experimentar con su funcionalidad básica de dibujar.

Para esto desarrollé una aplicación web muy simple que permite dibujar puntos y líneas en un lienzo blanco.  El color de las lineas puede ser modificado entre amarillo, azul y rojo.

La aplicación web resultante puede ser consultada desde un navegador web de escritorio o uno de un dispositivo móvil ya que no sólo se manejaron los eventos de ratón convencionales sino que también se incluyeron los eventos de touch que permiten detectar la interacción con las pantallas táctiles.

Demostración

Demostración uso básico de Canvas
Demostración uso básico de Canvas

Enlaces

Instalación de Corona SDK en Ubuntu 12.04 utilizando Wine

Introducción

Corona SDK es una plataforma para el desarrollo de aplicaciones móviles para iOS y Android muy publicitada ultimamente y por lo que he visto hasta el momento muy interesante para el desarrollo de aplicaciones, especialmente juegos en estos dispositivos.  Desafortunadamente no existe aún una versión para GNU/Linux sin embargo por suerte es posible instalarlo utilizando Wine.

Instalación de Wine

El primer paso debe ser entonces instalar Wine que se encarga de hacer la traducción o emulación de las invocaciones a las funciones nativas de Windows.

$ sudo aptitude install wine

En este caso estoy utilizando un release candidate de la versión 1.4.

$ wine –version

wine-1.4-rc5

Descargar Corona SDK

Para descargar la distribución del software se debe elegir la versión del sistema operativo Microsoft Windows y descargar el paquete correspondiente desde la siguiente ubicación.

https://developer.anscamobile.com/downloads/coronasdk

También es necesario que se cree una cuenta de usuario en el sitio web para poder ejecutar posteriormente el software.

http://developer.anscamobile.com/user/register

Instalar Corona SDK

La versión que se utilizó para este procedimiento fue la 2011.704.  La invocación mostrada a continuación realiza la instalación del software (desarrollado para Windows) en GNU/Linux.

$ wine start CoronaSDK-2011.704.msi

Crear una demostración: Hola Mundo

Hola Mundo con Corona SDK
Hola Mundo con Corona SDK

Utilizando cualquier editor de texto crear el archivo main.lua con el siguiente contenido.

local text = display.newText("Hello World", 50, 50, nil, 26)

text:setTextColor(255, 255, 255)

Ejecutar el Corona Simulator para interpretar la aplicación de demostración recién creada.

Herramientas instaladas por Corona SDK
Herramientas instaladas por Corona SDK

También es posible ejecutarlo desde la línea de comando de la siguiente manera.

$ ~/.wine/drive_c/Program Files/Ansca/Corona SDK/Corona Simulator.exe

Finalmente para interpretar la aplicación creada anteriormente elija la opción Open Project del menú File y seleccione el archivo main.lua.

Enlaces

Explotando burbujas con Processing utilizando GSVideo y Minim

Introducción

Demostración de GSVideo_Bubbles
Demostración de GSVideo_Bubbles

Este sketch combina la técnica de detección de movimiento descrita anteriormente para crear un ambiente interactivo simple que consiste en explotar las burbujas que aparecen al azar sobre la imagen del usuario.  Adicionalmente utiliza la librería Minim para reproducir un efecto sonoro al explotar las burbujas.

Changelog

  • 20120509: actualización de GSVideo al paquete de Video estándar.  Requiere Processing 2.0 (2a5).
  • 20120223: versión inicial, procedimental basada en GSVideo.  Incluye reproducción de un sonido utilizando Minim.

Enlaces

Instalando javacvPro para manipular OpenCV 2.3 desde Processing en GNU/Linux Ubuntu y Mint

Introducción

Después de experimentar con la versión 2.1 en Processing que era provistra por ubaa.net he decidido probar con otra diferente ya que esta al parecer ha dejado de ser actualizada.

En este caso estoy probando javacvPro la cual se ve muy prometedora a pesar de que su sitio web y documentación se encuentra escrito en francés.

Requisitos

Es necesario contar los paquetes de la librería OpenCV 2.3 instalados.

Instalación

Descargar la versión mas reciente de la librería desde el siguiente enlace.  Ver la sección Téléchargement.

http://www.mon-club-elec.fr/pmwiki_reference_lib_javacvPro/pmwiki.php

En este caso se utilizó la versión 0.3 disponible actualmente.

Descomprimir el paquete recién descargado.

$ unzip javacvPro-0.3.zip

Crear el directorio para las librerías de Processing (si este aún no existe).

$ mkdir -p ~/sketchbook/libraries

Ubicar la librería en esta ubicación para que esté disponible para Processing.

$ mv javacvPro ~/sketchbook/libraries

Enlaces

Instalando OpenCV 2.3 en GNU/Linux Ubuntu/Mint 12

Introducción

Después de realizar algunas pruebas y experimentos con la versión 2.1 he decidido actualizar la versión de OpenCV a su versión mas reciente (2.3.1 agosto de 2011) para utilizar nuevas librerías mas avanzadas.

Para esto, en lugar de construír la librería desde fuentes, voy a utilizar el repositorio que hábilmente ha creado @gijzelaerr en Launchpad con esta versión.

Instalación

Agregar los repositorios necesarios al sistema operativo.

$ sudo add-apt-repository ppa:gijzelaar/cuda

$ sudo add-apt-repository ppa:gijzelaar/opencv2.3

Actualizar la lista de índices de los paquetes en los repositorios.

$ sudo apt-get update

Instalar el OpenCV y sus dependencias.

$ sudo aptitude install libcv-dev

Enlaces

Detectando movimiento con GSVideo y Processing

Introducción

De manera análoga a como se realizó inicialmente con OpenCV, se realizó el proceso de detección de movimiento básico utilizando Processing y la librería de GSVideo instalada hace poco.  Esta librería se especializa en la captura, grabación y reproducción del video mas que en su procesamiento así que la manipulación de las imágenes se realiza manualmente con las facilidades que provee el lenguaje.

En términos generales el procedimiento se basa en capturar el video proveniente de la cámara web a través de una instancia de la clase GSCapture provista por la librería GSVideo.  Cada una de las imágenes obtenidas es comparada con la imagen inmediatamente anterior.  De cada uno de sus píxeles se toma el color en forma de tripleta RGB y se determina su cantidad de variación utilizando la fórmula de distancia (función dist en Processing).  De esta manera se determina si en ese punto específico sucedió movimiento o no y es traducido a un píxel de color blano o negro respectivamente.

Screenshot

Imagen de movmiento sobre el objetivo
Imagen de movmiento sobre el objetivo

Enlaces

Instalando GSVideo en Processing bajo GNU/Linux

Introducción

GSVideo es una librería para Processing desarrollada por Andrés Colubri y basada en GStreamer.  Esta librería permite reproducir videos (incluyendo a la cámara web), capturar imágenes y realizar grabaciones.  Su API sigue los lineamientos de la librería nativa (processing.video.*) la cual por estar basada en Apple QuickTime no se encuentra disponible en GNU/Linux.

Instalación

La instalación de la distribución binaria es muy simple y se describe a continuación.

Descargar la versión mas reciente de la librería desde la siguiente ubicación.

http://sourceforge.net/projects/gsvideo/files/gsvideo/

En este caso se obtuvo el archivo GSVideo-1.0.0-linux.zip.

Descomprimir el paqute con la distribución de la librería.

$ unzip GSVideo-1.0.0-linux.zip

Reubicar la librería en el lugar apropiado del sketchbook.

$ mv GSVideo ~/sketchbook/libraries/

Dependencias

Como se mencionó inicialmente esta librería depende de GStreamer para su funcionamiento.  Utilizando GNU/Linux Mint 12 no fue necesario instalar ningún paquete adicional para trabajar con la librería.

$ sudo aptitude search gstream | grep “^i”

i   bluez-gstreamer                 – Bluetooth GStreamer support               
i   gir1.2-gstreamer-0.10           – Description: GObject introspection data fo
i   gstreamer0.10-alsa              – GStreamer plugin for ALSA                 
i   gstreamer0.10-ffmpeg            – FFmpeg plugin for GStreamer               
i   gstreamer0.10-fluendo-mp3       – Fluendo mp3 decoder GStreamer plugin      
i   gstreamer0.10-gconf             – GStreamer plugin for getting the sink/sour
i   gstreamer0.10-nice              – ICE library (GStreamer plugin)            
i   gstreamer0.10-pitfdll           – GStreamer plugin for using MS Windows bina
i   gstreamer0.10-plugins-bad       – GStreamer plugins from the “bad” set      
i   gstreamer0.10-plugins-bad-multi – GStreamer plugins from the “bad” set (Mult
i   gstreamer0.10-plugins-base      – GStreamer plugins from the “base” set     
i   gstreamer0.10-plugins-base-apps – GStreamer helper programs from the “base”
i   gstreamer0.10-plugins-good      – GStreamer plugins from the “good” set     
i   gstreamer0.10-plugins-ugly      – GStreamer plugins from the “ugly” set     
i   gstreamer0.10-pulseaudio        – GStreamer plugin for PulseAudio           
i   gstreamer0.10-tools             – Tools for use with GStreamer              
i   gstreamer0.10-x                 – GStreamer plugins for X11 and Pango       
i   libgstreamer-plugins-base0.10-0 – GStreamer libraries from the “base” set   
i   libgstreamer0.10-0              – Core GStreamer libraries and elements

Demostración

El siguiente código se basa en el ejemplo GettingStartedCaptureLinux incluído en la distribución de la librería.

// Import the GSVideo library classes

import codeanticode.gsvideo.*;

// GSVideo capture object reference

GSCapture cam;

void setup()
{
  size(640, 480);

  // Create the GSVideo capture object with the capture's resolution

  cam = new GSCapture(this, 640, 480);

  // Begin the video capture process

  cam.start();

  // Retrieve the video resolutions available

  println("Supported video resolutions: ");
  int[][] res = cam.resolutions();
  for (int i = 0; i < res.length; i++)
  {
    println(res[i][0] + "x" + res[i][1]);
  }

  println();

  // Retrieve the video framerates available

  println("Supported video framerates: ");
  String[] fps = cam.framerates();
  for (int i = 0; i < fps.length; i++)
  {
    println(fps[i]);
  }
}

void stop()
{
  // Stop the GSVideo webcam capture

  cam.stop();

  // Stop the sketch

  this.stop();
}

void draw()
{
  // Check if there is a capture device available

  if (cam.available() == true)
  {
    // In this case, read an image from it

    cam.read();

    // Display it on the window

    image(cam, 0, 0);
  }
}

Enlaces

Detectando movimiento con OpenCV y Processing

Introducción

Una de las características que quería aprender a implementar con OpenCV era la detección de movimiento, esto me permitirá implementar formas de interacción interesantes (y bastante simples de generar) entre el usuario y el sketch a través de la cámara web.

En pocas palabras, la técnica para detectar movimiento que se describe a continuación se basa en generar una imagen monocromática con los píxeles que han cambiado entre dos cuadros del video.  Para hacer esto se siguen los pasos mostrados a continuación.

  1. Obtener una nueva imagen de la cámara web
  2. Invertir la imagen horizontalmente (opcional)
  3. Calcular la diferencia entre la imagen recién obtenida y la almacenada en memoria (recordada)
  4. Procesar la imagen para facilitar su manejo: convertirla a escala de grises, suavizar la imagen y reducir el ruido eliminando los valores demasiado altos o bajos.
  5. Mostrar la imagen de movimiento (opcional)
  6. Recordar la imagen actual para ser procesada nuevamente en la siguiente iteración

opencv.read();

opencv.flip(OpenCV.FLIP_HORIZONTAL);

opencv.absDiff();

opencv.convert(OpenCV.GRAY);

opencv.blur(OpenCV.BLUR, 3);

opencv.threshold(20);

image(opencv.image(), 0, 0);

opencv.remember(OpenCV.SOURCE, OpenCV.FLIP_HORIZONTAL); 

Para verificar si ha sucedido movimiento en una determinada área de la imagen se debe verificar si los píxeles que pertenecen a esa área se encuentran blancos (si hubo) o no.  Esta información se obtiene utilizando el método get(int x, int y) del objeto PImage el cual retorna el color del píxel seleccionado.  Por facilidad se recomienda que se obtenga el brillo (brightness(color)) de este píxel para su comparación.

El siguiente código revisa un área cuadrada de píxeles en búsqueda de movimiento en esa zona.

for(int px=x; px<x+size; px++)  
    for(int py=y; py<y+size; py++)     
        if (px < width && px > 0 && py < height && py > 0)       
            if (brightness(mImage.get(px, py)) > 127)
                count ++;

Screenshot

Imagen de movmiento sobre el objetivo (modo buffer)
Imagen de movmiento sobre el objetivo (modo buffer)

 

Enlaces