Upload
others
View
7
Download
0
Embed Size (px)
Citation preview
TV Digital – Ginga NCL
TEMARIO
• Introducción al lenguaje NCL
• Lenguaje NCL
• Ejemplo paso a paso
• Ejercitación
Introducción al lenguaje NCL
Introducción
El sistema de TV Digital utiliza un middleware que permite ejecutar aplicaciones interactivas
dentro de un STB.
Repasando
Introducción
Ese middleware es conocido como Ginga.
• Ginga-NCL aplicaciones basadas en lenguaje NCL
• Ginga-J aplicaciones basadas en lenguaje Java
Repasando (cont.)
Introducción
Ginga y
Aplicaciones
ArquitecturaBase(
Estándar ISDB-T)
Repasando (cont.)
•Ejemplo de aplicación interactiva:
“Cocineros Argentinos”
Introducción
El lenguaje NCL está basado en un modelo conceptual de datos llamado NCM (Nested Context Model).
Este modelo conceptual permite representar elementos multimediales, sincronizarlos en tiempo y espacio para
crear aplicaciones interactivas.
Introducción
Introducción al lenguaje NCL
Texto
Video
Imagen
Identificando elementos y sus relaciones en la aplicación “cocineros”.
Introducción al lenguaje NCL
• Objeto Media
• Descriptor
• Región
• Link
• Contexto
Entidades básicas representadas en NCL:
Relación entre las entidades
Introducción al lenguaje NCL
¿Qué vamos a mostrar? - Objetos Media
Los objetos media son elementos de contenido multimedial:
Video
HTML
Lua
Audio
Texto
Imagen
Introducción al lenguaje NCL
¿Dónde los vamos a mostrar? - Regiones
Una región representa un área de un dispositivo en la cual ciertos objetos media serán visualizados.
Ejemplo:
El logo del canalse visualizaráen la esquinasuperior derecha.
Introducción al lenguaje NCL
¿Cómo los vamos a mostrar? - Descriptores
imagen
Un descriptor indica en que región se mostrará el objeto media y con que propiedades. Ejemplo grado de transparencia de una imagen.
descriptor region
Introducción al lenguaje NCL
¿Cuándo los vamos a mostrar? - Links y Conectores
Permiten especificar acciones sobre objetos media a partir de la ocurrencia de eventos.
Condición Acción
Condición: “al presionar el botón amarillo” Acción: “mostrar
una imagen”
Introducción al lenguaje NCL
•Contexto
Permite agrupar elementos NCL y reutilizarlos.
Introducción al lenguaje NCL
TEMARIO
Introducción al lenguaje NCL
• Lenguaje NCL
• Ejemplo paso a paso
• Ejercitación
El lenguaje NCL
Estructura General de un documento NCLEDTVProfile o BDTVProfile, perfiles de NCL para indicar Enhanced DTV o Basic DTV.
<?xml version="1.0" encoding="ISO-8859-1"?><ncl id=“main"
xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">
<head> region, descriptor, connector</head>
<body>media, port, switch, link
</body>
</ncl>
El lenguaje NCL
<head>
</head>
<regionBase> <region … /></regionBase>
<body>
</body>
<media ..../>
<descriptorBase> <descriptor … /></descriptorBase>
<connectorBase> <connector … /></connectorBase>
<port ... />
<link .../>
región -> ¿dónde mostramos?
descriptor -> ¿cómo mostramos?
conector -> ¿cuándo mostramos?
puerta -> puerta de inicio
contexto y media -> ¿qué mostramos?
link -> ¿cuándo mostramos?
El lenguaje NCL
•Todo objeto NCL contiene un identificador, para definirlo se utiliza el atributo id.
•Ejemplo:
<descriptorBase>
<descriptor id="descriptorId" region="regionId" /> </descriptorBase>
El lenguaje NCL – Entidades Básicas
Elemento REGION
● Representa una área de la pantalla● Las regiones pueden anidarse● Su tamaño y posición se puede indicar en porcentajes o pixeles.
•Atributos
• id: identificador de la región
• height: altura de la región
• width: ancho de la región
• left, right, top, bottom: indican posición y dimensión de la región
• zIndex: especifica la precedencia de superposición de la región.
El lenguaje NCL
Elemento REGION
• <region id=" region1" height="100%" width="100%" zIndex="1" />
• <region id=“region2" top=“0" left=“0" height="50%" width="50%" > <region id=“region3" right=“50" left=“50" top=“50" bottom=“50" />
<region>
El lenguaje NCL
● Indica en qué región se mostrará el objeto media● Permite especificar propiedades de su presentación•Atributos
• id: identificador del descriptor• region: identificador de la región asociada• explicitDur: define la duración del objeto media asociado al
descriptorEn el caso de los videos dura el tiempo total del video, en otros casos este tiempo es infinito (imágenes, textos y HTML).
Ejemplo<descriptor id="descImagen" region=“regImagen" explicitDur=“10s" />
El lenguaje NCL
Elemento DESCRIPTOR
● Parámetros● Se definen como un par (propiedad, valor)● Las propiedades dependen del tipo de objeto media asociado al descriptor (transparency, soundLevel)
Ejemplo• Transparency:
• números reales entre 0 y 1, por defecto toma 1.• porcentaje entre 0% y 100%.
<descriptor id="descImagen" region="regImagen"> <descriptorParam name="transparency" value="60%"/>
</descriptor>
El lenguaje NCL
Elemento DESCRIPTOR
● Se define mediante el uso de atributos del descriptor● focusIndex, focusBorderColor, focusBorderWidth● moveLeft, moveRight, moveUp, moveDown● Utilidad menúes
Ejemplo
<descriptor id="descImagen" region="regionId" focusIndex="1" moveDown="2"/>
<descriptor id="descImagen" region="regionId" focusIndex="2" moveUp="1" moveDown="3" />
El lenguaje NCL
Elemento DESCRIPTOR – Navegación con teclas
Objeto Media
● Son elementos de contenido multimedial: video, imagen, sonido, texto, html y lua.
•Atributos:• id: identificador• src: path donde se ubica el media• descriptor: id del descriptor asociado• type: opcional, define el tipo MIME del objeto MEDIA
Ejemplos:<media id="image" descriptor="imageDesc" src="foto.jpg" />
<media id="video" descriptor="videoDesc" src="sbtvd-ts://0" />
El lenguaje NCL
Objeto MEDIA
● Hasta ahora las propiedades se definian en la región, descriptor, o parametros del descriptor
● Tambien se pueden definir en un objeto MEDIA con el tag property● Define una interfaz para poder cambiar el valor de la propiedad en el
objeto MEDIA• Atributos:
- name: indica el nombre de la propiedad- value: indica el valor que tomará la propiedad
● Ejemplo:
<media id=“texto" src=“texto.txt“ descriptor="descTexto"><property name=“fontSize“ value=“20”/>
</media>
El lenguaje NCL
Objeto MEDIA
•Propiedades específicas de objetos media de audio
• soundLevel• Valores numéricos de 0 a 100 Ej.: value=“0.2”, value=“100”
•Propiedades de objetos media visuales
• top, left, right, width• Formato de valores iguales a los ya presentados
• location• Forma abreviada del grupo de propiedades (left, top)
• bounds• Forma abreviada de (left, top, width, height)
<property name=“location“ value=“40%, 10%”/>
<property name=“bounds“ value=“40%, 10%, 30%, 30%”/>
<property name=“soundLevel“ value=“0.2”/>
El lenguaje NCL
Propiedades específicas de objetos media de texto
• fontColor• blue, red, white, black, ...
• fontSize• 0 .. 100
• weight• bold, normal
• fontFamily• Tiresias
<media id=“texto" src=“media/texto1.txt“ descriptor="descTexto"><property name=“fontColor“ value=“blue”/><property name=“fontSize“ value=“20”/><property name=“weight“ value=“bold”/><property name=“fontFamily“ value=“Tiresias”/>
</media>
El lenguaje NCL
● Es un objeto contenedor de entidades NCL. ● Permite agrupar elementos y reutilizarlos.● El body de un documento NCL también es un contexto
•Atributos
• id: nombre del identificador del contexto• refer: opcional, referencia a un contexto previamente
definido. El cual puede estar en otro documento NCL.
•Ejemplo<context id="idDeContexto" > ...
</context>
El lenguaje NCL
Componente CONTEXT
● Son puertas de entrada a los contextos● Mapean la puerta a un elemento del contexto (objeto
Media o Context)● Pueden definirse más de una para cada contexto● En el body un Port que apunta a un objeto Media, indica
que comenzará la presentación del mismo al iniciar la aplicación
Atributos• id: identificador• component: id del objeto media que se mapea a la puerta
El lenguaje NCL
Componente PORT
imagen
pEntradabody
El lenguaje NCL
Componente PORT
<body>
<port id=“pEntrada” component="imagen"/>
</body>
Permiten mostrar objetos MEDIA con efectos de transición de entrada o salida
Atributos• id: identificador de la transición
• type: atributo obligatorio que indica el tipo de transición. Los valores posibles son : fade, barWipe, irisWipe, clockWipe, snakeWipe
• dur: duración de la transición en segundos. Por defecto es 1 segundo.
Ejemplo
<transitionBase><transition id=“transicion” type="barWipe" dur="5s"/>
</transitionBase>
El lenguaje NCL
Transitions
• Se asocian a los descriptores• transIn
• Indica qué transición usar al mostrar el objeto Media.• transOut
• Indica qué transición usar al ocultar el objeto Media.
• El valor que toman estas propiedades son identificadores de transiciones
• Ejemplo
<descriptor id="descImagen" region=“regImagen" transIn="transicion" explicitDur="10s" transOut="transicion”/>
Transitions
El lenguaje NCL
TEMARIO
Introducción al lenguaje NCL
Lenguaje NCL
• Ejemplo paso a paso
• Ejercitación
Creación de una aplicación NCL usando Eclipse
Herramientas
1. Eclipse• El entorno de desarrollo integrado (IDE) Eclipse permite crear y
editar aplicaciones NCL
2. Plugin NCL Eclipse
• Provee funcionalidades tales como:
• creación de documentos .ncl
• coloreado de sintaxis
• autocompletado y autoformato de código
• indicación de errores
3. Virtual Box
• Permite usar la máquina virtual Linux que corre Ginga-NCL
• Simula la ejecución del middleware
•En Package Explorer hacer click con el botón derecho y elegir:
New Project…
•Se abrirá una ventana donde se debe seleccionar:
General Project Next
1) Crear un proyecto convencional
Creación de un proyecto NCL usando Eclipse
•Completar el nombre del proyecto nuevo:
EjemploMostrarUnaImagen
•Presionar Finish.
2) Crear un documento NCL
Creación de un proyecto NCL usando Eclipse
En el proyecto nuevo:
•Click derecho y elegir:
New Other… NCL NCL Document
•Presionar Next
Creación de un proyecto NCL usando Eclipse
2) Crear un documento NCL
•Completar los campos:
• id: main•nombre de archivo: main.ncl (se autocompletará al poner el id,
pero puede modificarse)
•Presionar Finish.
Creación de un proyecto NCL usando Eclipse
2) Crear un documento NCL
•Seleccionar en el menu de la maquina virtual• Devices – shared folders • Agregar una nueva carpeta• Indicar el path y asignar un <folderName>• Tildar make permanent
•Luego, abrir una consola y ejecutar la línea:
sudo mount -t vboxsf <folderName> shared
•Luego en la carpeta /home/virutalbox/shared se encontrará el contenido de la carpeta compartida
Crear una carpeta compartida
Ejemplo paso a paso:
Mostrar una imagen
Ejemplo paso a paso
Quebrada de Humahuaca- Jujuy
Mostrar la imagen “quebradaDeHumahuaca.jpg”
Generación de código NCL
En el head:
•Definir una <region> dentro de <regionBase>Una región define el espacio de exhibición de un objeto media.
•Definir un <descriptor> dentro de <descriptorBase>Un descriptor define las características de presentación de un media y
la región en el que se muestra.
<regionBase><region id=“regFondo" width="100%" height="100%"/>
</regionBase>
<descriptorBase><descriptor id="descImagen" region=" regFondo“ />
</descriptorBase>
Generación de código NCL -Continuación
En el body:
•Definir el objeto <media> que representa la imagen El objeto media debe tener: id, path de la imagen, descriptor a usar
• Indicar un <port> de inicio Un <port> indica que componente se presentará al iniciar la
aplicación NCL
<port id=“pEntrada" component="imagen"/>
<media id="imagen“ src=“media/imagen1.jpg” descriptor="descImagen"/>
TEMARIO
Introducción al lenguaje NCL
Lenguaje NCL
Ejemplo paso a paso
• Ejercitación
Parte 1 – Uso de propiedades y componentes básicos
Ejercitación:
• Ejercicio 1: Mostrar un video
• Ejercicio 2: Mostrar una imagen con transparencia sobre un video
• Ejercicio 3: Mostrar una imagen durante un determinado tiempo
• Ejercicio 4: Mostrar una imagen con transparencia y durante
un tiempo determinado sobre un video. La imagen debe entrar y salir con una transición.
•Ejercicio 5: Realizar un menu de 5 items que se despliegue sobre el video. Utilizar navegación con teclas.
Parte 1 – Uso de propiedades y componentes básicos
Ejercicio 1
Mostrar el video “NuestraArgentina.avi”
Parte 1 – Uso de propiedades y componentes básicos
Cordillera de los Andes
video1
pEntrada
body
Parte 1 Ejercicio 1 – Notación Gráfica
Ejercicio 2
Mostrar la imagen “TvPublica.jpg” con transparencia 60% sobre el video “NuestraArgentina.avi”
Parte 1 – Uso de propiedades y componentes básicos
Acantilados patagónicos - Chubut
video1
pEntrada1
imagen1
pEntrada2
body
Notación gráfica
transparency =“60%”
Parte 1 – Uso de propiedades y componentes básicos
Ejercicio 3
Mostrar la imagen “TvPublica.jpg” durante 10 segundos mientras se está viendo el video NuestraArgentina.avi”
Glaciar Perito Moreno- Santa Cruz
Parte 1 – Uso de propiedades y componentes básicos
imagen1
pEntrada
body
Notación gráfica
explicitDur=“10s”
Parte 1 – Uso de propiedades y componentes básicos
Ejercicio 4
Mostrar la imagen “mapaJunin.jpg” con transparencia del70% durante 10 segundos sobre el video“NuestraArgentina.avi”. La imagen debe entrar y salircon una transición.
Junín- Buenos Aires
Parte 1 – Uso de propiedades y componentes básicos
Notación gráfica
video1
pEntrada1
imagen1
pEntrada2
body
explicitDur =“10s”transIn =“transicion” transOut =“transicion”transparency =“70%”
Parte 1 – Uso de propiedades y componentes básicos
Ejercicio 5
Realizar un menú de 5 ítems que se despliegue sobre el video. Utilizar navegación con teclas.
El menú deberá contener los siguentes ítems
•Película
•Actores
•Sinópsis
•Ficha Técnica
•Trailers
Parte 1 – Uso de propiedades y componentes básicos
TEMARIO
• Ejercitación
Creación de un proyecto NCL usando Eclipse
Parte 1 – Uso de propiedades y componentes básicos
• Parte 2 – Uso de conectores y links
• Parte 3 – Reuso a partir de contextos y switches
• Parte 4 – Codificación de objetos .lua