How to Customize Your Exhibit with Configured Settings

This How-To assumes you have completed the quick start and have an exhibit connected to Gumband Cloud

Configuring Settings

Settings are configurations for your exhibit, and can be thought of as two way communications between the Gumband cloud and your exhibit. Settings will be the most unique between exhibits and could configure anything from text copy to the RPMs of a motor. Settings are also configured through the manifest:

{
    "manifest": {
        "statuses": [],
        "controls": [],
        "settings": [
            {
                "id": "header",
                "type": "TextInput",
                "display": "Header Copy",
                "default": "Gumband Demo",
                "order": 0
            },
            {
                "id": "subheader",
                "type": "TextInput",
                "display": "Subheader Copy",
                "default": "Digital Signage",
                "order": 1
            },
            {
                "id": "body",
                "type": "TextInput",
                "display": "Body Copy (separate by | for new paragraph)",
                "default": "Gumband is an interactive experience tool",
                "order": 2
            },
            {
                "id": "main-image",
                "type": "FileSelection",
                "display": "Image Asset",
                "order": 3
            }
        ]
    }
}

would configure settings for the following exhibit instance in the Gumband UI:

Since settings are two way communications, they can be set by the exhibit through the GumbandSDK.setSetting(settingID, newSettingValue: string | number | boolean) function in the SDK (Exhibit → Cloud), or they can be set through the Gumband UI, which can be listened for through the Sockets.SETTING_RECEIVED event listener callback (Cloud → Exhibit):

exhibitActionThatTriggersSettingChange(manifestId) {
    //where the manifestId is the "id" of the setting as set in the manifest.
    //In the example manifest above, the IDs are "header", "subheader", "body", and "main-image"
    this.gumbandSDK.setSetting(manifestId);
}
this.gumbandSDK.on(Sockets.SETTING_RECEIVED, (payload) => {
    console.log(`${payload.id} setting updated in the Gumband UI to: ${payload.value}`);
    this.updateFrontendFromSettings();
});

There are many different types of settings for various use cases. See the Exhibit Manifest Configuration doc for a complete list.