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 Examples tab of the Experiences panel in Composer. You can also download it from the Intuiface Examples catalog.

The QSR Digital Menu Board sample was designed to alternate between two menus, Breakfast and Lunch, each with its own Featured Menu and Special Deal highlights. Toggling between the two menus is automated based on the 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 it is 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 products and details, and link your new base to the experience. To do so, update the BaseID and Authorization properties of all seven Airtable Interface Assets. 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 lists the Featured Menu based on which of the two menus is active. Thus 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.

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 on this topic are available in our Help Center article: Work with Intuiface & Airtable.

To keep the experience clean and readable, all the filters are calculated and stored in Global Variables, then accessed using bindings in requests.