Creating a Custom Device Webpage

This page describes how to create a Custom Device Webpage for networked BrightSign players. The Custom Device Webpage feature allows you to replace the default Local Web Server page, which is accessible from the BrightSign App or from a web browser, with a custom webpage. Please note that creating a Custom Device Webpage requires some knowledge of website building (HTML and CSS).

Open

Converting the Default Device Webpage

The BrightSign device webpage (i.e. the Local Web Server) contains JavaScript elements that interact with the system software, allowing users to change User Variables dynamically. Changing or customizing these JavaScript elements is a complex task that might result in system instability. Therefore, we recommend using the default device webpage as the template (available above) for your custom device webpage:

1. Navigate to C:\Program Files\BrightSign\BrightAuthor\templates.

2. Make a copy of the deviceWebPage.html file in a new folder. This folder does not need to be in the BrightAuthor application folder.

3. Open the deviceWebPage.html file using a text editing program like TextPad or Notepad.

4. Replace the content between the <style> tags on lines 69-115 with your custom CSS.

Open

Separating Page Elements

To ensure optimum performance of your custom device webpage, we recommend splitting the elements of the default page into discrete files. You can place the Javascript elements (lines 4-63) in a .js file, the JSON elements (lines 125-132) in a .json file, and the custom CSS elements in a .css file. You can then reference these elements from the primary custom device webpage file.

Also note that partial asset URLs are interpreted relative to the source of the style sheet, not relative to the .html document. If you separate the .css of the page into a another file, the URL of your assets will not reflect this change, and the device webpage will return 404 “Not Found” errors. Therefore, we recommend placing all custom webpage files within the same folder.

Adding the Custom Device Webpage to a Presentation

1. With the desired presentation open in BrightAuthor, navigate to File > Presentation Properties.

2. Click the Variables tab.

3. Under Device Web Page Display, select Custom device web page.

4. Click the Browse button. Navigate to and select the custom device web page you created in the above steps.

5. Click OK and, when ready, publish your presentation.