Ubidots ofrece widgets listos para usar que cubren la mayoría de las necesidades de visualización y control. Sin embargo, en algunos proyectos puede que desees programar tu propio widget personalizado. Sabiendo que los usuarios avanzados tienen necesidades de personalización, creamos el widget de Lienzo HTML, que permite utilizar tu propio HTML/CSS/JS para crear widgets y visualizaciones personalizados.
1. ¿Cómo funciona el widget de Lienzo HTML?
Al seleccionar el widget, encontrarás un editor de código como se muestra en el gif a continuación. El widget funciona con el mismo HTML/CSS/JS que usarías al crear un sitio web simple. No es necesario aprender una API especial.
También se considera el caso en el que podrías necesitar usar una tercera biblioteca (por ejemplo, jQuery), por lo que puedes agregarlas insertando una URL que contenga la biblioteca. Cualquier biblioteca JS puede ser utilizada aquí siempre que esté alojada en un CDN.
NOTA IMPORTANTE: Al escribir código en este widget, debes considerar que toda la ejecución del código se realizará en tu navegador, no realizamos ningún tipo de polyfilling aquí, por lo que depende de tu navegador soportar todas las funciones que utilices.
Siguiendo los pasos a continuación podrás crear un widget de Lienzo HTML con tu propio código.
Paso 1: Haz clic en el botón "+" en la parte superior derecha. Se abre el menú desplegable con opciones de widgets.
Paso 2: Haz clic en Lienzo HTML. El menú desplegable muestra las opciones de configuración.
Paso 3: Nombra tu widget.
Paso 4: Haz clic en el botón "Abrir editor".
Paso 5: Ingresa tu código HTML, CSS y JS en la pestaña respectiva.
Paso 6: Agrega bibliotecas ingresando su URL en la sección "Bibliotecas de terceros".
Paso 7: Guarda los cambios.
A continuación, encontrarás un ejemplo para crear widgets y visualizaciones personalizados. Para simplificar las explicaciones, estos ejemplos utilizarán jQuery para manipular el DOM.
2. Ejemplo #1: Texto simple con una imagen
En esta sección vamos a crear un Lienzo HTML que contiene una imagen acompañada de un texto. El resultado se presenta a continuación:
Vamos a utilizar el logotipo de Ubidots y nuestro lema que es "Acelerar la Innovación IoT" para crear este ejemplo simple pero hermoso.
Este ejemplo no contiene ningún código JS.
El código HTML será:
<img src="https://iot.cdnedge.bluemix.net/ind/static/images/logo-ubidots@2x.png" /><p class="motto">Acelerar la Innovación IoT</p>
El código CSS será:
@import url('https://fonts.googleapis.com/css?family=Open+Sans');body { fondo: #28AECD; color: #FFFFFF; fuente-familia: 'Open Sans', sans-serif;}img { display: block; margin: 0 auto; position: absolute; width: 350px; top: 50%; left: 50%; transform: translate(-50%, -50%);}.motto { position: absolute; top: 60%; transform: translate(-50%, -50%); left: calc(50% + 80px); white-space: nowrap; }Puedes ver el resultado de este ejemplo en este widget aquí.
3. Ejemplo #2: Caja de texto simple para establecer una variable
Aquí necesitarás agregar la biblioteca jQuery copiando/pegando el siguiente enlace en la sección "agregar biblioteca de terceros".
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js
Este es el primer ejemplo que muestra cómo interactuar con la API de Ubidots. El resultado final de este ejemplo será un Widget HTML capaz de enviar un valor a una Variable.
El código HTML será:
<div class="notification--container" id="notification"> <p>Valor enviado exitosamente</p></div><div class="send-value--container"> <input type="number" step="0.0001" placeholder="Ingresa un número" class="send-value--input" id="value" /> <button type="button" class="send-value--button" id="send-value">Enviar valor</button></div>
El código CSS será:
.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;}El código JS será:
var $sendValue = $('#send-value');var $value = $('#value');var $notification = $('#notification');var TOKEN = 'TU TOKEN';var VARIABLE_ID = 'TU ID DE VARIABLE';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.hide(); $.ajax({ data: JSON.stringify({ value: parseFloat($value.val(), 10) }), method: 'POST', url: url, headers: headers, success: function (res) { callback(res.value); } });}$sendValue.on('click', function () { postValue(VARIABLE_ID, TOKEN, function (value) { $notification.show(); });});Puedes ver el resultado de este ejemplo en este widget aquí.
4. Ejemplo #3: Highcharts – Gráfico de Líneas
Aquí necesitarás agregar las bibliotecas jQuery y Highcharts copiando/pegando los siguientes enlaces en la sección "agregar biblioteca de terceros".
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jshttps://cdnjs.cloudflare.com/ajax/libs/highcharts/6.1.1/highcharts.js
En el siguiente ejemplo vamos a traer los datos de Ubidots y mostrar los datos en un gráfico de HighCharts. El resultado se verá así:
Esto muestra el gran nivel de personalización que puede tener el widget de Lienzo HTML.
Este ejemplo no contiene ningún código CSS.
El código HTML será:
<div id="container" style="min-width: 310px; height: 310px; margin: 0 auto"></div>
El código JS será:
var TOKEN = 'TU TOKEN';var VARIABLE = 'TU ID DE VARIABLE';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' }; $.ajax({ url: url, method: 'GET', headers: headers, success: function (res) { callback(res.results); } });}var chart = Highcharts.chart('container', { chart: { type: 'line' }, title: { text: 'Traer datos de 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);});
Ten en cuenta que no verás ningún dato hasta que hayas reemplazado el TOKEN y la VARIABLE (líneas 1 y 2 en el código JS).
Puedes ver el resultado de este ejemplo en este widget aquí.
5. Ejemplo #4: Mapa de Mapbox
Aquí necesitarás crear una cuenta en Mapbox para obtener la clave de autenticación apropiada para usarla en el código JS.
En este ejemplo usaremos Mapbox en lugar de Google Maps, que es el servicio que usamos para nuestro widget de Mapa predeterminado.
Este es un ejemplo un poco más complicado, ya que estamos utilizando las APIs de OpenLayers y Mapbox. Aquí necesitarás incluir las bibliotecas jQuery y OpenLayer copiando/pegando los siguientes 3 enlaces en la sección "agregar biblioteca de terceros".
https://openlayers.org/en/v3.20.1/build/ol.jshttps://openlayers.org/en/v3.20.1/examples/resources/mapbox-streets-v6-style.jshttps://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js
El código HTML es:
<div id='map'> <div id="info"></div></div>
El código CSS es:
body { margin:0; padding:0; }#map { position:absolute; top:0; bottom:0; width:100%; }El código JS es:
var TOKEN = 'TU TOKEN';var VARIABLE = 'TU ID DE VARIABLE';var key = 'TU CLAVE DE MAPBOX.COM';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' }; var params = { page_size: 1 }; $.ajax({ url: url, method: 'GET', params: params, headers: headers, success: function (res) { callback(res.results); } })}var styles = { 'geoMarker': new ol.style.Style({ image: new ol.style.Circle({ radius: 7, snapToPixel: false, fill: new ol.style.Fill({color: 'black'}), stroke: new ol.style.Stroke({ color: 'white', width: 2 }) }) })};var vectorSource = new ol.source.Vector({});var map = new ol.Map({ layers: [ new ol.layer.VectorTile({ source: new ol.source.VectorTile({ format: new ol.format.MVT(), tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}), tilePixelRatio: 16, url: 'https://{a-d}.tiles.mapbox.com/v4/mapbox.mapbox-streets-v6/' + '{z}/{x}/{y}.vector.pbf?access_token=' + key }), style: createMapboxStreetsV6Style() }), new ol.layer.Vector({ source: vectorSource }) ], target: 'map', view: new ol.View({ center: [0, 0], zoom: 2 })});getDataFromVariable(VARIABLE, TOKEN, function (values) { var geoMarker = new ol.Feature({ type: 'geoMarker', geometry: new ol.geom.Point([0,0]) }); vectorSource.addFeature(geoMarker);}); Puedes ver el resultado de este ejemplo en este widget aquí.
6. Ejemplo #5: Gráfico de Plotly
Aquí necesitarás agregar las bibliotecas jQuery y Plot.ly copiando/pegando los siguientes enlaces en la sección "agregar biblioteca de terceros".
https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.jshttps://cdnjs.cloudflare.com/ajax/libs/plotly.js/1.39.4/plotly.min.js
Antes usamos una implementación de Highcharts, pero ¿qué pasa si queremos usar otra biblioteca de gráficos? También es posible con este Widget HTML, en este ejemplo usaremos Plotly para graficar los datos de nuestro gráfico.
El código HTML será:
<div id="plotlyDiv" style="width:100%;height:400px;"></div>
El código JS será:
var TOKEN = 'TU TOKEN';var VARIABLE = 'TU ID DE VARIABLE';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' }; $.ajax({ url: url, method: 'GET', headers: headers, success: function (res) { callback(res.results); } })}var layout = { xaxis: { type: 'date', title: 'Fecha' }, yaxis: { title: 'Valor' }, title:'Mi Variable'};Plotly.plot('plotlyDiv', [], layout);getDataFromVariable(VARIABLE, TOKEN, function (values) { var trace = { x: [], y: [], mode: 'lines', type: 'scatter', name: '2000' }; var data = values.forEach(function (value) { trace.x.push(value.timestamp); trace.y.push(value.value); }); Plotly.addTraces('plotlyDiv', trace)});Puedes ver el resultado de este ejemplo en este widget aquí.