Page Comparison

...

TODO: < upload project zip >

The following is the directory structure:

System Architecture

...

...

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));
  }
}