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 https //github com/rstacruz/jquery transit 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 allowed image formats docid\ gzcaqroor8 zarnrepkn1 on brightsign players in these cases, you can use rovideomode docid\ qq734nqz0hcwni0unsdmp 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 docid\ vlskfvzequ04pd58rvxam 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 https //github com/brightsign/websocket test 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 rohtmlwidget docid\ xljq5 yhdma2ssmpzimtk 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 node js docid\ vlskfvzequ04pd58rvxam for more details css transforms all css transforms should be specified as webkit transforms when performing a transform on a 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>