Archivo por meses: enero 2012

Probando el marco digital Parrot DF3120 (parte 2)

En el anterior artículo explicaba cómo instalar linux en el marco digital Parrot DF3120. En este explicaré cómo generar el toolchain para poder crear programas que funcionen en el marco digital. De paso crearemos una versión de la imagen más moderna para nuestro marco. El artículo original que lo explicaba es este, pero está desfasado y hay que hacer retoques para que funcione bien.

Lo voy a hacer todo desde mi linux Ubuntu 11.10, por lo que es posible que algunas cosas haya que modificarlas si usáis otra distribución.

Lo primero es instalarse usa serie de paquetes que son necesarios para que todo el proceso sea correcto:

sudo apt-get install git-core
sudo apt-get install tig
sudo apt-get install lzop
sudo apt-get install uboot-mkimage
sudo apt-get install libelf-dev
sudo apt-get install libncurses-dev
sudo apt-get install gtk-doc-tools
sudo apt-get install checkinstall
sudo apt-get install e2fsprogs
sudo apt-get install libglib2.0-dev
sudo apt-get install libxml2-dev
sudo apt-get install genext2fs
sudo apt-get install lzma
sudo apt-get install subversion
sudo apt-get install cvs
sudo apt-get install gawk
sudo apt-get install bison
sudo apt-get install flex
sudo apt-get install automake
sudo apt-get install gcc
sudo apt-get install build-essential
sudo apt-get install texinfo
sudo apt-get install curl

sudo apt-get install git-core

sudo apt-get install tig

sudo apt-get install lzop

sudo apt-get install uboot-mkimage

sudo apt-get install libelf-dev

sudo apt-get install libncurses-dev

sudo apt-get install gtk-doc-tools

sudo apt-get install checkinstall

sudo apt-get install e2fsprogs

sudo apt-get install libglib2.0-dev

sudo apt-get install libxml2-dev

sudo apt-get install genext2fs

sudo apt-get install lzma

sudo apt-get install subversion

sudo apt-get install cvs

sudo apt-get install gawk

sudo apt-get install bison

sudo apt-get install flex

sudo apt-get install automake

sudo apt-get install gcc

sudo apt-get install build-essential

sudo apt-get install texinfo

sudo apt-get install curl

Después hay que bajarse minifs con el git:

git clone http://oomz.net/git/minifs.git minifs

1	git clone http://oomz.net/git/minifs.git minifs

A continuación hay que hacer un par de modificaciones:

Edita el fichero minifs/conf/board/df3120/config_busybox.conf y reemplaza la línea # CONFIG_CHMOD is not set por CONFIG_CHMOD=y
Edita el fichero minifs/conf/packages/05crosstools.sh y reemplaza la línea hset libtool url «http://ftp.gnu.org/gnu/libtool/libtool-2.4.2.tar.gz» por hset libtool url «http://ftp.gnu.org/gnu/libtool/libtool-2.4.tar.gz»
Edita el fichero minifs/conf/packages/11graphical.sh y reemplaza la línea hset libpng url «ftp://ftp.simplesystems.org/pub/libpng/png/src/libpng-1.4.8.tar.bz2» por hset libpng url «ftp://ftp.simplesystems.org/pub/libpng/png/src/libpng-1.4.9.tar.bz2»

Después ya podemos ejecutar el script de la siguiente forma (Puede tardar varios minutos):

cd minifs
export MINIFS_BOARD=df3120
./minifs_build.sh

cd minifs

export MINIFS_BOARD=df3120

./minifs_build.sh

Ahora vemos que entre otras cosas se han creado dos ficheros en el directorio build-df3120, un .img y un .plt. Pues bien con ellos hay que volver a hacer lo mismo que comentaba en el anterior artículo. Si todo ha ido bien veremos la nueva versión del firmware donde lo más destacado es que aparecen los mensajes de arranque:

Ahora vamos a compilar nuestro primer programa, y cómo no, tenía que ser un Hola Mundo:

#include <stdio.h>

void main(void)
{
 printf("Hola Mundo.\n");
}

#include <stdio.h>

void main(void)

{

printf("Hola Mundo.\n");

}

Copiamos el código que aparece arriba y lo guardamos en un fichero llamado holamundo.c. Después ejecutamos el siguiente comando:

toolchain/arm-v4t-linux-uclibcgnueabi/bin/arm-v4t-linux-uclibcgnueabi-gcc holamundo.c -o holamundo

1	toolchain/arm-v4t-linux-uclibcgnueabi/bin/arm-v4t-linux-uclibcgnueabi-gcc holamundo.c -o holamundo

Esto habrá generado un fichero ejecutable llamado holamundo, pero ¿cómo lo subimos al marco para ejecutarlo?. Pues bien entre otros comandos el marco tiene dos, el tftp y wget para descargar ficheros mediante el protocolo tftp y http respectivamente, por tanto hay que instalar un servidor web o tftpd en nuestra máquina linux.

Servidor web apache:

sudo apt-get install apache2

1	sudo apt-get install apache2

Servidor tftp: Instrucciones

Si hemos optado por el servidor web sólo hay que copiar el fichero holamundo al directorio /var/www. Si la elección ha sido tftpd entonces hay que copiar el fichero holamundo al directorio que se haya configurado.

Ahora tenemos que descargarlo desde el marco digital. Hacemos un telnet como explicaba en el anterior artículo. En el firmware actual todo el disco está montado como sólo lectura, por lo que tendremos que remontarlo como escritura también de la siguiente forma:

mount / / -o remount,rw

1	mount / / -o remount,rw

Ahora nos vamos al directorio /tmp y descargamos el programa.

Para tftp el comando sería:

tftp -g -r holamundo <IP DEL SERVIDOR TFTP>

1	tftp -g -r holamundo <IP DEL SERVIDOR TFTP>

Para wget el comando sería:

wget http://<IP DEL SERVIDOR WEB>/holamundo

1	wget http://<IP DEL SERVIDOR WEB>/holamundo

Ahora que tenemos el fichero, hay que darle permisos de ejecución y finalmente ejecutarlo:

chmod a+x holamundo
./holamundo

1 2	chmod a+x holamundo ./holamundo

Obtendremos esto:

Ya hemos compilado nuestro primer programa y lo hemos hecho funcionar, pero claro, nos interesa que se pueda dibujar en la pantalla algo para ver cómo se ve en el marco. Lo primero que hay que saber es que la pantalla tiene asignado el dispositivo /dev/fb0 y que lo que tenemos que conseguir es acceder a su memoria para escribir directamente los colores. Esto se consigue de la siguiente forma:

Con la función open abrimos el dispositivo como lectura/escritura:

int g_fb = open("/dev/fb0", O_RDWR);

1	int g_fb = open("/dev/fb0", O_RDWR);

Con la función ioctl recibimos en una estructura información sobre la pantalla:

struct fb_var_screeninfo var_info;
ioctl(g_fb, FBIOGET_VSCREENINFO, &var_info);

1 2	struct fb_var_screeninfo var_info; ioctl(g_fb, FBIOGET_VSCREENINFO, &var_info);

Con la función mmap obtenemos el buffer de la memoria de vídeo para leerlo y escribir en el:

char *buffer = (char *)mmap(0, 153600, PROT_READ|PROT_WRITE, MAP_SHARED, g_fb, 0);

1	char buffer = (char )mmap(0, 153600, PROT_READ\|PROT_WRITE, MAP_SHARED, g_fb, 0);

Ahora sólo queda dibujar los bytes en la memoria para que se vean reflejados como pixeles en la pantalla. Al poder representar la pantalla 64k colores estos se codifican a RGB mediante 16 bit con el formato 5-6-5 (rrrrrggggggbbbbb). Así el rojo es 1111100000000000 (0xF800), el verde es 0000011111100000 (0x07E0) y el azul es 0000000000011111 (0x001F). Por tanto cada pixel en la pantalla ocupa 16 bits.

Para probar todo esto he creado un programa que muestra un cuadro verde rebotando por el marco usando la técnica de doble buffer para evitar parpadeos:

#include <unistd.h>
#include <stdio.h>
#include <stdlib.h>
#include <string.h>
#include <fcntl.h>
#include <linux/fb.h>
#include <sys/mman.h>
#include <sys/ioctl.h>


char *inicializa(int *cuantos)
{
  char* buffer;
  int g_fb;
  struct fb_var_screeninfo var_info;

  g_fb = open("/dev/fb0", O_RDWR);
  if (g_fb == -1)
  {
    printf("No se puede abrir /dev/fb0\n");
    _exit(1);
  }

  printf("/dev/fb0 abierto con el handle 0x%x\n", (unsigned)g_fb);
  
  if (ioctl(g_fb, FBIOGET_VSCREENINFO, &var_info))
  {
    printf("No se puede obtener la información variable de la pantalla\n");
    _exit(1);
  }

  printf("xres: %d\n", var_info.xres);
  printf("yres: %d\n", var_info.yres);
  printf("bpp: %d\n", var_info.bits_per_pixel);
  *cuantos = var_info.xres * var_info.yres * var_info.bits_per_pixel /8;
  
  printf("El tamaño del buffer de pantalla es de %d bytes\n", *cuantos);

  buffer = (char *)mmap(0, *cuantos, PROT_READ|PROT_WRITE, MAP_SHARED, g_fb, 0);
  
  if ((int)buffer == -1) 
  {
    printf("falló mmap().\n"); 
    exit(1);
  }
  printf("Pantalla devuelta\n");
  return buffer;
}

void cuadro(int x, int y, short int *buffer, int color)
{
 int anchura;
 int altura;
 short int *puntero;

 for(altura = 0; altura < 50; altura++)
 {
  puntero = buffer + ((y + altura) * 320);
  for(anchura = 0; anchura < 50; anchura++)
  {
   *(puntero + x + anchura) = color;
  }
 }
}

void main(void)
{
 int indice;
 int cuantos;
 int x = 0;
 int y = 0;
 int suma_x = 1;
 int suma_y = 1;

 short int *buffer = (short int *)inicializa(&cuantos);
 short int *ventana = (short int *)malloc(cuantos);

 if (ventana == NULL)
 {
  printf("No se puede crear el doble buffer\n");
  _exit(1);
 }
 // fondo negro
 for(indice = 0; indice < (cuantos / 2); indice++)
 {
  buffer[indice] = 0; 
 }

 for(;;)
 {
  usleep(10000);
  cuadro(x, y, ventana, 0);
  x += suma_x;
  y += suma_y;
  if(x > 269 || x < 0)
  {
   suma_x *= -1;
   x += suma_x;
  }
  if(y > 189 || y < 0)
  {
   suma_y *= -1;
   y += suma_y;
  }
  cuadro(x, y, ventana, 0x7E0);
  memcpy(buffer, ventana, cuantos);
 }
}

100

101

102

103

104

105

106

107

108

#include <unistd.h>

#include <stdio.h>

#include <stdlib.h>

#include <string.h>

#include <fcntl.h>

#include <linux/fb.h>

#include <sys/mman.h>

#include <sys/ioctl.h>

char *inicializa(int *cuantos)

{

char* buffer;

int g_fb;

struct fb_var_screeninfo var_info;

g_fb = open("/dev/fb0", O_RDWR);

if (g_fb == -1)

{

printf("No se puede abrir /dev/fb0\n");

_exit(1);

}

printf("/dev/fb0 abierto con el handle 0x%x\n", (unsigned)g_fb);

if (ioctl(g_fb, FBIOGET_VSCREENINFO, &var_info))

{

printf("No se puede obtener la información variable de la pantalla\n");

_exit(1);

}

printf("xres: %d\n", var_info.xres);

printf("yres: %d\n", var_info.yres);

printf("bpp: %d\n", var_info.bits_per_pixel);

*cuantos = var_info.xres * var_info.yres * var_info.bits_per_pixel /8;

printf("El tamaño del buffer de pantalla es de %d bytes\n", *cuantos);

buffer = (char *)mmap(0, *cuantos, PROT_READ|PROT_WRITE, MAP_SHARED, g_fb, 0);

if ((int)buffer == -1)

{

printf("falló mmap().\n");

exit(1);

}

printf("Pantalla devuelta\n");

return buffer;

}

void cuadro(int x, int y, short int *buffer, int color)

{

int anchura;

int altura;

short int *puntero;

for(altura = 0; altura < 50; altura++)

{

puntero = buffer + ((y + altura) * 320);

for(anchura = 0; anchura < 50; anchura++)

{

*(puntero + x + anchura) = color;

}

void main(void)

{

int indice;

int cuantos;

int x = 0;

int y = 0;

int suma_x = 1;

int suma_y = 1;

short int *buffer = (short int *)inicializa(&cuantos);

short int *ventana = (short int *)malloc(cuantos);

if (ventana == NULL)

{

printf("No se puede crear el doble buffer\n");

_exit(1);

}

// fondo negro

for(indice = 0; indice < (cuantos / 2); indice++)

{

buffer[indice] = 0;

}

for(;;)

{

usleep(10000);

cuadro(x, y, ventana, 0);

x += suma_x;

y += suma_y;

if(x > 269 || x < 0)

{

suma_x *= -1;

x += suma_x;

}

if(y > 189 || y < 0)

{

suma_y *= -1;

y += suma_y;

}

cuadro(x, y, ventana, 0x7E0);

memcpy(buffer, ventana, cuantos);

}

Que ejecutándolo quedaría así:

En un próximo artículo explicaré como acceder a la interfaz con SDL, comunicarse con bluetooth mediante RFCOMM y obtener los valores de los botones traseros y del inclinómetro.

Edición 12/02/2012:

1º artículo

3º artículo

Probando el marco digital Parrot DF3120 (parte 1)

24 respuestas

He adquirido el marco digital de fotos Parrot DF3120. Es un marco que por menos de 20€ puede representar fotografías en una pantalla de 320×240 (3.5″). Sus puntos fuertes es que tiene bluetooth para poder subir las imagenes desde, por ejemplo, un móvil y una entrada para tarjetas SD con la misma función.

Este marco ha sido hackeado y se le puede instalar un linux, con las ventajas que ello representa. El objetivo de este primer artículo es mostrar el proceso de instalación de linux y cómo acceder a este de una forma sencilla.

Lo primero es hacer un duplicado de disco del siguiente fichero: minifs-full-ext.img. Esto en linux, siendo root, se consigue con el siguiente comando (disco SD es el nombre que le haya asignado el sistema):

dd if=minifs-full-ext.img of=/dev/<disco SD>

1	dd if=minifs-full-ext.img of=/dev/<disco SD>

Lo siguiente es actualizar el firmware del marco. Para ello hay que encender el marco sin ninguna tarjeta SD insertada y enchufar el cable usb. Cuando podamos acceder al contenido del disco, crear una carpeta llamada update y dentro de esta copiar el fichero parrotDF3120.plf. Después sacar el usb de forma segura y veremos que aparecen 4 cuadros en la pantalla (uno azul y el resto verde), momento en el cual ya se ha actualizado el firmware.

Ahora tenemos un modo de arranque dual. Por un lado si encendemos el marco sin más veremos su funcionalidad de siempre, es decir, se visualizarán las imágenes que tengamos almacenadas una detrás de otra. Pero si metemos la tarjeta SD y antes de encenderlo pulsamos los botones izquierdo y central de la parte de atrás y, sin soltarlos, encendemos el marco, se arrancará linux y busybox.

Finalmente para acceder a la consola en el modo linux podemos hacerlo de dos formas (la dificil y la fácil):

La dificil es sacar todos los tornillos para quedarnos con la placa y la pantalla. A continuación soldamos en los agujeros del J4 (la consola serie) los tres pines (1: GND, 2: RX, 3: TX) y nos buscamos un conversor TTL a puerto serie o a usb para poder comunicarnos con el dispositivo usando los siguientes parámetros de conexión: 115200 8,N,1 (recomiendo screen en linux o mac y putty en windows). Esta es la consola serie donde se ven los mensajes de estado del arranque y luego se obtiene una shell donde interactuar con linux:

La fácil es simplemente conectar el cable usb al marco y a nuestro ordenador, lo que nos configurará una conexión ethernet por usb llamada Ethernet Gadget, la cual será una tarjeta de red que debemos configurar con la IP 172.16.61.2 y la máscara de red 255.255.255.0. Si todo ha ido bien y hacemos un ping a la dirección 172.16.61.1 el marco nos debería responder. Finalmente para acceder a una shell sólo hay que hacer un telnet a la IP comentada.

Edición 22/01/2011:
En el marco vienen unos programas para probar la pantalla gráfica. Podeis ejecutar cualquiera de ellos:
/usr/bin/plasma: Una bonita demo sobre el efecto plasma.
/usr/bin/newvox: Un paisaje que si tuvieramos teclado podríamos recorrerlo.

Edición 12/02/2011:

2º artículo

3º artículo

Por fin se puede programar la cámara IP Zaapa CIPRW (ZA-CIPRW) fácilmente

28 respuestas

Hacía tiempo que no volvía a escribir sobre la cámara ip Zaapa CIPRW. Escribí dos artículos: Uno sobre la descripción de la cámara en septiembre de 2008 y otro sobre cómo programarla en .NET en Agosto de 2009.

Lo cierto es que desde entonces dejé abandonado el tema y por necesidades he tenido que retomarlo para poder interactuar con ella. Poco tiempo después de escribir el último artículo se publicó en la página de Gadget Victims información sobre un nuevo firmware para las cámaras Foscam FI908W (La de Zaapa es la FI8901W) en septiembre de 2009 donde entre otras cosas se habla de la documentación oficial de FOSCAM para sus cámaras IP. Lo mejor de esto es que en esta documentación hay dos textos que pueden servirnos a los programadores para interactuar definitivamente con la cámara Zaapa y a los usuarios para poder ver sus cámaras en navegadores como Firefox, Chrome, Safari, etc.

Se trata del IPCAM CGI SDK 2.1 y del IPCAM Protocol. El primero es un documento PDF donde se explica cómo haciendo peticiones HTTP se puede descargar la imagen de la cámara y enviar ordenes a esta. El segundo es un documento de Word donde se explica el protocolo de la cámara para comunicarse con ella mediante socket. En este artículo me centraré en el primero por su facilidad de uso.

En el primer documento se explica qué peticiones hay que hacer para interactuar con la cámara. Se trata de acceder a páginas web CGI pasándole normalmente los parámetros mediante el método GET, que es como en realidad nosotros hacemos las llamadas desde un navegador web normalmente.

Antes de empezar a probar hay que cerciorarse de que la cámara Zaapa tiene el último firmware y el último Embeded Web UI. Si en la sección Device Info del panel del administrador son distintos de 11.4.1.40 y 2.0.0.16 respectivamente, hay que actualizar. En la página del producto se pueden descargar pero hay que introducir el número de serie que aparece como código de barras en la parte inferior de la cámara. Una vez que empieza la descarga empieza lo gracioso y es que veremos algo raro en el fichero que descargamos pues no tiene extensión y que no sirve para actualizar ya que no es un .bin. Pues bien el fichero es un archivo .rar por lo que hay que renombrarlo, ponerle esa extensión y ya podemos abrirlo. Dentro de este veremos dos ficheros .bin y aquí esta lo segundo más gracioso ¡¡¡ están al revés !!! Embeded Web UI 11.4.1.40.bin tendría que ser Firmware 11.4.1.40.bin y Firmware 2.0.0.16.bin tendría que ser Embeded Web UI 2.0.0.16.bin. Una vez arreglado ese desaguisado ya podemos actualizarlo desde la sección Upgrade Device Firmware del panel de administrador y actualizar el firmware primero y el Web UI después (en ambos casos se reinicia la cámara).

Hay unos cuantos CGI y lo mejor es leerse la documentación, pero voy a explicar 3 de ellos que me parecen fundamentales:

El primero de ellos es el snapshot.cgi. Sirve para capturar una imagen estática de la cámara. Si ponemos en un navegador web http://ip de la cámara/snapshot.cgi nos pedirá un usuario y una contraseña. Cuando la hayamos introducido veremos la imagen jpg. Podemos evitar que salga el recuadro que nos pide el usuario y la contraseña simplemente añadiendo los parámetros user y pwd a la url de la siguiente forma http://ip de la cámara/snapshot.cgi?user=usuario&pwd=contraseña para que ya directamente nos muestre la imagen. Tiene otro parámetro llamado next_url para indicar el nombre del fichero pero no lo veo útil.
El segundo de ellos son en realidad dos: videostream.cgi y videostream.asf. Sirven para mostrar un flujo continuo de imagenes a modo de vídeo. El que tiene extensión .cgi envía imágenes jpg sucesivas (ideal para verlas con una navegador), el que tiene extensión asf envía las imágenes con el formato Advanced Streaming Format (ideal para verlas con el VLC o con el MPlayer). Si ponemos en un navegador web http://ip de la cámara/videostream.cgi?user=usuario&pwd=contraseña podemos ver el flujo continuo de lo que la cámara está enfocando en ese momento. Tiene otro parámetro llamado resolution para indicar con un 8 o un 32 si queremos que la imagen tenga de tamaño 320×240 o 640×480 respectivamente.
El tecero de ellos es el decoder_control.cgi. Sirve para interactuar con la cámara. Si ponemos en el navegador web http://ip de la cámara/videostream.cgi?user=usuario&pwd=contraseña&command=comando donde comando sea un número que indica qué hacer a la cámara (0 = empezar a mover hacia arriba, 1 = parar de mover hacia arriba, 2 = empezar a mover hacia abajo, etc) veremos como se mueve esta.

Finalmente he creado una página HTML para probar los dos últimos CGIs que he explicado. La página muestra la sucesión de imágenes de la cámara y tiene unos botones que permiten mover la cámara. Para adecuarlo a la vuestra sólo teneis que cambiar en la sección javascript el usuario, la clave y la ruta a vuestra cámara:

<html>
<head>
	<style type="text/css">
		.comando {background-color:#FFFF00; border-radius: 10px; font-family:Arial; font-size:10pt; font-weight:bold; width:70px; text-align:center}
		#imagen {visibility:hidden; width:640px; height:480px;}
		#marco {visibility:hidden;}
	</style>
	<script type="text/javascript">
		var usuario = "usuario";
		var clave = "clave";
		var ruta = "http://192.168.0.12/";
		
		function cargado()
		{
			var imagen = document.getElementById("imagen");
			imagen.src = ruta + "videostream.cgi?user=" + usuario + "&pwd=" + clave + "&resolution=32";
			imagen.style.visibility = "visible";
		}
		
		function empieza_arriba()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=0";
		}
		
		function termina_arriba()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=1";
		}
		
		function empieza_abajo()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=2";
		}
		
		function termina_abajo()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=3";
		}
		
		function empieza_izquierda()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=4";
		}
		
		function termina_izquierda()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=5";
		}

		function empieza_derecha()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=6";
		}
		
		function termina_derecha()
		{
			var marco = document.getElementById("marco");
			marco.src = ruta + "decoder_control.cgi?user=" + usuario + "&pwd=" + clave + "&command=7";
		}
		
		
	</script>
</head>
<body onload="cargado()">
<img id="imagen">
<table>
<tr><td>&nbsp;</td><td class="comando" onmousedown="empieza_arriba()" onmouseup="termina_arriba()">Arriba</td><td>&nbsp;</td></tr>
<tr><td class="comando" onmousedown="empieza_izquierda()" onmouseup="termina_izquierda()">Izquierda</td><td>&nbsp;</td><td class="comando" onmousedown="empieza_derecha()" onmouseup="termina_derecha()">Derecha</td></tr>
<tr><td>&nbsp;</td><td class="comando" onmousedown="empieza_abajo()" onmouseup="termina_abajo()">Abajo</td><td>&nbsp;</td></tr>
</table>
<iframe id="marco" src=""></iframe>
</body>
</html>

<html>

<head>

.comando {background-color:#FFFF00; border-radius: 10px; font-family:Arial; font-size:10pt; font-weight:bold; width:70px; text-align:center}

#imagen {visibility:hidden; width:640px; height:480px;}

#marco {visibility:hidden;}

</style>

var usuario = "usuario";

var clave = "clave";

var ruta = "http://192.168.0.12/";

function cargado()

{

var imagen = document.getElementById("imagen");

imagen.src = ruta + "videostream.cgi?user=" + usuario + "&pwd=" + clave + "&resolution=32";

imagen.style.visibility = "visible";

}

function empieza_arriba()

{