Gumband Web UI
Organizations and Sites
An Organization is the highest-level entity within Gumband. This is typically your company, business unit, or specific team name. Within your Organization, you can create any number of Sites to hold Exhibits and Hardware. A Site is generally the physical location where Exhibits are installed, such as different cities, building locations, or floors.
Organization, Site, and Exhibit hierarchy
Log in to Gumband
Developer accounts must be created by Deeplocal before accessing the platform
Gumband is secured using Google Oauth and is extensible to support other third-party providers as necessary. Navigate to
in a browser and click the appropriate button to log in. If you have not been added to Gumband, you will see an unauthorized page.
Log in page
Unauthorized page
User Permissions
Users can be added as managers or viewers within Sites and Organizations. Only Organization and Site managers can view, add, and remove users and change their permissions.
Permissions are more granular at the Exhibit level. Users can be given read and write permissions for each status, control, and setting. This is especially useful when wanting to share Exhibit information (such as health or metrics), but prevent users from accidentally modifying mission-critical settings.
User permissions page
Exhibit UI
Create a New Exhibit
Navigate to the Site under which this Exhibit will exist
Click “Create Exhibit”
Give your Exhibit a name
Optionally enter the MQTT path (usually the computer’s local IP address and MQTT port ie “192.168.1.128:1883”)
Click “Create”
Note the Exhibit ID and token for initializing the SDK
View Site Exhibits page
Create Exhibit dialog
Exhibit Auth tab
Operating Mode
Each Exhibit has an operating mode (on or off). This is useful for maintenance and support in turning off screens and disabling interactivity of Exhibits. The operating mode status is displayed by the switch on the left of the Exhibit name and connection status — if the toggle is to the left and gray, operating mode is off; if it is to the right and orange, operating mode is on.
Gumband also allows specific Controls and Settings to be available depending on the current operating mode; this is defined in the Exhibit Manifest. By default, Settings and Controls are only editable when operating mode is disabled — notice in the screenshots below how the “Reload” button is only available when the operating mode is set to off.
Operating mode off (“Skip Interaction” disabled)
Operating mode on (“Reload” disabled)
View Statuses
Statuses are displayed on the “Overview” tab. The list of Statuses is restricted by User Permissions. The “Overview” tab also shows a summary of the Exhibit, including read-only Settings and Hardware information.
Exhibit Overview tab
Trigger Controls
Controls can be triggered in real-time from the “Controls” tab. The list of Controls is restricted by User Permissions. Controls can be disabled/enabled based on the Exhibit Operating Mode.
Exhibit Controls tab
Update Settings
Settings are shown as read-only on the “Overview” tab and editable on the “Settings” tab. The list of Settings is restricted by User Permissions. Settings have types such as string, integer, dropdown, etc.
Exhibit Settings tab
Manage File Content
Users can upload files to the Exhibit through the “Content” tab. Files uploaded can be accessed through the SDK, which allows users to easily swap static asset files used by the Exhibit.
Exhibit Content tab
Manage Hardware
To view Hardware connected to an Exhibit, visit the “Hardware” tab. Users can also update the Exhibit’s MQTT path (IP address and port) and connect new Hardware. Note that only Hardware under the current Site that is not connected to another Exhibit will be available.
Exhibit Hardware tab
Exhibit “Connect Hardware” dialog
View Developer Logs
Exhibit logs can be viewed under the “Logs” tab. Logs are updated in real-time as they are emitted by the SDK. Users can also filter logs based on a timeframe as well as the event type (debug, info, warn, or error). This allows Exhibit managers to debug any problems that may have occurred throughout the lifespan of the Exhibit. Exhibit logs are stored for 3 months.
Exhibit Logs tab
View a Report
Reports can be viewed under the “Reports” tab. These are reports of a combination of Gumband and user-defined events that can be triggered by the SDK. These reports can consist of number of user interactions, number of Hardware failures, and more. The daily distribution also helps to do a more granular analysis of Exhibit events. Raw Report data can also be exported as a CSV.
Exhibit Reports tab
Schedule Events
Events can be scheduled under the “Schedule” tab. Events are a combination of controls, settings, and operating mode changes that occur at a predefined time. Scheduling provides an easy way to make sure certain controls and settings are activated or modified in time. Events can also be set to recur. This is especially useful for Exhibits that have a standard start-of-day and end-of-day procedure.
Exhibit Schedule tab
Create Event View
Create Event View
Configure Notifications
Notifications can be activated through the “Notifications” tab.
Users added to the Exhibit can configure email alerts for relevant critical changes to the Exhibit including:
Custom Exhibit Notifications (from the SDK)
Hardware Add/Remove
Schedule Changes
Exhibit Deletion
Exhibit Connection
Operating Mode Change
Exhibit Notifications tab
Manage Auth Tokens
Auth tokens are automatically generated when the Exhibit is first created. These tokens are used by the SDK to authenticate and connect to the Exhibit. Once created, token values are not visible through the UI for security reasons, so it is important to store these values somewhere safe. A user can generate additional tokens through the UI under the “Auth” tab. Tokens can also be deleted if they have been compromised or lost.
Strapi CMS Integration
To expand the content management capabilities of Gumband, another CMS system called Strapi is shipped as a part of the overall Gumband solution. Within Strapi, custom content types can be created with a variety of field options, and then content can be managed of that content type. The content managed in Strapi is then shared within an Organization and can be assigned to exhibit settings, propagating to any SDK listeners in real time.
Strapi Documentation
Access Strapi
Access Strapi at your organization's Gumband domain followed by /strapi ie. https://tiktok.gumband.com/strapi
Temporarily, another login is required and is different from the Gumband authentication system. Ask your platform admin to create credentials for you. The Gumband team is working on a seamless Oauth integration between the two systems.
Create a New Content Type
See Introduction to Content-Types Builder
Note that content type fields can contain relationships to other content types. In this situation, the Gumband-Strapi system will only return values to the SDK one level of nesting deep. For example, let’s say “CategorySets” contains many “Categories” contains many “GameTitles”. If the manifest contains a setting for “Categories”, the SDK will receive the “GameTitles” values inside of the “Categories” object in the JSON payload. However, if the manifest contains a setting for “CategorySets”, the SDK will ONLY receive the “Categories” values inside of the “CategorySets” object, and NOT the “GameTitles” values.
TODO: allow access to gumband API user!
After creating a new content type,
Click “Settings” on the left nav, then “Roles” under the “Users & Permissions Plugin” section, then the pencil icon to the right of the “Public” role
Scroll down to the “Permissions” section, expand the “Application” section, and “Select all” for all content types. Then click the green “Save” button in the top right.
Manage Content of a Content Type
See Introduction to Content Manager
Define a Strapi Content Setting Type in the Manifest
Manifest settings can be defined as “StrapiContent” types and should take the following format:
{
"id": "unique-manifest-id",
"type": "StrapiContent",
"contentType": "content-type-from-strapi",
"contentValue": 3, // optional
"displayFieldName": "DisplayField",
"display": "Strapi Content Test"
}
Description of fields:
id: A unique string (no spaces) to identify this setting against others for this exhibit
type: Always string “StrapiContent”
contentType: The dynamic content type from Strapi, made to be plural (include an “s” at the end - see below screenshots)
contentValue: The ID value of the content item that should be the value of this setting or null
displayFieldName: The string name of the field that should be used for selection within the Gumband UI
display: The setting label for within the Gumband UI
To find the contentType for the manifest, select the content type under “Collection Types” in the left navbar and then select a single content item. Use the value next to “API ID” under the item header, and add an “s” to make that string plural. In this example, you would use contentType “oscar-test-types” in the manifest.
Assign Strapi Content to an Exhibit Setting
After defining a custom content type and loading content within Strapi, and then running an exhibit with a properly configured “StrapiContent” setting type in the manifest, you are ready to change that setting’s values dynamically in Gumband.
Open the exhibit UI within Gumband and navigate to the Settings tab. Find the relevant setting and select the value from the dropdown. After hitting Save, the value will update and the SDK should receive a real time notification with the value.
(A number of OscarTestType items are loaded in Strapi)
(Two StrapiContent “oscar-test-types” settings are defined in the manifest)
(Values from the Strapi content items’ “Name” field are displayed as options for the setting within the Gumband UI)
(After saving an updated setting value, the SDK receives a real time callback with the setting value)
Gumband-Strapi Integration Roadmap
The following updates are in development:
Seamless authentication between Gumband and Strapi
Syncing file content between Strapi and Gumband exhibits
Push updates to the SDK when a content item is changed within Strapi that is used as the value of a Gumband setting
Hardware UI
Create new Hardware
Navigate to a Site under which this Hardware will exist
Click “Create Hardware”
Enter a name for the Hardware device and press “Create”.
Note the Hardware ID and token for initializing the Hardware library
View and Test Peripherals
Users can view and test Hardware Peripherals under the “Peripherals” tab. Peripherals are only interactive when the debug mode is On to prevent interrupting live usage of the Exhibit. Debug mode can be toggled through the switch on the left of the Hardware device name. Usually, the debug mode will be off in production and on during development and testing. Doing this optimizes latency for local Exhibits and reduces load on the Gumband infrastructure.
When the debug mode is On, all peripheral values such as encoder information and button clicks are sent and updated in real-time in this view. When the debug mode is Off, all peripheral values and events are sent to the Exhibit.
View Developer Logs
Similar to an Exhibit, Hardware logs can be viewed under the “Logs” tab. This view will contain all logs sent by the Hardware device in real-time and will also allow the user to filter the logs by date or event type.
Run a Report
Similar to Exhibits, Hardware reports can be viewed under the “Reports” tab. These reports can aggregate on any developer-defined such as the number of times a button was pressed or the CPU booted.
Connect to an Exhibit
In most cases, Hardware will eventually connect to an Exhibit and start interfacing with it. To do so, head over to the “Overview” tab and click “Connect to Exhibit”.
A modal will pop up and display all available Exhibits within the same organization. Choose the Exhibit to connect to.
The hardware has successfully connected to the Exhibit if the Exhibit name is displayed in the “Overview” tab.