Requisitos
Cuenta Ubidots: Plan Profesional y superiores.
1. Introducción
Ubidots ofrece muchos widgets listos para usar que cubren las necesidades de visualización y control de tus proyectos IoT. Sin embargo, en algunos casos, puede que necesites programar tus widgets personalizados utilizando el widget HTML Canvas, por lo que queremos demostrar sus capacidades para gestionar y mostrar datos utilizando código HTML/JS/CSS.
En esta demostración introductoria de HTML Canvas, crearemos un widget simple para monitorear una variable dinámica. Imagina que tienes un valor de temperatura en una escala de 0-100 grados.
Valores por debajo de 30, se muestra una pantalla LCD azul.
Valores entre 30 y 70, se muestra una pantalla LCD verde.
Valores superiores a 70, se muestra una pantalla LCD roja.
La escala puede ser alimentada por la variable de un sensor o control manual basado en tu codificación y aplicación deseada. Para el propósito de este ejemplo, utilizamos el widget Deslizador para cambiar manualmente los valores. Para comenzar, deberías haber creado una variable de temperatura y un widget Deslizador. Si aún no has creado ninguno de ellos, consulta los siguientes artículos para aprender a hacerlo.
Una vez hecho esto, puedes continuar con esta guía.
2. Crear un Widget HTML Canvas Personalizado
Ahora, veamos cómo creamos este widget personalizado.
Paso 1: Inicia sesión en tu cuenta de Ubidots.
Paso 2: Ve a "tableros" y haz clic en el botón "+" en la esquina superior derecha.
Paso 3: Haz clic en la opción HTML Canvas. Se abrirá el menú de configuración.
Paso 4: Haz clic en la opción "editar código" (junto al "editor de código").
Paso 5: Inserta los siguientes códigos HTML, CSS y JS en las pestañas respectivas.
En la primera pestaña, insertaremos el código HTML. Este código creará el marcado para nuestro widget.
CÓDIGO HTML:
<div id="image_background">
<p>Last value:</p>
<span id="image_background_text">No data</span>
</div>
La segunda pestaña es CSS. Este código dará estilo a nuestro marcado HTML.
CÓDIGO 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;
}
La tercera pestaña es para JavaScript, el código lógico de nuestro widget.
Solo necesitas reemplazar el ID de la variable en él.
CÓDIGO JS:
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);
});
Paso 6: Guarda el código haciendo clic en el botón "aceptar".
NOTA IMPORTANTE: En el panel de configuración del widget, hay una sección para importar bibliotecas de terceros. En este ejemplo utilizaremos el CDN de Google para jQuery. Un CDN es un servicio proporcionado por un tercero que aloja esta biblioteca y nos permite usarla en nuestra aplicación.
Copia y pega la siguiente URL en el cuadro de texto:
https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
jQuery es una biblioteca que nos permitirá manipular el DOM de manera simple. El DOM es literalmente todo lo que ves en tu navegador.
Con este último paso, has completado tu widget personalizado que ajusta el color basado en valores desencadenantes predeterminados de 30 y 70.
Tu widget final debería verse así:
3. Ajustar contraste
Para mostrar más las capacidades de este HTML Canvas, sigamos adelante. El widget de demostración fue diseñado para ajustar una pantalla en función de los valores de activación (30 y 70). Pero, ¿y si quisieras agregar una capa más y superponer una imagen sobre otra imagen? Esto también es posible con el HTML Canvas de Ubidots. Usando una imagen de LCD, codificamos el HTML para ajustar su contraste según el valor de una variable. Para esto, las pantallas LCD usan entrada analógica. Esto te permite cambiar el contraste de la pantalla variando la corriente, haremos algo similar aquí con una nueva variable.
Paso 1: Crea una nueva variable.
Paso 2: Utiliza los nuevos recursos de la pantalla.
Como solo estamos modificando la visualización de la pantalla LCD, necesitamos separar la pantalla del borde. Trabajaremos con dos imágenes: El cuerpo de la pantalla LCD y la LCD.
Paso 3: Echemos un vistazo a nuestro ejemplo y editemos para incorporar esta nueva capa.
CÓDIGO HTML:
<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>
CÓDIGO CSS:
@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;
}
CÓDIGO JS:
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);
});
NOTA IMPORTANTE: Antes de guardar el nuevo código y probarlo, se necesitará una segunda biblioteca de terceros. Como en el primer ejemplo, por favor agrega la siguiente biblioteca a tu HTML canvas:
https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.0/d3.min.js
Finalmente, este es un ejemplo de cómo se vería esta demostración: