Narišite podatkovne grafe iz senzorjev, povezanih z internetom stvari (IoT), s SVG

V tem članku v seriji o ki predstavlja podatkovne grafe v IoT Razložim, kako narisati grafe z uporabo jezik SVG. Kot ob drugih priložnostih je članek tudi kratek uvod v jezik.

format SVG

SVG ustreza akronimu za Scalable Vector Graphics (razširljiva vektorska grafika, v angleščini). Je označevalni jezik ki temelji na XML in to omogoča predvsem opis risbe z geometrijo, ki jo določa; v nasprotju z matrično metodo, ki se uporablja na primer za fotografijo, ki bi za kodiranje uporabljala mrežo barvnih slikovnih pik.

znotraj risbe SVG Vključi se lahko tudi slika (matrika slikovnih pik), ki se nanaša na zunanji dokument ali je vdelana v samo risbo. SVG.

Jezikovna različica, ki je veljavna v času pisanja tega članka, je SVG 1.1 čeprav se definicija različice že razvija SVG 2. V največji možni meri se bom trudil, da bo to, kar je razloženo v uvodu, tudi če se nanaša na SVG 1.1 služi tudi za SVG 2.

Če risba SVG Vključen je v ločen dokument in ne v kodo HTML (moj predlog v tej rešitvi za predstavitev podatkov IoT jih vdela v kodo HTML) mora biti na čelu s sklicem XML in definicija vrste dokumenta (DTD).

V prvi vrstici prejšnje kode je navedena različica XML uporabljeno (1.0) kodiranje znakov (UTF-8) in označuje, ali potrebujete zunanje definicije (standalone="no") ali je samostojen dokument (standalone="yes"). Druga vrstica izraža definicija vrste dokumenta (DTD), ki v naslednji različici ne bo več potreben SVG.

Med nalepkami je priložena koda, s katero je definirana risba <sgv> y </sgv> ki tudi nakazujejo, kot že omenjeno, ko govorimo o Koda HTML, ki deluje kot vsebnik za podatkovne grafe v IoT, mere, delež skupne vrednosti, delež ter tudi tip in različica.

Zgornji primer opredeljuje risbo 500 slikovnih pik v širino in 250 slikovnih pik v višino (500 x 250 vidno okno), ki bo obrezana s pravokotnikom 460 x 80 (460 x 80 vidno polje) z začetkom na koordinatah 20,10 z uporabo celotnega razpoložljivega prostora v vsebniku (element na spletni strani, v našem primeru) brez upoštevanja prvotnega razmerja uporabe preserveAspectRatio="none". Poleg tega lahko zdaj vidite prvo vsebino dokumenta, komentarje, ki so vključeni med <!-- y --> kot v drugih formatih, ki temeljijo na XML.

Koordinatni sistem, ki ga je izbral SVG Usmerjen je vodoravno (os X) in navpično (os Y), pozitivna smer pa je zahodnjaška pisava, to pomeni, da vrednosti osi X rastejo v desno, pozitivne vrednosti osi Y pa rastejo. navzdol.

Definirajte graf s SVG

Za definiranje grafike informacij, ki jih shranjujejo naši senzorji, povezani z internetom stvari, bomo morali določiti vrsto predmeta, ki je narisan, njegovo geometrijo (koordinate, dimenzije ...) in njegov videz (debelina, barva ...) v primer tega članka črtni graf, ki ga lahko naredite tako, da združite segmente črte s predmetom line, ki je najbolj uporaben za risanje neodvisnih elementov ali z večsegmentno črto, objektom path, bolj praktičen za serije povezanih linij.

Z elementom path Cilj je narediti risbo, kot je ta na spodnji sliki, ki jo sestavlja zaprta pot, zapolnjena s svetlejšo barvo, na vrhu pa odprta pot, brez polnila in narisana z debelo črto.

Za opis črte se uporablja izraz tipa:

Pri čemer so X1,Y1 koordinate prve točke na premici, X2,Y2 pa koordinate druge. Uporabljen je bil atribut stroke-width za določitev debeline. Obstaja več načinov za določitev videza predmetov SVG, s svojimi posameznimi lastnostmi, kot je prejšnji, ali z lastnostjo style ki jih vse združuje in katera metoda bo uporabljena v predlogu članka.

Zgornja koda se pridruži nepremičnini style vrednosti stroke (barva črte), stroke-width (debelina črte) in stroke-opacity (motnost predmeta)

Opis predmeta path ima obliko

Zgornja koda uporablja operacije SVG M, L y Z znotraj nepremičnine d, ki pomenijo »moveto« (premakni se na), »lineto« (linija do) in »closepath« (zapri pot). Lahko so izraženi z velikimi ali malimi črkami, da navedejo absolutno ali relativno vrednost, kjer je primerno (v primeru Z, na primer, ni pomembno). Obstaja veliko drugih operacij, s katerimi lahko na primer narišemo krožne krivulje, eliptične krivulje, Bézierove krivulje ... ki jih v tem primeru ne bomo potrebovali.

Čeprav ta predlog riše črtne grafe, ki lahko obdajajo območje, je lahko koristno risati druge preproste elemente za označevanje točk ali poudarjanje območij. Od tistih, ki so na voljo v SVG Zanimivi so lahko poligoni (s katerimi lahko tudi narišemo polnilo), pravokotniki (za konkreten primer bolj priročno), elipse in krogi (kot poseben primer elips). Sintakso teh elementov si lahko ogledate v naslednjem primeru kode.

Videz prejšnje kode bi bil podoben naslednji sliki (z nekaj triki, da bi lahko znova uporabili točke iz zgornjega primera)

Točke poligona (polygon) so navedeni v lastnini points kot pari koordinat x,y, ločeni s presledki med njimi. Če želite definirati elipse (ellipse) se uporabljajo lastnosti cx (x koordinata središča), cy (y koordinata središča), rx (širina) in ry (visoko). Namesto dveh vrednosti polmera (vodoravni in navpični polmer, rx y ry) krog (circle) definira polmer z lastnostjo r in koordinate centra s cx y cy. Če želite določiti pravokotnik (rectangle) navedene so koordinate zgornjega levega kota (x e y) Širina (width) in visok (height)

Na koncu se za vključitev besedila uporabi predmet text kot sledi:

Položaj besedila je označen s koordinatama x in y, pisava ustreza lastnosti font-family, velikost s font-size in barvo z lastnostjo fill.

HTML omogoča integracijo risb SVG kot drugi element strani. Tako kot druge predmete lahko tudi lastnino uporabljate ID da jim dodeli edinstven identifikator, s katerim se lahko nato sklicujejo JavaScript manipulirati z njimi. Z vidika HTML, predmet SVG bi imela naslednjo obliko:

Glede na to, kar smo videli do zdaj, bi bilo mogoče narisati vrsto osnovnega grafa, ki ga iščemo v tem predlogu, vendar bo zaradi prilagodljivosti videza vsebnika (spletne strani) delež grafa prizadet (na primer preserveAspectRatio="none"), tako da spremenite njegovo velikost, da jo prilagodite postavitvi v oknu brskalnika elementov HTML.

Na splošno obstajata dve možnosti za vedenje pri spreminjanju velikosti okna brskalnika, ki prikazuje spletno stran, ki vsebuje grafikon: (1) ohranite velikost grafikona SVG pustite prazen prostor, če je presežek, ali dodajte drsne trakove, če manjka, ali (2) spremenite velikost grafa SVG na ritmičen način spreminjati velikost okna brskalnika, ki prikazuje splet. Če izberete prvo formulo, lahko napoveste magnitude in narišete z absolutnimi meritvami, čeprav popravljene glede na izbrano velikost in vrednosti grafa. Če izberete drugi način, ki ga predlagam jaz, so velikosti vedno odstotki predstavljenih vrednosti. Prednost druge metode je njena prilagodljivost spletu, slabost pa risanje elementov, ki spremljajo graf, kot so točke ali besedila.

Za popravljanje deformacije, ki bi lahko nastala v debelini črt, se uporablja učinek. vector-effect="non-scaling-stroke" na poteh, ki so potrebne (tiste, ki imajo vrednost stroke razen none). Za predmete text Primerljivega učinka ni, zato jih je treba (skupaj z njimi povezanimi) deformirati v nasprotni smeri, kot jo povzroči sprememba velikosti posode.

Preobrazbe v SVG Uporabljajo se lahko za skupine objektov, tako da je več besedil in drugih predmetov v grafiki mogoče integrirati v eno skupino in, kar je bolj priročno, izvesti transformacijo za vse.

Elementi, ki so del skupine, so vključeni med oznake <g> y </g>, se za dodelitev transformacije uporabi lastnost transform in vrsto operacij, ki so za naš primer pomembne scale, ki ji je prikazan vodoravni in navpični faktor povečave. Če je vrednost scale večja od ena razširi ustrezno os in če je manjša od ena, pride do zmanjšanja velikosti predmetov vzdolž te osi.

V prejšnjem primeru sta prvo in drugo besedilo spremenjena tako, da se njune vodoravne mere prepolovijo in navpične meritve podvojijo za vrednosti 0.5 in 2.0, uporabljene v scale(0.5,2.0)

Naslednji članek v seriji o predstavitev podatkovnih grafov iz senzorjev, povezanih z IoT pojasnjuje, kako ustvariti ali spremeniti grafe v realnem času z uporabo JavaScript ki vam bo omogočil ogled animacije grafa, ko predstavlja zadnje vrednosti, naložene s strežnika.

Sledi primer, kako bi izgledali grafi, ustvarjeni s tem predlogom.