Laboratorio 1 Ginga NCL
Instalando Ginga en una PC
por qu instalar Ginga en una PC?
El middleware Ginga, se encontrar habitualmente ya instalado en los receptores pudiendo ser estos adaptadores SetTopBoxes o televisores integrados. El objetivo de instalarlo en la PC es el de disponer de un entorno similar al existente en un Set Top Box con Ginga, para poder probar aplicaciones interactivas que.
Hay dos formas de usar Ginga en una PC: realizando una instalacin nativa o levantando una mquina virtual con Ginga pre-instalado.
En una mquina Virtual A travs de un software de virtualizacin (VirtualBox), se pueden tener en un sistema operativo mquinas virtuales ejecutando otro sistema operativo. Se habla de un sistema operativo anfitrin (host) y otro husped (guest). Esta modalidad permite que un usuario de cualquier sistema - Windows, Linux, MacOS, el que sea - pueda ejecutar dentro de su propio sistema otro nuevo sistema (en este caso un linux con la distrbucin Kubuntu conteniendo Ginga pre-instalado).
La ventaja de trabajar con mquinas virtuales es la facilidad de poner a andar el ambiente. La desventaja es que es ms engorroso el trabajo con los archivos entre dos sistemas operativos, y a veces se presta a confusin si uno est mucho tiempo trabajando de este modo.
De forma Nativa Una instalacin nativa permite ejecutar Ginga en el sistema operativo existente, interactuando con l como con cualquier otra aplicacin existente en la PC. La ventaja de trabajar con una instalacin nativa es la simplicidad en el manejo de archivos y se mejora la velocidad de la PC. La desventaja es que el proceso de instalacin no es sencillo si no se tienen conocimientos bsicos de Linux y no est automatizado an.
Existen dos formas de instalar ginga de forma nativa en una PC, desde los fuentes o desde los archivos binarios (ejecutables)
Instalacin desde los fuentes
A la fecha en que se escribe este documento con la versin estable 1.1.0 si bien ya salio la 1.2.0, por razones academicas y estabilidad es que se decidi tomar esta versin. Tambien se har todo el proceso de instalacin sobre la distribucion de Linux Ubuntu.
Instalacin de las dependencias
Para instalar las dependencias la forma ms prctica es mejor utilizar los gestores de paquetes que vienen en la distribucin.
sudoaptgetinstalllibtoolautoconf automakeg++libssldevpkgconfig libpng12devlibdirectfbdevcmake libavformatdevlibxinedevliblua5.10 devliblua5.1socket2libcurl4openssl devlibxercescdevlibboostdev libdb4.7devlibboostthreaddev libboostfilesystemdevlibboost regex1.40devlibavcodecdevlibxine1 ffmpeglibgtestdev
FusionSound
Desafortunadamente, la mayora de las distribuciones no incluyen un paquete para FusionSound, as que vamos a tener que compilarlo desde los fuentes. La versin mas recomendable es la que se encuentra en el repositorio git debido a que esta corrige varios bugs pequeos (pero que impiden la compilacin usando la versin actual del compilador gcc).
Descargamos desde el repositorio git, usando el comando git clone.
gitclone git://git.directfb.org/git/directfb/core/Fusi onSound.git
Una vez que tenemos los fuentes, simplemente los compilamos. Hay que tener en cuenta que el proceso de configuracin (que usualmente se hace con ./configure) se hace con ./autogen.sh.
cdFusionSound ./autogen.sh make sudomakeinstall
Obtencin de los fuentes Ginga Argentina
Una vez que tenemos las dependencias instaladas, ya podemos compilar Ginga. Debemos asegurarnos que todas las dependencias requeridas han sido correctamente instaladas o la compilacin fallar. Los fuentes se descargan del repositorio subversion usando este el comando svn checkout.
svncheckout svn://scm.ourproject.org/svnroot/ginga/ middleware/ginga.ar/tags/release/1.1.0
Parche de Ginga Argentina v1.1.0
La versin 1.1.0 de Ginga, contiene unos pequeos errores debido a incompatibilidades con la ltima versin de FusionSound. Para resolverlos, solamente debemos aplicar este parche.
Es muy importante la ubicacin en que se ejecuta el comando patch. En este caso, debemos encontrarnos dentro del directorio 1.1.0 que contiene el directorio src.
Dentro del directorio src nos vamos al directorio 1.1.0 .
cd1.1.0 patchp0<ginga.fusionsound.patch
Si el parche se pudo aplicar correctamente, deberamos ver algo as en pantalla:
patchingfilesrc/gingacc system/src/io/interface/content/audio/FFm pegAudioProvider.cpp patchingfilesrc/gingacc system/src/io/interface/content/video/FFm pegVideoProvider.cpp
Compilacin Telemidia-Links
En primer lugar compilamos e instalamos un conjunto de libreras llamado telemidia-links.
cd1.1.0/src/telemidialinks sudo./autogen.shenablegraphics withdirectfbenablejavascript withoutxwithoutsdlprefix=/usr enabledebuglevel=0 sudomake sudomakeinstall cd../../../
Compilacin Ginga.ar
Estamos listos para compilar e instalar el Ginga.ar propiamente dicho. En este caso, la instalacin se realiza sobre el directorio /usr/local.
cd1.1.0/src/ sudo./gingabuild.shiSP /usr/localC/usr/local
ltimas configuraciones
Antes de finalizar tenemos que crear un par de archivos de configuracin. Comenzamos adquiriendo permisos root
su
Creamos un archivo de configuracin de Ginga
echo "/usr/lib/ginga" > /etc/ld.so.conf.d/ginga.conf
Cargamos la nueva configuracin
ldconfig
Volvemos a nuestro usuario de trabajo
exit
Creamos el archivo de configuracin para DirectFB, indicndole que vamos a trabajar sobre X11 (Gnome, KDE, etc).
echo "system=x11" > ~/.directfbrc
Ambiente de Desarrollo
Ambiente de desarrollo NCL
Ambiente de ejecucin y prueba
Se recomienda utilizar el siguiente es un ndice de software recomendado para tal fin:
Java Development Kit Eclipse Plugins NCL para Eclipse
Segn el tipo de instalacin deseada, se puede trabajar SetTopBox Emulado nativo o mediante una mquina virtual Ginga como ya se explic antes.
Detalles del software para desarrollo
Java Development Kit 1.6 o posterior Funciona tambin para JDK 1.5.0.20 Eclipse versin 3.3 (Europa) o ms actualizada (Ganymede 3.4 o Galileo 3.5) Plugin NCL 1.4.18 para Eclipse ltima versin1. Requisitos de Hardware: Arquitectura Intel. Pentium 4 3.0GHz o mejor. HyperThreading recomendado. Dual Core ideal. Memoria RAM de 1 GB o ms. 2 GB recomendado. Placa Aceleradora de Vdeo con 64Mb o ms. Disco rgido con 5Gb libres. Placa de sonido.
Algunas Recomendaciones
Java Development Kit
Es necesario instalar el Java Development Kit o (JDK), de manera previa a la instalacin del Eclipse. En los sistemas Windows se recomienda chequear el contenido de la variable de entorno JAVA_HOME, dado que debe tener el path completo del directorio donde est instalado el JDK. En el caso de existir ms de un JDK instalado en la computadora, es importante tener en cuenta tal aspecto, para saber a cual JDK se est direccionando. Para instalar un JDK simplemente se debe ejecutar el instalador1.
Eclipse
El entorno de desarrollo integrado (IDE) Eclipse permite crear y editar programas utilizando de manera complementaria diferentes herramientas de desarrollo. Para ello emplea plug-ins que permiten al usuario extender Eclipse o simplemente dotarlo de las funcionalidades que necesita en particular. En nuestro caso, el plugin que trataremos a continuacin, para el desarrollo de aplicaciones NCL, requiere de un Eclipse 3.3 o superior para su funcionamiento. De licencia pblica EPL, Eclipse est disponible para descargar en su pagina oficial, descomprimirlo y ejecutar el instalador.
Plugin NCL Eclipse
El usuario deber instalar el plugin NCL Eclipse que le proveer las funcionalidades necesarias al editor del Eclipse para la creacin de aplicaciones en NCL. Fue desarrollado por el Laboratorio de Sistemas Avanzados de la Web de la Universidad Federal de Maranho, y posee licencias GPLv2 y comercial. Entre las extensiones que provee, incluye:
asistente para la creacin de proyectos. edicin de archivos NCL: coloreado de sintaxis, autocompletado y autoformato de cdigo, marcado de errores. ejecucin integrada a travs de Emulador GingaNCL.
Para instalar el plugin NCL Eclipse se debe abrir el Eclipse, en la parte superior de la pantalla, en el men Help (Ayuda), hacer click y seleccionar la opcin del men desplegable, Software Updates. Se abrir una ventana de dilogo donde se debe seleccionar el tab Available Software. Agregar all, el sitio de descarga del plugin (en caso de no estar disponible en el listado de sitios webs). Para ello, clickear en el botn Add Site y completar con la siguiente url: http://laws.deinf.ufma.br/ncleclipse/update/1 Se cerrar la ventana de dilogo y como resultado estar el sitio de descarga en la lista de la izquierda de la ventana. Desplegar el tem correspondiente a la URL ingresada recientemente, seleccionar la ltima versin disponible del plugin y con un click en el botn Install, ste lo agregar en el Eclipse.
Software relacionado con el dominio
La primera versin del Middleware Ginga-NCL Set-top Box Virtual fue desarrollada por la PUC-Rio (Pontificia Universidad Catlica de Rio de Janeiro)1.
Existe una segunda versin ms actualizada, que est siendo desarrollada por el LIFIA (Univ. Nac. de La Plata)2.
Interactuando con la maquina
F1 - RED (botn rojo) F2 - GREEN (botn verde) F3 - BLUE (botn azul) F4 - YELLOW (botn amarillo) F5 - MENU F6 - INFO
F7 - GUIDE F10 - Mata la aplicacin que se est ejecutando ENTER - OK Esc - EXIT Las flechas de cursor tambin funcionan como sus equivalentes (Arriba, Abajo, Derecha, Izquierda)
<?xml version="1.0" encoding="ISO-8859-1"?> <ncl id="main" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile"> <!-- Este ejemplo muestra una imagen de fondo --> <head> <regionBase> <!-- definimos el identificador de la region (id), el porcentaje que ocupa sobre la pantalla en altura (width) y ancho (height)--> <region id="regFondo" width="100%" height="100%"/> </regionBase> <descriptorBase> <!-- definimos un descriptor asociado a una region--> <descriptor id="descImagen" region="regFondo" /> </descriptorBase> </head>
<body> <!-- Indicamos el componente que inicia el programa --> <port id="pEntrada" component="imagen"/> <!-- medios (imgenes, videos, etc), el path donde se ubica y un descriptor que nos indica los atributos que agregaremos a ese medio --> <media id="imagen" src="imagenes/imagen1.jpg" descriptor="descImagen"/> </body> </ncl>
Hola Lua (Luna en espaol)
<?xml version="1.0" encoding="ISO-8859-1"?> <!-- Mostramos un texto sencillo usando Lua --> <ncl id="hola-luna" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile"> <head> <regionBase> <!-- Definimos una regin de trabajo, en este caso ocupa toda la pantalla --> <region id="regBkg" width="100%" height="100%"/> </regionBase>
<descriptorBase> <!-- Definimos un descriptor asociado a la regin--> <descriptor id="descBkg" region="regBkg" /> </descriptorBase> </head> <body> <!-- El tag 'port' indica el 'media' inicial --> <port id="pEntry" component="app"/> <!-- La aplicacin lua es un 'media' --> <media id="app" src="myApp.lua" descriptor="descBkg"/> </body>
myApp.lua
-- Seteamos el color del pincel canvas:attrColor('blue') -- Seteamos los atributos de la letra canvas:attrFont('Tiresias', 40, 'bold') -- Dibujamos un texto en x=50, y=50 canvas:drawText(50, 50, "Hola, Luna!") -- Actualizamos la pantalla canvas:flush()
Message box
En este ejemplo mostramos un cartel sencillo, del tipo MessageBox. Las imgenes que usan en el ejemplo son estas.
<?xml version="1.0" encoding="ISO-8859-1"?> <!-- --> <!-- --> <!-- Un mensaje de texto --> <!-- --> <ncl id="messagebox" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile"> <head> <regionBase> <!-- Definimos una regin tipo mosaico --> <region id="regTopLeft" top="0" left="0" width="50%" height="50%" /> <region id="regTopRight" top="0" left="50%" width="50%" height="50%" /> <region id="regBotLeft" top="50%" left="0" width="50%" height="50%" /> <region id="regBotRight" top="50%" left="50%" width="50%" height="50%" />
<!-- Definimos la regin del mensaje de texto. Con zIndex (por defecto ="0") nos aseguramos que el cartel se vea por encima del mosaico de fondo --> <region id="regMessage" left="25%" top="25%" width="50%" height="20%" zIndex="2" > <!-- En esta regin vamos a poner una imagen --> <region id="regPicture" left="10" top="20%" width="100" height="100" /> </region> </regionBase> <descriptorBase> <!-- Definimos un descriptor para cada regin --> <descriptor id="descTopLeft" region="regTopLeft" /> <descriptor id="descTopRight" region="regTopRight" /> <descriptor id="descBotLeft" region="regBotLeft" /> <descriptor id="descBotRight"region="regBotRight" /> <descriptor id="descMessage" region="regMessage" /> <descriptor id="descPicture" region="regPicture" /> </descriptorBase> </head>
<body> <!-- Tenemos que iniciar todos los componentes. No es necesario iniciarlos en orden pues usamos zIndex para el componente "msg". --> <port id="1" component="msg" /> <port id="2" component="pic" /> <port id="00" component="b0" /> <port id="01" component="b1" /> <port id="02" component="b2" /> <port id="03" component="b3" /> <!-- Iniciamos la aplicacin al final porque sino el texto podra quedar "tapado"--> <port id="3" component="app" /> <!-- Definimos los medios, uno para cada componente que se quiere mostrar --> <media id="b0" src="white.png" descriptor="descTopLeft" /> <media id="b1" src="blue.png" descriptor="descTopRight" /> <media id="b2" src="white.png" descriptor="descBotRight" /> <media id="b3" src="blue.png" descriptor="descBotLeft" /> <!-- Se pueden usar tanto imagenes png y jpg indistintamente --> <media id="msg" src="gray.jpg" descriptor="descMessage" /> <media id="pic" src="info.png" descriptor="descPicture" /> <media id="app" src="text.lua" descriptor="descMessage" /> </body> </ncl>
-- Seteamos el color del pincel canvas:attrColor('black') -- Seteamos los atributos de la letra canvas:attrFont('Tiresias', 40, 'bold') -- Dibujamos un texto en x=50, y=50 canvas:drawText(140, 40, "Se viene la") canvas:drawText(140, 90, "televisin digital") -- Actualizamos la pantalla canvas:flush()
