Taller imagenio Guía para el desarrollo de aplicaciones
←
→
Transcripción del contenido de la página
Si su navegador no muestra la página correctamente, lea el contenido de la página a continuación
Taller imagenio Guía para el desarrollo de aplicaciones
Taller imagenio Guía para el desarrollo de aplicaciones
INDICE DE CONTENIDOS
1 Introducción ............................................................................................................................ 3
2 Desarrollo de aplicaciones para Imagenio.............................................................................. 5
2.1 Navegador Web ............................................................................................................................ 5
2.2 Reproducción de vídeo................................................................................................................ 6
2.3 Teclado virtual ............................................................................................................................... 6
2.4 Librerías Imagenio........................................................................................................................ 7
2.5 Servidor de aplicaciones ............................................................................................................. 7
2.6 Diferencias entre aplicaciones TV y PC.................................................................................... 8
3 Despliegue y prueba de aplicaciones ..................................................................................... 9
4 Ejemplos............................................................................................................................... 10
4.1 Estructura principal de las aplicaciones.................................................................................. 10
4.2 Zona visible de la aplicación ..................................................................................................... 12
4.3 Manejo del mando a distancia.................................................................................................. 14
4.4 Precarga de imágenes............................................................................................................... 16
4.5 Diseño de pantallas.................................................................................................................... 18
4.6 Navegación por foco y entre pantallas.................................................................................... 19
4.7 Manejo de objetos de vídeo...................................................................................................... 24
4.8 Integración con servicios de Internet....................................................................................... 28
4.9 Introducción de datos y teclado virtual.................................................................................... 32
2
Taller imagenio Guía para el desarrollo de aplicaciones
1 Introducción
Con el auge de la IP-TV las aplicaciones en la televisión aún son un mundo por explorar completamente.
Un mundo con sus propias reglas y sus propias necesidades. Por ese motivo, os presentamos el taller
Imagenio, el cual incluye una competición de desarrollo de aplicaciones para el entorno de la TV.
La idea de esta competición es dar rienda suelta a los campuseros para que desarrollen una aplicación para
la televisión durante los días que dura la Campus Party 2008 y sobre una plataforma Imagenio reducida,
que ofrezca cualquier funcionalidad que se os ocurra.
La temática de la aplicación a desarrollar será libre, aunque se valorará positivamente si incluye contenidos
de vídeo e integra algún servicio de Internet ya existente.
Los grupos inscritos en la competición podrán hacer uso de un entorno de pruebas formado por dos
descodificador de Imagenio y dos televisores, así como sus respectivos mandos a distancia. También se les
creará una cuenta en el servidor de aplicaciones de Imagenio para que puedan testear su proyecto, al cual
podrán acceder mediante FTP. También podrán hacer uso de una base de datos en MySQL.
La maqueta también incluirá un servidor de vídeo en donde los participantes en las competición podrán
desplegar sus contenidos de vídeo, pero teniendo en cuenta que deben estar en el formato adecuado para su
correcta visualización en un STB de Imagenio. En cualquier caso, se ofrecerá a los participantes un
conjunto de vídeos que podrán utilizare en sus aplicaciones si no desean recodificar vídeos.
Adicionalmente se les proporcionará una aplicación de ejemplo que trata de recoger todos los aspectos más
importantes a tener en cuenta para la creación de aplicaciones para Imagenio.
La siguiente figura muestra el esquema de la maqueta de Imagenio que se ofrece a los campuseros para el
desarrollo de sus aplicaciones.
3
Taller imagenio Guía para el desarrollo de aplicaciones
4Taller imagenio Guía para el desarrollo de aplicaciones
2 Desarrollo de aplicaciones para Imagenio
El desarrollo de aplicaciones en Imagenio se basa en el uso de tecnologías web, tanto en el servidor como
en el cliente. La lógica de la aplicación se ejecuta en un servidor de aplicaciones, mientras que la capa de
presentación e interacción con el usuario se ejecuta en el navegador web embebido en el STB
(descodificador) de Imagenio.
En la competición Imagenio se utilizarán descodificadores ADB 3100, que es uno de los modelos más
extendidos actualmente en las casas de los usuarios que cuentas con Imagenio.
2.1 Navegador Web
Actualmente, los fabricantes de descodificadores integrados en Imagenio incluyen como navegador web
versiones del conocido “Mozilla”. Por lo tanto, un aspecto clave para el desarrollo de las aplicaciones de
usuario es conocer y aprovechar las características de este browser. Asimismo, es una gran ayuda disponer
de la versión PC de dicho browser, ya que muchos aspectos son funcionalmente idénticos y es posible
obtener una idea general de cómo se van a comportar las aplicaciones posteriormente en el browser del
decodificador.
La versión del Mozilla es variable, pero en todo caso superior a la 1.5. Algunas de las características
técnicas comunes de ambas versiones son:
• HTTP 1.1 [RFC2068, RF 2616], con soporte de ciertos tipos MIME
Nombre Tipo MIME
Texto text/plain
HTML text/plain
Imagen GIF Image/gif
Imagen JPEG Image/jpeg
Imagen PNG Image/png
• HTTPS [RFC2818 http over TLS]
• HTML 4.01 [RFC2616] (GIF, JPEG, PNG, GIF animado)
• CSS1 [RFC2381], CSS2 y CSS3 (sólo parcialmente)
• DOM 1, DOM 2 y DOM 3 (sólo parcialmente)
• Javascript 1.5
• XML 1.0 con CSS
5Taller imagenio Guía para el desarrollo de aplicaciones
• Cookies (no persistentes, ya que el equipo no tiene medio de almacenamiento local)
• Flash 4.0 (versiones posteriores no se soportan).
El navegador del descodificador soporta el cacheo de páginas e imágenes lo que cobra especial importancia
en un entorno limitado en recursos hardware y software como es el propio descodificador. Adicionalmente
debe tenerse en cuenta que la propia caché es un recurso limitado también y es aconsejable hacer de ella un
uso económico
2.2 Reproducción de vídeo
Los descodificadores de Imagenio incluyen un HW específico para la reproducción de video.
Actualmente, los formatos soportados son:
• Diferentes transportes: IGMP (multicast para TV) y RTSP (unicast para VoD).
• Formatos de codificación: MPEG-1 y MPEG-2.
2.3 Teclado virtual
El teclado virtual que el usuario puede activar para la introducción de caracteres alfanuméricos en las cajas
de edición, presenta dos modos diferentes:
• Completo: se trata de un teclado alfanumérico completo al estilo del de un PC. Donde la
introducción de datos se basa en el movimiento de un foco con las flechas de dirección entre
las “teclas virtuales” (dibujadas en pantalla) y la selección del carácter con la tecla OK del
mando.
• SMS: teclado numérico tipo móvil. En este caso la introducción de datos se realiza
directamente mediante la pulsación de las teclas numéricas del mando a distancia y el carácter
seleccionado se modifica automáticamente en base al número pulsado y la secuencia temporal
de repetición.
El teclado virtual se puede desplegar solamente cuando el cursor se encuentra seleccionando una caja de
entrada de caracteres (etiquetas de tipo INPUT y TEXTAREA de HTML).
Inicialmente, el teclado virtual que aparece en pantalla es del tipo SMS. La aparición del teclado virtual se
consigue con la pulsación de la tecla del mando a distancia correspondiente.
6Taller imagenio Guía para el desarrollo de aplicaciones
2.4 Librerías Imagenio
El acceso a las características especiales de Imagenio desde las aplicaciones se realiza por medio de
librerías javascript que se ejecutan en el navegador web del descodificador.
Para la competición Imagenio, se ofrecen las siguientes APIs javascript de Imagenio:
• Funciones generales (main_ial.js).
• Control de la interacción del usuario mediante el mando a distancia (keycodes_ial.js).
• Reproducción de contenidos de video (VideoObject_ial.js).
En este documento, más adelante, se incluyen ejemplos de código que explican el uso y funcionamiento de
estas librerías.
2.5 Servidor de aplicaciones
La parte servidora de las aplicaciones se puede ejecutar en cualquier servidor de aplicaciones web, y por
tanto, se puede desarrollar en diversos lenguajes de programación, sobre distintos sistemas operativos y en
distintos entornos de desarrollo.
Para la competición Imagenio, se pone a disposición de los participantes el siguiente entorno:
• Plataforma LAMP:
Ubuntu 7.10
Apache2
MySQL
PHP5
• Servidor de vídeo
Unicast-RTSP
Multicast-IGMP
MPEG-2 TS y CBR
• Servidor de arranque (OPCH)
• Servidor FTP
7Taller imagenio Guía para el desarrollo de aplicaciones
2.6 Diferencias entre aplicaciones TV y PC
Si bien el entorno de desarrollo y ejecución descrito en las secciones anteriores es muy parecido al que
habitualmente se utiliza en el desarrollo de aplicaciones web para PC, hay una serie de características que
deben tenerse en cuenta a la hora de desarrollar aplicaciones para Imagenio.
• La capacidad del procesador y de la memoria del descodificador es mucho más limitada que la de
un PC, y las aplicaciones deben adaptarse a estas limitaciones.
• Al diseño las interfaces de usuario de la aplicación se debe tener en cuenta que se visualizará en un
televisor y no en una pantalla de ordenador. Las aplicaciones desarrolladas para definición estándar
de TV suelen usar resolución PAL (660x576) y hay que tener en cuentas las bandas de guarda
(bandas en los bordes de la pantalla del televisor que no son visibles y que varían según el modelo).
• No es posible utilizar los medios de interacción habituales en el PC (teclado y ratón). La interacción
de los usuarios con las aplicaciones de TV es a través de un mando a distancia.
• En las aplicaciones de TV es recomendable ofrecer una navegación por la aplicación basada en
foco, es decir, que en la pantalla siempre haya un elemento activo fácilmente distinguible por el
usuario, que el cambio del elemento activo se realice mediante el uso de la flechas y que se pueda
seleccionar un elemento mediante el botón de OK del mando a distancia.
• La disposición corporal de los usuarios es distinta cuando utilizan una aplicación en la TV y cuando
usan una aplicación en el PC. Frente al televisor se suelen colocar a dos metros de distancia y su
posición suele ser sentado en un sofá. Estos aspectos también se deben tener en cuenta.
Por todo lo dicho anteriormente, los aspectos de usabilidad de las aplicaciones de TV deben adaptarse a los
factores arriba indicados. La disposición de los elementos y su comportamiento ante la interacción de los
usuarios debe favorecer el uso intuitivo y simple de las distintas funcionalidades implementadas. Y siempre
hay que tener en cuenta que las aplicaciones deben ser fáciles de utilizar mediante el mando a distancia.
8Taller imagenio Guía para el desarrollo de aplicaciones
3 Despliegue y prueba de aplicaciones
Los equipos participantes en la competición Imagenio tendrán a su disposición un servidor que incluirá:
Apache, MySQL y PHP, y dos TVs y dos STBs para realizar las pruebas de las aplicaciones desarrolladas,
y que están situadas en el stand de Telefónica I+D de la Campus Party.
Para cada equipo se creará una cuenta FTP y una base de datos MySQL en el servidor de Imagenio.
El desarrollo y prueba de las aplicaciones se podrá hacer completamente en los PCs de los participantes,
para posteriormente subir las aplicaciones al servidor de Imagenio y hacer las pruebas oportunas en las TVs
y STBs que están a su disposición.
Otra opción es hacer el desarrollo directamente en el servidor Imagenio, utilizando FTP para enviar los
ficheros al servidor de aplicaciones y algún mecanismo (por ejemplo phpMyAdmin) para crear las tablas
de la BD y gestionar sus datos.
En cualquier caso, se recomienda que las pruebas iniciales se realicen en un navegador web de PC, y
posteriormente, hacer las pruebas finales el la TV y el STB.
Para las pruebas de las aplicaciones de Imagenio en PC se recomienda utilizar Firefox 2.
9Taller imagenio Guía para el desarrollo de aplicaciones
4 Ejemplos
A continuación se muestran distintos ejemplos de código que tratan de cubrir los principales aspectos a
tener en cuenta para el desarrollo de aplicaciones de Imagenio.
4.1 Estructura principal de las aplicaciones
Es recomendable que las aplicaciones de Imagenio contengan una página principal en la cual se realice la
carga de las librerías de Imagenio y que contenga un frame en el cual se cargarán el resto de las páginas de
la aplicación. En este ejemplo, llamaremos main.php a la página principal.
Fichero 1: main.php
Seminario Imagenio CampusParty 2008
function initiate() {
try {
RTGUI.init();
} catch(e) {
alert(e);
}
}
function finish() {
}
10Taller imagenio Guía para el desarrollo de aplicaciones
De esta forma la carga de las librerías se realiza una única vez y quedan disponibles para el resto de las
páginas de la aplicación.
Observad que al principio de esta página se realiza la comprobación del navegador web que se utiliza. Más
adelante en el código, se puede ver que si se utiliza el navegador de PC, se carga una versión de la librería
de teclas y, se utiliza un navegador de STB, se carga otra. De esta forma se pueden hacer pruebas de las
aplicaciones en el PC y en el STB.
La carga de las librerías se materializa mediante al funcion javascript initiate(), dentro de la cual se hace
una llamada a la función RTGUI.init(), la cual pertenece a las librerías de Imagenio. La llamada a la
función initiate() se realiza durante el evente onload del frameset de esta página principal.
Actualmente hay una versión única de la librería de manejo de objetos de vídeo. Esta versión es sólo para
STB. Esto significa que la reproducción de vídeos sólo se puede probar en el STB, no en el PC.
En el Fichero 1 se observa que se carga la página menu.php en el frame contenido en main.php. A
continuación se muestra una página muy sencilla de ejemplo para menu.php.
Fichero 2: menu.php (version 1)
Seminario Imagenio CampusParty 2008
Hello World!
11Taller imagenio Guía para el desarrollo de aplicaciones
Y el resultado en un navegador web de main.php y menú.php es el siguiente.
Figura 1: menu.php (primera version)
4.2 Zona visible de la aplicación
Ya se ha comentado en esta guía que las aplicaciones para definición estándar de televisión deben tener
resolución de 660x 576 píxeles. Generalmente se utilizan fondo de pantalla de un tamaño similar a este. En
el ejemplo desarrollado en esta guía, el fondo es un fichero jpg que tiene un tamaño de 720x576.
Además de considerar esta resolución, se deben tener en cuentas las bandas de guarda de los televisores.
Estas bandas de guarda son bordes de la pantalla del televisor que no son visibles y que varían según el
modelo.
Por otra parte, los textos no deben estar muy pegados a los bordes de la pantalla, para conseguir una
experiencia de usuario más positiva.
Después de tener en cuenta todo esto, el área realmente disponible se reduce notablemente en aplicaciones
de TV para resolución estándar. Por supuesto, este tipo de problemas se superarán cuando la alta definición
esté completamente implantada y las aplicaciones puedan hacer uso de áreas mucho mayores.
A continuación se muestra un ejemplo de menú.php al que se le ha añadido una capa que sirve para mostrar
el área visible y disponible para las aplicaciones de TV.
12Taller imagenio Guía para el desarrollo de aplicaciones
Fichero 3: menu.php (version 2)
Seminario Imagenio CampusParty 2008
Hello World!
En la hoja de estilos main.css se ha definido el estilo area_tv que pinta un recuadro que delimita el área
visible del televisor.
Fichero 4: main.css
.area_tv{
position:absolute;
left:55px;
top:25px;
width:605px;
height:525px;
border:1px solid white;
}
El resultado en un navegador web es el siguiente:
13Taller imagenio Guía para el desarrollo de aplicaciones
Figura 2: menu.php (versión 2)
4.3 Manejo del mando a distancia
Pare realizar el manejo del mando a distancia, primero hay que hacer la carga de las librerías de Imagenio.
Dicha operación se realiza en la página principal de la aplicación, tal y como se ha descrito en el apartado
4.1.
En cada una de las páginas secundarias de la aplicación, es decir, las páginas contenidas en el frame
principal de la aplicación, se puede particularizar el comportamiento de los botones del mando y asociarles
distintas acciones. Para realizar esta operación es necesario implementar la función javascript
top.keyPressed (codigo) en las páginas secundaria de la aplicación.
Como se ha visto anteriormente en el apartado 4.1, en la página principal de la aplicación se hace una
llamada a la función RTGUI.init. Dentro de esta función se crea e inicializa un manejador de teclas del
mando que incluye un listener, el cual se ejecuta cada vez que se pulsa una tecla del mando. Dicho listener
hace una llamada a la función keyPressed (codigo), que debe estar implementada en la página secundaria
de la aplicación, tal y como se muestra en el siguiente ejemplo.
Fichero 5: menu.php (version 3)
14Taller imagenio Guía para el desarrollo de aplicaciones
Seminario Imagenio CampusParty 2008
top.keyPressed = function (codigo) {
try {
switch (codigo) {
case top.KEY_RED:
var elem = document.getElementById("menu_block");
if (elem!=null) {
elem.innerHTML = "Bye, Bye!!";
}
break;
case top.KEY_BLUE:
document.location.reload();
break;
case top.KEY_BACK:
top.document.location = "../index.html"
break;
default:
alert ("ha pulsado la tecla "+codigo);
break;
}
}catch(e) {
alert(e);
}
}
Hello World!
Generalmente, la estructura de la función javascript keyPressed (codigo) siempre es muy parecida. Suele
incluir un switch que discrimina entre los distintos botones que nos interesan en cada caso, y a cada botón
le asocia una acción.
A continuación se muestra una tabla en donde se indican los botones del mando más usados, el nombre que
se debe usar en código y su correspondencia con las teclas del PC para hacer pruebas en este entorno.
15Taller imagenio Guía para el desarrollo de aplicaciones
Botones Nombre botón en Correspondencia en
código botón en PC
Botones principales KEY_UP Flecha arriba
KEY_DOWN Flecha abajo
KEY_LEFT Flecha izquierda
KEY_RIGHT Flecha derecha
KEY_BACK Backspace
KEY_HOME Inicio
KEY_SELECT Enter
Botones de colores KEY_RED F5
KEY_GREEN F6
KEY_YELLOW F7
KEY_BLUE F8
Botones de control de vídeo KEY_PLAY
KEY_PAUSE
KEY_PLAYPAUSE
KEY_STOP
KEY_FWD
KEY_RWD
Botones de números KEY_0 0
KEY_1 1
KEY_2 2
KEY_3 3
KEY_4 4
KEY_5 5
KEY_6 6
KEY_7 7
KEY_8 8
KEY_9 9
Se debe procurar utilizar los siete botones principales para manejar las aplicaciones, si bien, en ciertos
casos puntuales se pueden usar otros botones del mando.
4.4 Precarga de imágenes
Si bien en un navegador de PC los efectos derivados del orden en que se cargan los elementos gráficos son
poco importantes, en el mundo TV cualquier detalle que afecte a la manera en que una página es construida
para su visualización cobra mucha importancia.
La secuencia de carga de una página compleja en un browser de un descodificador es más lenta que en un
PC por razones claras (menor potencia de proceso, versiones recortadas del software…). Para una correcta
visualización de las páginas, se recomienda que se realice un precarga de todas las imágenes que se vayan a
utilizar.
16Taller imagenio Guía para el desarrollo de aplicaciones
Para ello, las librerías de Imagenio ofrecen una función para realizar esta operación de precarga de
imágenes. En el siguiente ejemplo se puede observar que en la página menú.php se incluye una llamada a
la función precargaImagenesMenu(), la cual está implementada en el fichero main.js, el cual pertenece a
nuestra aplicación.
Fichero 6: menu.php (version 4)
Seminario Imagenio CampusParty 2008
top.keyPressed = function (codigo) {
try {
switch (codigo) {
case top.KEY_RED:
var elem = document.getElementById("menu_block");
if (elem!=null) {
elem.innerHTML = "Bye, Bye!!";
}
break;
case top.KEY_BLUE:
document.location.reload();
break;
case top.KEY_BACK:
top.document.location = "../index.html"
break;
default:
alert ("ha pulsado la tecla "+codigo);
break;
}
}catch(e) {
alert(e);
}
}
precargarImagenesMenu();
Hello World!
17Taller imagenio Guía para el desarrollo de aplicaciones
Dentro de la función precargaImagnesMenu() se crea una array con todas las imágenes de una página y
luego se pasa dicho array como parámetro de entrada a la función RTGUI.Preload(), que pertenece a la
librería de Imagenio, para hacer la precarga de dichas imágenes.
Fichero 7: main.js
function precargarImagenesMenu() {
try {
lista_imagenes = new Array(
"./img/binarycode2",
"./img/tv_off.png",
"./img/tv_on.png",
"./img/vod_off.png",
"./img/vod_on.png",
"./img/serv_off.png",
"./img/serv_on.png");
top.RTGUI.Preload(lista_imagenes);
} catch (e) {
alert(e);
}
}
4.5 Diseño de pantallas
Para asegurar que la aplicación se visualizará correctamente en la TV, es recomendable definir
explícitamente la dimensión y posición de cada elemento de la página por medio de una hoja de estilos,
evitando dejar dimensiones o posiciones a criterio del browser, dado que éste aplicará unos valores por
defecto que pueden diferir incluso entre versiones idénticas del software. Esta práctica es recomendable,
principalmente, cuando se quiera que una aplicación Web se ejecute en diferentes browsers y STBs de
Imagenio.
También es recomendable especificar el tamaño en píxeles de la fuente mediante hojas de estilo, de otra
forma el texto puede no encajar en el espacio reservado para el mismo. A continuación se muestra un
ejemplo:
.text-principal {
font-size: 18px;
font-weight: bold;
18Taller imagenio Guía para el desarrollo de aplicaciones
font-color: #ffffff;
}
Por último, se recomienda redefinir los estilos globales para los tags INPUT y TEXTAREA. De esta
manera, cuando el navegador calcule el tamaño de las cajas no utilizará el tamaño de letra por defecto
como referencia. A continuación se muestra un ejemplo:
input {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 16pt;
font-weight: bold;
}
4.6 Navegación por foco
Otra importante característica a tener en cuenta cuando se diseñan aplicaciones para Imagenio, es que el
usuario no dispone de un ratón para seleccionar elementos de la pantalla. El usuario deberá utilizar las
teclas de flechas para ir moviendo el foco por la pantalla. Esto implica una “libertad de movimiento” menor
en comparación con el PC. Para alcanzar un elemento, el usuario debe navegar pasando por los elementos
intermedios. Además, los elementos situados en diagonal no resultan alcanzables de una manera intuitiva,
ya que no se corresponden directamente a la dirección de ninguna de las flechas y habría que llegar a través
de algún elemento intermedio.
Se recomienda incluir pocos elementos en pantalla y que el movimiento del foco sea lo más flexible
posible. De esta forma se generará una experiencia de usuario más satisfactoria.
También se recomienda evitar utilizar enlaces HTML de tipo HREF. El browser del STB de Imagenio tiene
un mecanismo estándar para mover el foco entre los distintos elementos de este tipo, pero los resalta de una
manera poco vistoso de cara a los usuarios.
En su lugar se deben utilizar elementos de tipo IMG, teniendo en cuenta lo siguiente:
• El cambio de foco en la pantalla se debe controlar a través de la función keyPressed ().
• Se debe cambiar, por javascript, la imagen asociada al elemento que reciben el foco.
• Se debe controlar, por javascript, en todo momento, el elemento que tiene el foco, es decir, el
elemento activo de la pantalla.
• Se debe ejecutar la acción correspondiente cuando se selecciona el elemento activo de la pantalla.
19Taller imagenio Guía para el desarrollo de aplicaciones
A continuación se muestra un ejemplo.
Fichero 8: menu.php (version 5)
Seminario Imagenio CampusParty 2008
top.keyPressed = function (codigo) {
try {
switch (codigo) {
case top.KEY_BLUE:
document.location.reload();
break;
case top.KEY_RIGHT:
siguienteMenu();
break;
case top.KEY_LEFT:
anteriorMenu();
break;
case top.KEY_SELECT:
selectMenu();
break;
case top.KEY_BACK:
top.document.location = "../index.html"
break;
default:
//alert ("ha pulsado la tecla "+codigo);
break;
}
}catch(e) {
alert(e);
}
}
precargarImagenesMenu();
20Taller imagenio Guía para el desarrollo de aplicaciones
En el ejemplo anterior hay una capa que contiene tres elementos, cada uno de ellos representa una opción
distinta.
En el evento onload del body de la página, se resalta el elemento activo, poniendo una imagen distinta que
lo diferencia. Esta operación se hace a través de la función mostrarElemActivoMenu().
Mediante las teclas de flechas izquierda y derecha se hace el cambio del elemento activo, es decir, del
elemento que tiene el foco. Estas operaciones se realizan mediante las funciones siguienteMenu() y
anteriorMenu().
Cuando se pulsa la tecla de SELECT se ejecuta la acción asociada con el elemento activo, a través de la
función selectMenu().
Fichero 9: main.js
var menuElemAtivo = 0;
function mostrarElemActivoMenu () {
var activo = getURLParam("activo");
if (activo!=null)
menuElemAtivo = parseInt(activo);
switch (menuElemAtivo) {
case 0:
var elemActivo = document.getElementById("img_tv");
elemActivo.src = "./img/tv_on.png";
break;
case 1:
var elemActivo = document.getElementById("img_vod");
elemActivo.src = "./img/vod_on.png";
break;
case 2:
var elemActivo = document.getElementById("img_serv");
elemActivo.src = "./img/serv_on.png";
break;
default:
21Taller imagenio Guía para el desarrollo de aplicaciones
var elemActivo = document.getElementById("img_tv");
elemActivo.src = "./img/tv_on.png";
menuElemAtivo = 0;
break;
}
}
function siguienteMenu () {
switch (menuElemAtivo) {
case 0:
var elemActivo = document.getElementById("img_tv");
elemActivo.src = "./img/tv_off.png";
var nuevoElemActivo = document.getElementById("img_vod");
nuevoElemActivo.src = "./img/vod_on.png";
menuElemAtivo = 1;
break;
case 1:
var elemActivo = document.getElementById("img_vod");
elemActivo.src = "./img/vod_off.png";
var nuevoElemActivo = document.getElementById("img_serv");
nuevoElemActivo.src = "./img/serv_on.png";
menuElemAtivo = 2;
break;
case 2:
var elemActivo = document.getElementById("img_serv");
elemActivo.src = "./img/serv_off.png";
var nuevoElemActivo = document.getElementById("img_tv");
nuevoElemActivo.src = "./img/tv_on.png";
menuElemAtivo = 0;
break;
}
}
function anteriorMenu () {
switch (menuElemAtivo) {
case 0:
var elemActivo = document.getElementById("img_tv");
elemActivo.src = "./img/tv_off.png";
var nuevoElemActivo = document.getElementById("img_serv");
nuevoElemActivo.src = "./img/serv_on.png";
menuElemAtivo = 2;
break;
case 1:
var elemActivo = document.getElementById("img_vod");
elemActivo.src = "./img/vod_off.png";
var nuevoElemActivo = document.getElementById("img_tv");
nuevoElemActivo.src = "./img/tv_on.png";
22Taller imagenio Guía para el desarrollo de aplicaciones
menuElemAtivo = 0;
break;
case 2:
var elemActivo = document.getElementById("img_serv");
elemActivo.src = "./img/serv_off.png";
var nuevoElemActivo = document.getElementById("img_vod");
nuevoElemActivo.src = "./img/vod_on.png";
menuElemAtivo = 1;
break;
}
}
function selectMenu () {
switch (menuElemAtivo) {
case 0:
document.location = "./tv.php";
break;
case 1:
document.location = "./verVideo.php";
break;
case 2:
document.location = "./serv.php";
break;
}
}
El resultado en un navegador web de este ejemplo es el siguiente:
23Taller imagenio Guía para el desarrollo de aplicaciones
Figura 3: menu.php (versión 5)
4.7 Manejo de objetos de vídeo
Como ya se comentado en este documento, las funciones relacionadas con la reproducción de vídeo están
disponibles para las aplicaciones de Imagenio a través de la librería javascript VideoObject_ial.js.
Los descos de Imagenio que se utilizarán en el taller Imagenio permiten la reproducción de vídeo en
streaming.
Las funciones que se ofrecen en esta librería son las siguientes:
• top.Video.load (URL, tiempo_de_inicio)
Carga un vídeo y empieza a reproducirlo. Los parámetros de entrada son:
o URL es la URL donde se encuentra el vídeo.
o tiempo_inicio es el segundo a partir del cual deseamos empezar a reproducir el vídeo.
Sólo se permite reproducción por streaming, puesto que los descos utilizados en el taller Imagenio
no tienen disco duro donde almacenar contenidos.
Se permite dos tipos de flujos:
o Unicast: se usa para contenidos de vídeo bajo demanda (videoclub). Se utiliza el protocolo
de control RTSP. Un ejemplo de reproducción de vídeo por unicast en una aplicación de
Imagenio sería el siguiente:
24Taller imagenio Guía para el desarrollo de aplicaciones
top.Video.load("rtsp://192.168.70.1:5555/cp/narnia.mpg",0);
o Multicast: se usa para contenidos de vídeo en difusión (televisión). Se utiliza el protocolo
de control IGMP para la suscripción a canales multicast. Un ejemplo de reproducción de
vídeo por multicast en una aplicación de Imagenio sería el siguiente:
top.Video.load("igmp://239.1.1.7:3500",0)
• top.Video.rewind()
Activa la función rebobinado, que estará activa hasta recibir un stop o un play, o se haya
rebobinado hasta el principio del contenido.
• top.Video.forward()
Activa la función avance rápido, que estará activa hasta recibir un stop o un play, o se haya
rebobinado hasta el final de un contenido.
• top.Video.play()
Activa la función play desde un estado forward, rewind o pause.
• top.Video.pause()
Activa la función pause.
• top.Video.stop()
Detiene la reproducción en curso del video
• top.Video.destroy()
Libera los recursos de video
La librería de reproducción de video dispara ciertos eventos ante ciertas circunstancias relacionadas con la
reproducción de un vídeo. Estos eventos son: inicio de la reproducción, fin de la reproducción y error
durante la reproducción o antes de iniciarse.
Para realizar las acciones que se consideren oportunas, se deben implementar las siguientes funciones en la
página que desarrollemos:
• atBegin()
• atEnd()
• atError()
De especial interés en el caso del video son las teclas del mando para controlar la reproducción del vídeo.
Se indica a continuación la funcionalidad que se suele asociar a dichas teclas:
• top.KEY_FWD: Avance rápido
• top.KEY_RWD: Rebobinado”
• top.KEY_PLAY: Reproducción normal
25Taller imagenio Guía para el desarrollo de aplicaciones
• top.KEY_PAUSE: Pausa la reproducción
• top.KEY_STOP: Detiene la reproducción
A continuación se muestra una página de ejemplo que recoge todos los conceptos tratados en este apartado.
Fichero 10: verVideo.php
Seminario Imagenio CampusParty 2008
var mensErr="Video no disponible";
function init() {
try {
top.Video= new top.VideoObject(2);
top.Video.initObject();
top.Video.load("rtsp://192.168.70.1:5555/cp/narnia.mpg",0);
//top.Video.load("igmp://239.1.1.7:3500",0);
top.Video.play();
playing = true;
} catch (e) {
alert ("Error en la inicializaci??"+e);
}
}
top.keyPressed = function (codigo) {
try {
switch (codigo) {
case top.KEY_BLUE:
finish();
document.location.reload();
break;
case top.KEY_FWD:
top.Video.forward();
playing=false;
break;
case top.KEY_RWD:
top.Video.rewind();
playing=false;
break;
case top.KEY_PLAY:
top.Video.play();
break;
case top.KEY_PAUSE:
top.Video.pause();
break;
case top.KEY_PLAYPAUSE:
if(playing){
26Taller imagenio Guía para el desarrollo de aplicaciones
top.Video.pause();
playing =false;
}
else {
top.Video.play();
playing = true;
}
break;
case top.KEY_BACK:
case top.KEY_STOP:
case top.KEY_HOME:
finish();
setTimeout("document.location = './menu.php?activo=1'", 2000);
break;
default:
//alert ("ha pulsado la tecla "+codigo);
break;
}
}catch(e) {
alert(e);
}
}
function finish() {
try {
if(top.Video)
top.Video.destroy();
top.Video=null;
}
catch(exc) {}
}
top.atVideoBegin = function() {
//alert("atBegin")
};
top.atVideoEnd= function() {
finish();
setTimeout("document.location = './menu.php?activo=1'", 2000);
};
top.atVideoError= function() {
alert(mensErr);
document.location = "./menu.php?activo=1";
};
27Taller imagenio Guía para el desarrollo de aplicaciones
Como se puede observar, a través del evento onload del body de la página, se llama a la función init() que
crea e inicializa el objeto de vídeo que se va a utilizar para reproducir vídeo.
Mediante las teclas del mando se controla la reproducción del vídeo. Este control se implementa en la
funcion keyPressed().
En la función finish() se destruye el objeto de vídeo cuando se ha terminado la reproducción del mismo.
Finalmente, se han implementado las funciones atBegin(), atEnd() y atError(), para controlar dichos
eventos y realizar la acción correspondiente en cada caso.
Hay que destacar que, dentro del body de la página, se puede incluir código HTML. Este contenido HTML
quedará superpuesto a la imagen del vídeo que se reproduce en segundo plano.
4.8 Integración con servicios de Internet
Una de las funcionalidades más interesantes que permiten las aplicaciones de Imagenio es la posibilidad de
integrar servicios de Internet ya existentes.
Para ofrecer a los usuarios una alta interactividad de las aplicaciones de este tipo, se recomienda (aunque
no es obligatorio) utilizar llamadas asíncronas a los servicios de Internet. Estas llamadas asíncronas se
pueden implementar mediante:
• iframes
• XMLHttpRequest (Ajax)
A continuación se muestra un ejemplo que utiliza el API de Flick para buscar fotos y mostrarlas en la
televisión.
Fichero 11: flickr_js.php
Seminario Imagenio CampusParty 2008
top.keyPressed = function (codigo) {
try {
switch (codigo) {
28Taller imagenio Guía para el desarrollo de aplicaciones
case top.KEY_BLUE:
document.location.reload();
break;
case top.KEY_BACK:
document.location = "./serv.php?activo=0";
break;
case top.KEY_HOME:
document.location = "./menu.php?activo=2";
break;
case top.KEY_SELECT:
if (!inputVisible)
showInput();
break;
case top.KEY_RED:
if (inputVisible)
hideInput();
break;
case top.KEY_GREEN:
if (inputVisible)
reloadPhotos();
break;
default:
//alert ("ha pulsado la tecla "+codigo);
break;
}
}catch(e) {
alert(e);
}
}
var inputVisible = false;
var txtFocused = false;
var texto = "campus%20party%202007";
var perpage = 5;
var data;
var fotoActiva = 0;
var imgActiva = 1;
var timeout = 4000;
var divWidth = 605;
var divHeight = 525;
function togglePhotos () {
var img1 = document.getElementById('foto1');
var img2 = document.getElementById('foto2');
if (imgActiva==1) {
img1.style.visibility = 'hidden';
img2.style.visibility = 'visible';
imgActiva==2;
} else {
img2.style.visibility = 'hidden';
img1.style.visibility = 'visible';
imgActiva==1;
}
}
function showPhoto (photo) {
29Taller imagenio Guía para el desarrollo de aplicaciones
var urlPhoto = 'http://farm' + photo.farm + '.static.flickr.com/' + photo.server
+ '/' + photo.id + '_' + photo.secret + '.jpg';
if (imgActiva==1) {
var img2 = document.getElementById('foto2');
img2.src = urlPhoto;
} else {
var img1 = document.getElementById('foto1');
img1.src = urlPhoto;
}
setTimeout("togglePhotos()",2000);
}
function jsonFlickrApi(rsp){
data = rsp;
if (rsp.stat == "ok"){
showPhoto(rsp.photos.photo[fotoActiva++]);
if (fotoActiva >= rsp.photos.perpage || fotoActiva >=
rsp.photos.photo.length) {
fotoActiva = 0;
if (rsp.photos.page >= rsp.photos.pages)
setTimeout("callFlickr(0)", timeout);
else
setTimeout("callFlickr (data.photos.page+1)", timeout);
} else {
setTimeout("jsonFlickrApi(data)", timeout);
}
}
}
function callFlickr (pag) {
if (pag==0)
pag = Math.round(Math.random() * 500) + 1;
var params = "";
params += "?method=flickr.photos.search";
params += "&api_key=aecda1edd2a368dab707daf0f2d4e9a5";
params += "&text=" + texto;
// params += "user_id=49578859@N00";
params += "&sort=relevance";
params += "&page=" + pag;
params += "&per_page=" + perpage;
params += "&format=json";
var urlFlickr = 'http://api.flickr.com/services/rest/' + escape(params);
var urlProxy = './proxy.php?url=' + urlFlickr;
var myAjax = new Ajax.Request(
urlProxy,
{
method: 'get',
evalJS: 'force',
onFailure: errorFotos
}
);
30Taller imagenio Guía para el desarrollo de aplicaciones
}
function errorFotos (request) {
alert("ERROR = " + request.responseText);
}
function reloadPhotos () {
var input = document.getElementById('txt_buscar');
var inputBlock = document.getElementById('input_block');
if (input!=null && inputBlock!=null) {
//alert(escape(input.value));
if (input.value.length>2) {
texto=escape(input.value);
callFlickr(0);
}
inputBlock.style.display = 'none';
inputVisible=false;
}
}
function showInput () {
var input = document.getElementById('txt_buscar');
var inputBlock = document.getElementById('input_block');
if (input!=null && inputBlock!=null) {
inputBlock.style.display = 'block';
input.focus();
inputVisible=true;
}
}
function hideInput () {
var inputBlock = document.getElementById('input_block');
if (inputBlock!=null) {
inputBlock.style.display = 'none';
inputVisible=false;
}
}
Introduce el texto:
Cancelar
31Taller imagenio Guía para el desarrollo de aplicaciones
Aceptar
Vamos a explicar resumidamente el funcionamiento de esta página.
En el evento onload del body de la página se hace una llamada a la función callFlickr(). De esta forma se
inicia el proceso de búsqueda de fotos en Flickr y su visualilzación en la televisión.
La función callFlickr() es la responsable de hacer la llamada al API REST de Flickr (ver la
documentación de Flickr para más detalle) y obtener los datos en formato JSON. En esta aplicación se usa
el método flicker.photos.search del API de Flickr. Este método devuelve una lista paginada de metadatos
de fotos que cumplen un determinado criterio de búsqueda.
Esta llamada al API de Flickr se hace mediante Ajax, usando para ello la librería prototype. Cuando la
petición HTTP asíncrona se completa de forma correcta, se evalúa el resultado automáticamente, lo cual
conlleva llamar a la función jsonFlickrApi() de nuestra aplicación (la implementación de la función
jsonFlickrApi() es un requisito impuesto por el API de Flickr).
Dentro de la función jsonFlickrApi() se realiza la visualización, una a una, de las fotos obtenidas de Flickr.
La URL de cada una de las fotos se genera a partir de los metadatos correspondientes, según especifica
Flickr.
Una vez completada la visualización de todas las fotos obtenidas en una lista paginada de metadatos, se
realiza una nueva petición asíncrona a Flickr para obtener la siguiente página de resultados, y así repetir el
proceso.
4.9 Introducción de datos y teclado virtual
Ya se ha comentado anteriormente en esta guía que el teclado virtual de los descodificadores de Imagenio
se utiliza para la introducción de texto en las cajas de edición de la aplicación, es decir, en los objetos de
tipo INPUT y TEXTAREA de una aplicación de Imagenio.
En el fichero Fichero 11: flickr_js.php, dentro del body de la página, se ha incluido una caja de edición
de tipo INPUT. La capa que contiene dicho objeto de edición se muestra al pulsar el botón SELECT del
mando y, automáticamente, este objeto recibe el foco de la aplicación.
Si a continuación se pulsa la tecla de mando correspondiente al teclado virtual, dicho teclado se muestra en
pantalla.
32Taller imagenio Guía para el desarrollo de aplicaciones
Este comportamiento de visualización del teclado virtual y edición de texto no es necesario controlarlo por
aplicación, puesto que es comportamiento por defecto que tiene de forma implícita del descodificador de
Imagenio.
El teclado virtual de los descodificadores de Imagenio no es muy fácil de usar, y se pueden pensar en
distintas formas de mejorar la introducción de text, mediante la implementación de otros mecanismos en
nuestras aplicaciones.
33También puede leer
