Statusdiagramme von Sensoren, die mit dem Internet der Dinge (IoT) verbunden sind

Einer der Vorteile der Anbindung eines Sensornetzwerks an das Internet der Dinge liegt in der Möglichkeit, die gewonnenen Daten analysieren zu können. Durch die grafische Darstellung dieser Informationen kann eine Person (im Gegensatz zu einem Programm) die Bedeutung der überwachten Größen intuitiver verstehen, indem sie sie beispielsweise miteinander vergleicht oder ihre Entwicklung über die Zeit verfolgt.

Mit diesem Artikel beginnt eine aus vier Teilen bestehende Serie, in der ein einfacher Vorschlag für die grafische Darstellung von Daten erläutert wird, die von mit dem IoT verbundenen Sensoren erfasst werden. Mit der gleichen Philosophie wie in anderen Artikeln ist die vorgeschlagene Methode vollkommen funktionsfähig, obwohl das Hauptziel didaktisch ist. Als technisches Profil der Öffentlichkeit, an die die Blog polaridad.esDa es in diesem Text um Elektronik und nicht um Webentwicklung geht, dient jeder der Abschnitte als Einführung in die verwendeten Sprachen oder Technologien: HTML, CSS, SVG y JavaScript.

Die Artikel der vorherigen Serie über wie man Daten speichert, die von Geräten erfasst werden, die mit dem Internet der Dinge (IoT) verbunden sind Abschließend erklärten sie, wie man auf die in den Datenbanken gespeicherten Informationen zugreifen kann. Um den Prozess zu vereinfachen, wurde in den Beispielen der Serie ein Webserver als Vermittler verwendet, der dafür verantwortlich war, die Daten über POST-Anfragen des HTTP-Protokolls zu empfangen, in einer Datenbank zu speichern und auf einer Webseite anzuzeigen.

Obwohl der Hauptnachteil dieses Systems in der Leistung liegt (die durch Alternativen wie Node.js und MongoDB gemildert werden könnte, was in zukünftigen Artikeln erläutert wird), bietet es im Gegenzug zwei große Vorteile: Die Implementierung ist sehr einfach (einschließlich der Verfügbarkeit). von öffentlichen Diensten) und kann die Daten in einem Browser anzeigen, d Dinge.

Dieser Artikel nutzt den Vorteil, die mit diesem System gespeicherten Informationen über den Status von mit dem IoT verbundenen Geräten einfach auf einer Webseite darstellen zu können, und erläutert, wie diese Informationen mithilfe des Formats grafisch dargestellt werden SVG von JavaScript um dynamisch eine Webseite zu generieren HTML.

Es gibt viele Buchhandlungen JavaScript mit dem sich die grafische Darstellung von Daten lösen lässt. Diese Artikel beabsichtigen nicht, einen weiteren Artikel zu entwickeln. Der Zweck dieses Textes besteht darin, den Prozess zu verstehen und eigene Implementierungen entwickeln zu können; sowohl ein didaktisches als auch ein produktives Ziel. Wenn Sie daran interessiert sind, ein Produkt zu verwenden, anstatt es selbst zu entwickeln, empfehle ich Ihnen, einen Blick auf einige der hervorragenden Bibliotheken zum Generieren von Grafiken zu werfen JavaScript mit kostenlosen Lizenzen wie Charts.js, Highcharts, Google Chart-Tools, Epoch, Raphaël, Grafik (beyogen auf Raphaël), dc.js, Chartist.js, D3.js (meine Empfehlung), C3.js (beyogen auf D3.js), NVD3 (wiederverwendbare Grafiken für D3.js) ...

HTML-Dokumentstruktur mit SVG-Grafiken

Im Vorschlag dieses Artikels zur grafischen Darstellung von Sensordaten besteht die Webseite, auf der sie angezeigt werden, aus:

• das als Container dienende Dokument wird eingeschrieben HTML,
• Das Erscheinungsbild der Seite wird mit Code definiert CSS,
• Das Zeichnen des Diagramms erfolgt mithilfe der Sprache SVG y
• Das Auslesen von Daten vom Server und das Anzeigen von Diagrammen ist einprogrammiert JavaScript

Alle Elemente, insbesondere der Code HTML der Seite, kann auf dem Server mit PHP generiert werden, wie im Artikel zum beschrieben PHP-Programmiersprache aus der Serie über Datenspeicherung von Geräten, die mit dem Internet der Dinge verbunden sind.

Der Code CSS y JavaScript kann im Code geladen (importiert) werden HTML anstatt direkt als Teil des Dokuments geschrieben zu werden HTML. Dies hat den Vorteil, dass Sie dieselben Dokumente auf mehreren Seiten wiederverwenden und komfortabler bearbeiten können; Aber vielleicht ist es die Unannehmlichkeit, dass das Laden etwas länger dauert, je nachdem, ob Sie den im Cache enthaltenen Code (der bei der vorherigen Verwendung geladen wurde) oder sogar einen verwenden können CDN. In der Produktionsphase ist es trivial, den gesamten Code von PHP zu integrieren und so ein einziges Dokument zu generieren HTML mit allen Informationen, wenn Sie diese Alternative wählen. Aus Gründen der Übersichtlichkeit wird in dieser Artikelserie davon ausgegangen, dass wir mit separaten Dokumenten arbeiten.

Für die Zwecke, die uns interessieren, um es als Grafikcontainer zu verwenden, und ganz grob den Inhalt der ersten Ebene der Struktur eines Dokuments HTML würde:

Die erste Zeile dient dazu, dem Webbrowser anzuzeigen, dass das Dokument, in dem er liest, geschrieben ist HTML, insbesondere in Version 5 (bekannt als HTML5). Frühere Versionen von HTML, beyogen auf SGML (Standard Generalized Markup Language), enthielt eine Dokumenttypdefinition (DTD), in dem die Art der Regeln deklariert wurde, die in der Sprache zur Beschreibung des Dokuments verwendet werden.

Die zweite und letzte Zeile enthalten den Code HTML unter den Richtlinien <html> y </html> die jeweils als Öffnungs- und Schließfunktion dienen. Die Richtlinien HTML Sie schließen den Namen und die Attribute zwischen den Zeichen „kleiner als“ und „größer als“ ein und bilden so eine Art „spitze Klammer“-Zeichen. Die Elemente HTML die Inhalte einschließen, verfügen über eine abschließende Direktive, die den Schrägstrich vor dem Namen enthält, wie in </html>.

Die Eigenschaften oder Attribute von Elementen werden durch Leerzeichen vom Namen und voneinander getrennt und als einfacher Text oder häufiger als Text (der Name der Eigenschaft) gefolgt von einem Gleichheitszeichen und einem in Anführungszeichen eingeschlossenen Wert ausgedrückt. Im Fall der Code-Öffnungsanweisung HTML Eigentum genutzt wurde lang mit dem Wert es, lang="es" um anzuzeigen, dass der Text des Dokuments HTML verwendet die spanische Sprache.

Nach der Eröffnungsanweisung des HTML-Codes wurde ein Kommentar eingefügt. Die Kommentare in HTML Sie können mehrere Zeilen belegen und den Code als Eröffnungszeichen verwenden <!-- und als Abschluss -->

Der Code HTML Es besteht aus zwei Blöcken: dem Header <head> und der Körper <body>. Das erste Ziel besteht darin, über das Dokument selbst zu informieren, einschließlich Informationen darüber (Metainformationen), und das zweite Ziel besteht darin, den Inhalt des Dokuments zu unterstützen.

In der Richtlinie <body> eine Veranstaltung wurde eingefügt onload mit dem eine Funktion automatisch ausgeführt werden kann JavaScript sobald der Inhalt geladen wurde. Mit dieser Ressource können Sie die Ausführung des Codes starten, der die Grafikobjekte definiert und sie aktualisiert, wenn Informationen vom Server über den Zustand der Sensoren geladen werden, die diese Grafiken darstellen.

Von allen Metainformationen, die im Header des Dokuments enthalten sein können HTML, wir sind besonders daran interessiert, die in den folgenden Richtlinien beschriebene zu kennen:

• <title> die dazu dient, dem Dokument einen Titel zu geben. Es erscheint normalerweise im Browserfenster oder auf der entsprechenden Registerkarte und hilft uns, die darin enthaltenen Grafiken zu identifizieren.
• <charset> deklariert den Zeichensatz, der zum Kodieren des Dokuments verwendet wird. Dies ist besonders wichtig für „besondere“ Zeichen wie Eñes oder Akzente.
• <link> ermöglicht die Herstellung einer Beziehung zwischen dem Dokument HTML aktuelle und andere externe. Es wird uns helfen, das Stylesheet im Format zu laden CSS mit dem Erscheinen des Dokuments.
• <script> enthält ein Skript mit ausführbarem Code. Mit dieser Direktive laden wir die Funktionen JavaScript mit dem Grafiken erstellt oder geändert werden können SVG.

Wie am Beispiel von zu sehen ist HTML oben der Name (und ggf. Pfad) des Dokuments mit dem Stil CSS wird mit dem Attribut angegeben href, während im Fall des Codes JavaScript es wird benutzt src. Beide teilen sich das Eigentum type mit dem Wert text/css y text/javascript jeweils.

In Bezug auf den Inhalt des Dokuments der Teil, der dem Element entspricht <body>, HTML5 Damit können Sie spezifische Strukturen für die häufigsten Komponenten einer Webseite erstellen, beispielsweise eine Fußzeile, einen Seitenbereich oder eine Navigationsleiste. Was uns jedoch interessiert, ist die Verwendung des Dokuments als Grafikcontainer. SVG sind die Elemente <div> Diese fungieren als unabhängige Blöcke, die es ermöglichen, durch Verschachtelung einiger Blöcke eine hierarchische Struktur zu definieren <div> innerhalb anderer.

Im vorherigen Beispiel wird ein Element verwendet <div> das zwei weitere enthält. In diesem Beispiel werden zwei sehr wichtige Eigenschaften für die Verwendung des Codes vorgestellt. HTML: id die verwendet wird, um einem Element eine eindeutige Kennung zuzuweisen HTML (A <div>, in diesem Fall) und class mit der ihm eine Kategorie zugeordnet wird, anhand derer wir das Erscheinungsbild festlegen. Die Kategorie, die Klasse, muss nicht eindeutig sein, tatsächlich liegt ein Großteil ihrer Wirksamkeit darin, dass mehrere Elemente denselben Aspekt haben.

Das Element (oder Tag) <p> dient dazu, einen Absatz zu definieren, der normalerweise Text enthält (obwohl in HTML es gibt diesbezüglich keine Einschränkung). Um Gruppierungen innerhalb eines Absatzes (oder a <div>, es gibt auch keine Einschränkungen) wird das Tag verwendet <span>. Mit diesem Element ist es beispielsweise möglich, Text innerhalb eines Absatzes einzubinden, um ihm ein anderes Aussehen zu verleihen, beispielsweise unterstrichen oder fett.

Die Definition der grafischen Eigenschaften und allgemein des Verhaltens, das einem Element zugeordnet ist HTML Die Zuordnung einer Klasse erfolgt im Code CSS; im Fall des vorherigen Beispiels im Dokument aspecto.css.

Zur Optimierung der Merkmalszuordnung CSS es ist möglich, dass das gleiche Element HTML gehört mehreren Klassen an und weist somit das durch diese definierte Aussehen bzw. Verhalten auf. Um diese Zuweisung vorzunehmen, schreiben Sie rechts neben der Eigenschaft die Namen der verschiedenen Klassen und trennen Sie sie durch Kommas. class

Im vorherigen Beispiel das Element <div> was identifiziert wurde als primer_hijo Es wurden drei Klassen vergeben: aspecto_de_hijo, aspecto_raro y tipografia_grande, die zusammen das Aussehen und Verhalten des Elements definieren sollen. Wie im folgenden Artikel zum Thema erläutert Definieren des Webauftritts von IoT-Sensorgrafiken mit CSSWenn bei der Verwendung mehrerer Klassen eine der Eigenschaften, die den Aspekt definieren, in beiden Klassen definiert ist, hat die zuletzt referenzierte Klasse Vorrang.

Wie man gesehen hat, die Elemente <div> Sie können andere Elemente enthalten, darunter auch andere <div>. Ein einfacherer Fall wäre <div> das Text enthielt. Der Look, der Stil definiert CSS würde sich auch auf den im Element enthaltenen Text auswirken.

Zur Optimierung der Merkmalszuordnung CSS es ist möglich, dass das gleiche Element HTML gehört mehreren Klassen an und weist somit das durch diese definierte Aussehen bzw. Verhalten auf. Um diese Zuweisung vorzunehmen, schreiben Sie rechts neben der Eigenschaft die Namen der verschiedenen Klassen und trennen Sie sie durch Kommas. class

Im vorherigen Beispiel sind die drei mit dem verknüpften Klassen <div> primer_hijo Sie würden das Aussehen des Elements und des Textes, der es enthält, definieren, indem sie beispielsweise die Schriftart, in der es geschrieben wird, groß machen (wenn der durch seinen Namen in der letzten Klasse angegebene Zweck wahr ist).

Seit Version 5 (HTML5) ist es möglich, den Grafikcode in das Format einzubinden SVG innerhalb des Codes selbst HTML als ein weiteres Element. Aus Code-Sicht HTML, der Inhalt SVG ist ein Element <svg> welches die verschiedenen grafischen Elemente (Linien, Kreise, Rechtecke...) enthält

Obwohl gesagt wurde, dass die grafischen Eigenschaften der Elemente HTML werden in einem Stil definiert CSS und über eine Klasse mit diesem verknüpft sind, ist es auch möglich, einige davon auf zwei Arten direkt den Elementen zuzuordnen. Einerseits können Sie die Immobilie nutzen style und weisen Sie die unterschiedlichen grafischen Eigenschaften des Objekts als dessen Wert zu. Logischerweise ist es vorzuziehen, die oben genannte Technik der Zuordnung des Aspekts zu einer Klasse zu verwenden, aber mit dieser Möglichkeit können Sie eine kleine Korrektur an einem Element hinzufügen (eine ganz besondere Ausnahme), ohne eine neue Klasse erstellen zu müssen.

Andererseits einige Elemente HTML Sie ermöglichen die Verwendung spezifischer Eigenschaften, die ihr Aussehen definieren. Selbst wenn diese Eigenschaften vorhanden sind, ist es im Allgemeinen vorzuziehen, Klassen zu verwenden. Leider bieten jedoch nicht alle Elemente diese Alternative an. Einige erwarten, dass ein bestimmter Wert direkt mit diesen spezifischen Eigenschaften angegeben wird, anstatt auf die zugehörige Klasse zu verweisen. Eines der Elemente, die dieses Verhalten aufweisen, ist genau der Code SVG, dem wir in den Eigenschaften den prozentualen Wert der Breite und Höhe zuweisen müssen width y heightbzw. anstelle der Klasse.

Wie im Detail zu sehen sein wird Artikel, der über SVG-Code sprichtUm die vorgeschlagene einfache Methode nutzen zu können, empfiehlt es sich, die Abmessungen des Diagramms als Prozentsätze zu betrachten. Im Falle der Gesamtgröße des Objekts wird durch die Angabe von 100 % im Breiten- und Höhenwert der Container die endgültigen Abmessungen festlegen (die <div> mit id="dibujo", im vorherigen Beispiel)

Im Fall der verschiedenen Komponenten des Diagramms SVG (Linien, Kreise, Rechtecke...) sind in einer Fläche von 100×100 (beliebige Einheit) enthalten und dehnen sich in einer rechteckigen Form aus, ohne die Proportionen beizubehalten. Die Eigenschaften viewBox y preserveAspectRatio des Elements SVG Sie sind für die Etablierung dieser Werte verantwortlich. im ersten Fall mit einer rechteckigen Ansicht, die vom Koordinatenpunkt (0,0) zum Koordinatenpunkt (100,100) geht und ausgedrückt wird als "0 0 100 100" und im zweiten mit dem Wert none.

Mit all dem können Sie nun einen vollständigen Code definieren, der als Grafikcontainer dient. SVG generiert oder geändert aus JavaScript. Das folgende Beispiel enthält vier Grafikblöcke, die das Format verwenden HTML des Repräsentationsvorschlags, den wir verwenden werden.

Unten können Sie sehen, wie der vorherige Code aussehen würde, formatiert mit dem Stil CSS korrespondierend, erzeugend mit JavaScript die Grafik SVG mit Serverablesungen von Daten, die von mit dem IoT verbundenen Sensoren gespeichert werden. Abgesehen davon, dass die Daten nicht vom Server geladen werden, sondern zufällig im Client (Ihrem Browser) generiert werden, wird der Rest des Codes in dem in dieser Artikelserie definierten Vorschlag verwendet.

Der nächste Artikel dieser Reihe erklärt es wie man CSS-Stile definiert um dem HTML-Code, der als Container für die Grafiken fungiert, ein Aussehen zu verleihen SVG mit dem der Zustand der mit dem Internet der Dinge (IoT) verbundenen Sensoren dargestellt werden kann.