Las ventajas que tiene respecto a activar la conexión por USB que trae Android de serie son varias, entre ellas:

• Acceso completo al sistema de ficheros del teléfono. La tarjeta de memoria interna es accesible en /mnt/sdcard.
• Acceso simultáneo desde el teléfono y desde el ordenador. De este modo no dejarán de funcionar las aplicaciones que han sido pasadas a la tarjeta de memoria mientras la usamos desde el ordenador.

Se trata de una primera versión y en directorios donde hay muchos archivos, por ejemplo la carpeta de fotos o de música, el acceso puede ser algo lento. Las siguientes versiones de adbfuse irán mejorando este y otros aspectos.

Se trata de algo para usuarios avanzados, ya que el teléfono ha de estar rooteado, tener instalado BusyBox, y saber montar un sistema de archivos FUSE en Linux.

Se puede descargar en la web del proyecto tanto la versión empaquetada como el código fuente con Mercurial. El proyecto ha sido liberado bajo la licencia GNU GPLv3.

Además proporcionan el código fuente tanto de la aplicación para Android como del Firmware del mismo. Se me ocurrió hacerle una modificación, y es que cuando se pulsa el primer botón, el de arriba a la derecha, aparece mi tarjeta de visita. En este artículo explicaré de forma resumida el proceso para conseguir mi objetivo.

Lo primero es generar un qrcode en la web de zxing. Se rellena la información pertinente y se genera de tamaño S para que quepa en la pantalla de 96×96 del reloj. Aunque la imagen generada es un poco más grande aprovecharemos el hecho de que tiene un marco blanco alrededor despreciable sin pérdida de información. Una vez generado se abre con Gimp y se cambia el tamaño del lienzo a 96×96 recortando la zona blanca del alrededor tanto como sea necesario para que entre, sin redimensionar la imagen. Se guarda como BMP indexado de dos colores sin comprimir y ya tenemos la imagen preparada.

En el código fuente del firmware del reloj, las imágenes se encuentran directamente en el formato aceptado por el búfer de la pantalla, es decir, como array de bytes. Al tener la pantalla 96×96 píxeles como ya decíamos antes, se tiene un array de 96 filas con 12 bytes por fila. Doce bytes por ocho bits por byte hacen un total de 96 columnas.

Para convertir cualquier imagen BMP indexada con dos colores a array de bytes he realizado este pequeño script en python usando parte del código de PyMetaWatch:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

#!/usr/bin/env python
import sys
import Image
 
def main():
  image = Image.open(sys.argv[1])
  pix = image.load()
 
  for y in range(0, 96):
    rowdat = ""
    for x in range(0,96,8):
      byte=0
      for pindex in range(0,8):
        pixel=pix[x+pindex,y]
        if (pixel > 0):
          pixel = 1
 
        byte=((byte>>1)|(pixel<<7))
      rowdat="%s%s" % (rowdat,chr(byte))
 
    myrow = ""
    for dat in rowdat:
      myrow += "0x%02x," % ord(dat)
 
    print myrow
 
if __name__ == '__main__':
  main()

Pasando como parámetro el nombre del archivo BMP devuelve un bloque de caracteres que habrá que usar en el código fuente del firmware. Lo que hice fue volcar la salida a un fichero y después copiar y pegar el resultado. Con eso es suficiente para nuestro objetivo final, no buscábamos hacer un programa de conversión sino que tan solo ha sido una herramienta intermedia.

Finalmente hay que buscar en el fichero LcdDisplay.c la definición de pBarCodeImage y sustituir su valor por el generado por el script anterior. Se compila el proyecto y se programa el nuevo firmware al reloj siguiendo las mismas instruciones que existen para la actualización oficial. Y ya está.

Gracias a draxus por encontrar la ubicación del QRCode original en el código fuente del firmware.

Desarrollo de Cylon Detector para Android

En cada frame recibido se desea analizar si existe la cara de una persona, por lo que hay que convertir la imagen a Bitmap y pasarla al detector de caras que provee el API. Pues bien, existe un problema y es que la factoría para crear Bitmaps no acepta ese formato. Hay varias soluciones por la red, pero unas son para Android 2.2 en adelante, otras son implementaciones en C para hacerlas usando el NDK como librería independiente, y otras símplemente son demasiado complejas para lo que aquí se necesita.

Al final lo que he hecho es analizar el formato de los datos en base a su definición y crear el Bitmap a partir de estos datos para la imagenen blanco y negro. Podría hacerse para la imagen en color símplemente leyendo todos los datos y haciendo uso de las funciones de conversión de YCrCb a RGB pero ello requeriría mayor tiempo de proceso incluyendo varias multiplicaciones en coma flotante. Aquí solo necesitamos en principio detectar si hay una cara en la imagen o no, y para ello es suficiente con que la imagen sea en blanco y negro. Para obtener la imagen en blanco y negro lo que he hecho ha sido leer los valores de luminancia (luminosidad), que según el formato NV21 están en la primera parte del array y convertir cada valor a un punto RGB con el mismo valor. El resultado, aunque no se aprecia demasiado bien en la imagen anterior, no es completamente una imagen en blanco y negro, sino que aparecen zonas saturadas de un color amarillo. La conversión que estoy realizando no es del todo correcta pero es cuestión de convertir y acotar correctamente los valores.

Por si a alguien le es de utilidad, esto es un recorte de la parte más importante que he programado para la conversión de NV21 a Bitmap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/**
 * @author nauj27
 * The Utils class contains utilities for CylonDetector.
 */
public class Utils {
 
	/**
	 * See http://www.fourcc.org/yuv.php#NV21 for more information.
	 * We only read luminance for speed up the whole process. 
	 * All colors of the image are set to the luminance value and
	 * this way we obtains a black and white image for processing.
	 * 
	 * @param data The data array in NV21 (YCbCr_420_SP) format.
	 * @return Black and white bitmap decoded from NV21 input data.
	 */
	public static Bitmap getBitmapFromNV21(byte[] data, int width, int height) {
 
		int pixelsNumber = width * height;
		int[] colors = new int[pixelsNumber];
 
		for (int pixel = 0; pixel < pixelsNumber; pixel++) {
			colors[pixel] = Color.rgb(data[pixel], data[pixel], data[pixel]);
		}
 
		return Bitmap.createBitmap(colors, width, height, Bitmap.Config.ARGB_8888);
	}
 
}

Editada: El modo correcto de convertir el valor de luminancia a escala de grises para crear la imagen lo he sacado finalmente del proyecto zxing, y es el que dejo a continuación:

1
2

grey = data[pixel] & 0xff;
colors[pixel] = 0xff000000 | (grey * 0x00010101);

Esto es lo que iría dentro del bucle for para que sea interpretado correctamente por el Bitmap.createBitmap como mapa de color ARGB_8888.

La verdadera utilidad y potencia es poder dibujar en tiempo real sobre la superficie y a provechar todas las características de dibujo que nos proporciona, cosas que no he usado en mi ejercicio particular. Sin embargo me ha servido como introducción al uso de canvas en HTML y aquí queda como ejemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

<html>
  <head>
    <title>HTML 5 Canvas example</title>
    <script type="text/javascript">
        var x = 50;
        var y = 50;
        var dx = 1;
        var dy = 1;
 
        var myCanvas;
        var myContext;
 
        var pelota;
        var fondo;
 
        var main = function() {
            // Se inicializa el canvas
            myCanvas = document.getElementById("mycanvas");
            myContext = myCanvas.getContext("2d");
 
            // Se cogen los elementos de imagen para pintar
            pelota = document.getElementById("pelota");
            fondo = document.getElementById("fondo");
 
            // Se pinta el fondo y la pelota en el canvas
            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);
            myContext.drawImage(pelota, x, y);
 
            window.setInterval("moverPelota()", 10);
        };
 
        var moverPelota = function() {
            if ((x > myCanvas.width - pelota.width) || (x < 0)) {
                dx = -dx;
            }
 
            if ((y > myCanvas.height - pelota.height) || (y < 0)) {
                dy = -dy;
            }
 
            x += dx;
            y += dy;
 
            myContext.drawImage(fondo, 0, 0, fondo.width, fondo.height);
            myContext.drawImage(pelota, x, y);
        };
 
    </script>
    <style type="text/css">
      canvas { border: 2px solid black; }
      canvas#mycanvas { width: 320px; height: 170px; }
      img { display: none; }
    </style>
  </head>
  <body onload="main();">
 
    <canvas id="mycanvas">
        Aquí debería de aparecer un balón rebotando.
    </canvas>
 
    <img id="pelota" src="pelota.png" width="49px" height="49px" />
    <img id="fondo" src="fondo.jpg" width="320px" height="170px" />
 
  </body>
</html>

El resultado puede verse en la web del ejemplo de uso de canvas.

Las imágenes se precargan ocultas (con display: none) porque según la especificación del HTML5 si la imagen no ha sido completamente cargada no se pintará nada. Cargándolas de este modo nos aseguramos de que se han leído completamente antes de su uso en el canvas.

Las pruebas las he realizado sobre Mozilla Firefox 4.0 Beta 7. En cualquier navegador que implemente canvas sobre html5 debería de representarse correctamente. Entre estos navegadores se incluyen Safari, Opera o Chrome. Si eres usuario de Internet Explorer ¿a qué esperas para cambiar a un navegador real?

Para mantener el control de los cambios he venido usando Mercurial. El mejor modo de descargarse el código fuente de ColorPicker es usando por tanto un cliente de Mercurial, disponible para todas las plataformas más usadas.

Tengo varias ideas en mente para esta aplicación, unas que se me ocurrieron y otras muchas que me han ido sugiriendo tanto en persona como en los comentarios del propio Android Market. En las próximas semanas podrán verse novedades y actualizaciones de la aplicación.

La primera impresión que me ha dado es que tenía la misma sensación que la primera vez que usé un escritorio en común con otra persona usando VNC. Puedes contestar lo que alguien está diciendo, editar sobre su mismo mensaje mientras escribes, o modificar lo que está haciendo en tiempo real.

Puedes insertar mapas y crear rutas, puntos y polígonos en ellos, compartir fotos, subir archivos, compartir videos de Google Videos, y dar formato al texto. Se pueden editar los textos, responder, crear nuevos waves a partir de conversaciones existentes, etc.

Es como una mezcla entre correo electrónico del que llaman enriquecido, web 2.0 y plurk. Al parecer su punto fuerte serán los gadgets, que actualmente son los que te permiten la inserción de mapas, encuestas, y en principio todo tipo de elementos web.

Habrá que darle tiempo para ver si realmente se termina convirtiendo en algo útil.

Si conoces twitter, plurk viene a ser algo similar pero con una línea temporal horizontal, respuestas ordenadas y posibilidad mantener un control de lo que has leído y lo que tienes pendiente.

enlavin decició hacer  que funcionase en cualquier navegador y aunque hay que hay que cargarlo manualmente cada vez que se abre plurk la verdad es que viene genial.

Para poder usarlo tan solo hay que abrir este documento simple y arrastrar el enlace a la barra de marcadores del navegador. Una vez hecho esto con Plurk abierto tan solo hay que hacer clic en el bookmarklet y esperar cinco segundos a que aparezca PIFEB vX.X en la barra de plurk arriba a la derecha.

Más información en la web de Pifeb.

Jetpack es un nuevo projecto de Mozilla Fundation para escribir extensiones para el navegador de una manera muy rápida y sencilla haciendo uso de las herramientas más comunes. Estas herramientas incluyen librerías como jQuery o incluso otras extensiones como es Firebug.

En la web podrás encontrar varios ejemplos de cómo en unas pocas líneas de código se pueden escribir extensiones para el navegador tan interesantes como un notificador de nuevos mensajes de GMail o un gráfico canvas sobre el uso de solapas a modo de ejemplo.

Para más información echar un vistazo al tutorial.

Hoy he visto por primera vez que después de buscar en Google aparece una opción encima de los resultados que dice “Show options…”

Haciendo clic en esta opción me muestran a la izquierda una serie de opciones para operar en función de la búsqueda realizada. Lo que más me ha gustado ha sido la etiqueta Wonder Wheel. Aparece una rueda que enlaza temas relacionados y con la que se puede ir navegando para refinar la búsqueda. Por supuesto los resultados a la derecha se van actualizando dinámicamente. Haciendo clic en la imagen se puede ver una captura de pantalla.

Wonder Wheel

Esta gente sabe cómo aprovechar el tiempo que les dan para inventar nuevas cosillas.

Nota: Solo lo he probado en la versión en inglés, ¿aparece en otros idiomas?

1
2

<body onload="document.getElementById('input').addEventListener('keyup', function(e) {alert(e.keyCode);}, false); "> 
<input id="input" type="text" />

Aunque hay cientos de ejemplos en internet, aquí dejo el mio que para eso me lo he currado en el menor número de líneas que he podido.

Para probarlo tan solo hay que guardarlo en un fichero y abrirlo con un navegador web.