Attachment J-6 - 030ADV25R0024 - Brightsign Developer Information.pdf

Animations and Add-on Libraries

Last updated 13 February, 2025 • 1 min read

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

On this page

JavaScript Animations

WebGL

Vector Animations

Canvas Animations

Push Technology

File Storage

File Downloads

CSS Transforms

J-6 - 030ADV25R0024 - Brightsign Developer Information 5-6-2025 (101 Pages) https://github.com/rstacruz/jquery.transit https://github.com/rstacruz/jquery.transit

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 (/space/DOC/2307784705) on BrightSign Players. In these cases, you can use roVideoMode.SetImageSizeThreshold() (/space/DOC/370672969#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 (/space/DOC/370677153) 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.

https://docs.brightsign.biz/space/DOC/2307784705 https://docs.brightsign.biz/space/DOC/2307784705 https://docs.brightsign.biz/space/DOC/370672969#roVideoMode-setimagesizethreshold() https://docs.brightsign.biz/space/DOC/370672969#roVideoMode-setimagesizethreshold() https://docs.brightsign.biz/space/DOC/370672969#roVideoMode-setimagesizethreshold() https://docs.brightsign.biz/space/DOC/370677153 https://github.com/brightsign/websocket-test https://github.com/brightsign/websocket-test

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 (/space/DOC/370672896#roHtmlWidget-storage_path)roHtmlWidget (/space/DOC/370672896#roHtmlWidget-storage_path) (/space/DOC/370672896#roHtmlWidget-storage_path).

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 (/space/DOC/370677153#Node.js-downloading_large_files) 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:forw -webkit-animation-iteration-coun -webkit-animation-duration:2s;

@-webkit-keyframes flipon 0% {-webkit-transform:rotateY(0deg);} 30% {-webkit-transform:rotateY(-90deg);} 100% {-webkit-transform: rotateY(360deg);}

</style> https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-storage_path https://docs.brightsign.biz/space/DOC/370677153#Node.js-downloading_large_files https://docs.brightsign.biz/space/DOC/370677153#Node.js-downloading_large_files https://docs.brightsign.biz/space/DOC/370677153#Node.js-downloading_large_files

BrightSign Extensions

Last updated 13 February, 2025

The BrightSign implementation of the Chromium engine includes several platform-specific extensions.

Extensions for <video> elements are covered on the HTML Video (/space/DOC/370672326) page.

GPU Rasterization GPU rasterization is enabled by default in firmware versions 6.2.x and later.

Optimized Image Rendering The 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.

On this page

GPU Rasterization

Optimized Image Rendering https://docs.brightsign.biz/space/DOC/370672326

Creating HTML Pages

Created 13 February, 2025

Follow these steps when creating HTML pages:

1. Make sure the HTML page has the same aspect ratio as your signage display. If you are using HTML content in a BrightAuthor zone that is smaller than the screen, fit the page to the same aspect ratio as the zone.

2. Use a master Div aligned to 0,0 when building an HTML page. This will ensure correct alignment.

3. When creating an HTML 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.

4. You can test the layout and appearance of a page locally by opening it with Google Chrome, which has similar rendering capabilities to BrightSign players.

5. If you want to publish resource-intensive presentations (e.g. <video> elements or multiple transforms) using HTML, we recommend using a Class 10 (10Mb/s) SD card.

Debugging Webpages

Last updated 13 February, 2025 • 1 min read

Web Inspector You can use the Web Inspector (https://trac.webkit.org/wiki/WebInspector) to debug webpages over the local network.

The JavaScript console should only be used in non-production presentations and it should be disabled before you publish in a production environment because it uses more memory, which can lead to frequent reboots, and it compromises security.

Enabling the Web Inspector The Web Inspector can be enabled using BrightAuthor:connected, BrightAuthor, or BrightScript:

On this page

Web Inspector

Enabling the Web Inspector

Inspecting a Webpage

Chromium Version Compatibility

Trace Events

Creating a TraceEvent Directory

Enabling the TraceEvent System

Viewing Trace Events

Additional Documentation https://trac.webkit.org/wiki/WebInspector https://trac.webkit.org/wiki/WebInspector

BrightAuthor:connected: Select Allow JavaScript console in the Chromium Debugging (/space/DOC/404620688/Remote+Diagnostic+Web+Server#Diagnostics) section of the DWS and Enable Javascript console (/space/DOC/1632600407) in Presentation tab > State Properties > Options. To disable Chromium debugging, uncheck either of these boxes.

BrightAuthor: In your BrightAuthor presentation, navigate to File > Presentation Properties > HTML and check the Enable Javascript console box. Note that as of BOS 8.5.31 you will need to also set the enable_web_inspector registry key (in the "html" section) to enable the JavaScript console. See the "inspector_server" in roHtmlWidget (/space/DOC/370672896) for more information.

BrightScript: When creating the roHtmlWidget instance, include the inspector_server (/space/DOC/370672896#roHtmlWidget-inspector_server) initialization parameter and specify a port number. Note that as of BOS 8.5.31, you must set the enable_web_inspector registry key to “1” to enable the web inspector for Chromium on the player (if it is set to “0” or nothing, the web inspector is disabled). For example:

If you want to change the web inspector port, you must edit the configuration of roHtmlWidget. See the "inspector_server" in roHtmlWidget (/space/DOC/370672896) for more information.

Enabling the Web Inspector creates a security vulnerability on BrightSign players. See this page (/display/DOC/BrightSign+Player+Security#BrightS ignPlayerSecurity-advanced_topics) for more details.

Inspecting a Webpage Once HTML content is running on a BrightSign player, follow these steps to inspect it:

reg = CreateObject("roRegistrySection","html") reg.Write("enable_web_inspector", "1") reg.Flush() https://docs.brightsign.biz/space/DOC/404620688/Remote+Diagnostic+Web+Server#Diagnostics https://docs.brightsign.biz/space/DOC/404620688/Remote+Diagnostic+Web+Server#Diagnostics https://docs.brightsign.biz/space/DOC/1632600407 https://docs.brightsign.biz/space/DOC/1632600407 https://docs.brightsign.biz/space/DOC/370672896 https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-inspector_server https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-inspector_server https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-inspector_server https://docs.brightsign.biz/space/DOC/370672896 https://docs.brightsign.biz/display/DOC/BrightSign+Player+Security#BrightSignPlayerSecurity-advanced_topics https://docs.brightsign.biz/display/DOC/BrightSign+Player+Security#BrightSignPlayerSecurity-advanced_topics https://docs.brightsign.biz/display/DOC/BrightSign+Player+Security#BrightSignPlayerSecurity-advanced_topics

1. Open Chrome on a desktop computer connected to the same local network.

2. Enter the following URL into the address bar:

chrome://inspect/devices

3. In the Devices section, click Configure.

4. Enter the player IP address and Web Inspector port in the field (see the image below). The page(s) being run on the BrightSign player will be displayed at the bottom of the page.

a. If you don't know the player IP address, power on the player with the microSD card (and other storage devices) removed. After a few moments, the IP address will be displayed on screen.

b. If you enabled the Web Inspector in BrightAuthor, use port 2999 (e.g. http://192.168.1.62:2999/ (http://192.168.1.62:2999/)).

5. Click the Inspect button next to a page. A debugging session will be launched in a new window. Unlike local pages, the page contents are not displayed in the left pane, but the inspector window on the right can be used to debug the page.

Adding more than one device in your list can cause performance issues, especially if the devices are not online, because the Chrome client will continue to search for any offline devices.

Chromium Version Compatibility Because BrightSign players use an older version of Chromium than recent desktop versions, newer desktop Chrome releases may not work with the http://192.168.1.62:2999/ http://192.168.1.62:2999/

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%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media (https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media)

OSX: https://www.googleapis.com/download/storage/v1/b/chrom ium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?

generation=1532055270387578&alt=media (https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?

generation=1532055270387578&alt=media)

Windows 64-bit: https://www.googleapis.com/download/storage/v1/b/chromi um-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media (https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media)

If you're using the Web Inspector to manually step through JavaScript code, encountering an uncaught error in the debugger may cause the player to crash. This is a known bug with the Web Inspector.

A larger collection of supported Chromium downloads can be found here.

(/space/DOC/2303000608)

Trace Events The Chromium TraceEvent system allows you to debug JavaScript memory leaks, performance issues, and rendering problems. This feature is available in firmware versions 7.0.82 and later. Unlike PCs, where the trace/debugger is run in the same browser as the content, BrightSign players write JSON trace files to the local storage, which you can then import to Chrome on your PC.

https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Linux_x64%2F576753%2Fchrome-linux.zip?generation=1532051976706023&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Mac%2F576753%2Fchrome-mac.zip?generation=1532055270387578&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media https://www.googleapis.com/download/storage/v1/b/chromium-browser-snapshots/o/Win_x64%2F576753%2Fchrome-win32.zip?generation=1532053193483102&alt=media https://docs.brightsign.biz/space/DOC/2303000608 https://docs.brightsign.biz/space/DOC/2303000608

When trace events are enabled on a BrightSign player, Chromium captures trace messages to a circular buffer. The player takes regular snapshots of this buffer and writes them to the root directory of the microSD card or SSD as JSON files.

The TraceEvent system can easily generate gigabytes of log data on local storage, so we recommend disabling it in production environments.

See this StackOverflow page (https://stackoverflow.com/questions/12996129/me mory-leak-when-logging-complex-objects) for more information about memory leaks when using console.log to log complex objects.

Creating a TraceEvent Directory Before enabling the TraceEvent system, create a directory named "brightsign-webinspector" in the root directory of the microSD card or SSD on the player. If this directory is missing, the player will not record trace events when they are enabled in the registry. Conversely, you can disable trace events by deleting the "brightsign-webinspector" directory from the storage device.

Enabling the TraceEvent System The TraceEvent system is enabled and configured by writing to the BrightSign player registry (via BrightScript (/space/DOC/370673016) or JavaScript (/space/DOC/370678545)). To enable the TraceEvent system, write the following keys to the html section of the registry:

https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects https://stackoverflow.com/questions/12996129/memory-leak-when-logging-complex-objects https://docs.brightsign.biz/space/DOC/370673016 https://docs.brightsign.biz/space/DOC/370673016 https://docs.brightsign.biz/space/DOC/370678545

[string] tracecategories : A comma-separated list of trace event categories to enable. The category names are documented in the link below.

[int] tracemaxsnapshots : The maximum number of JSON-trace snapshot files in the "brightsign-webinspector" directory. When the limit is reached, the counter wraps around and begins writing over the oldest trace file.

[int] tracemonitorinterval : The frequency (in seconds) with which the player will take snapshots of the TraceEvent buffer. We recommend 60 seconds as a default value.

Example (JavaScript):

Viewing Trace Events Follow these steps to view the trace events:

1. Transfer the JSON trace files from the "brightsign-webinspector" directory to your PC.

2. Open chrome://tracing () on your PC Chromium instance.

3. Import the JSON trace files.

You can merge multiple trace files; however, in a long trace capture, there will be too many trace events to view at once (you'll likely need to write a script to process them).

Additional Documentation See the following links for further explanation of trace events:

var registryClass = require("@brightsign/registry" var registry = new registryClass();

registry.write("html", { "tracecategories": "toplevel,blink_gc,disabled "tracemaxsnapshots": "25", "tracemonitorinterval": "60" }).then( function() { console.log("Write Successful");

https://docs.brightsign.biz/space/DOC/2704113783/Debugging+Webpages https://www.chromium.org/developers/how-tos/trace-event-profiling-tool (https://www.chromium.org/developers/how-tos/trace-event-profiling-tool) https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md (https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md) https://developers.google.com/web/tools/chrome-devtools/memory-problems/ (https://developers.google.com/web/tools/chrome-devtools/memory-problems/) https://www.chromium.org/developers/how-tos/trace-event-profiling-tool https://www.chromium.org/developers/how-tos/trace-event-profiling-tool https://www.chromium.org/developers/how-tos/trace-event-profiling-tool https://www.chromium.org/developers/how-tos/trace-event-profiling-tool https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md https://chromium.googlesource.com/chromium/src/+/lkcr/docs/memory-infra/README.md https://developers.google.com/web/tools/chrome-devtools/memory-problems/ https://developers.google.com/web/tools/chrome-devtools/memory-problems/ https://developers.google.com/web/tools/chrome-devtools/memory-problems/ https://developers.google.com/web/tools/chrome-devtools/memory-problems/

Disabling Staged ES6 Features

Created 13 February, 2025 • 1 min read

Some ES6 features have not been finalized and may still contain bugs in the Chromium version(s) used by BrightSign. A crash may occur if your JavaScript application (or the framework code used to build the application) uses one of these features: For example, this (https://bugs.chromium.org/p/v8/issues/detail?id=3923) is a known issue in Chromium version 45 that will cause a crash on BrightSign XTx44 and XDx34 players.

To bypass such issues, you can disable all staged (i.e. experimental) ES6 features using the disable-javascript-harmony-shipping registry flag (which requires firmware version 7.1.49 or later). The following example shows how to set this registry flag using the registry (/space/DOC/370678545) JavaScript module (you can also use the roRegistry (/space/DOC/370673016) BrightScript object).

var registryClass = require("@brightsign/registry");

var registry = new registryClass();

var systemClass = require("@brightsign/system");

var system = new systemClass();

registry.write("html", {js-disable-harmony-shipping:"1"}).then( function(){console.log("Write Successful");});

system.reboot() https://bugs.chromium.org/p/v8/issues/detail?id=3923 https://docs.brightsign.biz/space/DOC/370673016

Enabling this registry flag will limit the available JavaScript syntax. However, for ES6 features to be available, an application must be written to be compatible with both ES5 and ES6, so enabling this flag should not cause syntax errors or similar issues.

Displaying HTML with BrightAuthor

Last updated 28 March, 2025 • 1 min read

Table of Contents

This section covers how to integrate HTML pages into BrightAuthor presentations. To add an HTML page to a presentation, click the other tab under Media Library, select the HTML5 state, and drag it into the playlist area. You will be prompted to add local HTML files or a remote page URL to your presentation.

On this page

HTML Guidelines

Zones

Z-Ordering

Content Sourcing

Using Custom Fonts

Exporting an HTML5 Presentation

Caching and Storage

Using HTML with Portrait Orientation

Integrating Touchscreen Content

Disguising Network Latency

Displaying Scrollbars

HTML Guidelines The following are general rules for using HTML content in BrightAuthor:

Zones You can have multiple zones containing HTML content in a BrightAuthor presentation.

HTML content can be inserted into a Video or Images zone or an Images Zone. You cannot use HTML content in a Video Only zone.

The dimensions of the HTML background/page must match the size of the zone in BrightAuthor:

You cannot use background image scaling to fit zones of different sizes.

Z-Ordering HTML content will show at the highest Z-level of graphics zones, meaning that an HTML zone will cover all other zones that contain images and text. This behavior does not extend to touch screens (see Integrating Touchscreen Content below for more details).

HTML content can be placed in front of or behind zones containing video content, depending on the Graphics plane z position setting of the zone containing the HTML content (configurable in the Edit > Layout tab).

If the HTML page contains video and the Enable native video plane playback option is enabled in the HTML5 state, the HTML page will always display over other video zones.

Content Sourcing HTML content can originate from a remote server, a local server, or the local storage (SD card) of the player. Presentations containing HTML content can also be downloaded onto the local storage from the BrightSign Network.

If your HTML content relies on assets from multiple locations, make sure to check the Enable external data box when creating or editing an HTML5 state.

Using Custom Fonts When creating an HTML5 state in BrightAuthor, click the Add Font button to add custom True Type Font (.ttf) files to the HTML page. This feature works for both local and remote HTML content.

When the presentation is published, the font file(s) will act as though they are located in the same file directory as the index.html file (i.e. they can be accessed with the standard font-family attribute in HTML/CSS).

Exporting an HTML5 Presentation

Exporting a presentation that contains multiple HTML pages also exports in full all asset folders associated with those pages. If your pages share common asset folders, the entire contents will be duplicated multiple times. This can become problematic if your asset folders contain large content files, so you may need to prune and/or rearrange asset folders that are duplicated after export.

Caching and Storage BrightAuthor allows you to configure common browser caching and storage functions on the player.

To enable these functions, open your BrightAuthor HTML presentation and navigate to Edit > Preferences > Storage and check Limit storage space by function. You can allocate space for the following functions:

HTML data: The amount of space dedicated to the HTML application cache

HTML local storage: The amount of space dedicated to JavaScript variables and data

If you select Specify absolute size, it is possible to specify a combined set of segments that is larger or smaller than the absolute size of your storage device.

If you select Specify percentages, you will need to ensure that the percentages add up to 100% (which is equivalent to the absolute size of the local storage on the player).

The HTML local storage feature is only available in BrightAuthor versions 4.1.1.12 and later. A similar feature is available in the File > Presentation Properties > HTML section in earlier versions.

Using HTML with Portrait Orientation Follow these steps to create a digital-signage canvas that is portrait oriented:

These instructions apply to BrightAuthor versions 4.3.0.x and later.

1. Edit the aspect ratio in your web authoring software (e.g. Dreamweaver) so that it is the reverse of your monitor/television resolution. For example, if you plan on displaying the portrait content in 1080p, set the resolution to 1080x1920 rather than 1920x1080.

2. Create a new presentation for your player in BrightAuthor.

3. Set the Monitor Orientation to Portrait. Click Create.

4. When prompted to select a template, choose Full screen.

5. Add your HTML content to the playlist.

Integrating Touchscreen Content You can enable touch-screen events for an HTML page by checking the Enable mouse and touch events box when creating an HTML5 state (see the HTML5 state (/space/DOC/370671786) description for more details).

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 (/space/DOC/2320728065) for further discussion and a list of touchscreen models that have been tested with BrightSign players.

https://docs.brightsign.biz/space/DOC/370671786 https://docs.brightsign.biz/space/DOC/2320728065 https://docs.brightsign.biz/space/DOC/2320728065

Note that touch events are received by both HTML pages and BrightAuthor Rectangular Touch events. Therefore, if you have a zone with an HTML page overlapping a zone containing a Rectangular Touch event, touching the area of overlap will send an event to both zones at the same time. This is the case even if one zone completely covers the other visually. Depending on the type of action triggered in each zone, touch-event overlap may cause crashing or other issues with presentation stability. Unless you are certain of the consequences, make sure that zones with touch-enabled HTML content and zones with Rectangular Touch events do not overlap.

Creating an overlap as shown below may have unintended consequences.

Disguising Network Latency When the BrightSign player loads HTML content from a URL, there may be a delay based on network latency. You can add a preload image to sidestep this issue. Note that this solution is not necessary if all HTML assets are located on the local storage of the player.

1. Drag and drop an image file from your media library.

2. Check the Set as initial state box while editing the image state.

3. Add a Timeout event to this image.

4. Specify the timeout for three seconds (or more if desired).

5. Set the Timeout event to transition to the HTML5 state.

Displaying Scrollbars The scrollbar behavior will be the same as it is in the current version of Chromium.

To display scrollbars, reference this simple CSS file from your HTML page:

ForceScrollbars

CSS 32 B

(/download/attach ments/370672295/F orceScrollbars.css) https://docs.brightsign.biz/download/attachments/370672295/ForceScrollbars.css

Displaying HTML with BrightAuthor:connected

Table of Contents

This page covers how to integrate HTML pages into BrightAuthor:connected presentations. To add an HTML page to a presentation, select the HTML5

On this page widget in the bottom of the Content window and drag it into the content panel above. This page (/space/DOC/1632600407)describes how to use that widget.

HTML Guidelines

Zones

You can have multiple zones containing HTML content in a BrightAuthor:connected presentation.

HTML content can be inserted into a Video or Image zone or an Image zone.

Z-Ordering

HTML content will show at the highest Z-level of graphics zones, meaning that an HTML zone will cover all other zones that contain images and text. This behavior does not extend to touch screens.

HTML content can be placed in front of or behind zones containing video content, if you drag the Graphics zone(s) before or after the Video zone(s) (under the Zone menu in the Zone Properties panel). See Image 1 below.

If the HTML page contains video and the Enable native video playback option is enabled in the HTML5 state, the HTML page will always display over other video zones.

Image 1

HTML Guidelines

Zones

Z-Ordering

Content Sourcing

Using Custom Fonts

Exporting an HTML5 Presentation

Chromium Video Playback

Caching and Storage

Using HTML with Portrait Orientation

Integrating Touchscreen Content

Disguising Network Latency https://docs.brightsign.biz/space/DOC/1632600407

Content Sourcing HTML content can originate from a remote server, a local server, or the local storage (SD card) of the player. Presentations containing HTML content can also be downloaded onto the local storage from the BrightSign Network.

Using Custom Fonts To use custom fonts, specify the font in your script. If the font file is in the same directory as your JS and CSS files, it will be used in BrightAuthor:connected.

Exporting an HTML5 Presentation Exporting a presentation that contains multiple HTML pages also exports in full all asset folders associated with those pages. If your pages share common asset folders, the entire contents will be duplicated multiple times. This can become problematic if your asset folders contain large content files, so you may need to prune and/or rearrange asset folders that are duplicated after export.

Chromium Video Playback The HTML5 widget has an Enable Native Chromium video playback option in versions 1.19.2 and later of BrightAuthor:connected. This feature is only available for XC5 players and is explained on this page (/space/DOC/1632600407).

Partners using a custom CMS can use

HTML Playback Options on Series 5 Players

(/sp ace/

DO

C/1 for more guidance on setting this option in their

CMS.

https://docs.brightsign.biz/space/DOC/1348304996

Caching and Storage BrightAuthor:connected allows you to configure common browser caching and storage functions on the player. To enable these functions in your BrightAuthor:connected presentation, select Enable Limit Storage under Admin > Application Preferences, allocate the space as you wish, and select Apply. You can allocate space for the following functions:

HTML Data: The amount of space dedicated to the HTML application cache

HTML Local Storage: The amount of space dedicated to JavaScript variables and data

HTML Indexed DB: The amount of space dedicated to IndexedDB content

Using HTML with Portrait Orientation To create a digital-signage canvas that is portrait oriented, simply create a portrait presentation and then insert an HTML5 widget.

Integrating Touchscreen Content You can enable touch-screen events for an HTML page by checking the Enable mouse and touch events box when creating an HTML5 state .

Disguising Network Latency When the BrightSign player loads HTML content from a URL, there may be a delay based on network latency. You can add a preload image to sidestep this issue. Note that this solution is not necessary if all HTML assets are located on the local storage of the player.

1. Set BrightAuthor:connected to Interactive

2. Drag and drop an image file into the main panel

3. Set the Initial State box while editing the Image State (/space/DOC/1632632833).

4. Specify the timeout for three seconds (or more if desired) in a Timeout (/space/DOC/1636106748) (/space/DOC/1636106748)Event (/space/DOC/1636106748).

5. Set the Timeout Event to transition to the HTML5 state.

Displaying Scrollbars The scrollbar behavior will be the same as it is in the current version of Chromium.

To display scrollbars, reference this simple CSS file from your HTML page:

(/download/attach ments/1566605495/ ForceScrollbars css) https://docs.brightsign.biz/space/DOC/1632632833 https://docs.brightsign.biz/space/DOC/1632632833 https://docs.brightsign.biz/space/DOC/1636106748 https://docs.brightsign.biz/space/DOC/1636106748 https://docs.brightsign.biz/space/DOC/1636106748 https://docs.brightsign.biz/space/DOC/1636106748 https://docs.brightsign.biz/download/attachments/1566605495/ForceScrollbars.css

Displaying HTML without BrightAuthor

There are two methods to display HTML without BrightAuthor.

On this page

Simple Webpage Script

Portrait Orientation

Mobile Scrollbars

You can play an HTML page from the local storage without an autorun script by placing the index.html file (along with other files and folders containing the page content) into the root folder of the player storage.

You can use BrightScript to display local or remote HTML content. The sections below pertain to using the roHtmlWidget (/space/DOC/370672896) BrightScript object to display HTML. To learn more about BrightScript, see the BrightScript (/space/DOC/370672718) section.

Simple Webpage Script The simple script outlined below displays a webpage stored on a remote server. Save this script as an autorun.brs file, place it on an SD card, and publish it to the player.

If you want to display a webpage located on local storage, replace the "http://www.brightsign.biz" URL on line 4 with the filename of the .html file: "file:///mytestpage.html"

Notice that the script has a Sleep(10000) line. This line delays loading of the web URL–this is necessary to compensate for connection delays that may occur on your network. If you don’t use this script, the BrightSign player may not connect in time to load the page, resulting in a “cannot resolve host” error, which indicates that the player does not have an Internet connection. In certain network configurations, especially when the player utilizes DHCP, you may need to increase the sleep amount (in milliseconds) to give the player more time to establish a connection before loading the page.

Parameters for the roHtmlWidget are defined in an associative array, which is then passed during object creation. See the roHtmlWidget (/space/DOC/370672896#roHtmlWidget-object_creation)page (/space/DOC/370672896#roHtmlWidget-object_creation) for more information on creating and configuring an HTML widget.

Sub Main() msgPort = CreateObject("roMessagePort") r = CreateObject("roRectangle", 0, 0, 1920, 1080 https://docs.brightsign.biz/space/DOC/370672896 https://docs.brightsign.biz/space/DOC/370672896 https://docs.brightsign.biz/space/DOC/370672718 https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-object_creation https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-object_creation https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-object_creation https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-object_creation https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-object_creation https://docs.brightsign.biz/space/DOC/370672896#roHtmlWidget-object_creation

Portrait Orientation To rotate the contents of an HTML page, include the transform parameter when creating the roHtmlWidget object: For clockwise portrait orientation, use transform:"rot90" ; for counter-clockwise portrait orientation, use transform:"rot270" . If you're using the above simple webpage script, you can add this parameter to the config associative array on line 7.

Displaying Scrollbars The scrollbar behavior will be the same as it is in the current version of Chromium.

Scrollbars can be enabled by including the scrollbar_enabled:true parameter when creating the roHtmlWidget object. If you're using the above simple webpage script, you can add scrollbar_enabled:true to the config associative array on line 7.

You can also enable scrollbars using CSS (for example, by referencing the simple CSS file below).

config = { url: "http://www.brightsign.biz", h = CreateObject("roHtmlWidget", r, config) h.SetPort(msgPort) sleep(10000) h.Show() while true msg = wait(0, msgPort) print "type(msg)=";type(msg) if type(msg) = "roHtmlWidgetEvent" then eventData = msg.GetData() if type(eventData) = "roAssociativeArray print "reason = ";eventData.reason if eventData.reason = "load-error" t print "message = ";eventData.mes endif endif endif end while End Sub https://docs.brightsign.biz/download/attachments/370672336/ForceScrollbars.css

(/download/attach ments/370672336/F orceScrollbars.css) Mobile Scrollbars Browser scrollbars default to desktop style (i.e. more prominent and visible at all times). You can configure the Chromium instance for mobile-style scrollbars (i.e. less prominent and only visible when scrolling) by writing the overlay-scrollbar entry to the html section of the registry.

htmlRegistry = CreateObject("roRegistrySection", " htmlRegistry.Write("overlay-scrollbar", "1")1 https://docs.brightsign.biz/download/attachments/370672336/ForceScrollbars.css

How to Efficiently Restart Applications on a Player

Last updated 7 January, 2025

To debug or restart your application on a BrightSign player:

On this page

Additional Notes

1. Connect to the player using SSH or Telnet:

a. Enable SSH or Telnet from the DWS. See Diagnostic Web Server Diagnostics Resource (/space/DOC/370673541/Diagnostic+Web+Server#Diagnostics).

b. Enable SSH programmatically. See Enabling the BrightSign Shell (/space/DOC/1988100153/BrightSign+Shell#Enabling

-SSH).

c. Access SSH. See BrightSign Shell Access (/space/DOC/1988100153/BrightSign+Shell#Accessing

-SSH).

2. Access the BrightSign shell (see Methods to access BrightSign Shell (/space/DOC/1988100153/BrightSign+Shell#Shell- Access-Methods)). Once connected, you will see the BrightSign> command prompt. To access the shell from the BrightScript debugger, type exit .

3. Insert an SD card.

4. Enter cd sd: at the prompt to switch to the SD card directory.

5. On a new line, run script autorun.brs to start your application. This will reload the autorun.brs file, effectively breaking down and rebuilding your HTML/Chromium application.

For more information about the command line interface and shell commands, see BrightSign Shell (/space/DOC/1988100153/BrightSign+Shell) and BrightScript Debugger (/space/DOC/2171994116/BrightScript+Debugger).

Additional Notes Ensure that your network settings allow SSH and Telnet access. Port access should be open for ports 22 and 23 (respectively) unless the port defined by the user is different.

SSH and Telnet must be enabled on the network.

If you encounter problems, try power cycling the player or checking the network configurations.

https://docs.brightsign.biz/space/DOC/370673541/Diagnostic+Web+Server#Diagnostics https://docs.brightsign.biz/space/DOC/370673541/Diagnostic+Web+Server#Diagnostics https://docs.brightsign.biz/space/DOC/370673541/Diagnostic+Web+Server#Diagnostics https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Enabling-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Enabling-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Enabling-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Enabling-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Accessing-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Accessing-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Accessing-SSH https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Shell-Access-Methods https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Shell-Access-Methods https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Shell-Access-Methods https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell#Shell-Access-Methods https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell https://docs.brightsign.biz/space/DOC/1988100153/BrightSign+Shell https://docs.brightsign.biz/space/DOC/2171994116/BrightScript+Debugger https://docs.brightsign.biz/space/DOC/2171994116/BrightScript+Debugger

HTML Authoring Resources

Last updated 22 February, 2024

There are a large number of online resources— including tutorials, samples, templates, and widgets —available to help you get started creating content with HTML5. The HTML5 standard offers huge advantages to web developers, including digital signage authors. The following websites are great places to learn how to create pages using HTML5:

http://www.html5report.com (http://www.html5report.com/) http://www.w3schools.com (http://www.w3schools.com/)

WordPress WordPress is an excellent HTML5 resource that provides an intuitive approach to creating digital signage. Here are some of the benefits of using the WordPress architecture:

On this page

WordPress

HTML5 Authoring http://www.html5report.com/ http://www.html5report.com/ http://www.w3schools.com/ http://www.w3schools.com/

WordPress offers advanced HTML5 support, with premade widgets ranging from weather to e-commerce. The system also supports advanced HTML5 options using CSS3 features. The http://www.jqwidgets.com (http://www.jqwidgets.com/) site also provides HTML5 widgets.

You can either run WordPress from the website (http://wordpress.org/) or install a WordPress instance on your own servers.

WordPress has an ecosystem of template creators that offer sophisticated templates for a wide range of industries: Template creators include the following:

http://www.rockettheme.com/wordpress (http://www.rockettheme.com/wordpress) http://www.templatemonster.com (http://www.templatemonster.com/) http://graphpaperpress.com (http://graphpaperpress.com/)

HTML5 Authoring These are some of the common HTML5 authoring applications:

Adobe CS Tools: Dreamweaver, Illustrator, InDesign, Photoshop

Aptana Studio

CoffeeCup Software http://www.jqwidgets.com/ http://www.jqwidgets.com/ http://wordpress.org/ http://wordpress.org/ http://www.rockettheme.com/wordpress http://www.rockettheme.com/wordpress http://www.templatemonster.com/ http://www.templatemonster.com/ http://graphpaperpress.com/ http://graphpaperpress.com/

HTML Best Practices

Last updated 14 February, 2025

The pages in this section cover the content requirements, abilities, and restrictions of the HTML rendering engine on BrightSign players:

Animations and Add-on Libraries (/space/DOC/2703556814)

BrightSign Extensions (/space/DOC/2704113724)

Creating HTML Pages (/space/DOC/2704113665)

Debugging Webpages (/space/DOC/2704113783)

Disabling Staged ES6 Features (/space/DOC/2704212020)

HTML Caching (/space/DOC/388435136)

HTML Content Restrictions (/space/DOC/2703556692)

HTML Storage (/space/DOC/2704211969)

Renderer Versions and Support (/space/DOC/2703556756)

Touchscreen Support (/space/DOC/2703556869)

Using HTML Websites that Require Logins (/space/DOC/2708340737) https://docs.brightsign.biz/space/DOC/2703556814 https://docs.brightsign.biz/space/DOC/2704113724 https://docs.brightsign.biz/space/DOC/2704113665 https://docs.brightsign.biz/space/DOC/2704113783 https://docs.brightsign.biz/space/DOC/2704212020 https://docs.brightsign.biz/space/DOC/388435136 https://docs.brightsign.biz/space/DOC/2703556692 https://docs.brightsign.biz/space/DOC/2704211969 https://docs.brightsign.biz/space/DOC/2703556756 https://docs.brightsign.biz/space/DOC/2703556869 https://docs.brightsign.biz/space/DOC/2708340737

See HTML Video

(/space/DOC/3 70672326) for general information about HTML videos.

HTML Caching

Last updated 13 days ago • 1 min read

This page covers how to use caching techniques to display HTML content. BrightSign players offer novel solutions through BrightAuthor:connected, BrightAuthor, and BrightScript, as well as support for common Node.js® and JavaScript caching solutions.

Storage and Memory Before discussing HTML caching techniques, it is important to understand the storage and memory limitations of the players. All BrightSign players run HTML content on a Chromium engine. By default, Chromium reserves 1GB plus 10% of the total size of the player's storage device for memory. Players also have limited memory to run HTML graphics and JavaScript. This amount varies between player models; consult this list (/space/DOC/2703556692/HTML+Content+Restriction s#Memory-and-Performance) for more detail.

To change the storage values through BrightAuthor:connected:

On this page

Storage and Memory

Caching Capabilities

BrightSign solutions

Node.js and JavaScript solutions

Using Blobs https://docs.brightsign.biz/space/DOC/2703556692/HTML+Content+Restrictions#Memory-and-Performance

1. Go to the Admin tab

2. Open Preferences > Storage

3. Check Enable Storage Limit

4. Now space can be allocated for both HTML graphics and JavaScript. Make sure that:

a. When using Absolute, the specified segments should be neither larger nor smaller than the absolute size of your storage device

b. When using Percent, the percentages must add up to 100%.

To change the storage values through BrightAuthor:

1. Go to Edit > Preferences > Storage

2. Check Limit Storage Space by Function

3. Now space can be allocated for both HTML graphics and JavaScript. Make sure that:

a. When using Specify absolute size, the specified segments should be neither larger nor smaller than the absolute size of your storage device

b. When using Specify percentages, the percentages must add up to 100%.

These limitations are shared across all roHtmlWidget instances, where roHtmlWidget (/display/DOC/roHtmlWidget) is the BrightScript object that handles all HTML processes.

Caching Capabilities BrightSign players offer a flexible toolset for caching HTML content. The sections below discuss novel BrightSign solutions and how to enable and use more common methods through Node.js and JavaScript.

BrightSign solutions BrightSign players offer two HTML caching solutions:

https://docs.brightsign.biz/display/DOC/roHtmlWidget

Local Storage: The SD card for each player can store HTML content for playback. This method eliminates any connectivity or latency issues that may arise from networked solutions, but it must be done on a player by player basis. This can make local storage unattractive when dealing with a large fleet of devices.

The AssetPool BrightScript object: The AssetPool is a sharded hash directory and is recommended for large file count applications.

The AssetPool is filled by AssetFetcher objects that can acquire content online and store it for later playback in either sha1, besha1, or MD5 hash protocols. Consult this page (/display/DOC/Content+Management+Objects) for more information about AssetPool.

Node.js and JavaScript solutions BrightSign players also support Node.js and JavaScript caching techniques. To use Node.js:

If you are using BrightAuthor:connected, Node.js can be initialized through the Presentation State Properties (/display/DOC/State+Properties#StateProperties- Options) user interface.

If you are using BrightAuthor, Node.js must first be enabled through a BrightScript (/display/DOC/roHtmlWidget#roHtmlWidget- [boolean]nodejs_enabled)roHtmlWidget (/display/DOC/roHtmlWidget#roHtmlWidget- [boolean]nodejs_enabled) object (/display/DOC/roHtmlWidget#roHtmlWidget- [boolean]nodejs_enabled)

Once Node.js is running on the player, users can use any JavaScript API or caching method to cache content. Recommended content acquisition methods are XmlHttpRequest and Fetch with Service Worker. Keep the memory limitations in mind - for example, XmlHttpRequest will cause some player models to crash if it is used to download files larger than 100-200MB. If XmlHttpRequest's storage reservation will exceed your memory limitation, we recommend using the Fetch API.

You cannot use Service Workers to cache video content. BrightSign players use our media player infrastructure for later video playback, not the https://docs.brightsign.biz/display/DOC/Content+Management+Objects https://docs.brightsign.biz/display/DOC/Content+Management+Objects https://docs.brightsign.biz/display/DOC/State+Properties#StateProperties-Options https://docs.brightsign.biz/display/DOC/State+Properties#StateProperties-Options https://docs.brightsign.biz/display/DOC/State+Properties#StateProperties-Options https://docs.brightsign.biz/display/DOC/State+Properties#StateProperties-Options https://docs.brightsign.biz/display/DOC/roHtmlWidget#roHtmlWidget-[boolean]nodejs_enabled…