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.

TODO: < upload project zip >

The following is the directory structure:

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.

Constructor

TODO: backend/GumbandSdk.js.

Authentication

The SDK uses an exhibit ID and token in the authentication with the Gumband platform.

Manifest

TODO

Real-time Callbacks

TODO