Productos
No todas las visualizaciones se ajustan a una plantilla. HTML Canvas es el widget de Ubidots, diseñado para desarrolladores, que te permite escribir tu propio HTML, CSS y JavaScript para crear con precisión los gráficos, las pantallas y las interacciones que tu proyecto requiere, sin concesiones.
Beneficios
Los widgets estándar cubren la mayoría de los casos de uso, pero no todos. HTML Canvas elimina las limitaciones, permitiéndote diseñar y programar visualizaciones que se ajusten a tus requisitos funcionales y estéticos exactos.
Escribe tu propio HTML, CSS y JavaScript directamente en Ubidots. No necesitas crear una interfaz de usuario aparte ni sortear las limitaciones de la plataforma: tu lógica personalizada reside junto con tus datos IoT .
HTML Canvas admite bibliotecas externas, por lo que puede incorporar sus herramientas de gráficos, marcos de interfaz de usuario o scripts personalizados preferidos y visualizarlos sin problemas en su dashboard.
Gracias a la configuración integrada, como la carga diferida y la precarga de datos dashboard , sus widgets personalizados están optimizados para un mejor rendimiento sin necesidad de realizar trabajo de ingeniería adicional por su parte.
IoT en acción
Cómo funciona
HTML Canvas proporciona a los desarrolladores un entorno de codificación integrado para crear, probar y mostrar widgets personalizados directamente dentro de la plataforma, sin necesidad de herramientas externas ni implementaciones separadas.
Características principales
Crea widgets personalizados con HTML, CSS, JS o React. Amplía dashboards Ubidots más allá de las opciones nativas mediante codificación asistida por IA.
Un editor integrado con pestañas dedicadas para cada idioma, que permite mantener el código de los widgets organizado sin salir de la plataforma.
Importa cualquier biblioteca JavaScript alojada en una CDN: jQuery, Highcharts, Plotly, Mapbox, React y más.
Acceda a las variables y al token de su dispositivo Ubidots directamente desde el código del widget mediante métodos integrados, sin necesidad de configuración adicional de la API.
Los widgets solo se renderizan cuando aparecen en la vista, lo que mantiene la velocidad dashboards incluso con contenido personalizado complejo.
Haz que todos los datos dashboard estén disponibles en el momento de la carga para que los widgets se rendericen instantáneamente, sin necesidad de devoluciones de llamada asíncronas.
Personaliza la apariencia de tu widget más allá del editor de código con CSS adicional a través de la opción Estilo personalizado.
Escribe código HTML, CSS y JavaScript estándar: el mismo código que usarías para crear un sitio web, sin tener que aprender nada nuevo.
Quantify Environmental utiliza sensores IoT inalámbricos y dashboards Ubidots para convertir los datos de servicios públicos en información en tiempo real, lo que ayuda a los clientes industriales a controlar el consumo de agua, energía y gas, detectar ineficiencias y actuar antes de que aumenten los costes.
$en ahorros anuales para los clientes gracias a la optimización del consumo de agua, electricidad y gas.
Se han conservado millones de litros de agua dulce y se han evitado toneladas de emisiones de CO₂, lo que ha permitido alcanzar resultados de sostenibilidad cuantificables.
Mejora de la supervisión operativa con visibilidad en tiempo real del consumo de servicios públicos y el rendimiento de los equipos.
Historia de éxito
Casos de uso
Tom Ulanowski
Cofundador
UbidotsUbidotsUbidotsUbidots utiliza UbidotsUbidotsUbidotsUbidots para monitorear los servicios públicos en diferentes instalaciones, lo que ayuda a sus clientes a reducir costos mediante datos y alertas en tiempo real.
Resultados:
Steve Barker
Fundador y director ejecutivo
Prospect Control utiliza Ubidots para brindar monitoreo remoto del nivel de tanques para clientes industriales, reemplazando configuraciones complejas de PLC/SCADA con una solución IoT escalable basada en la web.
Resultados:
Darryl Schembri
Gerente general
AIS Technology utiliza Ubidots para monitorear el consumo de electricidad, agua y gas en edificios con múltiples inquilinos, lo que permite visibilidad en tiempo real, facturación automatizada y una respuesta más rápida a las ineficiencias.
Resultados:
Onofre Tamargo
CEO y cofundador
S4IoT utiliza Ubidots para monitorear de forma remota los sistemas de riego en jardines urbanos, lo que ayuda a los clientes a reducir los costos de mantenimiento, prevenir la pérdida de plantas y pasar de operaciones manuales a un modelo escalable basado en suscripción.
Resultados:
Ayuda y soporte
¿Tienes preguntas sobre Ubidots? Aquí tienes algunas de las consultas más frecuentes para ayudarte a empezar.
HTML Canvas es un widget de Ubidotsdiseñado para desarrolladores que permite escribir código HTML, CSS y JavaScript personalizado directamente en un dashboard. Está pensado para casos en los que los widgets estándar no cumplen con requisitos funcionales o estéticos específicos, lo que permite crear gráficos, indicadores, tablas, animaciones o cualquier visualización que requiera el proyecto, renderizados en tiempo real junto con los demás widgets.
HTML Canvas admite HTML, CSS y JavaScript estándar, incluyendo React. También puedes importar bibliotecas de terceros alojadas en CDN, como marcos de gráficos y kits de herramientas de interfaz de usuario, directamente en la configuración del widget. No hay sintaxis propietaria que aprender; si funciona en un navegador, funciona dentro de HTML Canvas.
HTML Canvas ofrece métodos integrados que permiten que tu código acceda directamente a las variables del dispositivo y sus valores desde el editor de widgets. También puedes activar la opción "Precargar datos Dashboard " para que todas las variables dashboard estén disponibles en el momento en que se carga el widget, eliminando la necesidad de realizar llamadas a la API o de obtener datos externamente.
Utilice HTML Canvas cuando un widget estándar Ubidots no se ajuste a sus necesidades exactas, ya sea un tipo de gráfico personalizado, una presentación con una marca específica, un elemento de interfaz de usuario interactivo o una visualización que dependa de una lógica no disponible en los widgets nativos. Es la opción ideal cuando la biblioteca integrada cubre los datos, pero no la presentación.
