Built-in library

Overview

The HTML Canvas built-in library is the backbone that allows interacting with dashboard data and the Ubidots API via:

• Accessing the class' properties to modify/retrieve dashboards settings.

• Accessing the class methods to perform actions on the dashboard or retrieving information from it.

• Using the on event handler registration method for executing logic upon events that occur in the dashboard, a.k.a Listening events.

Properties

Property	Type	Description
dashboardDateRange	Object	Dashboard's time frame.
dashboardObject	Object	Dashboard's information.
deviceObject [DEPRECATED]	Object	Device object of the currently selected device in a dynamic dashboard.
selectedDevice [DEPRECATED]	string	ID of the currently selected device in a dynamic dashboard.
selectedDevices	string array	String array of Id's of the selected devices in a dynamic dashboard
selectedDeviceObjects	Object array	Device objects array of the selected devices in a dynamic dashboard
selectedFilters	Array array object	Array containing as many arrays as filters configured in the dashboard. Each nested array contains the filters objects for that particular filter.
token	string	Account's default token
realTime	bool	Status of the real time in the dashboard

dashboardDateRange

{
    "start":1637006467592,
    "end":1637095008866
}

dashboardObject

{
    "id": "6624cb56820a574b5730a16",
    "name": "some-dashboard",
    "timeframe": {
        "endDate": "now",
        "startDate": "now-24h"
    },
    "organization": {}
}

selectedDevices

[
    "65fb47fad809281764f8a350",
    ... ,
    "65fb47fad809281764f8a358"
]

selectedDeviceObjects

[
   {
      "url":"https://industrial.ubidots.com/api/v2.0/devices/65fb47fad809281764f8a350",
      "id":"65fb47fad809281764f8a350",
      "label":"2cf7f1c042300137",
      "name":"El Poblado",
      "description":"",
      "lastActivity":1714518206109,
      "createdAt":"2024-03-20T20:32:58.793812Z"
   },
   {
      "url":"https://industrial.ubidots.com/api/v2.0/devices/65fb47cec4098b1afda06660",
      "id":"65fb47cec4098b1afda06660",
      "label":"2cf7f1c042300213",
      "name":"Envigado",
      "description":"",
      "lastActivity":1712755770263,
      "createdAt":"2024-03-20T20:32:14.215320Z"
   },
   {
      "url":"https://industrial.ubidots.com/api/v2.0/devices/65a6fd8a9c33d2000c0ba386",
      "id":"65a6fd8a9c33d2000c0ba386",
      "label":"902a3c5ff139b0d5e390c1682472c7fa",
      "name":"West Menlo Park",
      "description":"Current weather conditions in West Menlo Park (US)",
      "lastActivity":1709043377617,
      "createdAt":"2024-01-16T22:04:58.909444Z"
   }
]

selectedFilters

[
   [
      {
         "type":"value",
         "value":"60",
         "variables":"~temperature",
         "lookup":"lte",
         "negate":false
      },
      {
         "type":"value",
         "value":"30",
         "variables":"~temperature",
         "lookup":"gte",
         "negate":false
      }
   ],
   [
      {
         "type":"value",
         "value":"60",
         "variables":"~humidity",
         "lookup":"lte",
         "negate":false
      },
      {
         "type":"value",
         "value":"30",
         "variables":"~humidity",
         "lookup":"gte",
         "negate":false
      }
   ]
]

Methods

Method	Description
getHeaders	Returns the available Authentication Headers accordingly if the dashboard is public or not.
openDrawer	Embed a url's content in a drawer and displays it.
setDashboardDevice	Changes the currently selected device in a dynamic dashboard.
setDashboardDateRange	Changes the selected time range in a dashboard.
setRealTime	Turn on or off the dashboard's real time update.
refreshDashboard	Refreshes the dashboard data in all widget.

getHeaders

Arguments: None

Signature: ubidots.getHeaders()

Return:

• For public dashboards:

  {
    Authorization: "Bearer receivedJWTToken",
    Content-type: "application/json"
  }

• For private dashboards:

  {
    X-Auth-Token: "BBFF-xxyyzz",
    Content-type: "application/json"
  }

openDrawer

Arguments: options: Object [mandatory] => An object containing the content's url and the drawer's width in px:

{
    url: "https://url.com",
    width: 500 // Read as 500px
}

Signature:

ubidots.openDrawer(
    {
        url: "https://some-url",
        width: <width>
    }
);
    

Return: None

setDashboardDevice

Arguments: deviceId: string [Mandatory] =>The ID of the device that you want to set.

Signature: ubidots.setDashboardDevice(<deviceId>)

Return: None

setDashboardDateRange

Arguments: timeframe: Object [Mandatory] => An object containing the start and end timestamps:

{
    "startTime": 1642282088000,
    "endTime": 1673818088000
}

Signature: ubidots.setDashboardDateRange(<timeframe>)

Return: None

setRealTime

Arguments: rt: Bool [Mandatory] => A boolean indicating the real time update setting

Signature: ubidots.setRealTime(<rt>)

Return: None

refreshDashboard

Arguments: None

Signature: ubidots.refreshDashboard()

Return: None

setFullScreen

Arguments: screenSetting: string(toggle | enable | disabled) [Mandatory] => A string representing the full screen setting.

Signature: ubidots.setFullScreen(<screenSetting>)

Return: None