Diseño de pantalla basada en escenas de la smarttv de samsung
Una aplicación Samsung SmartTV se ejecuta en un entorno de navegador que es similar a los navegadores web basados en PC, y pueden utilizar la mayoría de las técnicas de desarrollo web estándar. Un método de programación basado en escenas utiliza diferentes escenas para manejar eficientemente los eventos clave. Este método se acomoda a las características de una aplicación de TV que utiliza eventos KeyDown controlador-generado remotas.
Diferentes situaciones requieren diferentes soluciones. Por favor considerar este método como un tutorial que le ayudará a comprender la estructura de una aplicación Samsung SmartTV.
diseño basado en escenas-
Una aplicación Samsung SmartTV consiste en HTML, CSS y archivos javascript, al igual que una aplicación web. Por lo tanto, puede utilizar estilos y elementos HTML.
Mientras que un sitio web trata cada página HTML como una pantalla de la unidad, un Samsung SmartTV trata de la aplicación de cada elemento div como una escena unidad. Por lo tanto, una pantalla de aplicación de TV a menudo tiene escenas de varias capas.
El elemento div con ID “ESCENA1” es una de las capas de visualización utilizados. Tenga en cuenta que “ESCENA1” tiene un ancla. Este anclaje se enfoca cuando se activa “ESCENA1”. Un ancla enfocado es desencadenada por eventos clave de control remoto.
Asignación de un anclaje único para cada escena es siempre una buena práctica. Se hace cada vez más difícil de controlar toda una aplicación con una sola ancla como la estructura de la aplicación se vuelve más compleja de acontecimientos complicados clave de enfoque.
A diferencia de una aplicación web en un entorno de navegación en un PC, una aplicación Samsung SmartTV utiliza el mando a distancia como su interfaz de usuario principal.
El archivo CSS define dos estilos comunes e individuales de escena. También define los estilos de iconos de navegación para las teclas de control remoto, que son utilizados por los escenarios de todas las escenas.
scene.js // instancia de elementos necesarios de escena 1VAR Escena1 = {elem: null, null} handler: - // inicializar los elementos de anclaje y necesarias por escena 1Scene1.init = function () {this.elem = jQuery ( `# ESCENA1 `) -this.handler = this.elem.find (` a `) - Scene1.init = function () {} -} - Scene1.show = function () {this.elem.show () -} - Scene1. Ocultar = function () {this.elem.hide) (-} - Scene1.focus = function () {this.handler.focus () -} - Scene1.load = function () {this.init () -} - Scene1.unload = function () {this.hide () -} -El scene.js necesita definir funciones a ser utilizados por el escenario de cada escena. El código de ejemplo utiliza las funciones más básicas, incluyendo la carga, el enfoque, exposición, y descargar.
Scene1.load () - Scene1.show () - Scene1.focus () -
En primer lugar, utilice la función de carga para activar escena 1.
Scene1.load = function () {alert ( `carga Scene1`) - this.init () -} -La función Scene1.load llama a la función Scene1.init para inicializar los elementos necesarios. Cuando se haya completado, llamar a la función Scene.show para mostrar la escena.
Scene1.show = function () {alert ( `Escena1 espectáculo`) - this.elem.show () -} -El código anterior mostrará escena 1. La función Scene1.show se separó intencionalmente de la función de carga de modo que pudiera ser utilizado independientemente para cambiar entre escenas. Al igual que la función de presentación, la función de enfoque también es mejor cuando se utiliza de forma independiente.
La función de presentación se llama antes de la función de enfoque. Scene1.elem tiene “ninguno” como su valor de visualización antes de la función this.show se llama. Debido Scene1.handler es su subelemento, la función Scene1.focus llama antes de la función de presentación no es capaz de mantener la atención de la escena 1.
Scene1.unload = function () {this.hide () -} -La función se llama Scene1.unload para desactivar escena 1 y volver a la escena del nivel superior o activar otra subescena. Mientras que el Scene1.unload sólo llama Scene1.hide a su vez, el trabajo adicional puede ser necesaria, además de ocultarlo, dependiendo de la escena del escenario 1. Además, puede haber diferentes eventos descargar archivo para activar otro subescena y volviendo a la escena de alto nivel.
Video: Presentación Samsung SmartTV SUHD 2015
Cambiar de una escena
Cuando el archivo index.html se carga en el navegador interno del SmartTV, la primera escena se mostrará en la pantalla del televisor de acuerdo con el escenario de aplicación. La escena activada dominará el foco. Si un usuario mueve el enfoque y selecciona otra escena, la aplicación activa la nueva escena y desactiva la escena anterior. La escena está activada aparece y la escena desactivado está oculto.
Video: Como Ver la pantalla de tu Smartphone Android en tu Televisor SMART TV Sin cables Via WIFI
Muchos otros métodos se pueden utilizar para cambiar de escena en un SmartTV, tales como el uso de capas o subcapas dinámicos de estilo pop-up. Tenga cuidado de no abrir demasiadas capacidad innecesaria conserva Escenas- limitado memoria física de un televisor.
Cuando se cambia una escena, el enfoque también se debe mover. Tenga cuidado de no perder el foco por el cambio a ninguna escena existente, o para una escena de la cual su elemento padre está oculto.
El siguiente ejemplo muestra la conmutación entre la GalleryScene y su subcapa, SurveyScene.
gallery.jsGalleryScene.load = function () {// GalleryScene} -GalleryScene.keyDown = function () {var keyCode = event.keyCode-interruptor (keyCode) {// Activar SurveyScenecase tvKey.KEY_ENTER: SurveyScene.load () - SurveyScene .show () - SurveyScene.focus () - break -}} -Al pulsar la tecla OK mientras que el GalleryScene se activa, se activará la SurveyScene. A continuación, el SurveyScene se mostrará en la pantalla y el ancla SmartTV miembro del SurveyScene estará enfocada.
Sin embargo, la carga de la GalleryScene nivel superior para volver a la GalleryScene no es una buena práctica. El GalleryScene sólo estaba cubierto por el nivel inferior SurveyScene. Sólo tiene que transferir el foco de nuevo a la GalleryScene. Además, si el SurveyScene es compartida por otras escenas que el GalleryScene, controlando directamente su escena de nivel superior puede complicar el manejo de eventos.
Video: pantalla con rayas y franjas de colores falla común en pantallas led
La transferencia de datos entre las escenas
La función de devolución de llamada se puede utilizar para compartir fácilmente los datos y se centran relacionados con la información mientras se cambia escenas.
GalleryScene.keyDown = function () {var keyCode = event.keyCode-interruptor (keyCode) {case tvKey.KEY_ENTER: SurveryScene.load ({onunload: function () {GalleryScene.focus () -}}) - SurveyScene.show ( ) -SurveyScene.focus () - break -}} - SurveyScene.load = function (devolución de llamada) {this.callback = jQuery.extend ({}, {onunload: function () {}}, de devolución de llamada) -} - SurveyScene. descargar = function () {this.callback.onunload () -} -En el ejemplo, la SurveyScene se carga con una función de devolución de llamada. A continuación, puede utilizar la función de llamada onunload para devolver el foco a su GalleryScene de nivel superior. Esta práctica es uno de los métodos de manipulación segura de mover el foco: función vital de una aplicación de televisión es que sus excepciones deben ser manejados adecuadamente.