Animaciones y bibliotecas complementarias
Esta página describe la compatibilidad con animaciones y bibliotecas complementarias para el motor Chromium en reproductores BrightSign.
Limite la profundidad del directorio de archivos para evitar problemas causados por estructuras de carpetas excesivamente complejas.
Animaciones JavaScript
Las animaciones que utilizan temporizadores JavaScript, incluida la biblioteca jQuery® .animate(), no hacen un uso eficiente de los recursos de GPU y no son lo suficientemente precisas para lograr animaciones fluidas. Por esta razón, recomendamos utilizar animaciones CSS siempre que sea posible. La biblioteca Transit de jQuery® utiliza animaciones CSS y proporciona una API similar a la biblioteca .animate().
Para obtener los mejores resultados al animar imágenes, recomendamos utilizar imágenes en su tamaño original en lugar de escalarlas primero. Por ejemplo, un icono de 480x270 rotará de forma más fluida si utiliza una imagen que originalmente sea de 480x270, en lugar de reducir una imagen de 1280x720 y luego intentar rotarla.
WebGL
Los reproductores BrightSign son compatibles con la API OpenGL para JavaScript (es decir, WebGL).
A veces, las texturas no se cargan en WebGL porque exceden el tamaño de imagen permitido en los reproductores BrightSign. En estos casos, puede utilizar el método BrightScript roVideoMode.SetImageSizeThreshold() para aumentar el tamaño máximo de las texturas.
Animaciones vectoriales
El protocolo SVG debe utilizarse para especificar animaciones vectoriales.
Animaciones Canvas
Las animaciones bitmap se muestran fluidamente cuando ocupan 1/3 o menos de un canvas HTML de 1080p. Establecer el tamaño del canvas en 720p permite que animaciones grandes de alta calidad ocupen la pantalla.
Tecnología Push
La técnica de long polling ha sido probada y ha demostrado funcionar en reproductores BrightSign.
El protocolo Websocket es totalmente compatible mediante la implementación de Node.jsNode.js en la instancia Chromium de BrightSign. En entornos de producción, recomendamos utilizar HTTPS para iniciar conexiones Websocket con un servidor (es decir, utilizar una conexión WSS en lugar de una conexión WS).
Hay disponible una aplicación Websocket de ejemplo en la página de BrightSign Github.
Almacenamiento de archivos
Los reproductores BrightSign admiten varias tecnologías de almacenamiento/indexación de archivos, incluidas Web SQL, IndexedDB, la API HTML Filesystem y la clase JavaScript almacenamiento . La ubicación y el tamaño de la base de datos de almacenamiento web deben establecerse durante la inicialización de roHtmlWidget.
Descargas de archivos
Si utiliza JavaScript para descargar archivos, recomendamos usar la Fetch API y el módulo Node.js® File System para realizar las descargas. Consulte esta páginaesta página para obtener más detalles
Transformaciones CSS
Todas las transformaciones CSS deben especificarse como transformaciones WebKit. Al realizar una transformación en un elemento o gráfico, no debe especificar la transformación en línea.
El siguiente código muestra un ejemplo de una transformación CSS eficaz para un reproductor BrightSign:
Ejemplo:
<style>
.flipme{
-webkit-animation-name:flipon;
-webkit-animation-fill-mode:forwards;
-webkit-animation-iteration-count:1;
-webkit-animation-duration:2s;
}
@-webkit-keyframes flipon
{
0% {-webkit-transform:rotateY(0deg);}
30% {-webkit-transform:rotateY(-90deg);}
100% {-webkit-transform: rotateY(360deg);}
}
</style>