Produits
Toutes les visualisations ne correspondent pas à un modèle. HTML Canvas est le widget convivial d' Ubidotspour les développeurs qui vous permet d'écrire votre propre code HTML, CSS et JavaScript afin de créer précisément les graphiques, les affichages et les interactions dont votre projet a besoin, sans aucun compromis.
Avantages
Les widgets standard couvrent la plupart des cas d'utilisation, mais pas tous. HTML Canvas repousse les limites du possible, vous permettant de concevoir et de coder des visualisations qui correspondent exactement à vos exigences fonctionnelles et esthétiques.
Écrivez votre propre code HTML, CSS et JavaScript directement dans Ubidots. Inutile de créer une interface séparée ou de contourner les limitations de la plateforme : votre logique personnalisée est intégrée à vos données IoT .
HTML Canvas prend en charge les bibliothèques externes, vous permettant ainsi d'intégrer vos outils de création de graphiques, frameworks d'interface utilisateur ou scripts personnalisés préférés et de les afficher de manière transparente dans votre dashboard.
Grâce à des paramètres intégrés tels que le chargement différé et le préchargement des données dashboard , vos widgets personnalisés sont optimisés pour la performance sans nécessiter de travail d'ingénierie supplémentaire de votre part.
IoT en action
Comment ça marche
HTML Canvas offre aux développeurs un environnement de codage intégré pour créer, tester et afficher des widgets personnalisés directement au sein de la plateforme ; aucun outil externe ni déploiement séparé n’est requis.
Caractéristiques principales
Créez des widgets personnalisés avec HTML, CSS, JS ou React. Étendez dashboards Ubidots au-delà des options natives grâce à la programmation assistée par l'IA.
Un éditeur intégré avec des onglets dédiés pour chaque langage — vous permettant de garder le code de vos widgets organisé sans quitter la plateforme.
Importez n'importe quelle bibliothèque JavaScript hébergée sur un CDN : jQuery, Highcharts, Plotly, Mapbox, React, et bien d'autres.
Accédez directement aux variables et au jeton de votre appareil Ubidots depuis le code du widget grâce aux méthodes intégrées — aucune configuration d’API supplémentaire n’est requise.
Les widgets ne s'affichent que lorsqu'ils apparaissent à l'écran, ce qui permet de conserver dashboards rapides même avec un contenu personnalisé complexe.
Rendez toutes les données dashboard disponibles au moment du chargement afin que les widgets s'affichent instantanément — aucun rappel asynchrone n'est requis.
Affinez l'apparence de votre widget au-delà de l'éditeur de code grâce à du CSS supplémentaire via l'option Style personnalisé.
Écrivez du code HTML, CSS et JavaScript standard — le même code que vous utiliseriez pour créer un site web, sans rien de nouveau à apprendre.
Quantify Environmental utilise des capteurs IoT sans fil et dashboards Ubidots pour transformer les données des services publics en informations en temps réel, aidant ainsi les clients industriels à surveiller leur consommation d'eau, d'énergie et de gaz, à détecter les inefficacités et à agir avant que les coûts n'augmentent.
$d'économies annuelles pour les clients grâce à une consommation optimisée d'eau, d'électricité et de gaz.
Des millions de litres d'eau douce économisés et des tonnes d'émissions de CO₂ évitées, générant des résultats mesurables en matière de développement durable.
Amélioration du contrôle opérationnel grâce à une visibilité en temps réel sur la consommation des services publics et les performances des équipements.
Histoire à succès
Cas d'utilisation
Tom Ulanowski
Cofondateur
UbidotsUbidotsUbidotsUbidots utilise UbidotsUbidotsUbidotsUbidots pour surveiller les réseaux de services publics sur différents sites, aidant ainsi ses clients à réduire leurs coûts grâce à des données et des alertes en temps réel.
Résultats :
Steve Barker
Fondateur et PDG
Prospect Control utilise Ubidots pour fournir une surveillance à distance du niveau des réservoirs aux clients industriels, remplaçant ainsi les configurations PLC/SCADA complexes par une solution IoT évolutive et basée sur le Web.
Résultats:
Darryl Schembri
Directeur général
AIS Technology utilise Ubidots pour surveiller la consommation d'électricité, d'eau et de gaz dans les immeubles à locataires multiples, permettant une visibilité en temps réel, une facturation automatisée et une réponse plus rapide aux inefficacités.
Résultats:
Onofre Tamargo
PDG et cofondateur
S4IoT utilise Ubidots pour surveiller à distance les systèmes d'irrigation des jardins urbains, aidant ainsi ses clients à réduire les coûts d'entretien, à prévenir les pertes de plantes et à passer d'opérations manuelles à un modèle évolutif basé sur un abonnement.
Résultats:
Aide et assistance
Vous avez des questions sur Ubidots? Voici quelques-unes des questions les plus fréquentes pour vous aider à démarrer.
HTML Canvas est un widget Ubidotsconvivial pour les développeurs qui permet d'intégrer du code HTML, CSS et JavaScript personnalisé directement dans un dashboard. Il est conçu pour les cas où les widgets standards ne répondent pas à des exigences fonctionnelles ou esthétiques spécifiques : il permet de créer des graphiques, jauges, tableaux, animations ou toute autre visualisation nécessaire à votre projet, affichés en temps réel avec vos autres widgets.
HTML Canvas prend en charge les langages HTML, CSS et JavaScript standards, y compris React. Vous pouvez également importer directement dans les paramètres du widget des bibliothèques tierces hébergées sur un CDN, telles que des frameworks de création de graphiques et des kits d'outils d'interface utilisateur. Aucune syntaxe propriétaire n'est requise : tout ce qui fonctionne dans un navigateur fonctionne également dans HTML Canvas.
HTML Canvas propose des méthodes intégrées permettant à votre code d'accéder directement aux variables de l'appareil et à leurs valeurs depuis l'éditeur de widgets. Vous pouvez également activer l'option « Précharger les données Dashboard » pour que toutes les variables dashboard soient disponibles dès le chargement du widget, évitant ainsi les appels API séparés et toute logique de récupération de données externe.
Utilisez HTML Canvas lorsqu'un widget Ubidots standard ne répond pas à vos besoins précis : graphique personnalisé, affichage avec une marque et un style spécifiques, élément d'interface utilisateur interactif ou visualisation reposant sur une logique non disponible dans les widgets natifs. C'est la solution idéale lorsque la bibliothèque intégrée couvre les données mais pas leur présentation.
