Desenvolvimento para tv digital interativa [ dia 3]

GingaMS
Dia 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.
• 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.
• 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.
• 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.

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>

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

</regionBase>


4 - Ainda dentro do cabeçalho, defina um 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" />


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


2 - Dentro de Ginga-NCL crie outro diretório
chamado ‘media’ e importe as imagens para
dentro.


3 - Ainda dentro de Ginga-NCL crie um arquivo
do tipo ‘NCL Document’ e digite ‘main’ para o
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>
<descriptor id="dsButton" region="rgButton" focusIndex="0"/>
</descriptorBase>


6 - Abra um connectorBase

<connectorBase>


7 - Adicione um causalConnector

<causalConnector id="onBeginStart">
<simpleCondition role="onBegin"/>
<simpleAction role="start"/>
</causalConnector>


8 - Adicione outro causalConnector

<causalConnector id="onEndStop">
<simpleCondition role="onEnd"/>
<simpleAction role="stop" max="unbounded"/>
</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="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="start" component="clicks"/>
</link>


25 - Exibindo o personagem após 6 seg.
<bind role="onBegin" component="timer" interface="area01"/>
<bind role="start" component="button"/>
</link>


26 - Adicionando a interface 2.
</link>


</link>


29 - Parando o personagem após 6 seg.
<link xconnector="onEndStop">
<bind role="onEnd" component="timer" interface="area01"/>
<bind role="stop" component="button"/>
</link>


30 - Adicionando interface 2.
</link>


</link>


33 - Aplicando as regras a cada componente.
<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"/>
<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"/>
<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
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 = {
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',
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 = '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?

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

Aplicação Ginga-J

9 - No pacote criado, clique com o botão direito
e crie uma nova classe chamada
‘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 {

}

Aplicação Ginga-J

14 - Método initXlet

public void initXlet(XletContext arg0) throws XletStateChangeException {

}

Aplicação Ginga-J

15 - Método pauseXlet

public void pauseXlet() {

}

Aplicação Ginga-J

16 - Método startXlet

public void startXlet() throws XletStateChangeException {

}

Aplicação Ginga-J

17 - Declarar os objetos que serão utilizados.

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(){
//vazio
}

Aplicação Ginga-J

20 - Configure o método destroyXlet.


this.contexto.notifyDestroyed();

}

Aplicação Ginga-J

21 - Adicione a notificação do contexto ao
método destroyXlet.


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:


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 {

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.
• 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.gingancl.org.br
• www.grupogingagoias.com.br
• www.gingadf.com.br
• www.google.com.br

Obrigado
• Contato:
– www.diemesleno.com.br
– diemesleno@gmail.com
– @diemesleno

Desenvolvimento para tv digital interativa [ dia 3]

Recomendados

Recomendados

Mais conteúdo relacionado

Semelhante a Desenvolvimento para tv digital interativa [ dia 3]

Semelhante a Desenvolvimento para tv digital interativa [ dia 3] (20)

Mais de Diemesleno Souza Carvalho

Mais de Diemesleno Souza Carvalho (18)

Último

Último (6)

Desenvolvimento para tv digital interativa [ dia 3]