Júlia Varanda da Silvadebora/fsmm/pdf/TVDigital.pdf · Expressa quais são os elementos do documento, como e onde estes serão apresentados e como se relacionam entre si. Júlia

Júlia Varanda da Silva

NCL - Nested Context Language

Estrutura do documento NCL

Rodando uma aplicação NCL

Aplicação: O Primeiro João

Navegação pelos elementos

Regras e switches

Assessment Statement

Animações com NCL

Lua

Objetos NCLua

Aplicação: Contador de cliques

Bibliografia

Aplicações para a TVDIJúlia Varanda da Silva 2

Expressa quais são os elementos dodocumento, como e onde estes serãoapresentados e como se relacionam entre si.



<?xml version=‘1.0’ encoding=‘ISO-8859-1’?><ncl id=‘meuDocumento’>

<head>

</head>

<body>

</body>

</ncl>


<head>

<regionBase>

</regionBase>

<descriptorBase>

</descriptorBase>

</head>

<connectorBase>

</connectorBase>

Definem onde

Definem como

Definem condições e ações


<body>

<port/>

<media/>

</body>

<link>

</link>

Quem começa

Quem é

Relação


A

Requisitos:◦ Se cadastrar no Portal do Software Público Brasileiro

www.softwarepublico.gov.br

◦ Entrar na comunidade Ginga

◦ Fazer o download da máquina de apresentação de aplicações escritas em NCL (Ginga-NCL).

Pré-requisito:◦ Software VMWare Player


http://www.softwarepublico.gov.br/

Abrir a máquina virtual no VMWare Player


Enviar a pasta com o documento NCL e as mídias para a máquina virtual.

Se conectar com a máquina virtual através do ssh e rodar a aplicação utilizando o comando:

/misc/launcher.sh meuPrograma.ncl

na pasta onde se encontra o documento NCL.


A aplicação utiliza uma animação do artistaAndré Castelão e foi desenvolvida peloLaboratório Telemídia da PUC-Rio.

Foi retirada do repositório Clube NCL◦ clube.ncl.org.br










<regionBase>

<region id="backgroundReg" width="100%" height="100%" zIndex="1"/>

<region id="screenReg" width="100%" height="100%“ zIndex="2">

<region id="frameReg" left="5%" top="6.7%" width="18.5%"

height="18.5%" zIndex="3"/>

</region>

</regionBase>

<descriptorBase>

<descriptor id="backgroundDesc" region="backgroundReg"/>

<descriptor id="screenDesc" region="screenReg"/>

<descriptor id="photoDesc" region="frameReg" explicitDur="5s"/>

<descriptor id="audioDesc"/>

<descriptor id="dribleDesc" region="frameReg"/>

</descriptorBase>


<connectorBase>

<importBase documentURI="../causalConnBase.ncl" alias="conEx"/>

</connectorBase>

<link id="lMusic" xconnector="conEx#onBeginStartDelay">

...

</link>

causalConnBase.ncl<causalConnector id="onBeginStartDelay">

<connectorParam name="delay"/>

<simpleCondition role="onBegin"/>

<simpleAction role="start" delay="$delay" max="unbounded"

qualifier="par"/>

</causalConnector>

...


<port id="entry" component="animation"/>

<media id="animation" src="../media/animGar.mp4" descriptor="screenDesc">

<area id="segDrible" begin="11.5s"/>

<area id="segPhoto" begin="41s"/>

</media>


animation

segDrible

segPhoto

<link id="lMusic" xconnector="conEx#onBeginStartDelay">

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

<bind role="start" component="background">

<bindParam name="delay" value="5s"/>

</bind>

<bind role="start" component="choro">


</bind>

</link>


animation

onBegin

choro

background

<link id="lDrible" xconnector="conEx#onBeginStart">

<bind role="onBegin" component="animation" interface="segDrible"/>

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

</link>

<link id="lPhoto" xconnector="conEx#onBeginStart">

<bind role="onBegin" component="animation" interface="segPhoto"/>

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

</link>


animationonBegin start

onBegin start

drible

photo

Exibir moldura no elemento que está em foco◦ focusBorderColor

Colocar valor de foco no elemento◦ focusIndex

Alterar cor da moldura ao selecionar elemento◦ selBorderColor

Decidir próximo elemento para receber o foco◦ moveLeft e moveRight


Os parâmetros devem ser colocados no descritor

<descriptor id='dp1' region='rg1' focusIndex='1'

focusBorderColor='white' selBorderColor='blue'

moveLeft='2' moveRight='2'/>

<descriptor id='dp2' region='rg2' focusIndex='2'

focusBorderColor='white' selBorderColor='blue'

moveLeft='1' moveRight='1'/>


Utilizados para decidir qual elemento, pertencente a um conjunto de elementos, sofrerá uma ação.

As regras fazem referência a um objeto de mídia do tipo ‘application/x-ncl-settings’◦ Utilizado para manipular propriedades globais e

variáveis de ambiente.


<head>

<ruleBase>

<rule id='botVerm' var='service.currentFocus' comparator='eq'

value='1'/>

<rule id='botVerde' var='service.currentFocus' comparator='eq'

value='2'/>

</ruleBase>

...

</head>

<body>

<media id='corSelecionada' type='application/x-ncl-settings'>

<property name='service.currentFocus'/>

</media>

...

</body>

Operadores de comparação◦ eq, ne, gt, lt, gte e lte


<body>

<switch id='corSwitch'>

<switchPort id='port'>

<mapping component='cor1'/>

<mapping component='cor2'/>

</switchPort>

<bindRule rule='botVerm' constituent='cor1'/>

<bindRule rule='botVerde' constituent='cor2'/>

<media id='cor1' src='midias/t1.png' descriptor='dpCor'/>

<media id='cor2' src='midias/t2.png' descriptor='dpCor'/>

</switch>

...

</body>


Um tipo de ação utilizado pelo conector paratestar o estado de apresentação de umevento, atributos ou propriedades de umamídia

É composto por um <attributeAssessment> epor um <valueAssesment> ou outro<attributeAssessment>◦ attribute: atributo que terá seu valor testado

◦ value: valor a ser testado



value attributeou

attribute

testado a

eventType◦ presentation, selection ou attribution

attributeType◦ state, occurrences ou repetitions

<causalConnector id=‘onKeySelectionTestStart’>

<connectorParam name=‘vKey’/>

<connectorParam name=‘vState’/>

<compoundCondition operator=‘and’>

<simpleCondition role=‘onSelection’ key=‘$vKey’/>

<assessmentStatement comparator=‘eq’>

<attributeAssessment role=‘test’ eventType=‘presentation’

attributeType=‘state’/>

<valueAssessment value=‘$vState’/>

</assessmentStatement>

</compoundCondition>

<simpleAction role=‘start’/>

</causalConnector>

<bind role=‘test’ component=‘interatividade’>

<bindParam name=‘vState’ value=‘occurring’/>

</bind>


Efeitos de transição<transitionBase>

<transition id="trans1" type="fade" dur="2s"/>

<transition id="trans2" type="barWipe" dur="1s"/>

</transitionBase>

As transições devem ser associadas ao elemento <descriptor>

<descriptor id="dribleDesc" region="frameReg" transIn="trans1"

transOut="trans2“/>

Mais tipos de transição em:◦ http://www.ncl.org.br/NCL3.0/index.html#NCL%203.0%20Tra

nsition





Deslocamento espacial<media id="photo" src="../media/photo.png" descriptor="photoDesc">

<property name="top"/>

</media>

<link id="lPhoto" xconnector="conEx#onBeginStartSetDelay">

<bind role="onBegin" component="animation" interface="segPhoto"/>

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

<bind role="set" component="photo" interface="top">

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


<bindParam name="duration" value="3s"/>

</bind>

</link>


Deslocamento espacial<causalConnector id="onBeginStartSetDelay">

<connectorParam name="var"/>

<connectorParam name="delay"/>

<connectorParam name="duration"/>

<simpleCondition role="onBegin"/>

<compoundAction operator="seq">

<simpleAction role="start"/>

<simpleAction role="set" value="$var" delay="$delay"

duration="$duration"/>

</compoundAction>

</causalConnector>


Atributos do conector no elemento <simpleAction>

◦ delay tempo entre ativação do elo e disparo do evento

◦ value valor a ser atribuído (só se eventType = ‘attribution’)

◦ repeat quantidade de vezes em que a ação deve ocorrer (só se

eventType = ‘presentation’ e actionType = ‘start’)


Atributos do conector no elemento <simpleAction>

◦ repeatDelay tempo entre cada repetição da ação (só se repeat > 0)

◦ duration tempo de duração de uma atribuição

◦ by Incremento a cada passo de atribuição (só se duration

> 0)


Normalmente utilizada com o objetivo deestender aplicações (através de scripts)

Possui alto grau de portabilidade, podendoser executada em diversas plataformas

É simples – implementação leve

É livre!


Mais informações em:

◦ http://www.lua.org/portugues.html

◦ http://www.lua.org/manual/5.1/pt/


http://www.lua.org/portugues.html









http://www.lua.org/manual/5.1/pt/











Para se adaptar ao ambiente NCL, a linguagemLua foi estendida dando origem aos objetosNCLua

Módulos disponíveis para scripts NCLua:◦ event◦ canvas◦ settings: permite que objetos NCLua tenham acesso às

variáveis do tipo ‘application/x-ncl-settings’◦ persistent: exporta uma tabela com variáveis entre

execução de objetos imperativos

Mais informações no capítulo 10 da ABNT, NBR15606-2 [2007]


Permite a comunicação entre objetos NCLua eo documento NCL

Toda a comunicação se dá através deeventos, ora criados pelo documento, orapelo NCLua

Logo, o NCLua deve possuir pelo menos umafunção de tratamento e esta deve serregistrada através da função event.register


Código Lua...

function tratador (evt)

...

end

event.register (tratador)

Eventos são representados por tabelas Luaevt = {

class = ‘key’,

type = ‘press’,

key = ‘RED’,

}


Registro da função que trata um evento

Código de inicialização

A função event.post serve para o NCLua postareventos ao documento NCL

event = {class = ‘ncl’, type = ‘presentation’, action=‘stop’}

Classes de evento:◦ ncl: comunicação entre o NCLua e o documento◦ key: utilização do controle remoto pelo usuário◦ tcp: acesso ao canal de retorno◦ edit: disparos de comandos de edição ao vivo◦ sms: envio e recebimento de sms em dispositivos

móveis◦ si: acesso ao fluxo de transporte◦ user: permite a criação de eventos próprios


Classe de evento ‘ncl’◦ Apresenta os seguintes tipos:

presentation: está associada à apresentação deâncoras de conteúdo

event = {class=‘ncl’, type=‘presentation’, label=[string],

action=[string]}

Onde, ‘label’ deve receber o nome da âncora deconteúdo que foi definida no NCLua e ‘action’ podeser: start, stop, abort, pause e resume.


Classe de evento ‘ncl’◦ Apresenta os seguintes tipos:

attribution: está associada às propriedades do objetoNCLua

event = {class=‘ncl’, type=‘attribution’, name=[string],

action=[string], value=[string]}

Onde ‘name’ deve receber o nome da propriedade quefoi definida no NCLua e ‘value’ o novo valor que seráatribuído à propriedade


Classe de evento ‘key’◦ Apresenta os seguintes tipos:

press: a tecla foi pressionada

release: a tecla foi solta

event = {class=‘key’, type=‘press’, key=[string]}

event = {class=‘key’, type=‘release’, key=[string]}

Onde ‘key’ deve receber o nome da tecla que foipressionada ou solta.


Permite que objetos NCLua desenhem objetosgráficos em sua região

Ao iniciar um objeto NCLua, a variável global‘canvas’ deste objeto aponta para a região doNCLua

É possível desenhar primitivas gráficas,textos e imagens


Também é possível instanciar novos canvas erealizar a composição destes com o canvas doobjeto

Algumas funções:◦ canvas: new(...) -> cria um novo canvas

◦ canvas:attrSize() -> retorna as dimensões do canvas

◦ canvas:drawLine(x1, y1, x2, y2) -> desenha umalinha

◦ canvas:drawRect(mode, x, y, width, height) ->desenha um quadrado


local regLarg, regAlt = canvas:attrSize()

local img = canvas:new(‘figura.png’)

local imgLarg, imgAlt = img:attrSize();

local imgX = (regLar - imgLarg) / 2

local imgY = (regAlt - imgAlt) / 2

canvas:compose(imgX, imgY, img)

local txt = ‘Texto da legenda’

local txtLarg, txtAlt = canvas:measureText(txt)

local txtX = (regLarg - txtLarg) / 2

local txtY = imgY + imgAlt + 2

canvas:attrColor(‘blue’)

canvas:drawText(txtX, txtY, txt)

canvas:flush()


Só após chamar esta função é feito o desenho

Faz a composição do canvas criado com o

canvas global do objeto

<body>

...

<media id="timer">

...

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

</media>

<media id="clicks" src="clicks.lua">

<property name="inc"/>

<property name="counter"/>

</media>

<link xconnector="onBeginStart">

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

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

</link>


...

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

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

</body>


local counter = 0

local counterEvt = {class = 'ncl‘, type = 'attribution‘, name = 'counter‘,}

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

event.post {class = 'ncl‘, type = 'attribution‘, name = 'inc‘, action = 'stop‘, value = counter,}

counterEvt.value = counter

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

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

end

event.register(handler)


Programando em NCL 3.0 - Luiz Fernando Gomes Soares e Simone Diniz Junqueira Barbosa – Editora Elsevier

http://www.lua.inf.puc-rio.br/~francisco/nclua/tutorial/index.html

clube.ncl.org.br






http://www.clube.ncl.org.br/


Documents

Júlia Varanda da Silvadebora/fsmm/pdf/TVDigital.pdf · Expressa quais são os elementos do documento, como e onde estes serão apresentados e como se relacionam entre si. Júlia