Page Comparison

...

1. Create a New Exhibit in the Gumband UI

2. Create a new js file called ‘sample.js’ and initialize a new instance of the Gumband SDK, providing the exhibit id, exhibit token, and endpoint id. The exhibit id and token should have been generated in the previous step. The endpoint id identifies the environment in which the exhibit was created:

...

Endpoint Id

...

Endpoint

...

dev

...

dev.gumband.com

...

stag

...

stag.gumband.com

...

app

...

app.gumband.com

...

local

...

See this example, which configures the SDK to authenticate itself with an exhibit with an id of 40 from the dev app environment:

const { Gumband, Sockets } = require('@deeplocal/gumband-node-sdk');

const EXHIBIT_TOKEN = '40';
const EXHIBIT_ID = 'a45ne3...';
const ENDPOINT = 'dev';

const gb = new Gumband(
    EXHIBIT_TOKEN,
    EXHIBIT_ID,
    './manifest.json',
);

gb.on(Sockets.READY, async // optional parameters:
   () => {
    console.log('Gumband    endpoint: ENDPOINT,
        version: 'v1',
        contentLocation: './content',
    }
);

gb.on(Sockets.READY, async () => {
    console.log('Gumband Ready!');
});

3. Run the node service: node sample.js. You should see a “Gumband Ready!” message in the terminal, and you should also be able to see the Gumband Exhibit go online/offline in the web UI (note the red/green connection icon directly to the left of the Exhibit name)

...

Ready!');
});

3. Run the node service: node sample.js. You should see a “Gumband Ready!” message in the terminal, and you should also be able to see the Gumband Exhibit go online/offline in the web UI (note the red/green connection icon directly to the left of the Exhibit name)

...

The node service now has an open websocket connection with the Gumband cloud instance, and the Gumband SDK instance will emit events that are received through this websocket connection as the cloud instance sends them. Some important events that can be emitted via this websocket connection are:

...

const { Gumband, Sockets } = require('@deeplocal/gumband-node-sdk');

const EXHIBIT_TOKEN = '40';
const EXHIBIT_ID = 'a45ne3...';

const ENDPOINT = 'dev';

const gbgb = new Gumband(
    EXHIBIT_TOKEN,
    EXHIBIT_ID,
    './manifest.json',
);

gb.on(Sockets.READY, async // optional parameters:() => {
    {
        endpoint: ENDPOINT,
        version: 'v1',
    }
console.log('Gumband Ready!');
});

gb.on(Sockets.OP_MODE_RECEIVED, (payload) => {
    console.log(`received op mode: ${JSON.stringify(payload)}`);
});

gb.on(Sockets.READYCONTROL_RECEIVED, async (payload) => {
    console.log('Gumband Ready!');
})`received control: ${JSON.stringify(payload)}`);
});

gb.on(Sockets.OP_MODESETTING_RECEIVED, (payload) => {
    console.log(`received op modesetting: ${JSON.stringify(payload)}`);
});

gb.on(Sockets.CONTROLFILE_RECEIVEDUPLOADED, async (payload) => {
    console.log(`received control: ${JSON.stringify(payload)}`);
});

gb.on(Sockets.SETTING_RECEIVED, (payload) => {
    console.log(`received setting: ${JSON.stringify(payload)}`);
});

gb.on(Sockets.FILE_UPLOADED, asyncpayload.fileName);
    await gb.content.sync();
    console.log('done updating files')
});

Handling these websocket events is described in more detail below.

Anchor
_ss14obbassir _ss14obbassir

Handling Operating Modes

There are two operating modes your Exhibit can be in: on or off. These are updated in the gumband UI with the large toggle next to the Exhibit name.

...

Add some more logic to the operation mode callback:

gb.on(Sockets.OP_MODE_RECEIVED, (payload) => {
    console.log(payload.fileName);`received op    await gb.content.sync();mode: ${JSON.stringify(payload)}`);
    if(payload.value) {
      console.log('doneOP mode updatingnow fileson');
    });

...

 else {
      console.log('OP mode now off');
    }
});

After restarting the node service, if you toggle the op mode on and off in the Gumband UI, you will see the following in the console:

...

Anchor
_

...

4gtvwjz5qpu8 _

...

There are two operating modes your Exhibit can be in: on or off. These are updated in the gumband UI with the large toggle next to the Exhibit name.

...

Add some more logic to the operation mode callback:

...

4gtvwjz5qpu8

Create, Update, and Read a Status

Now we will create a status. Open your manifest file and add the following example status to the “statuses” array:

{
  "manifest": {
    console.log(`received op mode: ${JSON.stringify(payload)}`);"statuses": [
     if(payload.value) {
      console.log('OP mode now on');
    } else {"id": "example_status",
        "type": "String",
        "display":  console.log('OP mode now off');"Example Status",
       }
});

After restarting the node service, if you toggle the op mode on and off in the Gumband UI, you will see the following in the console:

...

Now we will create a status. Open your manifest file and add the following example status to the “statuses” array:

{
  "manifest": { "default": "a default value",
        "order": 0
      }
    ],
    "statusescontrols": [],
    "settings": []
{         "id": "example_status",
        "type": "String",
        "display": "Example Status",
        "default": "a default value",
        "order": 0
      }
    ],
    "controls": [],
    "settings": []
  }
}

1. Id is a unique string to name this status (cannot have two with the same value)

2. Type is the type of value you want this status to hold, in our case a string. This is important since data validation is performed when trying to set statuses

3. Display is the string that the user will see in the Gumband UI

4. Default is the default value for your status

5. Order is the order in which you want this status to be rendered on the Gumband UI in relation to other statuses.

Restart sample.js and navigate to the Gumband UI to see the updated status:

...

Now update the status value from Exhibit code by using a function provided by the SDK:

gb}
}

1. Id is a unique string to name this status (cannot have two with the same value)

2. Type is the type of value you want this status to hold, in our case a string. This is important since data validation is performed when trying to set statuses

3. Display is the string that the user will see in the Gumband UI

4. Default is the default value for your status

5. Order is the order in which you want this status to be rendered on the Gumband UI in relation to other statuses.

Restart sample.js and navigate to the Gumband UI to see the updated status:

...

Now update the status value from Exhibit code by using a function provided by the SDK:

gb.on(Sockets.READY, async () => {
  console.log('Gumband READY!');
  
  // Called with the id in the manifest file.
  await gb.setStatus('example_status', 'the new status');
});

Restart sample.js and navigate back to the Gumband Exhibit Overview UI to see that the status has updated in real time:

...

You can also get a status from the Gumband SDK:

gb.on(Sockets.READY, async () => {
  console.log('Gumband READY!');
  
  // Called with the id in the manifest file.
  await gb.setStatus('example_status', 'the new status' very different status');
  
  const status = await gb.getStatus('example_status');
  
  console.log(status.value);
});

Restart sample.js and navigate back to the Gumband Exhibit Overview UI to see that the status has updated in real time:

...

You can also get a status from the Gumband SDK:

gb.on(Sockets.READY, async() => {
  console.log('Gumband READY!');
  
  // Called with the id in the manifest file.
  await gb.setStatus('example_status', 'the very different status');
  
  const status = await gb.getStatus('example_status');
  
  console.log(status.value);
});

...

Similar to creating a status, we will add a control. Open your manifest file and add the following control to the “controls” array:

{
  "manifest": {
    "statuses": [],
    "controls": [
      {
        "id": "reload",
        "type": "Single",
        "display": "Reload",
        "enabledOpMode": "On"
      }
    ],
    "settings": []
  }
}

...

...

Anchor
_k80uj6aybgxa _k80uj6aybgxa

Create and Receive a Control

Similar to creating a status, we will add a control. Open your manifest file and add the following control to the “controls” array:

{
  "manifest": {
    "statuses": [],
    "controls": [
      {
        "id": "reload",
        "type": "Single",
        "display": "Reload",
        "enabledOpMode": "On"
      }
    ],
    "settings": []
  }
}

1. Id is a unique id for this control

2. Type indicates how you want the control to be rendered in the Gumband UI - in our case a single button

3. Display is the text you want to appear on the control - in our case we will use this to “reload” our Exhibit

4. EnabledOpMode indicates when this control should be active. In our case reload only makes sense when the Exhibit is on but you can imagine that running a homing procedure for a robot might be something you would only do if the Exhibit was off.

...

gb.on(Sockets.READY, async (manifest) => {
    console.log('Gumband Ready!');
    
    for (let i=0; i<10; i++) {
      await gb.event.create("Blue Button Press", {});
    }
    
    for (let i=0; i<5; i++) {
      await gb.event.create("Red Button Press", {});
    }
    
    await gb.event.create("Red Button Press", {});
    }
    
    await gb.event.create("Yellow Button Press", {});
});

Allow a minute for the new events to be added to the reporting system and then navigate to the reports tab on the UI. You will see a graph similar to this:

...

The Gumband SDK automatically synchronizes a local content folder and emits an event when files change. The files can be audio, video, configuration files, etc. When the SDK initializes, all content stored in Gumband is synced with your specified content folder locally.

To handle live file changes while the system is running, add a listener for file uploads in sample.js and sync the file content when received:

.event.create("Yellow Button Press", {});
});

Allow a minute for the new events to be added to the reporting system and then navigate to the reports tab on the UI. You will see a graph similar to this:

...

Anchor
_jncrdjd2q1e7 _jncrdjd2q1e7

Constructor Paramaters

You can initialize the Gumband SDK with a few parameters:

const gb = new Gumband(
  GB_EXHIBIT_TOKEN,
  GB_EXHIBIT_ID,
  `manifest.json`,
  {
        endpoint: 'custom', // local, dev, stag, or custom (set to 'app' by default)
        customServerIP: 'test.gumband.com', // or an IP address such as '192.168.1.1' (ignored unless endpoint=custom)
        version: 'v1', // api version
        contentLocation: '/path/to/content', // a directory to sync files in or null to not sync content
        skipOrganizationFileSync: false, // whether or not to skip the org level file syncing
        gbttEnabled: false, // or true to enable the hardware MQTT broker (set to false by default)
        gbttPort: 8884, // port for the MQTT broker, defaults to 1883
        noInternetConnection: false, // true if the SDK needs to run in offline mode (set to false by default)
        noInternetHardwareIds: [], // array of offline hardware IDs to accept messages from (without auth)
  }
);

• version (string): What API version to use. Value should be v1.

• endpoint (string): What Gumband environment to operate with. Value can be local, dev,stag, app, or custom.

• customServerIp (string): If endpoint=custom, what DNS name or IP address is the Gumband environment at. Value should be similar to test.gumband.com or 192.168.1.1.

• contentLocation (string || null): Assets uploaded to Gumband will be synced to the specified folder. Active user must have write permission for this directory. It is advised use an absolute instead of relative path. This value can be set to null to explicitly not sync any files.

• skipOrganizationFileSync (boolean): Set to false to sync organization level files. Defaults to true.

• gbttEnabled (boolean): Set to true to run the MQTT broker for hardware communication, defaults to false.

• gbttPort (number): What port to run the MQTT broker, defaults to 1883.

• noInternetConnection (boolean): Whether the exhibit will run in offline mode. Default is false. This is mostly useful for when an exhibit is going to run without an internet connection but still wants to communicate with Gumband hardware through MQTT.

• noInternetHardwareIds (string[]): Specify an array of Gumband hardware IDs to allow to connect to this exhibit. Used in conjunction with noInternetConnection=true. Warning: this will allow any hardware with the specified IDs to send and receive data from the exhibit without authentication.

Constructor Parameter example: contentLocation

The Gumband SDK automatically synchronizes a local content folder and emits an event when files change. The files can be audio, video, configuration files, etc. When the SDK initializes, all content stored in Gumband is synced with your specified content folder locally.

To handle live file changes while the system is running, add a listener for file uploads in sample.js and sync the file content when received:

const gb = new Gumband(
  GB_EXHIBIT_TOKEN,
  GB_EXHIBIT_ID,
  `manifest.json`,
  {
    contentLocation: './content'
  }
);

gb.on(Sockets.READY, async () => {
    console.log('Gumband is ready!');
    
    // Listen for file uploads
    gb.on(Sockets.FILE_UPLOADED, async() => {
      //This is also done automatically when the node application initializes
      await gb.content.sync();
    });
});

...

1. Restart sample.js and navigate to the Gumband UI “Content” tab

2. Select a file and click “Upload”

...