Page Comparison

Anchor
_965u8m7n3zqf _965u8m7n3zqf

Create a New Node.js Project

1. Create and enter a new directory: $ mkdir gumband-example && cd gumband-example

2. Initialize an npm project: $ npm init

...

package name: (gumband-example) 
version: (1.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (ISC)

Anchor
_4qlsl9qbbjff _4qlsl9qbbjff

Install the Gumband SDK

Add the Gumband npm module: $ npm i -S @deeplocal/gumband-node-sdk

Anchor
_xab0z1wmxvc1 _xab0z1wmxvc1

Create an Empty Manifest File

All manifests contain one top level key “manifest” and three child keys “statuses”, “controls”, and “settings”. All of these keys must exist and point to an array (even if empty). Save the file as manifest.json.

{
  "manifest": {
    "statuses": [],
    "controls": [],
    "settings": []
  }
}

Anchor
_flzdqkq6qzad _flzdqkq6qzad

Initialize the Gumband SDK

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

...

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

const EXHIBIT_TOKENID = '40';
const EXHIBIT_IDTOKEN = 'a45ne3...';

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

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

...

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.

...

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

...

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

...

Types of Exhibit Statuses

To learn about the different types of Exhibit Statuses, see: https://deeplocal.atlassian.net/wiki/spaces/GS/pages/179306526/Exhibit+Manifest+Configuration#Exhibit-Status-Types

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",
        "order": 0,
        "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. Order is the order in which you want this status to be rendered on the Gumband UI in relation to other controls

5. 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.CONTROL_RECEIVED, async(payload) => {
  if (payload.id === "reload") {
    console.log("We should reload our application!");
  }
});

Click the reload button in the Gumband UI to see the console message.

...

...

Types of Exhibit Controls

To learn about the different types of Exhibit Controls, see: https://deeplocal.atlassian.net/wiki/spaces/GS/pages/179306526/Exhibit+Manifest+Configuration#Exhibit-Control-Types

Anchor
_9d13o22prplz _9d13o22prplz

Create, Update, and Receive a Setting

Just like the last two sections, we will start this one by updating the manifest file.

...

gb.on(Sockets.SETTING_RECEIVED, async(payload) => {
  if (payload.id === "idle_timeout_secs") {
    console.log(`New idle timeout: ${ payload.value }`);
  }
});

...

In your console you will now see:

...

...

Types of Exhibit Settings

To learn about the different types of Exhibit Settings, see: https://deeplocal.atlassian.net/wiki/spaces/GS/pages/179306526/Exhibit+Manifest+Configuration#Exhibit-Setting-Types

Anchor
_qf350qd0zl8d _qf350qd0zl8d

Add Developer Logging

Add the following log lines to your application code:

...

Restart sample.js and navigate to the Gumband UI “Logs” tab and you should see your logs

...

Anchor
_t6x9vj3m6pmb _t6x9vj3m6pmb

Add Events for Reporting

Recording events is extremely easy with the Gumband SDK. To do so add some code similar to the following:

...

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:

...

Check the content folder for your Exhibit, which should now contain your file.

Sending Custom Exhibit Email Notifications

You can view the categories of email notifications you can subscribe to on the “Notifications” tab of the Gumband UI

...

Most of these events which trigger an email notification are built into Gumband, but you can also trigger Custom Exhibit Notifications when a certain event or error occurs. Simply make a single function call through the Gumband SDK, and anyone subscribed to the “Custom Exhibit Notifications” toggle will receive an email:

let gb = new Gumband(
    TOKEN,
    EXHIBIT_ID,
    './manifest.json'
);

gb.on(Sockets.READY, async (manifest) => {
  gb.notifications.email("This is my custom notification message");
}