Produkte
Nicht jede Visualisierung passt in eine Vorlage. HTML Canvas ist das entwicklerfreundliche Widget von Ubidots, mit dem Sie Ihr eigenes HTML, CSS und JavaScript schreiben können, um genau die Diagramme, Darstellungen und Interaktionen zu erstellen, die Ihr Projekt benötigt – ohne Kompromisse.
Vorteile
Standard-Widgets decken die meisten Anwendungsfälle ab – aber nicht alle. HTML Canvas erweitert die Möglichkeiten und ermöglicht es Ihnen, Visualisierungen zu entwerfen und zu programmieren, die exakt Ihren funktionalen und ästhetischen Anforderungen entsprechen.
Schreiben Sie Ihr eigenes HTML, CSS und JavaScript direkt in Ubidots. Sie müssen kein separates Frontend entwickeln oder Plattformbeschränkungen umgehen – Ihre benutzerdefinierte Logik befindet sich direkt neben Ihren IoT Daten.
HTML Canvas unterstützt externe Bibliotheken, sodass Sie Ihre bevorzugten Diagrammwerkzeuge, UI-Frameworks oder benutzerdefinierten Skripte einbinden und nahtlos in Ihr dashboardintegrieren können.
Dank integrierter Einstellungen wie Lazy Loading und dem Vorladen dashboard Daten werden Ihre benutzerdefinierten Widgets für optimale Leistung optimiert, ohne dass zusätzlicher Entwicklungsaufwand Ihrerseits erforderlich ist.
IoT in Aktion
So funktioniert es
HTML Canvas bietet Entwicklern eine integrierte Codierungsumgebung, um benutzerdefinierte Widgets direkt innerhalb der Plattform zu erstellen, zu testen und anzuzeigen – externe Tools oder separate Bereitstellungen sind nicht erforderlich.
Hauptmerkmale
Erstellen Sie benutzerdefinierte Widgets mit HTML, CSS, JS oder React. Erweitern Sie Ubidots dashboards über die nativen Optionen hinaus mithilfe KI-gestützter Codierung.
Ein integrierter Editor mit eigenen Registerkarten für jede Sprache – so bleibt Ihr Widget-Code übersichtlich, ohne dass Sie die Plattform verlassen müssen.
Importieren Sie beliebige, über ein CDN gehostete JavaScript-Bibliotheken – jQuery, Highcharts, Plotly, Mapbox, React und viele mehr.
Greifen Sie über integrierte Methoden direkt aus dem Widget-Code auf Ihre Ubidots -Gerätevariablen und Ihr Token zu – ohne zusätzliche API-Einrichtung.
Widgets werden erst gerendert, wenn sie ins Sichtfeld scrollen, wodurch dashboards auch bei komplexen benutzerdefinierten Inhalten schnell bleiben.
Alle dashboard Daten sollten beim Laden verfügbar sein, damit die Widgets sofort gerendert werden – asynchrone Rückrufe sind nicht erforderlich.
Passen Sie das Erscheinungsbild Ihres Widgets über den Code-Editor hinaus mit zusätzlichem CSS mithilfe der Option „Benutzerdefinierter Stil“ an.
Schreiben Sie Standard-HTML, CSS und JavaScript – denselben Code, den Sie zum Erstellen einer Website verwenden würden, ohne dass Sie etwas Neues lernen müssen.
Quantify Environmental nutzt drahtlose IoT Sensoren und Ubidots dashboards , um Versorgungsdaten in Echtzeit-Einblicke umzuwandeln und Industriekunden dabei zu helfen, den Wasser-, Energie- und Gasverbrauch zu überwachen, Ineffizienzen zu erkennen und zu handeln, bevor die Kosten steigen.
$Jährliche Einsparungen von über 250.000 durch optimierten Wasser-, Strom- und Gasverbrauch.
Durch die Einsparung von Millionen Litern Frischwasser und die Vermeidung von Tonnen von CO₂-Emissionen wurden messbare Nachhaltigkeitsergebnisse erzielt.
Verbesserte operative Überwachung durch Echtzeit-Einblicke in den Energieverbrauch und die Geräteperformance.
Erfolgsgeschichte
Anwendungsfälle
Tom Ulanowski
Mitbegründer
UbidotsUbidotsUbidotsUbidots nutzt UbidotsUbidotsUbidotsUbidots zur Überwachung des Energieverbrauchs an verschiedenen Standorten und unterstützt Kunden so bei der Kostensenkung durch Echtzeitdaten und Warnmeldungen.
Ergebnisse:
Steve Barker
Gründer & CEO
Prospect Control nutzt Ubidots , um Industriekunden die Fernüberwachung von Tankfüllständen zu ermöglichen und ersetzt dabei komplexe SPS/SCADA -Systeme durch eine skalierbare, webbasierte IoT Lösung.
Ergebnisse:
Darryl Schembri
Hauptgeschäftsführer
AIS Technology nutzt Ubidots zur Überwachung des Strom-, Wasser- und Gasverbrauchs in Gebäuden mit mehreren Mietern. Dies ermöglicht Echtzeit-Transparenz, automatisierte Abrechnung und schnellere Reaktion auf Ineffizienzen.
Ergebnisse:
Onofre Tamargo
CEO & Mitgründer
S4IoT nutzt Ubidots zur Fernüberwachung von Bewässerungssystemen in Stadtgärten und hilft Kunden so, Wartungskosten zu senken, Pflanzenverluste zu vermeiden und von manuellen Abläufen auf ein skalierbares, abonnementbasiertes Modell umzusteigen.
Ergebnisse:
Hilfe & Unterstützung
Haben Sie Fragen zu Ubidots? Hier finden Sie einige der häufigsten Fragen, die Ihnen den Einstieg erleichtern.
HTML Canvas ist das entwicklerfreundliche Widget von Ubidots, mit dem Sie benutzerdefiniertes HTML, CSS und JavaScript direkt in einem dashboardschreiben können. Es ist für Fälle konzipiert, in denen Standard-Widgets bestimmte funktionale oder ästhetische Anforderungen nicht erfüllen – und ermöglicht Ihnen, benutzerdefinierte Diagramme, Messinstrumente, Tabellen, Animationen oder beliebige Visualisierungen zu erstellen, die Ihr Projekt benötigt und die live neben Ihren anderen Widgets gerendert werden.
HTML Canvas unterstützt Standard-HTML, CSS und JavaScript – einschließlich React. Sie können außerdem CDN-gehostete Drittanbieterbibliotheken wie Diagramm-Frameworks und UI-Toolkits direkt in den Widget-Einstellungen importieren. Es ist keine proprietäre Syntax zu erlernen; was im Browser funktioniert, funktioniert auch in HTML Canvas.
HTML Canvas bietet integrierte Methoden, mit denen Ihr Code direkt aus dem Widget-Editor auf Gerätevariablen und deren Werte zugreifen kann. Sie können außerdem die Option „ Dashboard -Daten vorladen“ aktivieren, um alle dashboard Variablen sofort nach dem Laden des Widgets verfügbar zu machen. Dadurch entfallen separate API-Aufrufe oder externe Datenabruflogik.
Verwenden Sie HTML Canvas, wenn ein Standard-Widget Ubidots Ihre Anforderungen nicht vollständig erfüllt – sei es ein benutzerdefinierter Diagrammtyp, eine markenspezifische Darstellung mit speziellem Design, ein interaktives UI-Element oder eine Visualisierung, die auf Logik basiert, die in nativen Widgets nicht verfügbar ist. Es ist die richtige Wahl, wenn die integrierte Bibliothek zwar die Daten, aber nicht die Darstellung abdeckt.
