Page Comparison

...

The Digital Signage Demo simulates retail or office signage developed as a custom web application. It cycles through an interface of three screens, each with customizable copy and images through Gumband. The signage demo also leverages Gumband’s real-time signals, metricsanalytics, and logging.

View the out-of-the-box experience below:

...

Gumband offers a calendar where settings and controls can be scheduled to manage planned updates to an exhibit over time. Events can either be created on a one-off or recurring basis. When an a scheduled event runs, it will apply only the selected real-time signals from the event configuration and will leave the others as they are currently set.

...

Exhibit

...

Analytics

Exhibit engagement and operational measurement is typically difficult to gather across the breadth and depth of these kinds of custom software and hardware systems. Gumband offers hooks at all layers in the system to surface metrics analytics which allow the operational to make informed decisions around future content updates and investment in these types of initiatives.

...

Gumband has been configured to display operational metrics analytics for the digital signage demo - such as “Server Starts” and “Reloads”. For an exhibit with active user interactions, those data points could also be reported to analyze metrics analytics like session duration, content choice popularity, and exhibit UX attrition.

...

Attached is the Digital Signage Demo project files. It contains a React.js frontend which can be loaded in a web browser and a Node.js backend that is integrated with the Gumband SDK.

TODO: < upload project zip >

The following is the directory structure:

System Architecture

...

...

Developers can leverage the publicly available Gumband SDKs and APIs to integrate the platform modules - health, content, and metrics analytics - into their custom projects. The Gumband Node.js SDK is available through npm, and the digital signage demo leverages it to offer the outlined functionality in this guide.

Constructor

TODO: The Gumband SDK is concentrated in the file gb-backend/GumbandSdk.js. The SDK is initialized on line 22, setting the API params and file sync content location, and disabling hardware communication.

this.gb = new Gumband(token, id, 'manifest.json', {
  endpoint: env,
  version: 'v1',
  contentLocation,
  gbttEnabled: false,
});

Authentication

The SDK uses an exhibit ID and token in the authentication to authenticate with the Gumband platform. Notice the ID and token passed into the SDK constructor above.

You can view the exhibit ID and generate new tokens on the “Auth” tab of the exhibit. Auth tokens are only shown once in the dashboard to ensure exhibit security. Ensure you keep your tokens private.

...

Manifest

TODO

Real-time Callbacks

...

The SDK uses a JSON configuration file called the manifest to identify the real-time signals (statuses, settings, and controls) that are available for an exhibit. Notice the filename manifest.json is passed into the SDK constructor above.

A future update of Gumband will allow the exhibit to be configured in the dashboard without the need to manage manifest files.

The manifest.json file is structured as follows, and can include any number of real-time signals.

Code Block
{ "manifest": { "statuses": [], "controls": [], "settings": [] } }

For all real-time signals, the id of each signal is used to associate them in code to implement the desired action.

Statuses

Statuses are used to surface relevant details of the system to operators. These are shown as strings (potentially links) in the dashboard. Notice that you can set the display copy and order for the label in the dashboard and a default value. All statuses have type String.

The statuses for the digital signage are as follows:

Code Block

{ "id": "last_server_start", "type": "String", "display": "Last Server Start", "default": "(not set)", "order": 0 }, { "id": "access_url", "type": "String", "display": "Access URL", "order": 1 }, { "id": "docs", "type": "String", "display": "Exhibit Docs", "order": 2, "default": "https://deeplocal.atlassian.net/wiki/spaces/GUM/pages/92995599/Gumband+Digital+Signage+Demo" }, { "id": "num_ws_connections", "type": "String", "display": "Active Pages Open", "order": 3, "default": "0 (warning!)" }

Controls

Controls are hooks into the exhibit that are exposed on the dashboard to allow operators to trigger actions on the system. These actions can include reboots/restarts/resets, advancing the UX for testing, or other things tailored to the specific experience. Notice that you can set the display copy and order for the label in the dashboard. Controls can have a few types, view the options in the Node.js SDK README.

The controls for the digital signage are as follows:

Code Block
{ "id": "reboot", "type": "Single", "display": "Reboot Exhibit", "order": 0 }, { "id": "reload", "type": "Single", "display": "Reload Pages", "order": 1 }, { "id": "toggle-takeover", "type": "Single", "display": "Toggle Takeover", "order": 2 }

Settings

Settings are the configurable state of an exhibit that operators can use to manipulate the system in the desired ways. These settings are always tailored to the specific experience, and can include things like active in-UX content and system volume or timeout duration. Notice that you can set the display copy and order for the label in the dashboard and a default value. Settings can have a many types, view the options in the Node.js SDK README.

The settings for the digital signage are as follows:

Code Block

{ "id": "slide-1-header", "type": "TextInput", "display": "Slide 1: Header Copy (use | as line break in all copy)", "default": "", "order": 0 }, { "id": "slide-1-copy", "type": "TextInput", "display": "Slide 1: Page Copy (first item is column header)", "default": "", "order": 1 }, { "id": "slide-1-image", "type": "FileSelection", "display": "Slide 1: Image", "order": 2 }, // slide 2 and 3 settings ommitted for space { "id": "takeover-enabled", "type": "Toggle", "display": "Screen Takeover Enabled", "default": "", "order": 9 }, { "id": "takeover-filename", "type": "FileSelection", "display": "Takeover Image Asset (3840x1080)", "order": 10 }

Real-time Callbacks

The SDK automatically manages the connection with the Gumband platform and exposes real-time callbacks for the developer to respond actions performed by operators or automatically through the platform. The callbacks use the signal id to determine what action to perform, and then the developer implements the relevant functionality. You can see the full list of the callbacks in the Node.js SDK README.

The callbacks are registered in the SDK constructor on line 29.

this.gb.on(Sockets.READY, this.onGumbandReady.bind(this));
this.gb.on(Sockets.OP_MODE_RECEIVED, this.onGumbandOpModeReceived.bind(this));
this.gb.on(Sockets.SETTING_RECEIVED, this.onGumbandSettingReceived.bind(this));
this.gb.on(Sockets.CONTROL_RECEIVED, this.onGumbandControlReceived.bind(this));
this.gb.on(Sockets.FILE_UPLOADED, this.onGumbandFileUploaded.bind(this));

A simplified version of the control callback is as follows:

// called whenever a user triggers a control on Gumband
async onGumbandControlReceived(control) {
    console.log('control', control);
  

    // determine action to take based on control id
    if (control.id === 'toggle-takeover') {
      // developer implement action
      return;
    }
}

A simplified version of the setting callback is as follows:

// called whenever a user changes a setting on Gumband - OR -
// when gb.setSetting(id, value, realtime = true) is called from the SDK
onGumbandSettingReceived(setting) {
  console.log('setting', setting);
  
  // handle actions based on setting id within function
  if (this.updateConfigFromSettings([setting])) {
      this.reloadFrontend();
  } else {
    // handle takeover-related settings that are managed in frontend state only
    this.websocketServer.sendToAllClients(JSON.stringify(setting));
  }
}