Digital Signage Demo - Dashboard & SDK

Overview

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, metrics, and logging.

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

Gumband for Operators

Exhibit operators can use the Gumband web dashboard to manage the exhibit without a deep technical understanding of the custom application. The platform exposes the custom app’s health, content, and metrics to allow for simple long-term management and updatability without developer involvement.

To access the web dashboard, open https://app.gumband.com in a web browser and log in. Users can either sign in via a Google account (which will automatically create an account if necessary), or use the “Create an account” link to sign up with other email addresses.

Exhibit Health

It’s critical to exhibit success to understand if the system is functional on a day-to-day basis. Gumband surfaces real-time notifications when it detects an outage from the exhibit, and offers basic control and debugging capabilities to get the exhibit back into a functional state.

Connection Status

Gumband monitors a system's critical components to understand its overall health. If the exhibit goes offline at any point, Gumband will notify the operators to begin triaging. The following videos show an exhibit coming online and offline, both causing an email notification - notice the change in the online and offline indicators ( → ).

Operating Mode

The exhibit operating mode is used to toggle exhibits “on” and “off” - the definition of which changes depending on the specific custom application. Developers are able to use this signal to put the exhibits into standby - increasing operational understanding of the exhibits while also increasing energy efficiency and reducing noise pollution (among other benefits).

For the digital signage demo, the operating mode is used to toggle the exhibit between display-on and display-off.

Statuses, Controls, and Logs

Gumband offers other tools to interact with an exhibit and understand how it is functioning. These tools allow operators a layer of visibility and control into the custom applications in order to maintain the exhibits and debug issues without developer involvement.

Statuses

The exhibit can push signals to the UI, known as statuses, to surface pertinent system information to operators. These appear on the “Overview” tab for an exhibit within the “Status” section. For the digital signage demo, the following statuses are exposed:

• Last Server Start - The date/time that the digital signage custom application was last started

• Access URL- A link to the digital signage UI

  • Note: this only works when a developer is running the exhibit locally

• Exhibit Docs - A link to the exhibit documentation for easy operator access (especially in the case where documentation links vary exhibit-by-exhibit)

• Active Pages Open - The number of web pages actively displaying the digital signage UI

  • Note: this status will display “0 (warning!)” when there are no active connections, meaning that the signage is not showing anywhere)

Controls

The developer can also expose “hooks” into the exhibit systems, known as controls, for the operator to trigger various actions via the product UI. For the digital signage demo, the following controls are exposed:

• Reboot Exhibit - Reboot the computer that the application is running on

  • Note: this is a placeholder and would need to be implemented by the developed depending on the specific setup of that system

• Reload Pages - Reload any active frontend web browsers

• Toggle Takeover - Toggle the active takeover mode (which is itself an exhibit setting)

Logging

Developers can use the Gumband logging utility to forward select application logs to the product which can be used to better understand typical exhibit operation and in debugging scenarios. The digital signage demo includes logging when the server is started, and when pages are connected and load the UI.

Exhibit Content

Over time, exhibit content can get stale or irrelevant to the new initiatives of the brand. Gumband offers real-time and scheduled content management capabilities to ensure an exhibit can be managed long-term without needed code updates to the system. Content updates can scale with the number of exhibits in an organization, so you’re able to make a single update in the web UI and apply to a fleet of exhibits.

Settings and File Management

Gumband exposes the copy and media assets through a simple web UI to allow operators to update the user experience over time.

Settings

Exhibits will have a number of pre-configured settings which can be adjusted over the life of the exhibit to alter visual or functional aspects of an exhibit. These settings have details and constraints to allow operators to manage the state of the exhibit long-term. These appear on the “Settings” tab within the Gumband exhibit interface. For the digital signage demo, the following statuses are exposed:

For the digital signage demo, the following settings are exposed:

• Slide X: Header Copy - (type: Text) - The displayed header copy for slide X; will not wrap

  • Note: A design decision was made during development to use vertical pipes (“|”) across the slide Text settings to allow for line breaks; this could have been implemented in a number of different ways

• Slide X: Page Copy - (type: Text) - The displayed page copy for slide X; will wrap

  • Note: The string “break” can be used to create line breaks within page copy (in addition to the vertical pipes noted above)

• Slide X: Image - (type: File) - The displayed image asset for slide X; displayed at the bottom at full screen width

  • Note: These options are driven based on available files in the “Files” tab of exhibit interface

• Takeover Enabled - (type: Toggle) - Whether or not the signage should display a fullscreen takeover image

• Takeover Image - (type: File) - The displayed image asset for when the fullscreen takeover is enabled

File Management

Operators can manage file assets that are synced with the exhibit, which are leveraged in the custom application to change visual or operational parts of the exhibit.

Scheduling

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 Metrics

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 which allow the operational to make informed decisions around future content updates and investment in these types of initiatives.

Reporting

Gumband has been configured to display operational metrics 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 like session duration, content choice popularity, and exhibit UX attrition.

Gumband for Developers

Developer Benefit

Gumband makes it easy to expose select parts of a complex technical system to non-technical operators in order to increase exhibit serviceability and maintenance (reducing support headaches 🙂). Gumband also offers tools for developers to increase development velocity and improve system testing and insights.

Example Files

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.

System Architecture

SDK Integration

Developers can leverage the publicly available Gumband SDKs and APIs to integrate the platform modules - health, content, and metrics - 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.

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

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.

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

{
  "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:

{
    "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:

{
  "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:

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