This page covers the content requirements, abilities, and restrictions of the HTML rendering engine on BrightSign players.
The following are content restrictions associated with HTML5 pages:
BrightSign players are not intended for use as general-purpose web browsers. It is best to think of BrightSign units as HTML5 players with interactive capabilities, not web-surfing tools: Each page should be thoroughly tested before being used as digital signage.
BrightSign players do not support Flash content. Any HTML5 pages that have embedded flash content will not display correctly. Most Flash authoring applications, including the Adobe Creative Suite, have tools that allow you to export flash content as HTML5.
Multiple Video Elements
By default, XT, 4K, and XD players support a maximum of two active
<video> elements at any time (HD/LS423 models only support one). You can have more than this amount of
<video> elements on a page as long as additional
<video> elements have their
src attribute set to an empty string. By modifying the
src string, you can enable and disable
<video> elements on the page.
You can enable Mosiac Mode (using the
BrightSign players do not support videos that are less than 64 pixels in width or height. However, a video can be scaled down beyond this limit by making the
<video> element smaller than 64x64. To get the desired downscaling behavior, ensure that the
<video> element does not have the
XTx43, 4Kx42, and XDx33 models can display HTML pages using 4K video modes (3840x2160 or 4096x2160), but these players do not support a native 4K HTML graphics plane: Pages must be specified as 1920x1080 (or 2048x1080 for DCI 4K); they can then be upscaled to 4K.
Images larger than 2048x1280x32bpp (or 4096x2160x32bpp for XT, 4K, and XDx33 players) will not be displayed by default. If a 4K video mode is used, the player will upscale images from HD resolution accordingly. This default limit can be increased in BrightScript using the roVideoMode.SetImageSizeThreshold() method.
Without altering the default maximum resolution, you can increase the maximum width of images by sacrificing height (e.g. using a 4096x640x32bpp image on non-4K players is allowed). You can also increase the maximum width/height by reducing the bpp value (e.g. using a 4096x1280x16bpp on non-4K players is allowed).
Memory and Performance
The amount of memory available for HTML applications varies by model:
XTx43: 512MB for graphics; 512MB for JavaSript
- The memory available for graphics can be reduced by a number of factors, including the number of CSS layers, the complexity of animations, and the use of WebGL.
Often, the best way to improve graphics performance is to ensure that images are scaled to the desired output resoultion before they are rendered in HTML.
Use the Chromium Web Inspector to determine the amount of resources being used by a webpage.
If a font file is not included and referenced by the HTML page, text will be rendered using a default system font. While functional, the default font has little aesthetic appeal, so we recommend including font files for most digital-signage applications. Supported font types include TrueType Font files (.ttf) and Web Open Font files (.woff, .woff2).
Creating HTML5 Pages
Follow these steps when creating HTML5 pages:
- Make sure the HTML5 page has the same aspect ratio as your signage display. If you are using HTML5 content in a BrightAuthor zone that is smaller than the screen, fit the page to the same aspect ratio as the zone.
- Use a master Div aligned to 0,0 when building an HTML page. This will ensure correct alignment.
- When creating an HTML5 site, make sure that all webpage assets (image files, video files, etc.) are contained within the same folder on your local disk. This folder is a “site folder,” meaning that all assets in this folder and its subfolders will be used in the production of the webpage. If these assets are not in the folder, they will not display when the project is published.
- You can test the layout and appearance of an HTML5 page locally by opening it with Google Chrome, which has similar rendering capabilites to BrightSign players.
- If you want to publish resource-intensive presentations (e.g.
<video>elements or multiple transforms) using HTML5, we recommend using a Class 10 (10Mb/s) SD card.
The BrightSign implementation of the Chromium engine includes several platform-specific extensions. Extensions for <video> elements are covered on the HTML5 Video page.
GPU rasterization is enabled by default in firmware versions 6.2.x and later. To disable GPU rasterization, call
ForceGPURasterization(false) on the roHtmlWidget instance used to display the page.
To enable GPU rasterization in earlier versions of firmware, do one of the following:
- HTML: Add the following meta tag to your HTML page(s):
<meta name="viewport" content="width=device-width, minimum-scale=1.0">
- BrightScript: Call
ForceGPURasterization(true)on the roHtmlWidget instance used to display the page.
The rendering engine may not enable GPU rasterization if it determines that the page is not compatible.
Optimized Image Rendering
image-rendering CSS property can be assigned the
optimizeSpeedBS value. Using this value ensures that Chromium uses lower-quality but faster bilinear filtering when scaling images to 50% or less. We recommend using this value with pages that scale a lot of images at runtime.
Renderer Versions and Support
The following table describes which version of web-rendering engine is used in each version of BrightSign firmware:
|Rendering Engine||Version||BrightSign FW Versions|
|WebKit||--||5.1.x, 5.0.x, 4.8.x, 4.7.x|
You can use this page to determine if specific function calls and extensions are supported in a corresponding version of Chrome.
Animations and Add-on Libraries
This section outlines support for animations and add-on libraries for the Chromium engine on BrightSign players.
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.
The SVG protocol should be used to specify vector 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.
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).
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:
BrightSign players are compatible with touchscreens that use standard HID drivers. Note that some manufacturers claim support for HID but still use custom drivers. See this FAQ for further discussion and a list of touchscreen models that have been tested with BrightSign players.
You can use the Web Inspector to debug webpages over the local network. The Web Inspector can be enabled using BrightAuthor or BrightScript:
BrightScript: When creating the roHtmlWidget instance, include the
inspector_serverinitialization parameter and specify a port number. You can then use Chrome to access the Web Inspector at http://playerIPAddress:<port>.
If you don't know the player IP address, power on the player with the SD/microSD card (and other storage devices) removed. After a few moments, the IP address will be displayed on screen.
Because BrightSign players use an older version of Chromium than recent desktop versions, newer desktop Chrome releases may not work with the Web Inspector. If you're having trouble using the Web Inspector with your version of Chrome, download and install one of these versions:
- Linux: https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F338389%2Fchrome-linux.zip?generation=1436570329817000&alt=media
- OSX: https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F338389%2Fchrome-mac.zip?generation=1436570760827000&alt=media
- Windows (unofficial portable release): https://sourceforge.net/projects/crportable/files/ChromiumPortable_45.0.2453.0.paf.exe/download