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

PropertyTypeDescription

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

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"
   }
]

Methods

MethodDescription

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 private dashboards:

    {
      X-Auth-Token: receivedToken,
      Content-type: "application/json"
    }
  • For public dashboards:

    {
      Authorization: "Bearer receivedJWTToken",
      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

Last updated