Dedicarei este post ao desenvolvimento de uma aplicação interativa para TV Digital utilizando o subsistema Ginga-NCL do middleware padrão do SBTVD-T, o Ginga. Esta aplicação consiste em um videoclipe, o qual através do controle remoto do emulador podemos navegar através de um menu que fornece informações gerais sobre a banda. Podemos acessar a grade de programação da emissora (aqui como exemplo utilizei a MTV, espero não ter problemas com isso hehe). Nos posts anteriores vimos o que é um middleware de TV Digital , vimos um pouco da arquitetura do middleware Ginga e aprendemos também que é através do middleware que a TV Digital poderá proporcionar para nós conteúdos de forma interativa.

Como dito anteriormente usarei o Ginga-NCL para o desenvolvimento da aplicação, pois o mesmo já está a bastante tempo disponível na comunidade Ginga e recentemente foi eleito pela ITU-T como padrão internacional. Para quem não possui nenhum conhecimento do Ginga-NCL, sugiro a leitura do tutorial da linguagem NCL 3.0 disponível na Comunidade Ginga e a leitura de meu último post (como base).

Bem, nesta aplicação a qual chamarei de “wstripesinterativo” utilizarei as ferramentas Composer e a IDE Eclipse junto com o plugin NCL já instalado.

A ferramenta Composer é interessante pois ela permite você criar (em modo gráfico) aplicações para TV Digital sem “nenhum” conhecimento de NCL. A cada nova declaração que você faz, a ferramenta gera automaticamente o código NCL. Mas há um porém, em aplicações muito grandes, em que há vários objetos de mídia e vários tipos de sincronizações entre eles, a ferramenta acaba se tornando um empecilho, pois começa a travar insistentemente (pelo menos foi o que aconteceu comigo), e ainda não possui alguns conectores interessantes de serem utilizados. Por isso eu sugiro que a parte básica do documento, como a criação de regiões, descritores, arquivos de mídia e algumas sincronizações sejam feitas no Composer, se o projeto ficar muito grande com muitas linhas de código muitos tipos de sincronizações, sugiro migrarem o código para o Eclipse. Pelo visto não há muita escapatória, você terá que aprender pelo menos o básico em NCL.

Parte 1: Criando as regiões, descritores e objetos de mídia

Vamos começar, executando o composer, crie um novo projeto dê o nome que quiser o e clique em OK.

Acessando a visão de texto do Composer (Textual view), reparem que o composer já criou o cabeçalho do código NCL automaticamente para nós. O composer trabalha com 4 tipos de visões (textual, estrutural, layout e temporal). A visão textual é mostrada para nós nessa imagem. Bom, o primeiro passo para a construção da nossa aplicação é a definição das regiões que iremos utilizar. Se um projeto for bem especificado antes, você poderá criar de uma vez só todas as regiões que utilizará. Se não, você poderá criar as regiões de acordo com suas necessidades ao longo do projeto. Neste projeto iremos criar 17 regiões.

—- Criando as Regiões

Acesse a visão layout clique com o botão direito do mouse insert>region. Vamos criar nossa primeira região, seus atributos serão: region Id = rgTV, height = 100% e width = 100%. Essa região será nossa região “pai”, será dentro dela que iremos programar todo funcionamento de nossa aplicação. Vale lembrar que a resolução máxima de uma TV Digital é 1920 x 1080 pixels. Poderíamos especificar esses valores nos atributos width e height de nossa aplicação, mas ai ocorreria um problema. Nem todas as pessoas possuem televisores com essa resolução, ou melhor, a maioria da população nem tem uma TV Digital. Então para que nossa aplicação se ajuste automaticamente à resolução da TV iremos utilizar valores em porcentagem.

Não irei criar aqui todas as regiões de nosso projeto, você deverá criar mais 16 regiões, cada uma com atributos diferentes.

—- Criando os Descritores

Se você leu o tutorial sobre a linguagem NCL ou o meu último post, você aprendeu que para cada região criada há um descritor o qual relacionará como o objeto de mídia será apresentado e em qual região. Portanto devemos criar 17 descritores, cada um específico para cada região que criamos. Para criar um descritor, você deverá clicar na aba Insert->Descriptor. Como exemplo crie o descritor da região rgTV, com os atributos id= drgTV, region Id = rgTV.

—- Criando os Objetos de Mídia

Criado os descritores, devemos agora criar os objetos de mídia que farão parte de nossa aplicação. Os objetos de mídia podem ser vídeos, áudios, imagens, etc. Como dito anteriormente como é um videoclipe interativo, necessariamente há um vídeo .mpg como um dos objetos de mídia, os outros objetos de mídia que utilizei são apenas imagens nos formatos .jpg e .gif. Para criar um objeto de mídia você deverá acessar a visão estrutural do composer , clique com o botão direito Insert->Media Node, aparecerá uma tela como abaixo, nela você apenas fornecerá os atributos do objeto de mídia, como Id, o descritor, a localização do arquivo e o tipo de arquivo (video/mpeg).

Neste projeto estamos utilizando 20 objetos de mídia (1 vídeo/mpeg e 19 imagens jpg/gif).

Para concluir esta primeira parte do projeto, todo documento NCL deve haver uma porta de entrada na seção <body> que define qual objeto de mídia inicial. No composer há uma maneira de fazer isso selecionando o nó de mídia (no nosso caso o vídeo) clicando com o botão direito do mouse e selecionando a opção Set as Starting Node.

O composer cria a seguinte linha na visão texto do nosso documento:

<port component=”video” id=”port_newDocument1_video”/>

Parte 2: Sincronizando os objetos de mídia através de Elos e Conectores

Não especificarei aqui todos os elos que utilizei pois ficaria muito extenso, então colocarei aqui apenas os mais importantes, a maioria dos elos são os mesmos diferindo apenas o comportamento entre os objetos de mídia. No final do post colocarei um link para download de todos os arquivos do projeto, incluindo os objetos de mídia e o código em NCL.

Para que a interatividade funcione, devemos ter um símbolo, o qual represente que o programa seje interativo. Um símbolo o qual, o usuário veja e saiba que aquele vídeo, programa, documentário ou filme tenha interatividade. Neste projeto especifiquei um quadrado verde no canto inferior esquerdo da tela. Ou seja quando o vídeoclipe for iniciado, este botão verde será iniciado junto com o vídeo para representar que o mesmo possui interatividade, e que basta o usuário clicar no botão verde do controle remoto para carregar o aplicativo.

O elo utilizado para iniciar o botão interativo junto ao vídeo é o onBeginStart. Abaixo segue o código:

<link xconnector=”connBase#onBeginStart” id=”comecavideo”>

<bind role=”onBegin” component=”video”/>

<bind role=”start” component=”botaointerativo”/>

</link>

A primeira linha do código especifica a base de conectores (connBase) e o elo utilizado (onBeginStart) assim como o seu id. Na segunda e terceira linhas dizemos quais objetos de mídia devem ser inicados, no caso “video” e “botaointerativo”. Se você leu o tutorial do NCL 3.0 deve saber como fazer para criar um elo entre 2 ou mais objetos de mídia. Acontece que o modo gráfico acaba que nos confundindo na criação dos elos (quando há vários objetos de mídia, como neste projeto), chega a um determinado momento em que você pode perder o controle da aplicação.

Eu que fiz não consigo determinar o que que está acontecendo e a onde que está acontecendo. Por isso, que se o seu projeto utilizar vários objetos de mídia, você terá que editá-lo em modo texto, sem dúvida nenhuma. E para utilizar o modo texto eu sugiro que vocês utilizem o Eclipse. Quando fiz este projeto não existia o plugin para o Eclipse. Resultado: como meu Composer estava demorando muito para processar minhas requisições, resolvi editá-lo no bloco de notas. Imaginem desenvolver uma aplicação no bloco de notas !! Mas apesar de parecer difícil, não foi, quando você começa a entender a linguagem acaba virando uma coisa completamente mecânica.

Com o plugin instalado no eclipse, crie um novo projeto, dentro deste projeto crie um documento NCL. Copie e cole o código, do Composer para o Eclipse. Lembre-se de copiar a pasta /media para dentro da pasta do projeto do eclipse.

Voltando ao nosso projeto, quando o usuário clicar no botão verde do controle remoto, a aplicação será carregada efetivamente.

—- Menus

Para que o menu (The White Stripes, Biografia, Discografia, Curiosidades e Opinião) funcione, alguns atributos devem ser feitos nos descritores das regiões (rgOpcao1, rgOpcao2, rgOpcao3, rgOpcao4 e rgOpcao5). Esses atributos são: focusIndex, o qual define um índice de navegação para o objeto de mídia associado ao descritor, note que se você não especificar um focusIndex para o objeto de mídia, o mesmo não poderá receber o foco da navegação. MoveLeft e MoveRight o qual indica qual objeto de mídia deve receber o foco no momento em que o usuário mover para a esquerda ou direita.FocusBorderWidth o qual especifica a largura da borda que o objeto deve receber quando estiver com o foco e FocusBorderColor que especifica a cor da borda. O código final desses descritores é mostrado abaixo:

<descriptor region=”rgOpcao1″ id=”dOpcao1″ focusIndex=”1″ moveRight=”2″ focusBorderWidth=”-2″ focusBorderColor=”red”/>

<descriptor region=”rgOpcao2″ id=”dOpcao2″ focusIndex=”2″ moveRight=”3″ moveLeft=”1″ focusBorderWidth=”-2″ focusBorderColor=”red”/>

<descriptor region=”rgOpcao3″ id=”dOpcao3″ focusIndex=”3″ moveRight=”4″ moveLeft=”2″ focusBorderWidth=”-2″ focusBorderColor=”red”/>

<descriptor region=”rgOpcao4″ id=”dOpcao4″ focusIndex=”4″ moveRight=”5″ moveLeft=”3″ focusBorderWidth=”-2″ focusBorderColor=”red”/>

<descriptor region=”rgOpcao5″ id=”dOpcao5″ focusIndex=”5″ moveLeft=”4″ focusBorderWidth=”-2″ focusBorderColor=”red”/>

A linguagem NCL é uma linguagem muito robusta, prova disso é que por incrível que pareça eu utilizei apenas um tipo de link para fazer todas as sincronizações entre os objetos de mídia (tirando, é claro o onBeginStart). O link (ou elo) usado foi o onKeySelectionStartNStopN. Há uma parte da aplicação onde é possível o usuário ver a grade de programação da emissora.

Quando o usuário clica no botão de interatividade amarelo do controle remoto é carregada a grade de programação da emissora. Para fechá-la basta pressionar o botão 0 (zero). Para abrir e fechá-la utilizei dois links mostrados abaixo:

<link xconnector=”connBase#onKeySelectionStartNStopN” id=”inicioprogramacao”>

<bind role=”onSelection” component=”botaomtv”>

<bindParam name=”keyCode” value=”YELLOW”/>

</bind>

<bind role=”start” component=”programacao”/>

<bind role=”stop” component=”botaomtv”/>

</link>

<link xconnector=”connBase#onKeySelectionStartNStopN” id=”fimprogramacao”>

<bind role=”onSelection” component=”botaoprogramacao”>

<bindParam name=”keyCode” value=”0″/>

</bind>

<bind role=”start” component=”botaomtv”/>

<bind role=”stop” component=”programacao”/>

</link>

O primeiro link “starta” a grade de programação quando o botão amarelo (<bindParam name=”keyCode” value=”YELLOW”/>) é pressionado. Quando a grade é iniciada (<bind role=”onSelection” component=”botaomtv”>) o componente “botaomtv” é parado (<bind role=”stop” component=”botaomtv” />). No segundo link é feito o contrário, startando o “botaomtv” e parando a grade de programação, para que se o usuário quiser posteriormente ver a grade, ela estiver disponível.

Todo o código é feito desta maneira, utilizando este tipo de sincronização com o link onKeySelectionStartNStopN.

Bom, espero ter ajudado com este post a vocês terem uma idéia do que pode ser feito com o Ginga-NCL, pegando um exemplo real e aplicando a tecnologia. É um exemplo simples, não utilizei muitos recursos do NCL e mesmo assim o resultado foi excelente. Dá uma idéia real do que podemos fazer utilizando o Ginga. O código da aplicação está disponível para download em www.grupogingagoias.com.br.

Abaixo segue algumas imagens da aplicação.

Obrigado !

@DanielCruz733