Zeichnen Sie mit SVG Datendiagramme von Sensoren, die mit dem Internet der Dinge (IoT) verbunden sind

In diesem Artikel der Serie über Darstellung von Datendiagrammen im IoT Ich erkläre, wie man die Diagramme mit dem zeichnet SVG-Sprache. Wie bei anderen Gelegenheiten dient der Artikel auch als kurze Einführung in die Sprache.

SVG-Format

SVG entspricht dem Akronym für Scalable Vector Graphics (skalierbare Vektorgrafiken, auf Englisch). Es ist ein Auszeichnungssprache das basiert auf XML und das erlaubt vor allem, eine Zeichnung durch die Geometrie zu beschreiben, die sie definiert; im Gegensatz zur Matrixmethode, die beispielsweise für ein Foto verwendet wird und bei der ein Raster aus farbigen Pixeln zur Kodierung verwendet wird.

innerhalb einer Zeichnung SVG Es kann auch ein Bild (eine Pixelmatrix) eingefügt werden, das entweder auf ein externes Dokument verweist oder in die Zeichnung selbst eingebettet ist. SVG.

Die zum Zeitpunkt der Erstellung dieses Artikels aktuelle Sprachversion ist die SVG1.1 obwohl die Definition der Version bereits entwickelt wird SVG2. Ich werde versuchen, so weit wie möglich das zu übernehmen, was in der Einleitung erklärt wurde, auch wenn es sich darauf bezieht SVG1.1 auch dazu dienen SVG2.

Wenn die Zeichnung SVG Es ist in einem separaten Dokument und nicht im Code enthalten HTML (Mein Vorschlag in dieser Lösung zur Darstellung von IoT-Daten bettet sie in den Code ein HTML) muss durch einen Verweis vorangestellt werden XML und Dokumenttypdefinition (DTD).

In der ersten Zeile des vorherigen Codes wird die Version mitgeteilt XML verwendete (1.0) Zeichenkodierung (UTF-8) und gibt an, ob Sie externe Definitionen benötigen (standalone="no") oder handelt es sich um ein eigenständiges Dokument (standalone="yes"). Die zweite Zeile drückt das aus Dokumenttypdefinition (DTD), was in der nächsten Version von nicht mehr benötigt wird SVG.

Der Code, mit dem die Zeichnung definiert wird, ist zwischen den Beschriftungen eingeschlossen <sgv> y </sgv> was auch darauf hindeutet, wie bereits erwähnt, als wir darüber redeten HTML-Code, der als Container für Datendiagramme im IoT fungiert, die Maße, der dargestellte Anteil am Gesamtbild, die Proportionen sowie die Art und Ausführung.

Das obige Beispiel definiert eine Zeichnung mit einer Breite von 500 Pixeln und einer Höhe von 250 Pixeln (Ansichtsfenster 500 x 250), die mit einem Rechteck von 460 x 80 (Ansichtsfenster 460 x 80) zugeschnitten wird, beginnend bei den Koordinaten 20,10, wobei der gesamte im Container verfügbare Platz (ein Element auf einer Webseite, in) genutzt wird in unserem Fall) ohne Rücksicht auf das ursprünglich zu verwendende Verhältnis preserveAspectRatio="none". Außerdem sehen Sie nun den ersten Inhalt des Dokuments, die darin enthaltenen Kommentare <!-- y --> wie in anderen Formaten basierend auf XML.

Das von gewählte Koordinatensystem SVG Sie ist horizontal (X-Achse) und vertikal (Y-Achse) ausgerichtet und die positive Richtung entspricht der der westlichen Schrift, d. h. die Werte der X-Achse wachsen nach rechts und die positiven Werte der Y-Achse wachsen nach unten.

Definieren Sie das Diagramm mit SVG

Um die Grafiken der von unseren mit dem IoT verbundenen Sensoren gespeicherten Informationen zu definieren, müssen wir den Typ des gezeichneten Objekts, seine Geometrie (Koordinaten, Abmessungen ...) und sein Aussehen (Dicke, Farbe ...) angeben Beispiel dieses Artikels ist ein Liniendiagramm, das durch Verbinden von Liniensegmenten mit dem Objekt erstellt werden kann line, am nützlichsten zum Plotten unabhängiger Elemente oder eines Objekts mit einer Linie aus mehreren Segmenten path, praktischer für eine Reihe verbundener Leitungen.

Mit dem Element path Ziel ist es, eine Zeichnung wie die im Bild unten zu erstellen, die aus einem geschlossenen Pfad besteht, der mit einer helleren Farbe gefüllt ist und oben von einem offenen Pfad ohne Füllung und einer dicken Linie gekrönt wird.

Um eine Zeile zu beschreiben, wird ein Ausdruck des Typs verwendet:

Dabei sind X1,Y1 die Koordinaten des ersten Punktes auf der Linie und X2,Y2 die Koordinaten des zweiten. Ein Attribut wurde verwendet stroke-width um die Dicke zu definieren. Es gibt verschiedene Möglichkeiten, das Erscheinungsbild von Objekten zu definieren SVG, mit seinen einzelnen Eigenschaften, wie das vorherige, oder mit der Eigenschaft style die sie alle zusammenbringt und welche Methode im Artikelvorschlag verwendet wird.

Der obige Code verknüpft die Eigenschaft style die Werte von stroke (die Farbe des Strichs), stroke-width (die Dicke der Linie) und stroke-opacity (die Deckkraft des Objekts)

Die Beschreibung eines Objekts path hat die Form

Der obige Code verwendet die Operationen SVG M, L y Z innerhalb des Anwesens d, was jeweils „moveto“ (bewegen zu), „lineto“ (Linie zu) und „closepath“ (naher Pfad) bedeutet. Sie können in Groß- oder Kleinbuchstaben ausgedrückt werden, um gegebenenfalls einen absoluten oder relativen Wert anzugeben (im Fall von). Zist zum Beispiel irrelevant). Es gibt viele andere Operationen, mit denen wir beispielsweise Kreiskurven, elliptische Kurven, Bézier-Kurven zeichnen können... die wir in diesem Beispiel nicht benötigen werden.

Obwohl dieser Vorschlag Liniendiagramme zeichnet, die einen Bereich einschließen können, kann es nützlich sein, andere einfache Elemente zu zeichnen, um Punkte zu markieren oder Bereiche hervorzuheben. Von denen, die in verfügbar sind SVG Interessant können Polygone (mit denen man auch die Füllung zeichnen kann), Rechtecke (praktischer für den konkreten Fall), Ellipsen und Kreise (als Sonderfall von Ellipsen) sein. Die Syntax dieser Elemente ist im folgenden Beispielcode zu sehen.

Das Aussehen des vorherigen Codes würde wie im folgenden Bild aussehen (mit einem Trick, um die Punkte aus dem obigen Beispiel wiederverwenden zu können)

Die Punkte des Polygons (polygon) sind in der Unterkunft angegeben points als Paare von XY-Koordinaten, die durch Leerzeichen dazwischen getrennt sind. Um die Ellipsen zu definieren (ellipse) Eigenschaften verwendet werden cx (x-Koordinate des Mittelpunkts), cy (y-Koordinate des Mittelpunkts), rx (Breite) und ry (hoch). Anstelle von zwei Radiuswerten (horizontaler und vertikaler Radius, rx y ry) Der Kreis (circle) wird durch einen Radius mit der Eigenschaft definiert r und die Koordinaten des Mittelpunkts mit cx y cy. Um das Rechteck zu definieren (rectangle) Die Koordinaten der oberen linken Ecke werden angezeigt (x e y) Die Breite (width) und der große (height)

Um schließlich Text einzuschließen, wird das Objekt verwendet text wie folgt:

Die Position des Textes wird mit den x- und y-Koordinaten angegeben, die Schriftart entspricht der Eigenschaft font-family, die Größe mit font-size und die Farbe mit der Eigenschaft fill.

HTML ermöglicht die Integration von Zeichnungen SVG als weiteres Element der Seite. Wie andere Objekte können Sie die Eigenschaft verwenden ID um ihnen eine eindeutige Kennung zuzuweisen, mit der sie dann angesprochen werden können JavaScript sie zu manipulieren. Aus der Sicht von HTML, ein Objekt SVG hätte folgende Form:

Mit dem, was wir bisher gesehen haben, wäre es möglich, die Art von Basisdiagramm zu zeichnen, die in diesem Vorschlag angestrebt wird, aber um dem Erscheinungsbild des Containers (der Webseite) Flexibilität zu verleihen, wird die Proportion des Diagramms beeinflusst (Zum Beispiel preserveAspectRatio="none"), indem Sie seine Größe ändern, um es an das Layout im Browserfenster der Elemente anzupassen HTML.

Im Großen und Ganzen gibt es zwei Alternativen zum Verhalten beim Ändern der Größe des Browserfensters, in dem die Webseite angezeigt wird, die das Diagramm enthält: (1) Behalten Sie die Größe des Diagramms bei SVG Lassen Sie Leerzeichen, wenn es zu viel gibt, oder fügen Sie Bildlaufleisten hinzu, wenn es fehlt, oder (2) ändern Sie die Größe des Diagramms SVG rhythmisch, um die Größe des Browserfensters zu ändern, in dem das Web angezeigt wird. Wenn Sie die erste Formel wählen, können Sie die Größen vorhersagen und mit absoluten Maßen zeichnen, allerdings korrigiert auf der Grundlage der gewählten Größe und der Werte des Diagramms. Wenn Sie den zweiten Weg wählen, den ich vorschlage, sind die Größen immer Prozentsätze der dargestellten Werte. Der Vorteil der zweiten Methode ist ihre Anpassungsfähigkeit an das Web und der Nachteil ist die Zeichnung der Elemente, die das Diagramm begleiten, wie z. B. Punkte oder Texte.

Um die Verformung zu korrigieren, die in der Dicke der Linien auftreten könnte, wird der Effekt genutzt. vector-effect="non-scaling-stroke" auf den Routen, die notwendig sind (die einen Wert von haben). stroke das ist nicht none). Für die Objekte text Da es keinen vergleichbaren Effekt gibt, ist es notwendig, sie (und die damit verbundenen) in die entgegengesetzte Richtung zu verformen, wie sie durch die Änderung der Behältergröße entsteht.

Die Verwandlungen in SVG Sie können auf Gruppen von Objekten angewendet werden, sodass mehrere Texte und andere Objekte in einer Grafik in eine einzige Gruppe integriert werden können und bequemer eine Transformation für alle durchgeführt werden kann.

Elemente, die Teil einer Gruppe sind, werden in die Tags einbezogen <g> y </g>, um eine Transformation zuzuweisen, wird die Eigenschaft verwendet transform und eine Reihe von Operationen, die für unseren Fall relevant sind scale, zu dem ein horizontaler und vertikaler Vergrößerungsfaktor angegeben ist. Wenn der Wert von scale ist größer als eins, verbreitert die entsprechende Achse, und wenn er kleiner als eins ist, kommt es zu einer Verkleinerung der Objekte entlang dieser Achse.

Im vorherigen Beispiel werden der erste und der zweite Text geändert, indem ihre horizontale Messung halbiert und die vertikale Messung um die in verwendeten Werte 0.5 und 2.0 verdoppelt wird scale(0.5,2.0)

Der nächste Artikel der Serie zum Thema Darstellung von Datendiagrammen von Sensoren, die mit dem IoT verbunden sind erklärt, wie man mithilfe von Diagramme in Echtzeit erstellt oder ändert JavaScript Dadurch können Sie eine Animation des Diagramms sehen, wenn die letzten vom Server geladenen Werte dargestellt werden.

Im Folgenden finden Sie ein Beispiel dafür, wie die mit diesem Vorschlag erstellten Diagramme aussehen würden.