Design display cenas baseadas do smarttv samsung

A aplicação Samsung SmartTV é executado em um ambiente de navegador que é semelhante ao navegadores baseados em PC, e pode usar a maioria das técnicas de desenvolvimento web padrão. Um método de programação baseada em cenas usa cenas diferentes para lidar eficientemente com os principais eventos. Este método acomoda as características de um aplicativo de TV que usa eventos KeyDown remotas geradas pela controladora.

Situações diferentes exigem soluções diferentes. Por favor, considere este método como um tutorial que vai ajudar você a entender a estrutura de um aplicativo Samsung SmartTV.

design baseado cenas

A aplicação Samsung SmartTV consiste em HTML, CSS e arquivos javascript, assim como uma aplicação web. Portanto, você pode usar estilos e elementos HTML.

Video: 2016 Samsung SUHD TV Quantum dot display (Design)

Enquanto um site trata cada página HTML como um visor da unidade, um Samsung SmartTV trata de aplicação de cada elemento div como uma cena de unidade. Portanto, uma tela de aplicativo de TV muitas vezes tem cenas multi-camadas.

O elemento div com ID “scene1” é uma das camadas de apresentação utilizados. Note-se que “scene1” tem uma âncora. Esta âncora é focado quando “scene1” é ativado. Uma âncora focado é desencadeada por eventos-chave de controle remoto.

Atribuindo uma âncora exclusivo para cada cena é sempre uma boa prática. Torna-se cada vez mais difícil de controlar um aplicativo inteiro com apenas uma âncora como a estrutura da aplicação torna-se mais complexo com eventos-chave de foco complicados.

Ao contrário de uma aplicação web em um ambiente de navegação em um PC, um aplicativo Samsung SmartTV usa o controle remoto como sua interface de usuário principal.

O arquivo CSS define ambos os estilos de cena comuns e individuais. Ele também define os estilos ícone de navegação para teclas do controle remoto, que são usados ​​por cenários de todas as cenas.

scene.js // instância de elementos necessários por cena 1VAR scene1 = {elem: null, manipulador: null} - // inicializar elementos e âncora necessárias pela cena 1Scene1.init = function () {this.elem = jQuery ( `# scene1 `) = -this.handler this.elem.find (` a `) - Scene1.init = função () {} -} - Scene1.show = função () {this.elem.show () -} - scene1. ocultar = função () {this.elem.hide () -} - Scene1.focus = função () {this.handler.focus () -} - Scene1.load = função () {this.init () -} - Scene1.unload = function () {this.hide () -} -

O scene.js precisa definir funções para ser usado por cenário de cada cena. O código de exemplo usa as funções mais básicas, incluindo carga, foco, show, e descarga.

Scene1.load () - Scene1.show () - Scene1.focus () -

Primeiro, use a função de carga para ativar cena 1.

Scene1.load = function () {alert ( `load scene1`) - this.init () -} -

A função Scene1.load chama a função Scene1.init para inicializar elementos necessários. Quando estiver completo, chame a função Scene.show para exibir a cena.

Scene1.show = function () {alert ( `scene1 show`) - this.elem.show () -} -

Video: 5 Ways to Screen Mirror Android Phone to TV for Free

O código anterior irá exibir cena 1. A função Scene1.show foi intencionalmente separada da função de carga de modo que ele pode ser usado de forma independente para alternar entre as cenas. Como a função show, a função de foco também é melhor quando usado de forma independente.

A função show é chamado antes a função de foco. Scene1.elem tem “nenhum” como seu valor de exibição antes da função this.show é chamado. Porque Scene1.handler é o seu subelemento, a função Scene1.focus chamado antes a função show é incapaz de manter o foco para a cena 1.

Scene1.unload = function () {this.hide () -} -

A função Scene1.unload é chamado para desativar cena 1 e voltar à cena nível superior ou ativar outro subscene. Enquanto o Scene1.unload só chama Scene1.hide por sua vez, o trabalho adicional pode ser necessária, além de escondê-lo, dependendo do cenário cena 1 do. Além disso, pode haver diferentes eventos descarregamento para ativar outra subscene e voltar para a cena de nível superior.

Alternando entre cenas

Quando o arquivo index.html é carregada no navegador interno do SmartTV, a primeira cena será exibida na tela da TV de acordo com o cenário de aplicação. A cena activado vai dominar o foco. Se um usuário move o foco e seleciona outra cena, o aplicativo ativa a nova cena e desativa a cena anterior. A cena ativada é exibido ea cena desativado está escondido.

Muitos outros métodos podem ser usados ​​para alternar cenas em uma SmartTV, como o uso de camadas dinâmicas ou subcamadas estilo pop-up. Tenha cuidado para não abrir demais conserve scenes- capacidade de memória física desnecessária limitada de uma TV.

Quando uma cena é ligado, o foco também deve ser movido. Tenha cuidado para não perder o foco mudando para nenhuma cena existente ou a uma cena da qual seu elemento pai está escondido.

O seguinte exemplo mostra a comutação entre o GalleryScene e a sua sub-camada, SurveyScene.

gallery.jsGalleryScene.load = function () {// GalleryScene} -GalleryScene.keyDown = function () {var keyCode = event.keyCode-chave (keyCode) {// Ativar SurveyScenecase tvKey.KEY_ENTER: SurveyScene.load () - SurveyScene .mostrar () - SurveyScene.focus () - break -}} -

Pressionando a tecla OK enquanto o GalleryScene é ativado irá ativar o SurveyScene. Em seguida, a SurveyScene será exibido na tela do SmartTV e âncora membro do SurveyScene será focado.

No entanto, o carregamento do GalleryScene nível superior para voltar ao GalleryScene não é uma boa prática. O GalleryScene foi apenas coberto com o nível inferior SurveyScene. Basta transferir o foco volta para o GalleryScene. Além disso, se o SurveyScene é compartilhada por outras cenas que o GalleryScene, controlando diretamente sua cena de nível superior pode complicar o tratamento de eventos.

A transferência de dados entre as cenas

A função de retorno de chamada pode ser usado para compartilhar dados facilmente e focar-informações relacionadas ao mudar cenas.

GalleryScene.keyDown = função () {var keyCode = event.keyCode-interruptor (keyCode) {case tvKey.KEY_ENTER: SurveryScene.load ({onunload: função () {GalleryScene.focus () -}}) - SurveyScene.show ( ) -SurveyScene.focus () - pausa -}} - SurveyScene.load = função (de retorno) {this.callback = jQuery.extend ({}, {onunload: função () {}}, chamada de retorno) -} - SurveyScene. descarregar = função () {this.callback.onunload () -} -

No exemplo, o SurveyScene é carregado com uma função de retorno. Ele pode, então, usar a função de chamada onunload para retornar o foco para sua GalleryScene de nível superior. Esta prática é um dos métodos de manuseio seguro em mover o foco: a função vital de um aplicativo de TV é que suas exceções devem ser devidamente tratada.