Desenvolvimento para tv digital interativa [ dia 3]

GingaMSDia 3

Desenvolvimento para TV Digital Interativa

Diemesleno Souza Carvalho

Campo Grande - MS

Sobre o palestrante.

• Tecnólogo em Sistemas para Internet.

• Pós-graduando MBA em Gestão de Projetos.

• Trabalho com T.I. Desde 1998.• Trabalho com T.I. Desde 1998.

• Palestrante em diversos eventos regionais.

• Ex-estagiário TRE/MS e Dataprev/MS.

• 2 anos na Sefaz/MS Analista/Programador.

• Analista de Sistemas Pleno na Sanesul/MS.

Sobre o GingaMS.

• Grupo novo, mas com grandes perspectivas.

• Estimular e difundir as tecnologias TVDi.

• Tendências do mercado de TVDi.• Tendências do mercado de TVDi.

• Capacitar novos membros gradativamente.

• Incentivar produções independentes.

• Promover eventos e divulgação do grupo.

Sobre o Mini-curso.

• Nivelamento sobre TVDi.

• Entender as tecnologias envolvidas.

• Desafios do mercado.• Desafios do mercado.

• Principais dificuldades hoje.

• Montar ambiente de desenvolvimento e teste.

• Criar algumas aplicações de exemplo.

Terceiro Dia

• Criação de uma Aplicação NCL Pura.

• Criação de uma Aplicação Ginga-NCL.

• Criação de uma Aplicação Ginga-J.

Prática

Aplicação NCL Pura


« Criaremos uma aplicação NCL Pura passo a

passo. »


1 - Abra o eclipse.


2 - Crie um novo projeto do tipo ‘General/Project’ e dê o nome

de ‘NCL-Pura’.


3 - Clique com o botão direito no projeto e crie um novo

diretório chamado ‘media’


4 - Clique com o botão direito no diretório ‘media’ e selecione a

opção ‘import->File System’ e selecione o arquivo

‘video.mp4’.


5 - Clique com o botão direito do projeto e crie um novo arquivo

do tipo ‘NCL Document’ e digite ‘main’ para o id do arquivo.


3 - Dentro do cabeçalho ‘<head>’, defina uma regionBase:

<regionBase><regionBase>

<region id="rgFundo" width="100%" height="100%" />

</regionBase>


4 - Ainda dentro do cabeçalho, defina um descriptorBase:

<descriptorBase><descriptorBase>

<descriptor id="descVideo" region="rgFundo" />

</descriptorBase>


5 - Dentro do corpo do programa ‘<body>’, Indique a mídia que

aparecerá na tela:

<media id="video" src="media/video.mp4" descriptor="descVideo" />


6 - Crie um port para indicar o componente que inicia:

<port id="pEntrada" component="video" /> <port id="pEntrada" component="video" />


Abra o Ginga Player e teste o programa!

Prática

Aplicação Ginga-NCL


1 - Com o Eclipse aberto, crie um novo projeto

do tipo ‘General/Project’ chamado ‘Ginga-

NCL’.NCL’.


2 - Dentro de Ginga-NCL crie outro diretório

chamado ‘media’ e importe as imagens para

dentro.dentro.


3 - Ainda dentro de Ginga-NCL crie um arquivo

do tipo ‘NCL Document’ e digite ‘main’ para o

id.id.


4 - Dentro do cabeçalho ‘<head>’ adicione um

regionBase.

<regionBase>

<region width="40%" height="40%" left="30%" top="30%” id="rgButton"/>

</regionBase>


5 - Adicione um descriptorBase

<descriptorBase> <descriptorBase>

<descriptor id="dsButton" region="rgButton" focusIndex="0"/>

</descriptorBase>


6 - Abra um connectorBase

<connectorBase><connectorBase>


7 - Adicione um causalConnector

<causalConnector id="onBeginStart"><causalConnector id="onBeginStart">

<simpleCondition role="onBegin"/>

<simpleAction role="start"/>

</causalConnector>


8 - Adicione outro causalConnector

<causalConnector id="onEndStop"><causalConnector id="onEndStop">

<simpleCondition role="onEnd"/>

<simpleAction role="stop" max="unbounded"/>

</causalConnector>


9 - Adicione outro causalConnector

<causalConnector id="onSelectionStopSet"><causalConnector id="onSelectionStopSet">

<simpleCondition role="onSelection"/>

<connectorParam name="var"/>

<compoundAction operator="seq">

<simpleAction role="stop"/>

<simpleAction role="set" value="$var"/>

</compoundAction>

</causalConnector>


10 - Adicione outro causalConnector<causalConnector id="onCondGteBeginStart">


<compoundCondition operator="and"><compoundCondition operator="and">

<simpleCondition role="onBegin" />

<assessmentStatement comparator="gte">

<attributeAssessment role="attNodeTest" eventType="attribution"

. attributeType="nodeProperty"/>

<valueAssessment value="$var"/>

</assessmentStatement>

</compoundCondition>


</causalConnector>


11 - Adicione outro causalConnector<causalConnector id="onCondLtBeginStart">


<compoundCondition operator="and"><compoundCondition operator="and">

<simpleCondition role="onBegin" />

<assessmentStatement comparator="lt">

<attributeAssessment role="attNodeTest" eventType="attribution"

. . … attributeType="nodeProperty"/>

<valueAssessment value="$var"/>

</assessmentStatement>

</compoundCondition>


</causalConnector>


12 - Caso o eclipse não tenha fechado o

‘connectorBase’ faça isso.

</connectorBase>


13 - Dentro de ‘<body>’ adicione um port

<port id="entryPoint" component="timer"/>


14 - Abra uma media para gerenciar o timer.

<media id="timer" explicitDur="4s">


15 - Adicione as âncoras.

<area id="area01" begin="3s" end="6s"/>

<area id="area02" begin="10s" end="13s"/><area id="area02" begin="10s" end="13s"/>



<area id="areaTotal" begin="35s"/>


16 - Feche a media caso o eclipse já não tenha

feito.

</media>


17 - Adicione outra media para o arquivo lua.

<media id="clicks" src=“scripts/clicks.lua">


18 - Adicione a função que usaremos.

<property name="inc"/>


19 - Adicione a variável que usaremos.

<property name="counter"/>


20 - Feche a media do arquivo lua.

</media>


21 - Adicione a imagem do personagem.

<media id="button" descriptor="dsButton" src="media/smile2.png"/>


22 - Adicione a imagem de vitoria.

<media id="win" descriptor="dsButton" src="media/win.gif"/>


23 - Adicione a imagem de derrota.

<media id="lose" descriptor="dsButton" src="media/lose.jpg"/>


24 - Inicializando o componente Lua.

<link xconnector="onBeginStart">

<bind role="onBegin" component="timer"/> <bind role="onBegin" component="timer"/>

<bind role="start" component="clicks"/>

</link>


25 - Exibindo o personagem após 6 seg.


<bind role="onBegin" component="timer" interface="area01"/><bind role="onBegin" component="timer" interface="area01"/>

<bind role="start" component="button"/>

</link>


26 - Adicionando a interface 2.




</link>






</link>






</link>


29 - Parando o personagem após 6 seg.

<link xconnector="onEndStop">

<bind role="onEnd" component="timer" interface="area01"/><bind role="onEnd" component="timer" interface="area01"/>

<bind role="stop" component="button"/>

</link>


30 - Adicionando interface 2.




</link>






</link>






</link>


33 - Aplicando as regras a cada componente.


<bind role="onEnd" component="timer"/><bind role="onEnd" component="timer"/>


<bind role="stop" component="win"/>

<bind role="stop" component="lose"/>

<bind role="stop" component="clicks"/>

</link>


34 - Chamada a funcao ‘inc’ quando o botão é

pressionado.

<link xconnector="onSelectionStopSet">

<bind role="onSelection" component="button"/>


<bind role="set" component="clicks" interface="inc">

<bindParam name="var" value="1"/>

</bind>

</link>


35 - Exibindo o resultado se o user vencer.

<link xconnector="onCondGteBeginStart">

<linkParam name="var" value="3"/> <linkParam name="var" value="3"/>

<bind role="onBegin" component="timer" interface="areaTotal"/>

<bind role="attNodeTest" component="clicks" interface="counter"/>

<bind role="start" component="win"/>

</link>


36 - Exibindo o resultado se o user perder.

<link xconnector="onCondLtBeginStart">

<linkParam name="var" value="3"/> <linkParam name="var" value="3"/>

<bind role="onBegin" component="timer" interface="areaTotal"/>

<bind role="attNodeTest" component="clicks" interface="counter"/>

<bind role="start" component="lose"/>

</link>


37 - Dentro de Ginga-NCL crie um diretório

chamado ‘scripts’ e dentro desse diretório crie

um arquivo do tipo ‘New Lua File’ com o nome um arquivo do tipo ‘New Lua File’ com o nome

de ‘clicks.lua’.


38 - Dentro de ‘clicks.lua’ crie uma variável do

tipo local e inicie ela com ‘0’.

local counter = 0


39 - Declare os atributos para a variável.

local counterEvt = { local counterEvt = {

class = 'ncl',

type = 'attribution',

name = 'counter',

}


40 - Crie a funcao para verificar os atributos e

some o contador.

function handler (evt)

if evt.class ~= 'ncl' then return end

if evt.type ~= 'attribution' then return end

if evt.name ~= 'inc' then return end

counter = counter + evt.value


41 - Set os stributos para o post do evento.

event.post {

class = 'ncl', class = 'ncl',

type = 'attribution',

name = 'inc',

action = 'stop',

value = counter,

}


42 - Escute os métodos start e stop.

counterEvt.value = counter

counterEvt.action = 'start'; event.post(counterEvt) counterEvt.action = 'start'; event.post(counterEvt)

counterEvt.action = 'stop'; event.post(counterEvt)


43 - Feche a função e registre o evento.

end

event.register(handler)


44 - Start o Set-top-Box Ginga.


45 - Copie o projeto para o diretório ‘misc/ncl30’

usando o winSCP ou outro cliente.


46 - Abra o putty e logue no set-top-box.


47 - Dentro de ‘misc’, execute a aplicação com o

comando:

./launcher.sh ncl30/Ginga-NCL/main.ncl


48 - GingaMS Game


49 - You win?

Prática

Aplicação Ginga-J

Aplicação Ginga-J

1 - Abra o eclipse e crie um novo projeto Java

com o nome Ginga-J.

Aplicação Ginga-J

2 - Clique com o botão direito no projeto e vá

para ‘propriedades’.

Aplicação Ginga-J

3 - Clique em ‘Java Build Path’ e na aba ‘library’

clique no botão ‘Add External Jars’.

Aplicação Ginga-J

4 - Adicione o jar do xletview.

Aplicação Ginga-J

5 - Adicione o jar do JavaTV.

Aplicação Ginga-J

6 - Clique no botão ‘Add External Class Folder’ e

adicione o diretório ‘lib’ do JavaTV.

Aplicação Ginga-J

7 - Clique no botão ‘Ok’.

Aplicação Ginga-J

8 - Clique com o botão direito no projeto e

adicione um novo pacote com o nome

‘br.com.gingams’. ‘br.com.gingams’.

Aplicação Ginga-J

9 - No pacote criado, clique com o botão direito

e crie uma nova classe chamada

‘GingaMSXlet’. ‘GingaMSXlet’.

Aplicação Ginga-J

10 - Implemente a classe Xlet na nossa classe

criada.

public class GingaMSXlet implements Xlet {

}

Aplicação Ginga-J

11 - Clique no ‘problema’ para resolver a

dependência.

import javax.tv.xlet

Aplicação Ginga-J

12 - Clique no ‘problema’ para implementar os

métodos da Xlet.

Aplicação Ginga-J

13 - Método destroyXlet

public void destroyXlet(boolean arg0) throws XletStateChangeException {public void destroyXlet(boolean arg0) throws XletStateChangeException {

}

Aplicação Ginga-J

14 - Método initXlet

public void initXlet(XletContext arg0) throws XletStateChangeException {public void initXlet(XletContext arg0) throws XletStateChangeException {

}

Aplicação Ginga-J

15 - Método pauseXlet

public void pauseXlet() {public void pauseXlet() {

}

Aplicação Ginga-J

16 - Método startXlet

public void startXlet() throws XletStateChangeException {public void startXlet() throws XletStateChangeException {

}

Aplicação Ginga-J

17 - Declarar os objetos que serão utilizados.

private XletContext contexto;private XletContext contexto;

private HStaticText labelAcima;

private HStaticText labelMeio;

private HStaticText labelAbaixo;

private HScene scene;

Aplicação Ginga-J

18 - Clique no ‘problema’ para resolver as

dependências.

import org.havi.ui.HScene;

import org.havi.ui.HStaticText;

Aplicação Ginga-J

19 - Crie o método construtor da classe.

public GingaMSXlet(){public GingaMSXlet(){

//vazio

}

Aplicação Ginga-J

20 - Configure o método destroyXlet.

public void destroyXlet(boolean arg0) throws XletStateChangeException {public void destroyXlet(boolean arg0) throws XletStateChangeException {

this.contexto.notifyDestroyed();

}

Aplicação Ginga-J

21 - Adicione a notificação do contexto ao

método destroyXlet.

public void destroyXlet(boolean arg0) throws XletStateChangeException {

this.contexto.notifyDestroyed();

}

Aplicação Ginga-J

22 - Adicione a variável ‘contexto’ no método

initXlet.

public void initXlet(XletContext contexto) throws XletStateChangeException {

}

Aplicação Ginga-J

23 - Dentro do método initXlet adicione:

public void initXlet(XletContext contexto) throws XletStateChangeException {public void initXlet(XletContext contexto) throws XletStateChangeException {

this.contexto = contexto;

}

Aplicação Ginga-J

24 - Dentro do método initXlet adicione:


this.contexto = contexto;

this.scene = HSceneFactory.getInstance()

.getFullScreenScene(HScreen.getDefaultHScreen()

.getDefaultHGraphicsDevice());

}

Aplicação Ginga-J

25 - Clique no ‘problema’ para resolver a

dependência.

import org.havi.ui.HScreen;

import org.havi.ui.HSceneFactory;

Aplicação Ginga-J

26 - Ainda dentro do initXlet adicione:


...

this.labelAcima = new HStaticText("Grupo Ginga MS");

this.labelAcima.setFont(new Font("Arial", Font.BOLD, 90));

this.labelAcima.setBounds(10, 10, 700, 200);

this.labelAcima.setForeground(Color.white);

this.labelAcima.setBackground(new Color(0,100,0));

}

Aplicação Ginga-J

27 - Clique no ‘problema’ para tratar a

dependência.

import java.awt.Color;

import java.awt.Font;

Aplicação Ginga-J



...

this.labelMeio = new HStaticText("TV Digital se faz com Ginga!");

this.labelMeio.setFont(new Font("Arial", Font.BOLD, 40));

this.labelMeio.setBounds(10, 200, 700, 200);

this.labelMeio.setForeground(new Color(0,0,139));

this.labelMeio.setBackground(Color.white);

}

Aplicação Ginga-J



...

this.labelAbaixo = new HStaticText("www.gingams.com.br");

this.labelAbaixo.setFont(new Font("Arial", Font.BOLD, 60));

this.labelAbaixo.setBounds(10, 370, 700, 200);

this.labelAbaixo.setForeground(Color.yellow);

this.labelAbaixo.setBackground(new Color(50,153,204));

}

Aplicação Ginga-J



...

this.scene.add(this.labelAcima);

this.scene.add(this.labelMeio);

this.scene.add(this.labelAbaixo);

}

Aplicação Ginga-J

31 - No método do startXlet adicione:

public void startXlet() throws XletStateChangeException {public void startXlet() throws XletStateChangeException {

this.scene.setVisible(true);

}

Aplicação Ginga-J

32 - Clique no menu ‘Project’->‘Clean’ para

compilar nossa aplicação.

Aplicação Ginga-J

33 - Abra o promp de comando e inicie o

XletView.

java -jar xletview.jar

Aplicação Ginga-J

34 - Clique no menu ‘Applications->Manage

Applications’.

Aplicação Ginga-J

35 - Clique em ‘Defaul Group’ e no menu lateral

clique em ‘New Application’.

Aplicação Ginga-J

36 - Clique em ‘new app 1’ e no formulário

especifique os seguintes dados:

Name: GingaMS

Path: Pasta ‘bin’ do projeto Ginga-J

Xlet: br.com.gingams.GingaMSXlet

Aplicação Ginga-J

37 - Deverá ficar desta forma:

Aplicação Ginga-J

38 - Clique em ‘Save & Close’

Aplicação Ginga-J

39 - Volte no menu ‘Applications’ e clique na

aplicação ‘GingaMS’ criada.

Aplicação Ginga-J

40 - Se estiver tudo ok a aplicação irá rodar.

Conclusão.

• Mercado altamente promissor.

• Diversos nichos a serem explorados.

• Hora de se capacitar.• Hora de se capacitar.

• Levar a ideia para as universidades.

• Promover eventos.

• Se divertir.

Referências.

• Livro: Programando em NCL 3.0

• www.itvbr.com.br

• www.ginga.org.br• www.ginga.org.br

• www.gingancl.org.br

• www.grupogingagoias.com.br

• www.gingadf.com.br

• www.google.com.br

Dúvidas.

Obrigado

• Contato:

– www.diemesleno.com.br

– [email protected]

– @diemesleno– @diemesleno

Fim do 3 dia

GingaMS

Technology

Desenvolvimento para tv digital interativa [ dia 3]