The HTML canvas is a powerful widget that allow Ubidots developers to create specialized mini-web apps using Ubidots' API REST with a little imagination. With the HTML canvas, users can create customized user displays (UIs) like customized maps or animated business apps.

Using this guide and the HTML Canvas Widget developers can 

  • Securely retrieve and account's token
  • Retrieve dashboard's data

Why is this helpful: 

  • Securely retrieving and account's token allows developers to interact with Ubidots API to retrieve data or send new dots, adjusting data and controls within an App. 
  • Retrieving dashboard data allows developers to plot their own charts after retrieving the device id from the dashboard with the underlying variable values needing to be plotted.

In this tutorial, you will learn how to use these capabilities to better utilize the HTML Canvas Widget in your App.

IMPORTANT NOTE: This article is intended for developers with foundational knowledge of HTML, JS and CSS. If you are not familiar with these languages, it is strongly advised to brush up a bit on the the basics and return to this article once you are feeling more comfortable to code.

AVAILABLE METHODS AND PROPERTIES

Methods: Ubidots support the below methods to be used by developers inside the widget:

  • Ubidots(): Constructor to create an instance.
  •  on({{listener}}, callback()) : Method to trigger a callback based on the listener set as input. The available listeners are listed below:
    1) ready: Listens when the account data is available.
    2) receivedToken: Listens when the token is retrieved from an account
    3) selectedDevice: Listens when the device is updated in a dynamic dashboard.
    4) selectedDashboardDateRange: Listens when the data range is changed in a dashboard.

Properties: an Ubidots instance may utilize the properties listed below:

  • token : An actual valid token from the account
  • selectedDevice : The actual selected device id in a dynamic dashboard.
  • dashboardDateRange : The actual selected data range in a dynamic dashboard.

HTML CANVAS CODING

The HTML Canvas widget is divided into three coding slots: HTML, CSS and JS, I will not implement any CSS as this tutorial is not intended for the widget's visual design, so we will work only with HTML and JS editors.

HTML


<div>
  <p id="token"></p>
  <p id="device"></p>
  <p id="dateRange"></p>

  <p id="eventToken"></p>
  <p id="eventDevice"></p>
  <p id="eventDateRange"></p>
</div>

The HTML is pretty simple. For this exchange we will update a paragraph meta-tag based on the logic implemented at the JS side. 

There are two ways to populate the paragraphs from the HTML meta-tags:

Implementation 1:

 JS



var ubidots = new Ubidots();

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

ubidots.on('selectedDevice', function (data) {
  document.getElementById('eventDevice').innerText = data;
});

ubidots.on('selectedDashboardDateRange', function (data) {
  document.getElementById('eventDateRange').innerText = JSON.stringify(data);
});

This JS code changes the actual paragraph using the available listeners and triggering a callback that will fill the HTML meta-tags with the data provided by Ubidots. This implementation is useful if you wish to implement any additional logic encapsulated within an anonymous function.

Implementation 2:

JS

var ubidots = new Ubidots();

ubidots.on('ready', function () {  document.getElementById('token').innerText = ubidots.token;  document.getElementById('device').innerText = ubidots.selectedDevice;  document.getElementById('dateRange').innerText = JSON.stringify(ubidots.dashboardDateRange);});

Instead of triggering an anonymous function, the HTML properties are filled using the Ubidots object instance. This implementation is useful to create actions that should be triggered once.

IMPORTANT NOTE: There is no need to add any external library to use these methods and properties, Ubidots adds libraries to do this by default once you've created the canvas widget.

Results

Below you will find the final results of our widget. In real-time, our widget is updating with all data references that come from the server: account token, device id and dashboard data range timestamps.

With the sample codes in the guide and the HTML Canvas widget, it is your turn to code your very own Application visualization or control widget. 

Do not forget to share us your comments in Ubidots Community Forums or share your projects with us on social media at Facebook, Twitter or Hackster

Other users also found helpful: 

Did this answer your question?