Introduction

This article explains how the QSR Digital Menu Board sample was built and what you can learn by digging into it. To access this sample, use the Marketplace tab of the Experiences panel in Composer or Player. You can also download it from this Marketplace page.

The QSR Digital Menu Board sample was designed to alternate between two menus, Breakfast and Lunch, each one having its own Featured Menu and Special Deal highlights. Toggling between the two menus is automated based on time of day.

All data (parameters, menus, products name, description, pictures) are stored in an Airtable database. (Airtable refers to it as a "base".) As a result, menu content can be modified without any editing in Composer; changes can be made to the Airtable base directly.

How it works

The main principles are the following:

When the experience starts, multiple requests are sent to four tables in an Airtable base via several REST-based Web Service Interface Assets:

• one request retrieves design parameters from the "Parameters" table
• a second request retrieves menu section names based on the hour from the "Menus" table (using a filter based on time)
• once the menu sections are set:
  • a request is made to retrieve all products for the active menu from the "Products" table (using a filter based on the menu name)
  • a request is made to retrieve the three Special Deal options for the active menu from the "Products" table (using a filter based on special deals)
  • a request is made to retrieve the Featured Menu item for the active menu  from the "FeaturedMenus" table (using a filter based on the menu name)

All text in the scene is pulled from the Airtable base using the above requests. These requests are refreshed every time the hour changes.

In addition to the menu itself, we display a "Settings" button that can be used to force the display of a particular menu. (NOTE: The hourly refresh can undo your setting if its different from what's appropriate for a given hour.)

The Airtable base

The Airtable base is the backbone of the whole experience, used as a CMS, storing content, design and context behavior.

You can also easily copy this base, add your own details, products and link your new base to the experience. To do so, update the BaseID and Authorization properties of the all the seven Airtable Interface Asset. See detailed instructions here. 

Parameters table

The Parameters table addresses most of the Splash Screen design and behavior.

Fields in the Parameters table:

• BGColor: a background color for the experience (in case no splash image is used)
• DelayOnStart: how many seconds to display the splash image before displaying the menu
• SplashImage: image displayed on the splash screen when the experience starts
• SplashText: text displayed on the splash screen when the experience starts
• ClosedMessage: not used

Menus table

The Menus table contains the section title text for each menu and the times of day to display each menu.

Fields in the Menus table:

• Name: menu name; will be used for filtering on the other tables
• Section1Title/Section2Title/Section3Title: titles for each of the 3 menu sections
• TimeStart and TimeEnd: hours for the day during which a particular menu is displayed

Products table

The Products table stores each individual menu item. Several data requests are made, each with a different filter for a different purpose

• 3 requests to get the products for each of the 3 sections
• a 4th request to retrieve a list of the three products to display as Special Deals.

The different fields and their usage in the experience are shown in the picture below.

FeaturedMenus table

The FeaturedMenus table contains listings for the Featured Menu based on which of the two menus is active. Thus are there are both Breakfast and Lunch featured menu items.

The different fields and their usage in the experience are shown in the picture below.

Establishing the layout

As the QSR Menu Board sample is intended to run on a small device in a restaurant, we made it as light as possible. This includes our decision to use a single scene in order to ensure every bit of data is loaded once and only once.

Sequencing layers in a single scene

As we use only one scene, the trick is to manage how and when layers are displayed.

In order to do that, we use 3 Countdown Interface Assets:

• a first Countdown IA is used to hide the splash screen and show the active menu with products
• two other Countdown IAs are used to toggle the display on the right side of the menu between Special Deals and Featured Menu items. This toggling can go on perpetually.

In addition, we have a Clock Interface Asset refreshing the active menu data feed (Breakfast or Lunch) every hour on the hour.

Filters in Airtable

Most of the Airtable requests are using a filter. This filter is created by using a FilterByFormula parameter in each query. More details are available on this topic in our Help Center article: Work with Intuiface & Airtable.

In order to keep the experience clean and readable, all the filters are calculated and stored in Global Variables then used with bindings in requests.