BrightMenu User Guide

Owned by BrightSign TechDocs
Last updated: May 31, 2023Version comment
19 min read

Overview

BrightMenu provides restaurants with a touchless menu solution that enables customers to display a menu on their mobile devices. Customers connect to a BrightSign player via Wi-Fi, then scan a printed QR code to view the menu. BrightMenu runs on any phone with a browser and any number of patrons can view "the menu" at once. Connecting and viewing the menu does not require an internet connection, app download, or even HD display. This page shows how to setup a player and use BrightAuthor to publish and "near-cast" your restaurant's menu throughout the location using the provided BrightMenu-v.0.0.93.bpf project.

How It Works

The BrightMenu solution configures the BrightSign player to act as a web server which configures the installed wireless module as a Wi-Fi access point and hosts a Custom Device Webpage containing a restaurant menu. 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 set to My Menu Network for the example demo). Once the user’s phone is connected to the Wi-Fi access point, they can easily scan a printed QR code and view the menu in a web browser on their phone. Instead of scanning a QR code, a user can type in the hostname into their browser to view the menu (the hostname is my.menu in our BrightMenu Example Demo). While BrightMenu does not require a display, one can certainly be connected to the BrightSign player to enhance the experience by playing engaging content onscreen while at the same time serving the BrightMenu solution to connected user phones.

Since BrightMenu uses essentially the same functionality as BrightLink, but with only 1-way engagement between the BrightSign player and the user phone, many phones can be linked at once to the Wi-Fi access point to reliably view the menu. BrightMenu also offers an Admin Portal which is a Custom Device Webpage that can be accessed at the URL hostname/admin (in the example demo, it is my.menu/admin) of a connected phone and offers a user interface to easily upload and activate JPG and PNG menu image files which are then viewable when a connected user scans the QR code. If multiple image files are selected to be viewable, they will display in a vertical scrolling fashion on the user phone in alphabetical order. The Admin Portal also allows you to customize the SSID and hostname user variables instead of using the default names in the BrightMenu Example Demo.

BrightMenu Package Contents

The BrightMenu-v0.0.9-PACKAGE.zip has been provided which contains:

  • A BrightMenu-v0.0.9 folder containing an example BrightMenu demo including the BrightAuthor project file, associated source files and content as shown:

  • A BrightMenu-Docs folder containing:

    • BrightMenu-UserGuide-v09.pdf

    • Menu-Template.pptx

    • BrightMenu-Placard.pdf

    • BrightMenu-Placard-Template.docx

BrightMenu 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 BrightMenu functions and cannot be configured or used for publishing presentations or any other functions.

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

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

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

BrightSign Player Setup

A BrightSign player running a BrightMenu 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 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. Go here for OS downloads.

  2. Setup the player

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

    2. Under Unit Configuration, check the box to 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. Note that the traditional diagnostic web server is not accessible via the wireless module for BrightMenu applications therefore 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

BrightMenu requires the following elements in a BrightAuthor project file to implement its functionality on a BrightSign player. Each of these elements are described in detail on this page.

  • BrightMenu 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

  • Custom device webpage (created for and optimized to run on a smartphone)

  • QRcode-Join HTML

BrightMenu Deployment Requirements

A printed placard communicating to patrons the Wi-Fi Network name to connect to and a QR code to scan to view the menu. BrightSign provides a BrightMenu-Placard-Template.docx file that supports our BrightMenu example demo and can easily be modified for a customized BrightMenu implementation.

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 4-5 feet. The signal range is also affected by location, for example, whether the player is in the line of sight of the user or mounted behind a display.

What’s Not Required

  • 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 or view the menu. BrightMenu uses existing features available on all smartphones to connect to a Wi-Fi access point hosted by the BrightSign player and to scan a QR code using the phone’s camera.

  • A display is not required for BrightMenu to function as the printed placard explains how to connect and access the menu hosted on the BrightSign player.

    • A display for setup and testing purposes can be helpful as shown in our BrightMenu example demo.

    • Displays are optional and can be connected to the BrightSign player to playback digital signage content and enrich the experience.

Implementing BrightMenu in BrightAuthor

BrightAuthor projects designed for BrightMenu primarily employ the following elements:

  1. Configures the BrightSign player as a wireless access point

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

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

This section will primarily focus on explaining the components that make up our example BrightMenu presentation. See Optional Connected Screen Implementations to play a digital signage presentation while running a BrightMenu solution.

In the BrightMenu example demo, a multizone presentation has been created to run on a screen which can be helpful for setup and testing purposes. It displays the following content:

  • Background image zone: containing the BrightMenu Title & the 2-Step process a user would follow to connect and view the hosted menu – this content is the same as provided in the BrightMenu-Placard-Template.docx

  • QR code zone: displays the HTML QR code content which is auto generated based on the currently assigned hostname user variable value. Whenever the value of the hostname variable changes, this zone is updated with a newly generated QR code to match

  • Hostname zone: displays the currently assigned hostname variable directly under the QR code zone to assist with setup and testing

  • Live text zones: display the configurable user variables needed for BrightMenu to assist with setup and testing

BrightMenu User Variables

BrightMenu supports an array of customizable user variables allowing you to customize the experience for your implementation. These user 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. Please note that the wireless module is solely used for BrightMenu functions and cannot be used for publishing presentations.

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

  • 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. Note that the BrightMenu example demo has users manually connect to this SSID on their phone by instructing them to do so on the printed placard and on the optionally connected screen.

  • 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 as a menu on a connected phone in a browser. Please note that your name must end with a valid top-level domain name such as .menu, .com, .eat, .cafe, etc. Otherwise, the value can be set to anything you would like to make it easy for the user to understand and identify with your menu such as JPsGrill.menu or JPsGrilleMenu.com. The hostname also offers access to the Admin Portal by typing in hostname/admin into a browser of a connected device.

    • We recommend that users access the 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 BrightMenu example, free HTML code has been provided that automatically generates a new 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 a wide range of available IP addresses in order to support all of the users you would like to be able to connect to BrightMenu at once.

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

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

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

  • connect-status: This variable is required but should be set as shown and left unchanged.

Set_Player_As_Access_Point_plugin.brs

This plugin configures the BrightSign player to act as a web server and as Wi-Fi access point which is what allows a user device to connect to it. No Internet is required for the BrightSign player to enable this BrightMenu 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 and BrightMenuInstructions.zip to the card. The plugin creates a /node folder with server.html and portal.js files. These files setup the player proxy to direct the connected phone to the menu’s Custom Device Webpage hosted on the BrightSign player. The webpage’s URL is accessible via the specified hostname in the user variables 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 which could contain further functionality for the experience.

This npm.zip file must be referenced in the BrightAuthor project under Presentation Properties > Files dialog.

instructions.zip

The instructions.zip file contains files which are unzipped and placed into a folder named uploads on the SD card when the BrightMenu Example Demo is run for the first time. The files this zip file contains are example menu images to test with as well as a default instructions.png file. The instructions.png file is activated by default to display on a connected phone when it scans the QR code. The instructions detail how to access the Admin Portal and upload menu images and activate them to display on a user’s phone.

  • BrightMenuInstructions.png | instructions image that displays the very first time a BrightMenu presentation is run, and directs the user how to login to the Admin Portal to customize their menu view.

  • Menu1.jpg, Menu2.jpg, Menu3.jpg | these are example menus that can be activated for testing purposes.

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

Custom Device Webpage

The restaurant menu content that is viewed on a connected user’s phone is implemented using a Custom Device Webpage. When accessed via the user scanning a QR code, it opens the default web browser on a user’s phone to display it. There are multiple ways to create a Custom Device Webpage with the menu content.

Our BrightMenu example demo uses a basic approach in the design of its Custom Device Webpage which simply displays one or multiple JPG or PNG files in a web browser after a single QR code scan. If multiple images are selected to be displayed as part of the menu, they will be viewable in a vertical scrolling fashion and the images will be displayed on the user’s screen in alphabetical order. This implementation also supports an Admin Portal which makes it easy for restaurant owners to update menu content directly from their phone. This Admin Portal is explained in detail later in this document.

A more tailored and engaging solution can be created by designing a Custom Device Webpage that supports a wide variety of implementations rather than simply displaying a file to view. The design of a Custom Device Webpage for BrightMenu is not limited to what would run on a BrightSign player, but rather what would run on a smartphone. Custom approaches could include supporting multiple QR codes allowing a user to scan each one to quickly access a specific menu category of interest such as specials, drinks, desserts, etc. Yet another implementation could be to design an interactive Custom Device Webpage that supports buttons allowing a restaurant with a large menu to make it easier to navigate to the menu sections directly on the user’s phone. Experienced designers could even build out solutions that narrow choices by selected ingredients, view nutrition information and even display coupons, discounts, or simple games to keep children occupied.

Please contact your sales representative if you would like a referral to a BrightSign Integrator or VAR partner who is experienced in creating Custom Device Webpages.

In BrightAuthor, the Custom Device Webpage is assigned under the Presentation Properties > Variables dialog. This webpage is accessed via the assigned hostname variable. 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 currently assigned hostname user variable value. Once that value is changed, the QR code is auto generated for the new value. In the BrightMenu example demo, this HTML code is used to display a QR code on-screen in a zone that matches the hostname variable value. And 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.

This HTML file needs to be referenced in your BrightAuthor project under Presentation Properties > HTML Sites.

Admin Portal

The Admin Portal is designed for restaurant owners and managers to easily use our default BrightMenu example demo as their own presentation to distribute their menu to patrons by uploading and choosing their menu images to display on user phones. End users can also use the Admin Portal to customize the SSID and hostname to meet the needs of their establishment. Access to the Admin Portal requires you to connected to the default Wi-Fi access point or SSID which is My Menu Network. Once connected, access the Admin Portal by entering hostname/admin in a browser. For the BrightMenu Example Demo this is by default my.menu/admin.

Login Credentials

No login credentials are 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 no password will 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.

Resetting a Lost Admin Portal Password

If you forget your password, it can be reset it by visiting hostname/forgotpassword and following the provided onscreen instructions (for the BrightMenu example demo it can be accessed at my.menu/forgotpassword). Please note that the SVC button is utilized in the process to reset the password, therefore 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 out to return the SVC button back to normal operation if desired.



Admin Portal Operations

The Admin Portal supports the following operations and customizations:

  • UPLOAD MENU: Uploading a menu in a file format of JPG or PNG. Only one file can be uploaded at a time.

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

  • SET SSID VARIABLE: Changing the SSID value to a custom name is supported so that restaurants can easily choose a name for their Wi-Fi access point that is clearly recognized by patrons wanting to connect

  • SET HOSTNAME VARIABLE: Changing the hostname value to a custom name is supported so that restaurants can easily choose a URL for their menu that matches their establishment and can be easily typed into a browser by a patron wanting to view the menu in the event that a printed QR code is not available. Please note that the hostname must end with a valid top-level domain name such as .menu, .com, .cafe, etc. 

  • PASSWORD: Updating the password to enter the Admin Portal is important to ensure your broadcasted menu is secure.

  • QR CODE IMAGE: this image automatically updates when the hostname value has been updated. The QR code image can easily be saved and printed for patrons to use.

  • NOTE: BrightSign offers a BrightMenu-Placard-Template.docx that can easily be edited and printed with updated SSID, Hostname and QR codes to display at each patron’s dining table.



3Uploading a Menu File

  1. Connect your device to the assigned SSID Wi-Fi access point. The default SSID is My Menu Network in the example BrightMenu demo.

  2. Login to the Admin Portal by typing hostname/admin in your browser. For the example BrightMenu demo, type in My.Menu/admin.

  3. Select Choose Files in the Upload image section.

  4. Locate and select your menu image file. BrightMenu supports PNG or JPG files.

  5. Select Upload to upload the image menu file to the BrightSign player. If you do not have a compatible menu image file, follow the instructions below for Creating A Menu File.

Selecting a New Menu File

  1. Select the menu image file or files you wish to display under the Selected Image section.

    • A check mark will appear next to files that have been selected.

    • If multiple files are selected, they will be displayed in alphabetical order.

    • Three sample menu files have been provided to use for testing purposes.

  2. Select Choose Image to activate the selected menu image files.

Updating 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 setup process, then the default password is blank meaning 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.



Changing the SSID And hostname

  1. Connect to SSID on your device.

  2. Login to the Admin Portal by typing hostname/admin in your browser. For the example BrightMenu demo, enter My.Menu/admin.

  3. In hostname, enter the name of your webpage (URL).

    1. Your name must end with a valid top-level domain name such as .menu, .com, .eat, .cafe, etc. 

    2. An example hostname for JP’s Grille, could be JPsGrille.Menu.

  4. Under the SSID section, type in the name of your Menu’s Wi-Fi Network (for example, JPsGrille Menu Network).

  5. Choose Set Values to apply your new names. 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.

  6. Scroll down to the QR code and save the QR code image that was generated for the menu webpage URL you just created and add it to your digital sign or printed placard for users to scan.

    1. Use the provided BrightMenu-Placard-Template.docx from and edit the document with the new network name and new QR code and hostname.

    2. Print out this placard and display it on each dining table to instruct your customers how to view your menu.

  7. Once the player reboots, you will be able to connect to the new SSID name and scan the updated QR code to view your menu.

Creating a Menu File

Choose a method below to create a compatible PNG or JPG image file to use with BrightMenu.

Take Photos of Your Printed Menu

Follow these steps to create a single photo image file of your printed menu.

  1. Layout your printed menu flat on a table.

  2. Take a photo of each page of your menu.

  3. Edit each photo to crop and brighten the image as needed.

  4. Follow the Uploading a Menu File and Selecting a New Menu File sections above to upload and choose your menu files to be viewed.

Edit the Provided Template in PowerPoint

Follow these steps to create your menu image files by editing our provided menu template.

  1. Use the provided Menu-Template.pptx file

  2. Open the document in Microsoft PowerPoint.

  3. Tap on the placeholder logo and delete it. Then click on the placeholder image icon & add your own logo.

  4. Tap on the placeholder background image & delete it. Then click on the placeholder image icon & add your own image.

  5. Modify the menu items and prices to match your menu.

  6. Save each slide as a PNG or JPG file (for example, JPsGrille-menu.jpg)

  7. Follow the Uploading a Menu File and Selecting a New Menu File sections above to upload and choose your new menu image files to play.

BrightMenu Demo Operation

This section describes how to publish the provided BrightMenu-v0.0.93.bpf BrightAuthor project and run it on a BrightSign player setup for BrightMenu.

Connection Instructions

Set up the player as shown in the diagram to the right. You can interact with the player after it boots up and displays the main screen (if connected to a screen), or when the My Menu Network becomes available on your Wi-Fi connection screen. You can print out the provided BrightMenu-Placard.pdf if you do not have a connected screen.

 

User Instructions

1. While connected to My Menu Network, scan the QR code on the BrightMenu-Placard.pdf or screen. To scan a QR code, open the camera app and simply aim it at the QR code.

2. Tap on the notification to view your menu.

• If multiple menu images were activated, scroll down to view them.

• The first time this presentation runs, your phone will display our provided BrightMenu Instructions.png until you select our included menu.jpg files or upload and select your own menu image. See Admin Portal for details.

Optional Connected Screen Implementations

Though you don't need to connect a display to the BrightSign player to use BrightMenu, a digital sign presentation can enrich the restaurant experience. BrightSign players deployed for BrightMenu solutions are powerful enough to run both the BrightMenu experience and a digital sign presentation simultaneously. The possibilities are virtually limitless to deploy both a BrightMenu experience on a user’s phone through a Custom Device Webpage while delivering an on-screen digital sign using our vast collection of BrightSign and BrightAuthor features.

Customizing the User Connection

There are different ways for a user to connect to BrightMenu. BrightSign recommends a simple 2-step process as depicted in our BrightMenu example demo which supports:

  1. The user can manually connect to Wi-Fi on their phone with instructions displayed on a tabletop placard.

  2. The user can scan the QR code to launch the Custom Device Webpage displaying the menu.

  3. Other methods can easily be implemented to meet the needs of any application including:

  • Dual QR codes: One QR code can be used to join the Wi-Fi connection (use the SSID/Password variables to generate a QR code from this free website) and the second QR code can be used to launch the custom device webpage with your hostname.

  • Using a QR code to join the Wi-Fi connection and displaying the URL on a placard for the user to type into a browser.

Developer Notes

  • If your application needs to make custom edits to the http servers, etc., a version of unwebpacked portal.js is available upon request.

  • The player’s diagnostic web server can only be accessed via a hardwired ethernet connection to the player.