Desenați grafice de date de la senzorii conectați la Internetul lucrurilor (IoT) cu SVG

În acest articol din seria despre reprezentând grafice de date în IoT Vă explic cum să trasați graficele folosind limbaj SVG. Ca și în alte ocazii, articolul servește și ca o scurtă introducere în limbaj.

format SVG

SVG corespunde acronimului pentru Scalable Vector Graphics (grafică vectorială scalabilă, în limba engleză). E o limbaj de marcare pe care se bazează XML și care permite, în principal, descrierea unui desen prin geometria care îl definește; spre deosebire de metoda matricei, folosită de exemplu pentru o fotografie, care ar folosi o grilă de pixeli colorați pentru a o codifica.

în interiorul unui desen SVG De asemenea, poate fi inclusă o imagine (o matrice de pixeli), fie făcând referire la un document extern, fie încorporată în desenul în sine. SVG.

Versiunea lingvistică actuală la momentul scrierii acestui articol este SVG 1.1 deși definiția versiunii este deja în curs de dezvoltare SVG 2. Pe cât posibil, voi încerca să fac ceea ce este explicat în introducere, chiar dacă se referă la SVG 1.1 servesc de asemenea pentru SVG 2.

Dacă desenul SVG Este inclus într-un document separat și nu în cod HTML (propunerea mea în această soluție de a reprezenta datele IoT le încorporează în cod HTML) trebuie să fie în frunte cu o referință XML și o definiție tip document (DTD).

În prima linie a codului anterior versiunea este notificată XML codificarea caracterelor folosită (1.0) (UTF-8) și indică dacă aveți nevoie de definiții externe (standalone="no") sau este un document de sine stătător (standalone="yes"). A doua linie exprimă definiție tip document (DTD), care nu va fi necesar în următoarea versiune a SVG.

Codul cu care este definit desenul este inclus între etichete <sgv> y </sgv> care indică, de asemenea, după cum am menționat deja când vorbim despre Cod HTML care acționează ca un container pentru graficele de date în IoT, măsurătorile, partea din total reprezentată, proporția și de asemenea tipul și versiunea.

Exemplul de mai sus definește un desen de 500 pixeli lățime pe 250 pixeli înălțime (port de vizualizare 500x250) care va fi decupat cu un dreptunghi de 460x80 (caseta de vizualizare 460x80) începând cu coordonatele 20,10 folosind tot spațiul disponibil în container (un element dintr-o pagină web, în cazul nostru) fără a respecta proporția inițială de utilizare preserveAspectRatio="none". În plus, acum puteți vedea primul conținut al documentului, comentariile care sunt incluse printre <!-- y --> ca în alte formate bazate pe XML.

Sistemul de coordonate ales de SVG Este orientat orizontal (axa X) și vertical (axa Y) și direcția pozitivă este cea a scrierii occidentale, adică valorile axei X cresc la dreapta și valorile pozitive ale axei Y cresc. în jos.

Definiți graficul cu SVG

Pentru a defini grafica informațiilor stocate de senzorii noștri conectați la IoT va trebui să specificăm tipul de obiect care este desenat, geometria acestuia (coordonate, dimensiuni...) și aspectul acestuia (grosime, culoare...) În exemplu al acestui articol un grafic cu linii care poate fi realizat prin unirea segmentelor de linie cu obiectul line, cel mai util pentru trasarea elementelor independente, sau cu o linie cu mai multe segmente, un obiect path, mai practic pentru serii de linii conectate.

Cu elementul path Scopul este de a realiza un desen ca cel din imaginea de mai jos, care este alcătuit dintr-o cale închisă umplută cu o culoare mai deschisă, depășită în partea de sus de o cale deschisă, fără umplere și desenată cu o linie groasă.

Pentru a descrie o linie se folosește o expresie de tipul:

În care X1,Y1 sunt coordonatele primului punct de pe linie și X2,Y2 sunt coordonatele celui de-al doilea. A fost folosit un atribut stroke-width pentru a defini grosimea. Există mai multe moduri de a defini aspectul obiectelor SVG, cu proprietățile sale individuale, ca și precedenta, sau cu proprietatea style care le reunește pe toate și care este metoda care va fi folosită în propunerea de articol.

Codul de mai sus se alătură proprietății style valorile de stroke (culoarea accidentului vascular cerebral), stroke-width (grosimea liniei) și stroke-opacity (opacitatea obiectului)

Descrierea unui obiect path are forma

Codul de mai sus folosește operațiunile SVG M, L y Z in interiorul proprietatii d, care înseamnă, respectiv, „moveto” (mutare la), „lineto” (linie la) și „closepath” (închidere cale). Ele pot fi exprimate cu litere mari sau mici pentru a indica o valoare absolută sau relativă, acolo unde este cazul (în cazul Z, de exemplu, este irelevant). Există multe alte operații cu care, de exemplu, putem desena curbe circulare, curbe eliptice, curbe Bézier... de care nu vom avea nevoie în acest exemplu.

Deși această propunere desenează grafice cu linii care pot încadra o zonă, poate fi util să desenați alte elemente simple pentru a marca puncte sau a evidenția zone. Dintre cele disponibile în SVG Pot fi interesante poligoane (cu care puteți desena și umplutura), dreptunghiuri (mai convenabile pentru cazul specific), elipse și cercuri (ca caz particular de elipse). Sintaxa acestor elemente poate fi văzută în următorul exemplu de cod.

Apariția codului anterior ar fi ca următoarea imagine (cu un truc pentru a putea reutiliza punctele din exemplul de mai sus)

Punctele poligonului (polygon) sunt indicate în proprietate points ca perechi de coordonate x,y separate prin spații între ele. Pentru a defini elipsele (ellipse) sunt utilizate proprietăți cx (coordonata x a centrului), cy (coordonata y a centrului), rx (lățimea) și ry (înalt). În loc de două valori ale razei (raza orizontală și verticală, rx y ry) cercul (circle) este definită de o rază cu proprietatea r iar coordonatele centrului cu cx y cy. Pentru a defini dreptunghiul (rectangle) sunt indicate coordonatele colțului din stânga sus (x e y) Lațimea (width) și cel înalt (height)

În cele din urmă, pentru a include text, se folosește obiectul text după cum urmează:

Poziția textului este indicată cu coordonatele x și y, fontul corespunde proprietății font-family, dimensiunea cu font-size iar culoarea cu proprietatea fill.

HTML vă permite să integrați desene SVG ca un alt element al paginii. Ca și alte obiecte, puteți folosi proprietatea ID pentru a le atribui un identificator unic cu care se poate face referire la ei JavaScript pentru a le manipula. Din punct de vedere al HTML, un obiect SVG ar avea următoarea formă:

Cu ceea ce am văzut până acum, ar fi posibil să se deseneze tipul de grafic de bază care se caută în această propunere dar, pentru a da flexibilitate aspectului containerului (pagina web), proporția graficului va fi afectată (de exemplu preserveAspectRatio="none") prin modificarea dimensiunii acestuia pentru a o adapta la aspectul din fereastra browserului elementelor HTML.

În linii mari, există două alternative la comportamentul la modificarea dimensiunii ferestrei browserului care afișează pagina web care conține diagrama: (1) mențineți dimensiunea diagramei SVG lăsând spațiu liber dacă există exces sau adăugați bare de defilare dacă lipsește sau (2) modificați dimensiunea graficului SVG într-o manieră ritmică pentru a modifica dimensiunea ferestrei browserului care afișează web-ul. Dacă alegeți prima formulă, puteți prezice mărimile și puteți desena cu măsurători absolute, deși corectate în funcție de dimensiunea aleasă și de valorile graficului. Dacă alegeți a doua cale, care este cea pe care o propun, mărimile sunt întotdeauna procente ale valorilor reprezentate. Avantajul celei de-a doua metode este adaptabilitatea acesteia la web, iar dezavantajul este desenarea elementelor care însoțesc graficul, cum ar fi punctele sau textele.

Pentru a corecta deformarea care ar putea apărea în grosimea liniilor, se folosește efectul. vector-effect="non-scaling-stroke" pe traseele care sunt necesare (cele care au o valoare de stroke în afară de none). Pentru obiecte text Nu există un efect comparabil, așa că este necesară deformarea acestora (împreună cu cele asociate acestora) în direcția opusă celei produse de modificarea dimensiunii containerului.

Transformările în SVG Acestea pot fi aplicate pe grupuri de obiecte astfel încât mai multe texte și alte obiecte dintr-o grafică să poată fi integrate într-un singur grup și, mai convenabil, să efectueze o transformare pentru toate.

Elementele care fac parte dintr-un grup sunt incluse printre etichete <g> y </g>, pentru a atribui o transformare se folosește proprietatea transform și o serie de operațiuni care, pentru cazul nostru, sunt relevante scale, la care este indicat un factor de mărire orizontal și vertical. Dacă valoarea de scale este mai mare decât unu lărgește axa corespunzătoare și dacă este mai mică de unu are loc o reducere a dimensiunii obiectelor de-a lungul acelei axe.

În exemplul anterior, primul și al doilea text sunt modificați prin înjumătățirea măsurării orizontale și dublarea măsurării verticale cu valorile 0.5 și 2.0 utilizate în scale(0.5,2.0)

Următorul articol din seria despre reprezentarea graficelor de date de la senzori conectați la IoT explică modul de generare sau modificare a graficelor în timp real folosind JavaScript care vă va permite să vedeți o animație a graficului atunci când reprezentați ultimele valori încărcate de pe server.

Următorul este un exemplu despre cum ar arăta graficele generate folosind această propunere.