BrightLink
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.
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 Classic presentations using the example project provided in BrightLink-BigBoxMedia- v0.0.93-PACKAGE.zip. The BigBoxMedia BrightAuthor Classic 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 Classic 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
The downloadable BrightLink-v0.0.93-PACKAGE.zip contains these folders:
- BrightLink-BigBoxMedia-v.0.0.93 which contains a BrightLink demo with 2-way engagement including the BrightAuthor Classic project file, associated source files, and content as shown to the right.
- BrightLink-Docs which contains the information on this page in BrightLink-UserGuide-v093.pdf.
BrightLink Requirements
Player Requirements
- Any Series 3 or 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.
- A microSD card with a published BrightLink presentation created in BrightAuthor:connected or BrightAuthor Classic.
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 Classic or BrightAuthor:connected.
- 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.
- Setup the player:
- 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.
- 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.
- 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.
- 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 Classic Project Requirements
BrightLink requires the following elements in a BrightAuthor Classic project file to implement its functionality on a BrightSign player. Each elements are described in detail in “Implementing BrightLink in BrightAuthor Classic”.
- BrightLink User Variables (appropriately set in a BrightAuthor Classic 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.
BrightLink in BrightAuthor Classic
1-way Engagement
BrightAuthor Classic projects designed for BrightLink 1-way engagement primarily employ the following elements:
- Configures the BrightSign player as a wireless access point
- Hosts an image or a Custom Device Webpage that gets viewed as on a connected phone
- 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 Classic projects supporting BrightLink 2-way engagement primarily employ the following elements:
- Configures the BrightSign player as a wireless access point
- Hosts an interactive Custom Device Webpage that can be viewed as a menu on a connected phone
- 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 Classic such as employing user variables and zone messaging to trigger playback.
In the Movie Kiosk example, the BrightAuthor Classic 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 Classic 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 Classic 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 Classic 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 Classic 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 Classic 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.
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 Classic, 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 Classic 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 Classic 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.
Update the Admin Portal Password
These fields allow you to change the password to enter the Admin Portal at any time.
If the password was not set during the player set up process, then the default password is blank and no password is required.
Once a new password is entered and Update Password is selected, the user will automatically be logged out and must sign back into the Admin Portal with a username of admin and the new password.
Reset the Admin Portal Password
You can reset your password at hostname/forgotpassword (in the BigBoxMedia example it can be accessed at watch.now/forgotpassword). Follow the onscreen instructions.
Note that the SVC button is used in the password reset process, so the normal SVC button operation is no longer supported. However, a line of code in the httpServer-npm-auto_v3.brs plugin can be uncommented to return the SVC button to normal operation if desired.
Change the SSID AND hostname
This section walks through how to change the name of your Wi-Fi Network (SSID) and the name of your Custom Device Webpage (hostname) so that they match your application.
- Connect to SSID on your device.
- Login to the Admin Portal by typing hostname/admin into your browser. For example, in the BrightMenu demo, enter watch.now/admin.
- Under the hostname section, enter the name of your webpage. Note that your name must have a period in it.
- Under the SSID section, enter the name of your menu’s Wi-Fi network.
- Choose the Set Values button to apply your new names. Note that this will reboot your BrightSign player and configure it with the new names. It will also create a new QR code assigned to your new hostname.
- Scroll down to the QR code and save the QR code image that was generated for the webpage you just created and add it to your digital sign or printed placard for users to scan.
- Once the player reboots, you will be able to connect to the new SSID and scan the updated QR code to view your content at the new hostname.
BrightLink BigBoxMedia Demo Example
This section describes how to setup, publish and operate the BrightLink BigBoxMedia project.
Demo Equipment Setup & Publishing
Connect the player as shown in Image 1.
Image 1- Open the provided BrightLink-MovieTrailers-WiFiName.bpf presentation in BrightAuthor Classic or BrightAuthor:connected. You will be prompted to locate the necessary files.
- 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.
- 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 Image 2. Follow the onscreen instructions to connect your phone and control the experience.
- Using a smartphone, connect to the BigBoxMedia Wi-Fi network as prompted onscreen as Step 1. A password is not required.
- 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.
- Tap the notification to open the “watch.now” URL in your browser (see Image 3). Your phone now displays the user interface to control the kiosk and the kiosk display now shows a movie select screen (see Image 4).
4. Using the interface displayed on your phone, tap on a movie image to view its movie trailer on the kiosk, as in Image 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 Image 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.
Option 1 - Manual Join and QR code to launch the webpage
- Users can manually connect to Wi-Fi with an on-screen prompt displaying the SSID.
- Users can scan a QR code to launch the interactive Custom Device Web Page.
Option 2 - Dual QR Codes
- Scan a QR code to join the Wi-Fi connection for your display (using the SSID/Password variables).
- Scan a second QR code to launch a default browser with your hostname.
Option 3 - QR code to join and manual webpage launch
- Use a QR code to join the Wi-Fi connection.
- Display the hostname for the user to type into a browser (the hostname is Here in Figure 9).
Developer Notes
To make custom edits to the http servers, etc., a version of unwebpacked portal.js is available on request.