tv digital – ginga ncl · “cocineros argentinos” ... aplicación “cocineros”....

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


Texto

Video

Imagen

Identificando elementos y sus relaciones en la aplicación “cocineros”.


• Objeto Media

• Descriptor

• Región

• Link

• Contexto

Entidades básicas representadas en NCL:

Relación entre las entidades


¿Qué vamos a mostrar? - Objetos Media

Los objetos media son elementos de contenido multimedial:

Video

HTML

Lua

Audio

Texto

Imagen


¿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.


¿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


¿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”


•Contexto

Permite agrupar elementos NCL y reutilizarlos.


TEMARIO


• Lenguaje NCL


• 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


Lenguaje NCL


• 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


En el proyecto nuevo:

•Click derecho y elegir:

New Other… NCL NCL Document

•Presionar Next



•Completar los campos:

• id: main•nombre de archivo: main.ncl (se autocompletará al poner el id,

pero puede modificarse)

•Presionar Finish.



•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


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.


Ejercicio 1

Mostrar el video “NuestraArgentina.avi”


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”


Acantilados patagónicos - Chubut

video1

pEntrada1

imagen1

pEntrada2

body

Notación gráfica

transparency =“60%”


Ejercicio 3

Mostrar la imagen “TvPublica.jpg” durante 10 segundos mientras se está viendo el video NuestraArgentina.avi”

Glaciar Perito Moreno- Santa Cruz


imagen1

pEntrada

body

Notación gráfica

explicitDur=“10s”


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


Notación gráfica

video1

pEntrada1

imagen1

pEntrada2

body

explicitDur =“10s”transIn =“transicion” transOut =“transicion”transparency =“70%”


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


TEMARIO

• Ejercitación



• Parte 2 – Uso de conectores y links

• Parte 3 – Reuso a partir de contextos y switches

• Parte 4 – Codificación de objetos .lua

tv digital – ginga ncl · “cocineros argentinos” ... aplicación “cocineros”....

Documents