BrightLink User Guide

Overview

BrightLink provides a touchless interactive solution for any digital signage application by enabling users to view and control an interactive digital sign with their mobile phone. BrightLink uses proven BrightSign technology that can easily be deployed with confidence for new and existing installations. BrightLink does not need an internet connection or a phone app to connect to or control the digital sign. With BrightLink, touchless interactive experiences can be achieved both onscreen using our vast collection of BrightSign features, and on user's phones through the Custom Device Webpage using HTML programming that is optimized to run on connected phones.

Open

BrightLink supports two engagement options:

• 1-way engagement: plays content on a phone to enhance or augment the onscreen experience. It can also work without a screen, so the user’s phone becomes the digital sign.

• 2-way engagement: provides customers with the ability to remotely control a display using their phone.

This page explains BrightLink requirements and components, as well as how to implement it in BrightAuthor presentations using the example project provided in BrightLink-BigBoxMedia- v0.0.93-PACKAGE.zip. The BigBoxMedia BrightAuthor project is an interactive movie trailer kiosk that uses a BrightLink experience instead of a traditional touch screen.

How it Works

The BrightLink solution configures the BrightSign player to act as a web server which uses the installed wireless module as a Wi-Fi access point and hosts a Custom Device Webpage containing your content. This allows a user to connect their phone to the broadcasted Wi-Fi network or SSID which does not offer internet access (the SSID is a user variable set to BigBoxMedia in the example). Once the user’s phone is connected to the Wi-Fi access point, they can scan a QR code linked to a hostname variable which will automatically open a phone’s default browser to display your content as a smartphone optimized Custom Device Webpage. A BrightSign player configured for BrightLink not only plays the digital signage presentation shown onscreen, but also hosts the Custom Device Webpage displayed on a connected user’s phone and manages the interactivity between the player and the connected phone.

1-way engagement

This implementation of BrightLink lets a user view custom content on their connected phone that matches, enhances, or augments what is shown onscreen. Many phones can be linked at once to the BrightSign player’s Wi-Fi access point to view content. This implementation can also operate without a screen, using printed instructions to help users connect with the Wi-Fi access point and then scan a QR code to view content. Applications could include company directories, printed retail shelf informational signs, or coupons, museum exhibits, and more.

2-way engagement

This implementation of BrightLink lets a user view custom content and remotely control onscreen content playback from their connected phone. This implementation is called 2-way engagement because the user controls the onscreen experience and the BrightSign player delivers content to the connected phone and screen while listening for and triggering onscreen events based on selected phone commands. 2-way engagement must be designed into both the onscreen BrightAuthor project and the Custom Device Webpage displayed on the connected phone. Only one phone can be linked to control the experience at once, much like only one person can interact with a touch screen at any one time.

BrightLink Developer Package Contents

The downloadable BrightLink-v0.0.93-PACKAGE.zip contains these folders:

1. BrightLink-BigBoxMedia-v.0.0.93 which contains a BrightLink demo with 2-way engagement including the BrightAuthor project file, associated source files, and content as shown:

   Open

   

2. BrightLink-Docs which contains the information on this page in BrightLink-UserGuide-v093.pdf.

BrightLink Requirements

BrightSign Player Requirements

• Any series 3 or series 4 BrightSign player running BrightSignOS v8.1.69 or higher. OS downloads are available here.

• An installed wireless module (WS-103):

  • The wireless module is solely used for BrightLink functions and cannot be configured or used for publishing presentations or any other functions.

  • Wi-Fi module signal strength can be reduced using an attenuator or by removing the antenna from the back of the device for maximum signal reduction.

  • See our video instructions on how to install a wireless module.

• A Micro SD card with a published BrightLink presentation created in BrightAuthor or BrightAuthor:connected

BrightSign Player Setup

A BrightSign player running a BrightLink presentation configures the installed wireless module to act as a Wi-Fi access point. Therefore, the wireless module cannot be used for any other purposes such as a Wi-Fi client or for publishing presentations via BrightAuthor or BrightAuthor:connected.

1. If repurposing an existing player, you must factory reset your player:

   • Hold down both the SVC and Reset buttons while applying power until the red light starts to flash quickly, then release the buttons.

   • If the player does not reset fully, contact our support team for a reset script.

   • Install OS 8.1.69 or higher. OS downloads are available here.

2. Setup the player:

   1. DO NOT enable wireless under Network Properties. BrightLink uses the wireless module to connect and communicate with a linked phone and cannot be used for other functions like publishing presentations.

   2. Under Unit Configuration, select enable Diagnostic web server. This allows you to access the Admin Portal (accessible at http://hostname/admin). If you do not enter a password, no password will be needed to access the Admin Portal. It is highly recommended that you enter a strong password here to ensure that the Admin Portal is secure. The traditional diagnostic web server is not accessible via the wireless module for BrightLink applications, so the only way to access the diagnostic web server is with a wired ethernet connection using the setup username and password.

3. Under Unit Configuration, check the box to enable local web server, but DO NOT enter a username and password. If login credentials are set, the user will need them to view your menu content.

4. Under Unit Configuration, choose your preferred publishing method, such as Standalone. If you choose a networked publishing method, wired ethernet must be used – the wireless module cannot support networked publishing for BrightMenu applications.

BrightAuthor Project Requirements

BrightLink requires the following elements in a BrightAuthor project file to implement its functionality on a BrightSign player. Each elements are described in detail in Implementing BrightLink in BrightAuthor.

• BrightLink User Variables (appropriately set in a BrightAuthor project file)

• Plugin file Set_Player_As_Access_Point_plugin.brs

• Plugin file httpServer-npm-auto_v3.brs

• npm.zip file

• instructions.zip file (only used in BrightLink 1-way presentations)

• Custom Device ebpage (created for and optimized to run on a smartphone)

• QRcode-hostname HTML

• QRcode-SSID HTML (optional)

BrightLink Deployment

Wireless Signal Range

When deploying BrightLink, it is a good idea to adjust and test the WiFi access point signal range of the installed wireless module. The typical signal range of a BrightSign player with an installed wireless module and connected antenna is about 15 feet. Attenuators can also be used to help reduce the wireless signal range. When the wireless module antenna is not used, the wireless signal range can drop to about four to five feet. The signal range is also affected by where the player is located (for example, in line of sight of the user or mounted behind a display).

Not Required for Deployment

• Internet access to the player is not needed, which makes it extremely easy to deploy in a wide variety of applications.

• User phones do not need a particular app installed in order to connect to the player, view the custom content, or control the digital sign playback. BrightLink uses existing features available on all smartphones to connect to a Wi-Fi access point hosted by the BrightSign player and to scan QR code.

• 1-way engagement implementations of BrightLink do not require a display, but one can be employed to enrich the experience.

  • If a connected screen is not used, use a printed sign to explain how to connect to the WiFi access point and display a scannable QR code so users can view the content hosted on the BrightSign player.

  • If using a printed sign for your application, a connected display can be useful for setup and testing purposes as shown in our BrightMenu example.

Implementing BrightLink in BrightAuthor

1-way Engagement

BrightAuthor projects designed for BrightLink 1-way engagement primarily employ the following elements:

1. Configures the BrightSign player as a wireless access point

2. Hosts an image or a Custom Device Webpage that gets viewed as on a connected phone

3. Optionally plays non-interactive content on a connected screen

This approach can be good for applications that don’t have or require a display, such as a retail shelf with a QR code to scan for a coupon, or a museum exhibit with a QR code to scan for more information. See the BrightLink-1way-v0.0.9.3 example for a demonstration of how a 1-way engagement application can display images on a user’s phone instead of Custom Device Webpages. There are many different ways to apply 1-way engagement for an even wider variety of applications using Custom Device Webpages.

2-way Engagement

BrightAuthor projects supporting BrightLink 2-way engagement primarily employ the following elements:

1. Configures the BrightSign player as a wireless access point

2. Hosts an interactive Custom Device Webpage that can be viewed as a menu on a connected phone

3. Plays interactive content on a connected screen that listens for and executes on commands sent by a connected phone

Using UDP commands to trigger actions on the BrightSign player is the most straightforward way to implement interactive controls in a BrightLink presentation. These UDP commands can trigger actions such as playing specific video files onscreen, playing specific audio files, changing LED lighting, and more. Essentially the UDP commands can trigger whatever actions BrightSign supports, making the implementations limitless. Other ways to implement interactivity between a connected phone and the BrightSign player can also be employed in BrightAuthor such as employing user variables and zone messaging to trigger playback.

In the Movie Kiosk example, the BrightAuthor project file listens for UDPs from the Custom Device Webpage running on a connected phone and then plays back the selected videos with a Video Play File widget:

BrightLink User Variables

BrightLink supports an array of customizable user variables allowing you to tailor the experience for your implementation. These variables configure the associated plugins which in turn program your BrightSign player to perform as a web server and wireless access point using the installed wireless module which does not need an internet connection. The wireless module is solely used for BrightLink functions and cannot be used for publishing presentations.

The user variables must reside in the BrightAuthor project file under Presentation Properties > Variables:

• connect-status: This variable is used to track whether or not a phone is connected to the WiFi access point and using the Custom Device Webpage. If the value is “disconnected”, the WiFi access point SSID is displayed onscreen notifying a user to connect. If the value is “connected” then the SSID is hidden from view on screen in order to limit the number of users interacting at once.

• ssid: This variable is the name of the Wi-Fi network broadcasted by your player. It can be as descriptive as you would like to match your application. The BigBoxMedia demo example instructs users onscreen to manually connect to this SSID on their phone. However, the demo also provides free HTML code that automatically generates a QR code based on the assigned SSID value (see QRcode-Control HTML).

• password: This variable is the password needed to connect to the Wi-Fi named under the SSID variable. If you leave the default value blank, no password will be required by the user to connect. 

• hostname: This variable is the address assigned to the Custom Device Webpage hosted on the BrightSign player which displays on a connected phone. Your name must end with a valid top-level domain name such as .com, .now, .link, etc. Otherwise, the value can be set to anything you would like to match your application. The hostname also offers access to the Admin Portal by entering http://hostname/admin in the browser of a connected device.

  • We recommend that users access this hostname by scanning a QR code. When scanned, the hostname translates to a URL which a connected phone is pointed to play in its default web browser.

  • In the BigBoxMedia example, free HTML code has been provided that automatically generates a QR code based on the assigned hostname value (see the QRcode-hostname HTML section).

• ipstart: This variable represents the start of the IP addresses available for the BrightMenu wireless network hosted by the BrightSign player.

• ipend: This variable represents the end of the IP addresses for the BrightMenu wireless network hosted by the BrightSign player. Set this user variable to a number that will provide an acceptable range of available IP addresses in order to support all of the users you would like to be able to connect to BrightLink player at once. For 1-way engagement this number can be set to hundreds. For 2-way engagement it is advisable to restrict the number so that multiple users can't connect simultaneously (all potentially competing to control the playback of the digital signage at once).

• gatewayaddress: This variable is the default gateway assigned to the BrightLink wireless network.

• ipaddress: This is the IP address assigned to the player.

• frequency: This variable sets the Wi-Fi frequency.

Set_Player_As_Access_Point_plugin.brs

This plugin configures the BrightSign player to act as a web server and a Wi-Fi access point so a user device can connect to it. Internet is not required for the BrightSign player to enable this BrightLink feature. This plugin file needs to be referenced in your BrightAuthor project under Presentation Properties > Autorun > Script Plugins. The name must be Access (it is case sensitive) and the path must be indicated.

httpServer-npm-auto_v3.brs

This plugin starts a node server on the player and unzips npm.zip to the card. The plugin creates a /node folder containing server.html and portal.js files. These files set up the player proxy to direct the connected phone to the Custom Device Webpage hosted on the BrightSign player. The webpage’s URL is accessible through the hostname user variable described previously. This plugin also builds the server containing the Admin Portal webpage code.

This plugin file needs to be referenced in your BrightAuthor project under Presentation Properties > Autorun > Script Plugins. The name must be httpServer (it is case sensitive) and the path must be indicated.

npm.zip

The npm.zip file contains all the files for configuring the proxy. You can create your own Node.js® file to add further functionality to the experience. This npm.zip file must be referenced in the BrightAuthor project under Presentation Properties > Files.

instructions.zip

The instructions.zip file is only used for Bright Link 1-way implementations, to display images, instead of Custom Device Webpages, on a user's phone. This file is unzipped and the contents are placed into the uploads folder on the SD card when the presentation is run for the first time. The zip file contains:  

• instructions.png: This image displays the first time a BrightMenu presentation is run. It is activated to display on a connected phone when the QR code is scanned. It shows the user how to login to the Admin Portal, upload menu images, and activate them to display on smartphones.

• Specials1.jpg, Specials2.jpg, Museum.jpg, Transportation.jpg: These are sample images that can be activated to test for various retail, museum, and transportation applications.

The instructions.zip file must be referenced in the BrightAuthor project at Presentation Properties > Files.

Custom Device Web Page

The Custom Device Web Page is the HTML content that displays on phones connected to a BrightLink enabled BrightSign player. This content should be optimized to run on a mobile phone, not a BrightSign player. When a phone connected to the player’s WIFI access point (SSID) scans a QR code, it opens the default web browser and displays the assigned Custom Device Webpage. There are multiple ways to create a Custom Device Webpage to play content on a connected phone:

• HTML content for viewing purposes only for use in BrightLink 1-way engagement implementations. The HTML can also simply display a PNG or JPG image, as BrightMenu does (see the BrightMenu demo and User Guide for details).

• Interactive HTML content that offers a user interface to remotely control a digital sign for use in BrightLink 2-way implementations. The Custom Device Webpage in the BigBoxMedia project is called product-index.html and is a sample to guide you in your own designs and applications.

Note: Please contact your sales representative if you would like a reference to a BrightSign partner that is experienced in creating Custom Device Webpages.

In BrightAuthor, the Custom Device Webpage is assigned in Presentation Properties > Variables. This webpage is accessed via the assigned ‘hostname’ variable which a connected phone can view by scanning a QR code assigned to that hostname or by typing the hostname into any browser. If using BSN.cloud or BrightSign Network to publish your presentation, the HTML site name must be a unique name that does not match any other HTML site name saved in your account.

QRcode-hostname HTML

This free HTML code auto generates a QR code based on the assigned hostname user variable value. Once that value is changed, the QR code is auto-generated for the new value.

• In the BigBoxMedia example demo, this HTML code is used to display a QR code onscreen in a zone that matches the hostname variable value.

• This HTML code is also used to create the QR code that is generated and displayed within the Admin Portal when the same hostname variable value has been changed.

If you are using this HTML for onscreen content, the file needs to be referenced in your BrightAuthor project under Presentation Properties > HTML Sites.

QRcode-SSID HTML

This free HTML code auto generates a QR code based on the currently assigned SSID and password user variable values. Once that value is changed, the QR code is auto generated for the new values. The BigBoxMedia example demo provides this HTML code but it is not used in the presentation to display onscreen.

If you are using this HTML for onscreen content, the file needs to be referenced in your BrightAuthor project under Presentation Properties > HTML Sites.

Admin Portal

The Admin Portal has primarily been designed for BrightMenu to easily distribute menu images to patrons but it can be customized for BrightLink applications by editing the html files in npm.zip. The provided Admin Portal allows you to update the hostname user variable and auto generates a new, downloadable QR code for it. It also allows you to update the SSID user variables and the password to log into the Admin Portal. The Admin Portal can be accessed by typing hostname/admin into the browser of a connected device (for the BigBoxMedia example demo it is watch.now/admin).

Admin Portal Operations

The default Admin Portal supports the following operations and customizations:

• UPLOAD MENU: Uploads any image file in JPG or PNG format. Only one file can be uploaded at a time.

• SELECT MENU: Activates an uploaded file to be viewable when the QR code is scanned. Multiple image files can be selected and viewable. If multiple images are activated, they will display in alphabetical order and can be viewed by scrolling vertically through them in a browser.

• SET SSID VARIABLE: Lets you change the SSID value to a custom name to make it easy for users to recognize and find your Wi-Fi access point.

• SET HOSTNAME VARIABLE: Lets you change the hostname value to a custom name so you can match the name to your application and offer an easy way for connected users that can't scan a QR code to enter the hostname in their browser to see your custom content. Note that the hostname must end with a valid top-level domain name such as .com, .now, .link, etc. 

• PASSWORD: To ensure that your broadcasted content is secure, update the password to log into the Admin Portal.

• QR CODE IMAGE: This image automatically updates when the hostname value has been updated. It can easily be saved and communicated to users onscreen or as a printed sign.

Login Credentials

Login credentials are not required to enter the Admin Portal unless a password has been set for the Diagnostic Web Server in the player setup process. If the password field is left blank, then a password won't be required and the sign in screen to the Admin Portal will not be displayed. If a password has been set, the username will be set to admin and you be prompted with a sign in screen when accessing the Admin Portal. You can change the password at any time through the Admin Portal.

BrightLink BigBoxMedia Demo Example

This section describes how to setup, publish and operate the BrightLink BigBoxMedia project.

Demo Equipment Setup & Publishing

1. Setup a BrightSign player as described in BrightLink Requirements.

2. Connect the player as shown in Figure 1.

3. Open the provided BrightLink-MovieTrailers-WiFiName.bpf presentation in BrightAuthor or BrightAuthor:connected. You will be prompted to locate the necessary files.

4. Publish the presentation to an empty Micro SD card. Use the publish method you selected during setup – either standalone to a Micro SD card or over a wired ethernet connection using your selected networked publishing method. Wireless publishing is not supported with BrightLink.

5. Insert the Micro SD card and reboot the player. The player may take extra time to boot up as it configures itself for BrightLink.

Presentation Operation

You can interact with the player after it boots up and shows the main Big Box Media screen as in Figure 2. Follow the onscreen instructions to connect your phone and control the experience.

1. Using a smartphone, connect to the BigBoxMedia Wi-Fi network as prompted onscreen as Step 1. A password is not required.

2. Once connected, scan the onscreen QR code. To do this, open the camera app and aim the phone at the QR code. This will automatically grab the code.

3. Tap the notification to open the “watch.now” URL in your browser (see Figure 3). Your phone now displays the user interface to control the kiosk and the kiosk display now shows a movie select screen (see Figure 4).

4. Using the interface displayed on your phone, tap on a movie image to view its movie trailer on the kiosk, as in Figure 5.

Operational notes:

• You can select another movie trailer at any time by selecting an image on the phone.

• After a video ends, it will return to the Movie Select screen which will time out back to the main screen after 30 seconds.

• To quickly return to the main screen, select the Home button in the upper left corner on your phone, as shown in Figure 6.

• The phone will automatically disconnect from the Wi-Fi connection when it is out of range.

Customizing the User Connection

There are several different ways for a user to connect to a BrightLink digital sign for 2-way engagement. BrightSign recommends Option One, below, as the simplest process (it is depicted in our Movie Kiosk Demo). Options Two and Three can also be easily implemented to meet the needs of any application. 

Developer Notes

To make custom edits to the http servers, etc., a version of unwebpacked portal.js is available on request.