1 of 22

HTML Canvas

Build your own custom widgets with the HTML Canvas

Introduction:

Ubidots offers off-the-shelf widgets to cover most visualization needs. However, some projects may require more specific and custom widgets. That's why we offer the HTML Canvas widget, which supports your own code to deliver custom visualizations.

Definition:

HTML Canvas is a widget that enables the creation of custom widgets. It accomplishes this by letting the user write their own custom code using the following languages (as well as some Ubidots' built-in methods and third-party libraries which will be described later):

HTML
CSS
JavaScript

This widget features a code editor composed of three tabs, one for each language.

When to use the HTML Canvas?

Whenever the other available widgets don't meet a specific requirement in terms of functionality and/or style.

How to create an HTML Canvas?

Go to a dashboard, click the Add new widget button (+), scroll down to the Advanced section and select HTML Canvas.

The widget offers the following settings:

Code editor
3rd party libraries
Enable lazy loading
Preload Dashboard data

The appearence of the widget can be further customized with these options:

Name
Custom Style

Custom Style:

Check the Custom Style documentation here in order to know how to customize your HTML Canvas' styles.

3rd party packages

Overview

The HTML Canvas widget supports importing third-party libraries from CDNs. By specifying the CDN URL, you can include third-party libraries written in Vanilla JavaScript or React components.

Importing React libraries

To import React libraries into the HTML Canvas widget, the CDN must provide the library in UMD (Universal Module Definition) format. You can easily identify UMD CDN links by looking for umd in the URL path or name, often labeled as umd on sources like unpkg or jsDelivr.

Example

The following example depicts how to import the jQuery library to be used by the widget.

Third party libraries are imported by clicking the 3rd party libraries option and pasting the library's URL there, as shown below:

Preload Dashboard data

This feature makes the Dashboard data available for the user at load time.

Overview

This consist of a togglable button that, when activated, changes the Widget logic so that the Dashboard data gets preloaded, making it available for the user along with the dashboard loading.

Before this feature was developed, the user could only retrieve data from the Ubidots class by setting an event and capturing the required variable on the callback.

For example, If the user wanted to get his Ubidots Token and the ID of the currently selected device, it could be achieved as follows:

var ubidots = new Ubidots();

ubidots.on('ready', async function () 
{
	token = ubidots.token;	
	deviceID = ubidots.selectedDevice;		
});

However, this requires that the user knows some advanced Javascript knowledge as well as the custom Ubidots events.

With the Preload dashboard data feature, the requirement above can be achieved as easy as:

token = ubidots.token;	
deviceID = ubidots.selectedDevice;

Note that there is no need to instantiate the Ubidots class, since it already has.

By enabling this feature, the readyevent as shown above won't be available anymore to be invoked.

Class' properties when Preload dashboard data is disabled

Upon disabling the preload dashboard data feature, some of the class' properties might appear as undefined this is due to the fact that, the class' instance has not yet fully received the values for its properties. Consider the code snipet below:

const ubidots = new Ubidots();

console.log(ubidots.token);
ubidots.on('receivedToken', function (token) {
    console.log(token);
    console.log(ubidots.token);
})

Albeit ubidots.token is a valid syntax, and indeed the Ubidots class has that property, the first console.log prints undefined however the other two properly print the token, this is because such property is only available after the event has set its value.

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.
Directly interacting with the API via Ubidots' Javascript SDK

Properties

This page describes the HTML Canvas class properties.

HTML Canvas class 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

This page describes the available methods within the HTML Canvas class

HTML Canvas 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:

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

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

Copy

{
    "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

Listening events

Access dashboard settings via event handlers

Overview

A event is an action that takes place in a dashboard at load time or triggered by other specific actions.

Registering for an event

You can register an event handler for any of the events above in the following way:

// Event handler registration
ubidots.on('<event>', eventHandler);

// Event handler definition
function eventHandler(args){
    // event handler's logic
};

// Event handler definition and registration
ubidots.on('<event>', function(data){
    // event handler's logic
});

The event handler function's arguments must match the event signature.

Available events

You can register event handlers for the following events:

Event

Triggered

receivedToken

At dashboard load time, when the token information is being retrieved.

selectedDashboardDateRange

Whenever the dashboard's date range is changed via GUI or a calling to the corresponding method.

isRealTimeActive

Whenever the dashboard's real time setting is changed via GUI or a calling to the corresponding method

dashboardRefreshed

When a user clicks the refresh button in the dashboard.

selectedDevices selectedDeviceObjects selectedDevice [DEPRECATED] selectedDeviceObject [DEPRECATED]

When the selected device in a dynamic dashboard is changed via GUI or a calling to the corresponding method.

selectedDashboardObject

At dashboard load time, when the dashboard information is being retrieved.

selectedFilters

After changing the dashboard's filters configuration

ready

At dashboard load time, after all other events have been triggered.

`receivedToken`

Handler argument: token: string ⇒ The user's default token.

Signature

function eventHandler(token) { }

Important note: The retrieved token inherits the users pemissions, either if it's an account admin, in which case it will have all permissions over the account resources accesible through the API, or an End-user, where access will be limited to its configured permissions.

`selectedDashboardDateRange`

Handler argument: timeframe: Object ⇒ The dashboard's timeframe.

{
    start: <start-timestamp>,
    end: <end-timestamp>
}

Signature

function eventHandler(timeframe) { }

`isRealTimeActive`

Handler argument: rt: Bool ⇒ The dashboard's real time update setting.

Signature

function eventHandler(rt) { }

`dashboardRefreshed`

Handler argument: None

Signature

function eventHandler() { }

`selectedDevices`

Handler argument: deviceIds: [string] ⇒ String array of the id's of the currently selected devices in a dynamic dashboard

Signature

function eventHandler(deviceIds) { }

`selectedDeviceObjects`

Handler argument: deviceObjects: [Objects] ⇒ Object array of the device objects of the currently selected devices in a dynamic dashboard

Signature

function eventHandler(deviceObjects) { }

`selectedDashboardObject`

Handler argument: dashboardObject: Object ⇒ dashboard object

Signature

function eventHandler(dashboardObject) { }

`selectedFilters`

Handler argument: dashboardFilters: [[Object]] ⇒ Array of arrays containing the filter objects. Each nested array corresponds to a filter configured on the dashboard.


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

Signature

function eventHandler(dashboardFilters) { }

`ready`

Handler argument: None

Signature

function eventHandler() { }

Events relation with the class' properties

Each of the events mentioned above is related to a property within the Ubidots class that can be used to retrieve exactly the same data as an alternative to setting an event handler and waiting for the event:

Ubidots class property

Associated event

dashboardDateRange

selectedDashboardDateRange

dashboardObject

selectedDashboardObject

deviceObject

selectedDeviceObject

selectedDevice

selectedDeviceObjects

selectedDevices

token

receivedToken

realTime

isRealTimeActive

For example, you can configure an event to retrieve data from the selected device each time the dashboard's device picker is used, as shown below:

ubidots.on('selectedDeviceObject', function(device) {
    // Do something with the currently selected device data.
    // const deviceId = device.id;
    // const deviceLabel = device.label;
});

This way, everytime that the device picker is used, the logic within the event will be executed. As an alternative to this, if you don't require to perform an action upon the event triggering but only require the data of the currently selected device, you can just access the property related to the event as:

const deviceId = ubidots.selectedDevice;

API

Access Ubidots Javascript SDK from the HTML canvas

Javascript SDK

The HTML Canvas' built-in library exposes Ubidots' Javascript SDK through ubidots.api. This simplifies interacting with Ubidots API when developing in the HTML Canvas, hence avoiding making request by hand, or writing wrappers to generalize request making.

To access the SDK methods, follow the below syntax:

ubidots.api.<JS_SDK_METHODS>

Refer to the Javascript SDK Docs to learn more about its supported entities, methods and filtering capabilities.

Usage

Dashboard data preloaded:

// Get token from Ubidots built-in library
const TOKEN = ubidots.token;

// Authenticate the SDK with the token
ubidots.api.authenticate(TOKEN);

// Get first 100 devices from the account
ubidots.api.devices.get().then((devices) => {
    // Prints an array of Device objects
    console.log(devices);
    
    // YOUR LOGIC OVER THESE 100 DEVICES
});

NO dashboard data preloaded:

var ubidots = new Ubidots();

const TOKEN = undefined;

ubidots.on("ready", async () => {
    TOKEN = ubidots.token;
    
    // Authenticate the SDK with the token
    ubidots.api.authenticate(TOKEN);
    
    // Get first 100 devices from the account
    var devices = await ubidots.api.devices.get();
    
    // Prints an array of Device objects
    console.log(devices);
    
    // YOUR LOGIC OVER THESE 100 DEVICES
});

Examples

Basics

Example #1

This example creates a text box to set a variable's value.

HTML:

<div class="notification--container" id="notification">
  <p>Value sent successfully</p>
</div>

<div class="send-value--container">
  <input type="number" step="0.0001" placeholder="Enter number" class="send-value--input" id="value" />
  <button type="button" class="send-value--button" id="send-value">Send value</button>
</div>

CSS:

.send-value--container {
  	left: 50%;
	position: absolute;
  	top: 50%;
  	transform: translate(-50%, -50%);
}

.send-value--input {
	border: none;
  	border-bottom: 2px solid #28AECD;
  	display: block;
  	margin: 0 auto;
  	font-size: 14px;
  	outline: none;
}

.send-value--button {
  	background: #FFFFFF;
  	border: 2px solid #28AECD;
  	border-radius: 20px;
  	color: #28AECD;
  	font-size: 14px;
	margin-top: 10px;
	width: 100%;
}

.send-value--button:hover {
 	background: #28AECD;
  	cursor: pointer;
  	color: #FFFFFF;
}

.notification--container {
 	display: none;
}

JavaScript:

In the following code, the variable VARIABLE_ID must be set accordingly.

var sendValue = document.querySelector('#send-value');
var value = document.querySelector('#value');
var notification = document.querySelector('#notification');
var TOKEN = ubidots.token;
var VARIABLE_ID = "variable-id";

function postValue(variable, token, callback) {
  var url = 'https://industrial.api.ubidots.com/api/v1.6/variables/' + variable + '/values';
  var headers = {
    'Content-Type': 'application/json',
    'X-Auth-Token': TOKEN 
  };
  
  notification.style.display = 'none';

  fetch(url, {
    method: 'POST',
    headers: headers,
    body: JSON.stringify({ 
      value: parseFloat(value.value, 10) 
    })
  })
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error('Error posting value');
    }
  })
  .then(function(data) {
    callback(data.value);
  })
  .catch(function(error) {
    console.log(error);
  });
}

sendValue.addEventListener('click', function () {
  postValue(VARIABLE_ID, TOKEN, function (value) {
    notification.style.display = 'block';
  });
});

Example #2:

The next example shows how to get data from Ubidots and display it in a Highcharts chart:

HTML:

<div id="container" style="min-width: 310px; height: 310px; margin: 0 auto"></div>

JavaScript:

In the following code, the variable VARIABLE_ID must be set accordingly.

var TOKEN = ubidots.token;
var VARIABLE = 'variable-id';

function makeHttpRequest(url, method, headers, body) {
  return new Promise(function(resolve, reject) {
    fetch(url, {
      method: method,
      headers: headers,
      body: body
    })
    .then(function(response) {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error('Error making HTTP request');
      }
    })
    .then(function(data) {
      resolve(data);
    })
    .catch(function(error) {
      reject(error);
    });
  });
}

async function getDataFromVariable(variable, token, callback) {
  var url = 'https://industrial.api.ubidots.com/api/v1.6/variables/' + variable + '/values';
  var headers = {
    'X-Auth-Token': token,
    'Content-Type': 'application/json'
  };
  
  makeHttpRequest(url, 'GET', headers)
    .then(function(res) {
      callback(res.results);
    })
    .catch(function(error) {
      console.error(error);
    });
}

var chart = Highcharts.chart('container', {
  chart: {
    type: 'line'
  },
  title: {
    text: 'Bring data from Ubidots'
  },
  xAxis: {
    type: 'datetime',
  },
  credits: {
    enabled: false
  },
  series: [{
    data: []
  }]
});

getDataFromVariable(VARIABLE, TOKEN, function(values) {
  var data = values.map(function(value) {
    return [value.timestamp, value.value];
  });
  
  chart.series[0].setData(data);
});

async function makeRequest(url, method, token, payload) {
  var headers = {
    'X-Auth-Token': token,
    'Content-Type': 'application/json'
  };
  var body = null;

  if (payload) {
    body = JSON.stringify(payload);
  }

  return makeHttpRequest(url, method, headers, body);
}

async function sendDataToDevice(sendDataDeviceLabel, token, payload) {
  var url = 'https://industrial.api.ubidots.com/api/v1.6/devices/' + sendDataDeviceLabel + '/';
  var method = 'POST';

  return makeRequest(url, method, token, payload);
}

async function getDeviceVariables(sendDataDeviceID, token) {
  var url = 'https://industrial.ubidots.com/api/v2.0/devices/' + sendDataDeviceID + '/variables';
  var method = 'GET';

  return makeRequest(url, method, token);
}

async function getDashboardDevices(sendDataDashboardID, ubidotsToken) {
  var url = 'https://industrial.ubidots.com/api/-/dashboards/' + sendDataDashboardID + '/devices?sort_by=name&page_size=500';
  var method = 'GET';

  return makeRequest(url, method, ubidotsToken);
}

async function getAllDashboards(ubidotsToken) {
  var url = 'https://industrial.api.ubidots.com/api/v2.0/dashboards/';
  var method = 'GET';

  return makeRequest(url, method, ubidotsToken);
}

async function getAllDevices(token) {
  var url = 'https://industrial.api.ubidots.com/api/v2.0/devices/';
  var method = 'GET';

  return makeRequest(url, method, token);
}

Third party libraries:

https://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.1/highcharts.js

Example #3:

This example is exactly the same as the one before, but it uses Plotly as a charting library instead of Highcharts:

HTML:

<div id="plotlyDiv" style="width:100%;height:400px;"></div>

JavaScript:

var TOKEN = ubidots.token;
var VARIABLE = 'variable-id';

function makeHttpRequest(url, method, headers, body) {
  return new Promise(function(resolve, reject) {
    fetch(url, {
      method: method,
      headers: headers,
      body: body
    })
    .then(function(response) {
      if (response.ok) {
        return response.json();
      } else {
        throw new Error('Error making HTTP request');
      }
    })
    .then(function(data) {
      resolve(data);
    })
    .catch(function(error) {
      reject(error);
    });
  });
}

function getDataFromVariable(variable, token, callback) {
  var url = 'https://industrial.api.ubidots.com/api/v1.6/variables/' + variable + '/values';
  var headers = {
    'X-Auth-Token': token,
    'Content-Type': 'application/json'
  };

  makeHttpRequest(url, 'GET', headers)
    .then(function(res) {
      callback(res.results);
    })
    .catch(function(error) {
      console.error(error);
    });
}

var layout = {
  xaxis: {
    type: 'date',
    title: 'Date'
  },
  yaxis: {
    title: 'Value'
  },
  title: 'My Variable'
};

Plotly.plot('plotlyDiv', [], layout);

getDataFromVariable(VARIABLE, TOKEN, function(values) {
  var trace = {
    x: [],
    y: [],
    mode: 'lines',
    type: 'scatter',
    name: '2000'
  };
  values.forEach(function(value) {
    trace.x.push(value.timestamp);
    trace.y.push(value.value);
  });

  Plotly.addTraces('plotlyDiv', trace);
});

Third party libraries:

https://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.39.4/plotly.min.js

Example #4:

This example uses the HTML Canvas widget to turn on/off a dashboard's "real time":

HTML:

<div class="notification--container" id="notification">
	<p>Dashboard Real Time</p>
</div>
<div class="real-time--container">
	<button type="button" class="real-time--button" id="real-time">Enable real time</button>
</div>

CSS:

.real-time--container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}

.real-time--button {
background: #FFFFFF;
border: 2px solid #28AECD;
border-radius: 20px;
color: #28AECD;
font-size: 20px;
margin-top: 10px;
width: 100%;
}

.real-time--button:hover {
background: #28AECD;
cursor: pointer;
color: #FFFFFF;
}

.notification--container {
display: none;
}

JavaScript:

var realTime = document.getElementById('real-time');
var notification = document.getElementById('notification');

realTime.addEventListener('click', function() {
  ubidots.setRealTime(true);
  notification.style.display = 'block';
});

Create an LCD screen with the HTML Canvas

This example shows how to create an LCD screen on a dashboard by using the HTML Canvas widget.

HTML:

<div id="image_background">
<p>Last value:</p>
<span id="image_background_text">No data</span>
</div>

CSS:

@import url('https://fonts.googleapis.com/css?family=VT323');

#image_background {
background: url('https://i.imgur.com/uuYygjz.png') 0 / contain no-repeat;
font-family: "VT323";
font-size: 25px;
letter-spacing: 10.5px;
height: 220px;
width: 450px;
}

#image_background p, #image_background_text {
margin: 0;
left: 75px;
position: absolute;
}

#image_background p {
top: 88px;
font-size: 25px !important;
}

#image_background_text {
top: 121px;
}

JavaScript:

In the following code, the VAR_ID variable must be set according to the variable that should be displayed:

var bg = document.getElementById("image_background");
var text = document.getElementById("image_background_text");
var lastValue = null;
var TOKEN = ubidots.token;
var VAR_ID = "variable-id";

setInterval(function () { getLastValue(VAR_ID, TOKEN); }, 2000);

function makeHttpRequest(method, url, headers, payload) {
  return new Promise(function (resolve, reject) {
    var options = {
      method: method,
      headers: headers,
    };

    if (payload) {
      options.body = JSON.stringify(payload);
    }

    fetch(url, options)
      .then(function (response) {
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .then(function (data) {
        resolve(data);
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

function changeImage(value) {
  var choose = "normal";
  var background = {
    blue: "https://i.imgur.com/ZE0W7Yx.png",
    normal: "https://i.imgur.com/uuYygjz.png",
    yellow: "https://i.imgur.com/RHvDkUE.png",
  };
  if (value <= 30) {
    choose = "blue";
    bg.style.color = "white";
  } else if (value > 30 && value <= 70) {
    choose = "yellow";
    bg.style.color = "white";
  }
  bg.style.background = "url(" + background[choose] + ") 0 / contain no-repeat";
}

function getLastValue(variableId, token) {
  var url =
    "https://industrial.api.ubidots.com/api/v1.6/variables/" +
    variableId +
    "/values";
  var headers = {
    "X-Auth-Token": token,
    "Content-Type": "application/json",
  };

  makeHttpRequest("GET", url + "?page_size=1", headers)
    .then(function (res) {
      if (lastValue === null || res.results[0].value !== lastValue) {
        text.textContent = res.results[0].value;
        lastValue = res.results[0].value;
        changeImage(lastValue);
      }
    })
    .catch(function (error) {
      console.error(error);
    });
}

Once the settings are saved, it will look like this:

Adjusting the screen's contrast

Modify the HTML to:

<div id="image_background">

<img id="display_background" src="https://i.imgur.com/meoKhMG.png" />

<p>Last value:</p>
<span id="image_background_text">No data</span>
</div>

Modify the CSS code to:

@import url('https://fonts.googleapis.com/css?family=VT323');

#image_background {
background: url('https://i.imgur.com/ehNdUxY.png') 0 / contain no-repeat;
font-family: "VT323";
font-size: 25px;
letter-spacing: 10.5px;
height: 220px;
width: 450px;
}

#image_background p, #image_background_text {
margin: 0;
left: 75px;
position: absolute;
}

#image_background p {
top: 88px;
font-size: 25px !important;
}

#image_background_text {
top: 121px;
}

#display_background {
height: 94px;
position: absolute;
top: 70px;
left: 52px;
pointer-events: none;
}

Modify the JavaScript code to:

var bg = document.getElementById("display_background");
var text = document.getElementById("image_background_text");
var lastValue = null;
var lastContrast = null;
var TOKEN = ubidots.token;
var VAR_ID_LV = "id-of-variable-to-be-displayed";
var VAR_ID_CONTRAST = "id-of-contrast-variable";
var scale = d3.scaleLinear().range([0, 4]).domain([0, 1023]);


setInterval(function () {
    // Get LCD Screen last value
    getLastValue(VAR_ID_LV, TOKEN, function (res) {
      var value = null;
      try {
        value = res.results[0].value;
      } catch (e) {
        console.log("No data");
      }
      if (
        (lastValue === null || value !== lastValue) &&
        value !== null
      ) {
        text.textContent = value;
        lastValue = value;
      }
    });

    // Get LCD Screen contrast
    getLastValue(VAR_ID_CONTRAST, TOKEN, function (res) {
      var value = null;
      try {
        value = res.results[0].value;
      } catch (e) {
        console.log("No data");
      }
      if (
        (lastContrast === null || value !== lastContrast) &&
        value !== null
      ) {
        bg.style.filter = "contrast(" + scale(value) + ")";
        lastContrast = value;
      }
    });
  }, 2000);


function makeHttpRequest(method, url, headers, payload) {
  return new Promise(function (resolve, reject) {
    var options = {
      method: method,
      headers: headers,
    };

    if (payload) {
      options.body = JSON.stringify(payload);
    }

    fetch(url, options)
      .then(function (response) {
        if (!response.ok) {
          throw new Error(response.statusText);
        }
        return response.json();
      })
      .then(function (data) {
        resolve(data);
      })
      .catch(function (error) {
        reject(error);
      });
  });
}

function getLastValue(variableId, token, cb) {
  var url =
    "https://industrial.api.ubidots.com/api/v1.6/variables/" +
    variableId +
    "/values";
  var headers = {
    "X-Auth-Token": token,
    "Content-Type": "application/json",
  };

  makeHttpRequest("GET", url + "?page_size=1", headers)
    .then(function (res) {
      if (typeof cb === "function") cb(res);
    })
    .catch(function (error) {
      console.error(error);
    });
}

Lastly, add another 3rd party library needed for this implementation:

https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.min.js

This is the result:

Interacting with dashboard data

Example #1:

The following example uses Ubidots' "listener events" on an HTML Canvas in order to extract information from Ubidots and display it on the dashboard:

HTML:

<div>
    <p id="token"></p>
    <p id="dashboard"></p>
    <p id="dateRange"></p>
    <p id="deviceSelected"></p>
    <p id="device"></p>
    <p id="isRealTimeActive"></p>
    <p id="dashboardRefreshed"></p>
    <p id="eventToken"></p>
    <p id="eventDashboard"></p>
    <p id="dashboardDateRange"></p>
    <p id="eventDeviceSelected"></p>
    <p id="eventDevice"></p>
    <p id="eventRefresh"></p>
    <p id="eventisRealTimeActive"></p>
</div>

JavaScript:

var ubidots = new Ubidots();

ubidots.on('receivedToken', function (data) {
    document.getElementById('eventToken').innerText = "TOKEN: " + data;
});

ubidots.on('selectedDashboardObject', function (data) {
    document.getElementById('eventDashboard').innerText = "Dashboard Object: " + JSON.stringify(data)
});

ubidots.on('selectedDashboardDateRange', function (data) {
    document.getElementById('dashboardDateRange').innerText = "Dashboard date range: " + JSON.stringify(data);
});

ubidots.on('selectedDevices', function(data) {
    let listOfIds = data.join(', ');
    document.getElementById('eventDeviceSelected').innerText = "Selected Device ids: " + listOfIds;
});

ubidots.on('selectedDeviceObjects', function (data) {
    let formattedData = JSON.stringify(data); // 2-space indentation
    document.getElementById('eventDevice').innerText = "Device Object: \n" + formattedData;
});

ubidots.on('isRealTimeActive', function (data) {
    document.getElementById('eventisRealTimeActive').innerText = "Real time button: " + JSON.stringify(data);
});

ubidots.on('dashboardRefreshed', function (data) {
    document.getElementById('eventRefresh').innerText = "The Dashboard refresh button was pressed."
});

Example #2

The following example uses "setter events" and a 3rd party library to set the device in a dynamic dashboard:

HTML:

<div class="notification--container" id="notification">
<p>Device set successfully</p>
</div>

<div class="set-device--container">
<input type="text" placeholder="Enter Device id" class="set-device--input" id="device" />
<button type="button" class="set-device--button" id="send-value">Set device</button>
</div>

CSS:

.set-device--container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}

.set-device--input {
border: none;
border-bottom: 2px solid #28AECD;
display: block;
margin: 0 auto;
font-size: 14px;
outline: none;
}

.set-device--button {
background: #FFFFFF;
border: 2px solid #28AECD;
border-radius: 20px;
color: #28AECD;
font-size: 14px;
margin-top: 10px;
width: 100%;
}

.set-device--button:hover {
background: #28AECD;
cursor: pointer;
color: #FFFFFF;
}

.notification--container {
display: none;
}

JavaScript:

var $setDevice = $('#send-value');
var $notification = $('#notification');

var ubidots = new Ubidots();

$setDevice.on('click', function () {
$device = $('#device'); 
ubidots.setDashboardDevice($device.val())
$notification.show();
});

Third party library:

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js

Change header's custom style

The following example shows how to dynamically change a widget's header style upon clicking a button by using the HTML Canvas widget.

Create a button element using HTML. Paste the following code on the HTML code editor tab:

<button id="color">Click here to change header styling</button>

Add the logic to change the header's style upon clicking the button:

const button = document.querySelector("#color");
button.addEventListener("click", () => {
    const event = new CustomEvent("widget_changeHeaderColor", {
        detail:{
            "backgroundColor": "#00bcd4",
            "borderRadius": 7,
            "color": "#ffffff",
            "boxShadow": "3px 3px 5px 6px #cccccc",
            "fontWeight": "bold"
        }
    });
    document.dispatchEvent(event);
});

Save the widget's settings by clicking on the green check mark. The result is shown below:

Adding real time using Socket.IO

Using the socket.IO library, create a simple real-time widget with Ubidots and the HTML Canvas.

Socket.IO is a JS library easy to implement that manages socket connections and messages, thus enabling a bi-directional real-time connection protocol. Ubidots has implemented this real-time protocol within its core servers to easily update devices, to retrieve and store data inside any JS variable, and without the need to implement any requests, using sockets.

The following shows how to create a HTML Canvas Widget which will display a variables' data in a real time fashion. This example relies on the previous Create an LCD screen with the HTML Canvas, so please head to said section first.

Create the HTML element in which the data will be displayed:

<p id="content"></p>

Add the logic of the widget by using the following JavaScript code:

var socket;
var srv = window.location.hostname + ":443"; //this allows the widget to work at the white label level
var VAR_ID = "variable-id"; // Put here your var Id
var TOKEN = "YOUR-TOKEN"  // Put here your token
$(document).ready(function () {
    // Implements the connection to the server
    socket = io.connect("https://" + srv, { path: '/notifications' });
    var subscribedVars = [];

    // Function to publish the variable ID
    var subscribeVariable = function (variable, callback) {
        // Publishes the variable ID that wishes to listen
        socket.emit('rt/variables/id/last_value', {
            variable: variable
        });
        // Listens for changes
        socket.on('rt/variables/' + variable + '/last_value', callback);
        subscribedVars.push(variable);
    };

    // Function to unsubscribed for listening
    var unSubscribeVariable = function (variable) {
        socket.emit('unsub/rt/variables/id/last_value', {
            variable: variable
        });
        var pst = subscribedVars.indexOf(variable);
        if (pst !== -1) {
            subscribedVars.splice(pst, 1);
        }
    };

    var connectSocket = function () {

        // Implements the socket connection
        socket.on('connect', function () {
            socket.emit('authentication', { token: TOKEN });
        });
        window.addEventListener('online', function () {
            socket.emit('authentication', { token: TOKEN });
        });
        socket.on('authenticated', function () {
            subscribedVars.forEach(function (variable_id) {
                socket.emit('rt/variables/id/last_value', { variable: variable_id });
            });
        });
    }

    /* Main Routine */

    connectSocket();
    // Should try to connect again if connection is lost
    socket.on('reconnect', connectSocket);

    // Subscribe Variable with your own code.
    subscribeVariable(VAR_ID, function (value) {
        var parsedValue = JSON.parse(value);
        console.log(parsedValue);
        $('#content').text(value);
    })
});

The following 3rd party libraries will be needed:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
https://iot.cdnedge.bluemix.net/ind/static/js/libs/socket.io/socket.io.min.js

The following is the result:

Delete Variable data from a Device

The following shows how to implement HTML Canvas Widget to delete variable data in a time window in Dynamic Dashboards

Create the structure. Paste the following in the HTML Code Editor Tab:

<div>
    <p id="token"></p>
    <p id="selectedDeviceID"></p>
	<p id="selectedDeviceLabel"></p>
	<select id = "labels"></select>
	<form id="date-form">
		<label for="date1">Start date:</label>
		<input type="datetime-local" id="date1" name="date1" value="2023-01-01T00:00" required>
		<br>
		<label for="date2">End date:</label>
		<input type="datetime-local" id="date2" name="date2" value="2023-01-01T12:00" required>		
		<br>
		<button type="submit">Delete values</button>
	</form>
</div>

Paste the following in the CSS Code Editor Tab:

body {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem;
}

form {
  display: flex;
  flex-direction: column;
}

label, input {
  margin-bottom: 1rem;
}

button {
  cursor: pointer;
  background-color: #0077cc;
  color: white;
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  font-weight: bold;
}

button:hover {
  background-color: #005aa3;
}

Paste the following in the Javascript Code Editor Tab:

var ubidots = new Ubidots();
const BASE_URL = 'https://industrial.api.ubidots.com';
const API1 = '/api/v1.6';
const API2 = '/api/v2.0';
var token;
var deviceLabel;
var deviceID;
var firstTime = true;
var deviceVariables;
var dropdown = document.getElementById('labels');
var selectedVariableLabel;
var selectedVariableID;


ubidots.on('ready', async function () 
{
	token = ubidots.token;
	deviceID = ubidots.selectedDevice;
	deviceLabel = await getDeviceLabelById(deviceID, token);
	deviceVariables = await getDeviceVariables(deviceID, token);
	deleteDropdownItems(dropdown);
	populateDropdownItems(deviceVariables, dropdown);
	displayDeviceData(deviceID, deviceLabel, token);
	firstTime = false;
});

ubidots.on('selectedDevice', async function (data) 
{
	deviceID = data[0];
	displayDeviceID(deviceID);
	if(!firstTime)
	{
		deviceLabel = await getDeviceLabelById(deviceID, token);
		deviceVariables = await getDeviceVariables(deviceID, token);
		deleteDropdownItems(dropdown);
		populateDropdownItems(deviceVariables, dropdown);
		displayDeviceData(deviceID, deviceLabel, token);
	}
    
});

dropdown.addEventListener("change", function() 
{
  	//selectedVariableLabel = this.options[this.selectedIndex].value;
	const este = this.options[this.selectedIndex].value;
	selectedVariableID = este.split(":")[1].trim();
	selectedVariableLabel = este.split(":")[0].trim();

});

document.getElementById('date-form').addEventListener('submit', async function(event)
{
	// Prevents form submission and page reload
	event.preventDefault();

	//Estas son las fechas que la persona pone en los campos
	const ts1 = toTimestamp(document.getElementById('date1').value);
	const ts2 = toTimestamp(document.getElementById('date2').value);
	if(ts1 > ts2)
	{
		console.error("ERROR: end date being earlier than start date.", ts1, ts2);
		console.log("startDate: ", ts1);
		console.log("endDate: ", ts2);
		return {"ERROR": -1};
	}
	
	console.log(selectedVariableID);
	console.log("startDate: ", ts1);
	console.log("endDate: ", ts2);	
	//url quemada con el endpoint, el device y los timestamps
	var url = "https://industrial.api.ubidots.com/api/v2.0/variables/" + selectedVariableID + "/_/values/delete/?startDate=" + ts1 + "&endDate=" + ts2;
	console.log("URL: ", url);
	const response = await fetchWrapper(url, 'POST', token);
	console.log(response);

});

function displayToken(Token)
{
	document.getElementById('token').innerText = "TOKEN: " + Token;
}
function displayDeviceLabel(DeviceLabel)
{
	document.getElementById('selectedDeviceLabel').innerText = "Selected Device label: " + DeviceLabel;
}

function displayDeviceID(DeviceID)
{
	document.getElementById('selectedDeviceID').innerText = "Selected Device id: " + DeviceID;
}

function displayDeviceData(DeviceID, DeviceLabel, Token, VariableLabel)
{
	displayToken(Token);
	displayDeviceLabel(DeviceLabel);
	displayDeviceID(DeviceID);
}

function populateDropdownItems(items, dropdownObj)
{
	var isFirst = true;
	items.forEach(function(item)
	{
		if(isFirst)
		{
			selectedVariableID = item.id;
			selectedVariableLabel = item.label;
		}
		var option = document.createElement('option');
  		option.text = item.label + " : " + item.id;
  		dropdownObj.add(option);
		isFirst = false;
	});
}

function deleteDropdownItems(dropdown)
{
	while (dropdown.firstChild) 
	{
    	dropdown.removeChild(dropdown.firstChild);
  	}
}

async function getDeviceLabelById(DeviceID, Token)
{
    var url = `${BASE_URL}${API2}/devices/${DeviceID}/?fields=label`;
	var response = await fetchWrapper(url, 'GET', Token);
	return response.label;
}

async function deleteDevicesValues(DeviceID, Token)
{
	
}

async function getDeviceVariables(DeviceID, Token)
{
	const url = 'https://industrial.ubidots.com/api/v2.0/devices/' + deviceID + '/variables';
	const response = await fetchWrapper(url, 'GET', Token);
	return response.results;
}

async function fetchWrapper(url, method, token = null, payload = null)
{
	const options =
	{
    	method: method,
    	//headers: {},
		headers: {'Content-Type' : 'application/json'}
	};

	//options.headers['Content-Type'] = 'application/json';

	if (payload)
	{
    	options.body = JSON.stringify(payload);
  	}

  	if (token)
	{
    	options.headers['X-Auth-Token'] = token;
  	}

	const response = await fetch(url, options);
	const jsonData = await response.json();
	return jsonData;
}

function toTimestamp(date) 
{
	const dateObj = new Date(date);
	const timestamp = dateObj.getTime();
	return timestamp;
}

The result is a Widget as shown below:

The user can use the dropdown menu to select a variable from the current device in the Dynamic Dashboard, then select a time windows using the date pickers. Upon clicking the Delete Values button, the data for that device's variable will in the time window selected will be deleted. Note that since Ubidots schedules asynchronous task, you might need to wait a few minutes to see the values deleted.

Delete Variable data from Groups or Types of Devices

The following example shows HTML Canvas Widget implemented such that you can either, select or type a variable label, select a time window and then delete said data

Ubidots supports two types of grouping Devices: Device Types and Device Groups.

Create the structure. Paste the following in the HTML Code Editor Tab:

<p id="deviceLabelMessage"></p>

<div id="inputContainer"></div>

<form id="date-form">
	<label for="date1">Start date:</label>
	<input type="datetime-local" id="date1" name="date1" value="2023-01-01T00:00" required>
	<br>
	<label for="date2">End date:</label>
	<input type="datetime-local" id="date2" name="date2" value="2023-01-01T12:00" required>
	<br>
	<button type="submit">Delete values</button>
</form>

This will create the datetime selector, either the text-box or the drop-down menu to select the variable and the submit button.

Set the logic. Paste the following in the Javascript Tab:

var ubidots = new Ubidots;
var dashboardID;
var ubidotsToken;
var selectedVariableID;
var selectedVariableLabel;
var dashboardObject;
var inputContainer;
var displayedMsg;
var firstTime = true;


ubidots.on('ready', async function()
{
	//obtain the required variables
    dashboardID = ubidots.dashboardObject.id;
    ubidotsToken = ubidots.token;
	
	//get the dashboard object from ubidots api
    dashboardObject = await getDashboardObject(dashboardID, ubidotsToken);
	//get the element containing either the dropdown menu or the input text
    inputContainer = document.getElementById("inputContainer");  
	//get the elemente displaying the message
    displayedMsg = document.getElementById("deviceLabelMessage");
	//change the widget so it displays either a dropdown menu or an input type
    await setGUIAccordingToDeviceTypeFilter(dashboardObject, inputContainer, displayedMsg);
	firstTime = false;
	console.log("EXIT");
});

ubidots.on('selectedDevice', async function (data) 
{
	if(!firstTime)
	{
		//selectedVariableLabel = getVariableLabelFromContainer(inputContainer);
		deleteDropdownItems(inputContainer);
		await setGUIAccordingToDeviceTypeFilter(dashboardObject, inputContainer, displayedMsg);

		//populateDropdownItems(deviceVariables, dropdown);
		//displayDeviceData(deviceID, deviceLabel, token);
	}
});



document.getElementById('date-form').addEventListener('submit', async function(event)
{
	event.preventDefault();
	
	const ts1 = toTimestamp(document.getElementById('date1').value);
	const ts2 = toTimestamp(document.getElementById('date2').value);
	
	if(!assertTimestamps(ts1, ts2))
	{
		return false;
	}

	selectedVariableLabel = getVariableLabelFromContainer(inputContainer);
	console.log(selectedVariableLabel);
	
	const devicesInDashboardIDs = await getDashboardDevicesIDs(dashboardID, ubidotsToken);
	const req = await isTypesOrGroups(dashboardObject, deleteVariableFromGroup, deleteVariableFromGroup, devicesInDashboardIDs, ubidotsToken, selectedVariableLabel, ts1, ts2);
	console.log(req);
});

function populateDropdownItems(items, dropdownObj)
{
	var isFirst = true;
	items.forEach(function(item)
	{
		var option = document.createElement('option');
  		option.text = item.label + " : " + item.id;
  		dropdownObj.add(option);
		isFirst = false;
	});
}


function deleteDropdownItems(dropdown)
{
	while (dropdown.firstChild) 
	{
    	dropdown.removeChild(dropdown.firstChild);
  	}
}

function assertTimestamps(ts1, ts2)
{
	if(ts1 > ts2)
	{
		console.error("ERROR: end date being earlier than start date.", ts1, ts2);
		console.log("startDate: ", ts1);
		console.log("endDate: ", ts2);
		return false;
	}
	return true;
}

async function deleteVariableFromGroup(deviceID = [], ubidotsToken, variableLabel, ts1, ts2)
{
	const promisesList = [];
	await Promise.all(deviceID.map(async (id) => 
	{
  		const deviceVariables = await getDeviceVariables(id, ubidotsToken);
 		deviceVariables.forEach(async (variable) => 
		{
    		if(variable.label === variableLabel) 
			{
				const req = await deleteVariable(variable.id, ts1, ts2, ubidotsToken);
				promisesList.push(req);
    		}
  		});
	}));
	return promisesList;
}

async function isTypes(deviceID = [], ubidotsToken)
{
	console.log("ENTRY");
	return {"msg":1};
}

async function deleteVariable(variableID, ts1, ts2, ubidotsToken)
{
	var debugMsg = {"var id" : 0, "url": ".", "task id" : 0};
	const url = "https://industrial.api.ubidots.com/api/v2.0/variables/" + 
		variableID + "/_/values/delete/?startDate=" + ts1 + "&endDate=" + ts2;
	const response = await fetchWrapper(url, 'POST', ubidotsToken);
	debugMsg["var id"] = variableID;
	debugMsg["url"] = url;
	debugMsg["task id"] = response;
	return debugMsg;
}

function getVariableLabelFromContainer(container)
{
	var value = container.firstElementChild.value;	
	return value;
}

async function setGUIAccordingToDeviceTypeFilter(dashboardObject, inputContainer, displayedMsg)
{
    if(dashboardObject.context.deviceFilterType == 'device_type')
    {
        var a = await getDeviceVariables(ubidots.selectedDevice, ubidots.token);
        var labels = [];
        a.forEach(element =>
        {
            labels.push(element.label);
        });
    }
    isTypesOrGroups(dashboardObject, populateDropdown, populateTextField, inputContainer, displayedMsg, labels);
}

function populateDropdown(inputContainer, displayedMsg, dropdownElements)
{
    var dummyStr = '';
    dropdownElements.forEach(element =>
    {
        dummyStr = dummyStr + '<option value=\"' + element + '\">' + element + '</option>' + ' ';
    });
    inputContainer.innerHTML = `<select id="inputType">` + dummyStr + `</select>`;
    displayedMsg.innerText = "Select variable";
}

function populateTextField(inputContainer, displayedMsg)
{
	displayedMsg.innerText = "Enter a variable's label";
    inputContainer.innerHTML = `<input type="text" id="inputType">`;
}


function isTypesOrGroups(dashboardObject, typeCallback, groupCallback, ...rest)
{
    if(dashboardObject.context.deviceFilterType == "device_group")
    {
        return groupCallback(...rest);
    }
    else if(dashboardObject.context.deviceFilterType == "device_type")
    {
        return typeCallback(...rest);
    }
    else
        return {"ERROR" : "device filter type not recognized"};
}

async function getDeviceVariables(deviceID, token)
{
	const url = 'https://industrial.ubidots.com/api/v2.0/devices/' + deviceID + '/variables';
	const response = await fetchWrapper(url, 'GET', token);
	return response.results;
}

async function getDashboardObject(dashboardID, ubidotsToken)
{
    const url = 'https://industrial.api.ubidots.com/api/v2.0/dashboards/' + dashboardID;
    const req = await fetchWrapper(url, 'GET', ubidotsToken);
    return req;
}

async function getDashboardDevices(dashboardID, ubidotsToken)
{
    const url = 'https://industrial.ubidots.com/api/-/dashboards/' + dashboardID + '/devices?sort_by=name&page_size=500';
    const method = 'GET';
    const req = await fetchWrapper(url, method, ubidotsToken);
    return req;
}

async function getDashboardDevicesIDs(dashboardID, ubidotsToken)
{
    var req = await getDashboardDevices(dashboardID, ubidotsToken);
    var l = [];

    req.results.forEach(function(item)
	{
        l.push(item.id);
    });
	return l;
  
}

async function getDeviceObject(deviceID, ubidotsToken, filters = null)
{
	var url = 'https://industrial.api.ubidots.com/api/v2.0/devices/' + deviceID + '/';
	url = filters == null ? url : url + filters;
	const request = await fetchWrapper(url, 'GET', ubidotsToken);
	return request;
}

async function fetchWrapper(url, method, token = null, payload = null)
{
	const options =
	{
    	method: method,
		headers: {'Content-Type' : 'application/json'}
	};

	if (payload)
	{
    	options.body = JSON.stringify(payload);
  	}

  	if (token)
	{
    	options.headers['X-Auth-Token'] = token;
  	}

	const response = await fetch(url, options);
	const jsonData = await response.json();
	return jsonData;
}


function toTimestamp(date) 
{
	const dateObj = new Date(date);
	const timestamp = dateObj.getTime();
	return timestamp;
}

This implementation will display a different UI depending if the current Dashboard is set by Device Type or Device Group. In the first case, the variables common to the Device Type will be displayed in a drop-down menu. In the later, a text-box will be displayed for the user to type-in the label of the variable that wants to delete. The following GIF shows the Widget being used in both categories of dashboards:

Navigation through Dashboard

This example uses HTML Canvas newest feature "Preload dashboard data" to easily implement navigation through dashboards.

A drop-down menu will display all of the Dashboards present in the Ubidots account, upon selecting one, said dashboard will be opened in a new browser tab.

HTML:

<div>
    <h1>Navigate through your Dashboards</h1>
    <select id="dashboardsList"></select>
</div>

Javascript:

var token = ubidots.token;
const dashboardsDropdown = document.getElementById('dashboardsList');
dashboardsDropdown.addEventListener('change', handleSelectionChange);

getAllDashboards(token).then((data) =>
{
    // Iterate over the data and create options
    const dropdown = document.getElementById('dashboardsList');
    data.results.forEach(item => 
    {
        const option = document.createElement('option');
        option.value = item.id; // Adjust the value according to your data
        option.text = item.label; // Adjust the displayed text according to your data
        option.label = item.label;
        dropdown.appendChild(option);
    });
});

function handleSelectionChange() 
{
    const dashboardID = this.value; // Get the selected value
    const url = `https://industrial.ubidots.com/app/dashboards/${dashboardID}`;
    window.open(url, '_blank');
   
}

async function getAllDashboards(ubidotsToken)
{
    const url = "https://industrial.api.ubidots.com/api/v2.0/dashboards/";
    const method = "GET";
    const req = await fetchWrapper(url, method, ubidotsToken);
    return req;
}

async function fetchWrapper(url, method, token = null, payload = null)
{
	const options =
	{
    	method: method,
		headers: {'Content-Type' : 'application/json'}
	};

	if (payload)
	{
    	options.body = JSON.stringify(payload);
  	}

  	if (token)
	{
    	options.headers['X-Auth-Token'] = token;
  	}

	const response = await fetch(url, options);
	const jsonData = await response.json();
	return jsonData;
}

The following is the resulting Widget:

Using a React library

This example showcases how to import and use MaterialUI.

Add the library's CDN to the Widget's 3rd party libraries:

https://unpkg.com/@material-ui/core@4.11.4/umd/material-ui.development.js

Note that in the path, the umd tells that this CDN is exposed through UMD format.

Now, in the code editor's HTML tab, put the following:

<div id="root"></div>

Change to the Javascript (JSX) tab and paste the following:

const { createRoot } = ReactDOM;
const { Button } = MaterialUI;


function App() {
    return (
        <>
            <Button variant="contained" color="primary">
                First button using react and MaterialUI
            </Button>
            <Button variant="outlined" color="secondary">
                Another button
            </Button>
        </>
    );
}

After saving the changes, the widget will be rendered as:

Code editor

The code editor has 3 tabs:

HTML
CSS
JavaScript

Each of these tabs can be used to write code using the corresponding language.

All 3 of the previous mentioned languages can even be used within the same file, like this:

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-color: lightblue;
}
h1 {
   color: white;
   text-align: center;
}
p {
   font-family: verdana;
   font-size: 20px;
}
</style>
</head>
<body>
<script>
  // Some javascript code
</script>
<h1> This is a h1 header </h1>
<p> This is a paragraph </p>
</body>
</html>

However, as best practices dictate, it is advisable to separate the design in 3 different files; one for each of the 3 different languages. This is the reason why the widget's code editor has a dedicated tab for each language.

HTML Tab

HTML (Hyper Text Markup Language) is the standard markup language with which any web page is structured. By using HTML elements, the user can tell the browser where and how to display content.

Examples:

<title> Page Title </title>: This element tells the browser to display the "Page Title" message as the tittle for the web page.
<h1> This is a h1 header </h1>: This element tells the browser to display the "This is a h1 header" message as an H1 header wherever it is placed in the HTML file.
<p> My first paragraph </p>: This element tells the browser to display the "My first paragraph" message as a paragraph wherever it is placed in the HTML file.

Typical HTML structure:

In every HTML file the following structure is mandatory:

<html>
<head>
</head>
<body>
</body>
</html>

When using HTML elements on the HTML Canvas widget, using the following tags is optional:

<html></html>
<head></head>
<body></body>

This means that all the code that is placed in the HTML code editor tab will be interpreted as if it were inside an HTML body element on the widget:

Typical HTML file

Ubidots equivalent HTML inside the widget

<html> <head> </head> <body> <h1> This is a h1 header </h1> <p> This is a paragraph </p> <p> This is another paragraph </p> </body> </html>

<h1> This is a h1 header </h1> <p> This is a paragraph </p> <p> This is another paragraph </p>

Advanced example:

Suppose the following web content has to be displayed:

This can be achieved with the following HTML code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1> Online HTML Editor </h1>
<p> This is a real time online HTML Editor </p>
</body>
</html>

In order to achieve this same result on the HTML Canvas, the following code can be used on the HTML tab of the code editor:

<h1> Online HTML Editor </h1>
<p> This is a real time online HTML Editor </p>

The resulting HTML Canvas Widget is shown below on a dasboard:

CSS Tab

CSS (Cascading Style Sheets) is used to define styles that can be applied to HTML elements in order to customize the way in which they are displayed in the web browser.

Examples:

CSS Element

Effect on the corresponding HTML element

body { background-color: lightblue; }

Sets the style for the HTML body to have a lightblue background color

h1 { color: white; text-align: center; }

Sets the style for the h1 headers to have their color white as well as to center the text

p { font-family: verdana; font-size: 20px; }

Set the style for the paragraphs to have their font family set to verdana and the font-size as 20px

Advanced example:

The following HTML + CSS file modifies the body, H1 header, and paragraph elements' style.

<!DOCTYPE html>
<html>
<head>
<style>
body {
   background-color: lightblue;
}
h1 {
   color: white;
   text-align: center;
}
p {
   font-family: verdana;
   font-size: 20px;
}
</style>
</head>
<body>
<h1> This is a h1 header </h1>
<p> This is a paragraph </p>
</body>
</html>

It Results in the following content being displayed in the browser:

To achieve this on the HTML Canvas, the following can be done:

Place the following code on the HTML code editor tab:

<h1>This is a h1 header</h1>
<p> This is a paragraph </p>

Place the following code on the CSS tab:

body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

This is the resulting HTML Canvas Widget shown on a Dashboard:

JavaScript Tab

JavaScript is a scripting language that allows the user to interact with the elements of a web page, define logic for web content, and dynamically modify/update the contents of the web page.

Examples:

JavaScript code

Action

const Paragraph = document.querySelector("p");

Selects a text paragraph and stores an instance of it on the Paragraph variable

function updateName() { const name = prompt("Enter a new name"); para.textContent = Player 1: ${name}; }

Defines a function block that can be invoked by calling updateName()

Paragraph.addEventListener("click", updateName);

Attaches an event listener to the Paragraph instance such that when the paragraph is clicked, the updateName function gets executed

const para = document.getElementById("player");

Gets a reference to the element with ID "player" from the DOM

Advanced example #1:

Let's assume the following requirement:

Creating a paragraph element that displays the message "PLAYER 1: name", where name is a value set by the user upon clicking on the paragraph element.

This can be accomplished using the following HTML + CSS + JavaScript recipe:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      /* set the font family, size, and style */
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      /* set the border, background, color, and box shadow */
      border: 2px solid rgba(0, 0, 200, 0.6);
      background: rgba(0, 0, 200, 0.6);
      color: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
      /* set the border radius and padding */
      border-radius: 10px;
      padding: 3px 10px;
      /* set the display to inline-block and cursor to pointer */
      display: inline-block;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <!-- add an ID attribute to the <p> element -->
  <p id="player-name">Player 1: Chris</p>
  <script>
    // get a reference to the <p> element using its ID
    const para = document.getElementById("player-name");

    // add a click event listener to the <p> element
    para.addEventListener("click", updateName);

    function updateName() {
      // prompt the user to enter a new name
      const name = prompt("Enter a new name");

      // update the text content of the <p> element
      para.textContent = `Player 1: ${name}`;
    };
  </script>
</body>
</html>

The same can be reproduced on Ubidots by using the HTML Canvas Widget in the following way:

Use the following HTML code on the widget's HTML code editor tab:

<!-- add an ID attribute to the <p> element -->
<p id="player-name">Player 1: Chris</p>

Now, add the style to the paragraph on the widget's CSS tab:

p {
      /* set the font family, size, and style */
      font-family: "Helvetica Neue", Helvetica, sans-serif;
      letter-spacing: 1px;
      text-transform: uppercase;
      /* set the border, background, color, and box shadow */
      border: 2px solid rgba(0, 0, 200, 0.6);
      background: rgba(0, 0, 200, 0.6);
      color: rgba(255, 255, 255, 1);
      box-shadow: 1px 1px 2px rgba(0, 0, 200, 0.4);
      /* set the border radius and padding */
      border-radius: 10px;
      padding: 3px 10px;
      /* set the display to inline-block and cursor to pointer */
      display: inline-block;
      cursor: pointer;
}

Lastly, add the following code to the widget's JavaScript tab:

// get a reference to the <p> element using its ID
const para = document.getElementById("player-name");

// add a click event listener to the <p> element
para.addEventListener("click", updateName);

function updateName() 
{
    // prompt the user to enter a new name
    const name = prompt("Enter a new name");

    // update the text content of the <p> element
    para.textContent = `Player 1: ${name}`;
};

The following is the result on a Ubidots Dashboard:

HTML Canvas

Introduction:

Definition:

When to use the HTML Canvas?

How to create an HTML Canvas?

Widget settings:

Widget appearance tab:

Custom Style:

3rd party packages

Overview

Importing React libraries

Example

Preload Dashboard data

Overview

Class' properties when Preload dashboard data is disabled

Built-in library

Overview

Properties

HTML Canvas class Properties

dashboardDateRange

dashboardObject

selectedDevices

selectedDeviceObjects

selectedFilters

Methods

HTML Canvas methods

getHeaders

openDrawer

setDashboardDevice

setDashboardDateRange

setRealTime

refreshDashboard

setFullScreen

Listening events

Overview

Registering for an event

Available events

receivedToken

selectedDashboardDateRange

isRealTimeActive

dashboardRefreshed

selectedDevices

selectedDeviceObjects

selectedDashboardObject

selectedFilters

ready

Events relation with the class' properties

API

Javascript SDK

Usage

Examples

Basics

Example #1

Example #2:

Example #3:

Example #4:

Create an LCD screen with the HTML Canvas

HTML:

CSS:

JavaScript:

Adjusting the screen's contrast

Interacting with dashboard data

Example #1:

HTML:

JavaScript:

Example #2

Change header's custom style

Adding real time using Socket.IO

Delete Variable data from a Device

Delete Variable data from Groups or Types of Devices

Navigation through Dashboard

Using a React library

Code editor

HTML Tab

Examples:

Typical HTML structure:

HTML structure on the HTML Canvas widget:

Advanced example:

CSS Tab

Examples:

`dashboardDateRange`

`dashboardObject`

`selectedDevices`

`selectedDeviceObjects`

`selectedFilters`

`getHeaders`

`openDrawer`

`setDashboardDevice`

`setDashboardDateRange`

`setRealTime`

`refreshDashboard`

`setFullScreen`

`receivedToken`

`selectedDashboardDateRange`

`isRealTimeActive`

`dashboardRefreshed`

`selectedDevices`

`selectedDeviceObjects`

`selectedDashboardObject`

`selectedFilters`

`ready`