All Collections
Developer Guides
Create an HTML Canvas Widget: Introductory Demo
Create an HTML Canvas Widget: Introductory Demo

How to design a custom HTML Widget using Ubidots.

David Sepúlveda avatar
Written by David Sepúlveda
Updated over a week ago

Requirements

  • Ubidots account: Professional plan and above

Table of Contents

1. Introduction

Ubidots offers many off-the-shelf widgets that cover visualization and control needs for your IoT projects. However, in some cases, you may need to code your customized widgets using the HTML Canvas Widget, that's why we want to demonstrate the capabilities to manage and display your data using HTML/JS/CSS code.

In this introductory HTML Canvas demo, we will create a simple development to monitor a dynamic variable. Imagine you have a temperature value on a 0-100 degree scale.

  • Values less than 30, display a Blue LCD Screen.

  • Values between 30 and 70, display the default color of (green) LCD Screen.

  • Values greater than 70, display a Red LCD Screen.

The scale can be powered by a sensor's variables or manual control based on your coding and desired application, for the purpose of the example we use the slider widget to manually change the values. To start, you should have created both a temperature variable and a slider widget. If you haven't created any or both yet, please refer to the following articles to learn how to do it.

Once done both, you can continue with this guide.

2. Create a Custom HTML Canvas Widget

Now, let's see how we created this custom widget.

Step 1: Log into your Ubidots account.
Step 2: Go to Dashboards and click on the top-right "+" button. The drawer menu with widgets options opens.
Step 3: Click on HTML canvas. The drawer menu displays setup options.
Step 4: Click on "Open editor" button.
Step 5: Insert the below HTML, CSS and JS codes in each respective tab.

In the first tab, we will insert the HTML Code. This code will create the markup for our widget.

HTML CODE:

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

The second tab is CSS. This code will give style to our HTML markup

CSS CODE:

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

The third tab is for Javascript, the logic code of our widget. This is the only front-end programming language for web development so it is easily fittable for your needs.

You just need to replace the variable ID in it.

JS CODE:

var $bg = $("#image_background");
var $text = $("#image_background_text");
var lastValue = null;
var ubidots = new Ubidots();
var TOKEN = null;
var VAR_ID = "YOUR-VARIABLE-ID";

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.css("color", "white");
} else if (value > 30 && value <= 70) {
choose = "yellow";
$bg.css("color", "white");
}
$bg.css(
"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";
$.get(url, { token: token, page_size: 1 }, function (res) {
if (lastValue === null || res.results[0].value !== lastValue) {
$text.text(res.results[0].value);
lastValue = res.results[0].value;
changeImage(lastValue);
}
});
}
ubidots.on("receivedToken", function (data) {
TOKEN = data;
setInterval(function () {
getLastValue(VAR_ID, TOKEN);
}, 2000);
});

Step 6: Save the configuration by clicking on the green check mark.

IMPORTANT NOTE: Back to the settings panel, there's is a section to import 3rd party libraries, in this example we will use the Google CDN for jQuery. A CDN is a service given by a third party that hosts this library and lets us use it in our application.

Please copy and paste the following URL into the text box:

https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js

jQuery is a library that will let us manipulate the DOM simply. The DOM is literally everything you see in your browser.
With this final step, you have completed your custom color-adjusting widget based on predetermined triggers of 30 and 70.

Your final product should look like this:

3. Adjust contrast

To further display the capabilities of this HTML Canvas, let's keep going. The demo widget was designed to adjust a display based on triggers (30 & 70). But, what if you wanted to go one more layer and overlay an image onto another image? This is possible too with Ubidots HTML Canvas. Using an LCD image, we coded HTML to adjust its contrast according to the value of a variable. For this, LCD screens use analog input. This lets you change the contrast of the screen by varying the current, we will do something similar here with a new variable.

Step 1: Create a new variable.
Step 2: Use the new assets of the screen.

As we are just modifying the display of the LCD screen, we need to separate the display screen from the border. We will work with two images: The LCD screen body and the LCD.

Step 3: Let's take a look back at our example and edit it to incorporate this new layer

HTML CODE:

<div id="image_background">

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

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

CSS CODE:

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

#image_background {
background: url('http://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;
}

JS CODE:

var $bg = $("#display_background");
var $text = $("#image_background_text");
var lastValue = null;
var lastContrast = null;
var ubidots = new Ubidots();
var TOKEN = null;
var VAR_ID_LV = "YOUR-LAST-VALUE-VARIABLE-ID";
var VAR_ID_CONTRAST = "YOUR-CONTRAST-VARIABLE-ID";
var ubidots = new Ubidots();
var scale = d3.scaleLinear().range([0, 4]).domain([0, 1023]);

function getLastValue(variableId, token, cb) {
var url =
"https://industrial.api.ubidots.com/api/v1.6/variables/" +
variableId +
"/values";
$.get(url, { token: token, page_size: 1 }, function (res) {
if (typeof cb === "function") cb(res);
});
}

ubidots.on("receivedToken", function (data) {
TOKEN = data;
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 (
(lastContrast === null || value !== lastContrast.value) &&
value !== null
) {
$text.text(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) &&
value !== null
) {
$bg.css("filter", "contrast(" + scale(value) + ")");
lastContrast = value;
}
});
}, 2000);
});

IMPORTANT NOTE: Before saving the new code and trying it out, a second third-party library will be needed. As in the first example, please add the following library to your HTML canvas:

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

Finally, this is an example of how this demo would look:

Thank you for learning a little bit more about Ubidots and our HTML Canvas widget. Now, it is your turn to build a custom widget tailored to your specific application needs.

If you develop something amazing, please share it with us on Facebook, Twitter, or Youtube.


4. Feedback, Suggestions and Related Articles

Feel free to post questions or suggestions in our community portal, or contact us via support@ubidots.com

Other users also found helpful...

Did this answer your question?