Animations and Add-on Libraries

This page outlines support for animations and add-on libraries for the Chromium engine on BrightSign players.

Limit file directory depth to prevent issues caused by overly complex folder structures.

JavaScript Animations

Animations that use JavaScript timers, including the jQuery® .animate() library, do not make efficient use of GPU resources and are not accurate enough to achieve smooth animations. For this reason, we recommend using CSS animations whenever possible. The jQuery® Transit library uses CSS animations and provides an API similar to the .animate() library.

For best results when animating images, we recommend using images at their original size instead of scaling them first. For example, a 480x270 icon will rotate more smoothly if you use an image that is originally 480x270, rather than scaling down a 1280x720 image and then attempting to rotate it.

WebGL

BrightSign players support the OpenGL API for JavaScript (i.e. WebGL).

Textures will sometimes fail to load in WebGL because they exceed the maximum allowed image size on BrightSign Players. In these cases, you can use roVideoMode.SetImageSizeThreshold() BrightScript method to increase the maximum size for textures.

Vector Animations

The SVG protocol should be used to specify vector animations.

Canvas Animations

Bitmap animations display smoothly when they are 1/3 or less of a 1080p HTML canvas. Setting the canvas size to 720p allows for larger high-quality animations to occupy the screen.

Push Technology

The long polling technique has been tested and proven to work on BrightSign players.

The Websocket protocol is fully supported via the Node.js implementation on the BrightSign Chromium instance. In production environments, we recommend using HTTPS to initiate Websocket connections with a server (i.e using a WSS connection rather than a WS connection).

An example Websocket application is available on the BrightSign Github page.

File Storage

BrightSign players support several file storage/indexing technologies, including Web SQL, IndexedDB, the HTML Filesystem API, and the JavaScript storage class. The location and size of the web storage database should be set during initialization of the roHtmlWidget .

File Downloads

If you're using JavaScript to download files, we reccomend using the Fetch API and Node.js® File System module to perform downloads. See this page for more details

CSS Transforms

All CSS transforms should be specified as WebKit transforms. When performing a transform on a <div> or graphics element, you should not specify the transform in-line.

The following code shows an example of an effective CSS transform for a BrightSign player:

Example:

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

Documentation