Desenvolvendo Aplicativos para TV Digital . Parte 3

ASP.NET

Saturday, December 20, 2008

SBTVD - Sistema Brasileiro de Televisão Digital

Desenvolvendo Aplicativos para TV Digital - Parte 3

   Nos dois últimos textos escritos, falei um pouco sobre o Sistema Brasileiro de Televisão Digital e suas ferramentas para desenvolvimento. É importante saber que o mercado está muito propício para esse tipo de desenvolvimento de software.
   O próximo passo é criar o seu primeiro aplicativo para TV Digital. O que vou abordar é, Ginga-NCL, comentado em textos anteriores; uma tecnologia brasileira de fácil aprendizado.
   Depois de instalar a ferramenta e seu plugin, começarei a mostrar como funciona as tags para exibir um vídeo, criar um botão, interatividade com o usuário operador do controle remoto e tudo mais. É importante seguir passo a passo.

Ferramenta de Desenvolvimento

Eclipse
Plugin Ginga-NCL instalado
Java JRE 1.6

Uma observação importante é que, esse plugin funciona apenas com a versão 1.6 do java ou superior. No caso de uma versão anterior, o mesmo não funcionará adequadamente. Para ser mais específico, nem mesmo abrirá corretamente.

Criando um projeto

Para criar o primeiro projeto do tipo NCL é preciso clicar em File --> New --> Other.... Siga os passos. (Referência 3.1)

Referência 3.1

Automaticamente abrirá uma tela wizard que, disponibilizará uma opção NCL Document. Caso não tenha essa opção em sua ferramenta, favor instalar o plugin novamente. (Referência 3.2)

Referência 3.2

Cliquei no botão Next e passando para a próxima tela, coloquei o nome do projeto /exemplo1_30 e o nome do File name, não esqueça de colocar a extensão do arquivo (.ncl). (Referência 3.3)

Referência 3.3

Cliquei no botão Finish e o documento foi criado em minha solução com uma pré-estrutura montada para ajudar. (Referência 3.4)

Referência 3.4

Explicação:
Note que no início do arquivo possui uma tag de xml, <?xml...> Então você se pergunta, esse documento todo será em formato xml? Eu respondo que sim, pois os documentos na programação Ginga-NCL possui estrutura de xml que facilita no desenvolvimento.

<?xml version="1.0" encoding="ISO-8859-1"?>

Table 3.1

A tag <ncl id=”teste”...> quer dizer que para essa tag necessariamente precisa de um id. A tag <... xmlns=”http...”> é um name space daquela tag. Mais a frente explicarei mais detalhadamente.

<ncl id="teste" xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">

Table 3.2

A tag <head> é de cabeçalho, possui início e fim. Dentro dela, geralmente coloco uma região base e uma descrição base que será explicado mais a frente. Table 3.3

<head>
</head>

Table 3.3

A útlima tag criada no documento estruturado é o <body>, ou seja, o corpo do documento; vários outros comandos ou tags podem ser colocadas.

<body>
</body>

Table 3.4

   Por último, o documento foi fechado com a tag </ncl>. Gostaria de lembrar que, toda tag iniciada deve ser fechada, não importa se existe uma tag dentro da outra. Para fechar uma tag, coloco < / ...> a barra indicando.

Exibindo o primeiro vídeo com Ginga-NCL

   O próximo exemplo, mostro como rodar o primeiro vídeo utilizando apenas tags do Ginga-NCL na tela. Lembrando que tudo isso é um emulador no computador, porém quando estiver na TV funcionará da mesma forma e perfeitamente.
   O grande problema é que, os set-top boxes ainda não estão totalmente preparados. Não fique preocupado pois, no próximo ano (2009) os produtores de set-top box prometeram essa interação.
   No exemplo seguinte, mostrarei como exibir um vídeo utilizando Ginga-NCL, definirei uma base de região, usarei uma tag de mídia e um ponto de entrada. Antes de mostrar o código, explico que todos os vídeos com extensão “mpg” ficam dentro de uma pasta chamada media, apenas para organização.
   O primeiro passo foi criar um arquivo chamado exemplo01.ncl, foi definido apenas uma região para o vídeo aparecer. Table 3.5

<?xml version="1.0" encoding="ISO-8859-1"?>

<ncl id="exemplo01"
xmlns="http://www.ncl.org.br/NCL3.0/EDTVProfile">

<head>

     <regionBase>
         <region id="rgVideo1" left="1" top="1" width="320" height="240" />
      </regionBase>

      <descriptorBase>
         <descriptor id="dVideo1" region="rgVideo1" />
      </descriptorBase>

</head>

<body>
      <port id="pInicio" component="video1"/>

      <media type="video/mpeg" id="video1" src="media/alanis_morisette.mpg" descriptor="dVideo1"/>

   </body>
</ncl>

Table 3.5

   O objetivo desse código é aparecer o vídeo em sua tela, mostrarei como posicionar o mesmo na tela, pode ficar no centro, lado esquerdo ou direito.

Explicação:
   No cabeçalho NCL define as URIs dos esquemas da NCL, ou seja, no namespace colocamos a versão 3.0 do NCL.
   Na tag <head> defino a região do vídeo ou dos objetos, pois podem ter vários objetos na tela. A base de regiões é importante para nosso NCL, define as regiões na tela onde as mídias são apresentadas (<regionBase>).
   Em cada tag, tem o seu atributo, cada um com seu valor específico. O width define o tamanho do vídeo que será apresentado em tela, horizontalmente. O height define o tamanho do vídeo verticalmente. O left posiciona na tela o objeto e o top é responsável pela posição do objeto verticalmente falando. (Table 3.6) Em cada tag existe o atributo id dando um nome.
    <regionBase>
         <region id="rgVideo1" left="1" top="1" width="320" height="240" />
      </regionBase>

Table 3.6

   Depois de definir a região, preciso definir a base de descritores, que é responsável pela apresentação das mídias, ou como serão apresentadas as mídias. (Table 3.7)

     <descriptorBase>
         <descriptor id="dVideo1" region="rgVideo1" />
      </descriptorBase>

Table 3.7

É interessante esse tipo de apresentação, pois existe um relacionamento entre a região base e o descritor base. Note que o atributo region tem o valor do id da região. Usando o Eclipse ele faz o auto relacionamento e mostra os valores possíveis, como mostrado na referência 3.5.

Referência 3.5

A próxima parte é definir o ponto de entrada, ou seja, no corpo do sistema que indica o componente onde o programa inicia. Table 3.8

<body>
<port id="pInicio" component="video1"/>

Table 3.8

Nesse caso, da (table 3.8) ainda não criei um vínculo. Pois no component deve ser diretamente relacionado a uma outra tag definida posteriormente. (Table 3.9)

<media type="video/mpeg" id="video1" src="media/alanis_morisette.mpg" descriptor="dVideo1"/>

Table 3.9

   As tags de mídia definem o local do arquivo de mídia e as associa a seus descritores específicos. Coloquei o tipo como video/mpeg, coloquei um id chamado video1 localizado no diretório media/alanis_morisette.mpg pela tag src.
   Ao salvar o aquivo .ncl o editor eclipse verificar se tem algum problema de compilação, se houver será mostrado na própria tela.

Executando o Código Feito

   Cliquei no botão play exibido em tela, escolhi a opção Run As e a sub-opção 1 NCL Presentation. (Referência 3.6)

Referência 3.6

Depois de executar o código clicando no sub-menu NCL Presentation, o vídeo é apresentado junto a sua tela. Automaticamente aparece o controle remoto emulando uma televisão digital.
O seu computador vira a tela de uma TV com controle remoto para interatividade. (Referência 3.7)

Referencia 3.7

Bom eu fico por aqui, qualquer dúvida, favor entrar em contato. Espero ter ensinado de maneira entendível.

Mauricio Junior
www.mauriciojunior.org
www.aspneti.com