Piirrä datakaavioita antureista, jotka on yhdistetty esineiden Internetiin (IoT) SVG:n avulla

Tässä artikkelissa sarjassa edustavat datakaavioita IoT:ssä Selitän kuinka kaavioita piirretään käyttämällä SVG-kieli. Kuten muissakin yhteyksissä, artikkeli toimii myös lyhyenä johdatuksena kieleen.

SVG-muoto

SVG vastaa lyhennettä sanoista Scalable Vector Graphics (skaalautuva vektorigrafiikka, englanniksi). Se on a merkintäkieli joka perustuu XML ja joka mahdollistaa pääasiassa piirustuksen kuvaamisen sen määrittelevän geometrian avulla; toisin kuin matriisimenetelmä, jota käytetään esimerkiksi valokuvalle, joka käyttäisi värillisten pikselien ruudukkoa sen koodaamiseen.

piirustuksen sisällä SVG Myös kuva (pikseleiden matriisi) voidaan sisällyttää joko viitaten ulkoiseen asiakirjaan tai upotettuna itse piirustukseen. SVG.

Tämän artikkelin kirjoitushetkellä voimassa oleva kieliversio on SVG 1.1 vaikka version määritelmää kehitetään jo SVG 2. Mahdollisuuksien mukaan yritän tehdä johdannossa selitetyn, vaikka se viittaa siihen SVG 1.1 palvella myös SVG 2.

Jos piirustus SVG Se sisältyy erilliseen asiakirjaan, ei koodiin HTML (Tämän ratkaisun ehdotukseni edustaa IoT-dataa upottaa sen koodiin HTML) on otsikoitu viitteellä XML ja asiakirjatyypin määritelmä (DTD).

Edellisen koodin ensimmäisellä rivillä ilmoitetaan versio XML käytetty (1.0) merkkikoodausta (UTF-8) ja osoittaa, tarvitsetko ulkoisia määritelmiä (standalone="no") vai onko se erillinen asiakirja (standalone="yes"). Toinen rivi ilmaisee asiakirjatyypin määritelmä (DTD), jota ei tarvita seuraavassa versiossa SVG.

Koodi, jolla piirustus määritellään, on tarrojen välissä <sgv> y </sgv> jotka myös osoittavat, kuten jo puhuttaessa mainittiin HTML-koodi, joka toimii tietokaavioiden säilönä IoT:ssä, mitat, edustettu osuus kokonaismäärästä, osuus sekä myös tyyppi ja versio.

Yllä oleva esimerkki määrittelee piirustuksen, jonka leveys on 500 pikseliä ja korkeus 250 pikseliä (500 x 250 kuvaruutu), joka rajataan 460 x 80 neliöllä (460 x 80 kuvaruutu) alkaen koordinaateista 20,10 käyttämällä kaikkea säilön (verkkosivun elementti) käytettävissä olevaa tilaa. meidän tapauksessamme) noudattamatta alkuperäistä käyttösuhdetta preserveAspectRatio="none". Lisäksi näet nyt asiakirjan ensimmäisen sisällön, siihen sisältyvät kommentit <!-- y --> kuten muissakin muodoissa XML.

Valitsema koordinaattijärjestelmä SVG Se on suunnattu vaakasuoraan (X-akseli) ja pystysuoraan (Y-akseli) ja positiivinen suunta on länsimaisen kirjoituksen suunta, eli X-akselin arvot kasvavat oikealle ja Y-akselin positiiviset arvot kasvavat. alaspäin.

Määritä kaavio SVG:llä

IoT:hen yhdistettyjen antureidemme tallentamien tietojen grafiikan määrittelemiseksi meidän on määritettävä piirrettävän kohteen tyyppi, sen geometria (koordinaatit, mitat...) ja ulkonäkö (paksuus, väri...) esimerkki tästä artikkelista viivakaavio, joka voidaan tehdä yhdistämällä viivasegmentit objektiin line, hyödyllisin itsenäisten elementtien piirtämiseen tai monisegmenttisen viivan, objektin piirtämiseen path, käytännöllisempi sarjaan kytkettyjä linjoja.

Elementin kanssa path Tavoitteena on tehdä alla olevan kuvan kaltainen piirustus, joka koostuu suljetusta polusta, joka on täytetty vaaleammalla värillä ja jonka päällä on avoin polku, ilman täyttöä ja piirretty paksulla viivalla.

Viivan kuvaamiseen käytetään seuraavan tyyppistä lauseketta:

Jossa X1,Y1 ovat suoran ensimmäisen pisteen koordinaatit ja X2,Y2 ovat toisen pisteen koordinaatit. Käytettiin attribuuttia stroke-width paksuuden määrittämiseksi. On olemassa useita tapoja määrittää esineiden ulkonäkö SVG, sen yksittäisten ominaisuuksien, kuten edellisen, tai ominaisuuden kanssa style joka yhdistää ne kaikki ja mitä menetelmää käytetään artikkeliehdotuksessa.

Yllä oleva koodi liittyy kiinteistöön style arvot stroke (vedon väri), stroke-width (viivan paksuus) ja stroke-opacity (objektin opasiteetti)

Esineen kuvaus path on muotoa

Yllä oleva koodi käyttää toimintoja SVG M, L y Z kiinteistön sisällä d, jotka tarkoittavat vastaavasti "moveto" (siirry), "lineto" (linja kohteeseen) ja "closepath" (sulje polku). Ne voidaan ilmaista isoilla tai pienillä kirjaimilla osoittamaan absoluuttista tai suhteellista arvoa tarvittaessa (jos kyseessä on Zesimerkiksi ei ole merkitystä). On monia muita operaatioita, joilla voimme esimerkiksi piirtää ympyräkäyriä, elliptisiä käyriä, Bézier-käyriä... joita emme tässä esimerkissä tarvitse.

Vaikka tämä ehdotus piirtää viivakaavioita, jotka voivat sulkea alueen, voi olla hyödyllistä piirtää muita yksinkertaisia ​​elementtejä pisteiden merkitsemiseksi tai alueiden korostamiseksi. Niistä, jotka ovat saatavilla SVG Monikulmiot (joilla voit myös piirtää täytteen), suorakulmiot (sopivampi erityistapauksessa), ellipsit ja ympyrät (erityisenä ellipsien tapauksena) voivat olla mielenkiintoisia. Näiden elementtien syntaksi näkyy seuraavassa esimerkkikoodissa.

Edellisen koodin ulkoasu olisi seuraavan kuvan kaltainen (jollakin temppulla, jotta yllä olevan esimerkin pisteitä voidaan käyttää uudelleen)

Monikulmion pisteet (polygon) on ilmoitettu kiinteistössä points x,y-koordinaattipareina, jotka erotetaan välilyönnillä. Ellipsien määrittämiseksi (ellipse) ominaisuuksia käytetään cx (keskipisteen x koordinaatti), cy (keskipisteen y-koordinaatti), rx (leveys) ja ry (korkea). Kahden sädearvon sijaan (vaaka- ja pystysäde, rx y ry) ympyrä (circle) määritellään säteellä ominaisuuden kanssa r ja keskuksen koordinaatit cx y cy. Suorakulmion määrittäminen (rectangle) vasemman yläkulman koordinaatit näkyvät (x e y) Leveys (width) ja pitkä (height)

Lopuksi tekstin sisällyttämiseen käytetään objektia text seuraavasti:

Tekstin sijainti ilmoitetaan x- ja y-koordinaateilla, fontti vastaa ominaisuutta font-family, koko font-size ja väri ominaisuuden kanssa fill.

HTML voit integroida piirustuksia SVG toisena sivun elementtinä. Kuten muitakin esineitä, voit käyttää omaisuutta ID antaa heille yksilöllinen tunniste, jonka avulla he voivat viitata JavaScript manipuloida niitä. Näkökulmasta HTML, esine SVG olisi seuraavanlainen:

Tähän mennessä näkemämme perusteella olisi mahdollista piirtää sen tyyppinen peruskaavio, jota tässä ehdotuksessa haetaan, mutta jotta säilön (verkkosivun) ulkonäkö joustaa, se vaikuttaa kaavion osuuteen. (esimerkiksi preserveAspectRatio="none") muokkaamalla sen kokoa elementtien selainikkunan asettelun mukaan HTML.

Yleisesti ottaen kaavion sisältävän verkkosivun näyttävän selainikkunan kokoa muuttaessa on kaksi vaihtoehtoa: (1) säilyttää kaavion koko SVG jättämällä tyhjää tilaa, jos sitä on liikaa, tai lisäämällä vierityspalkkeja, jos se puuttuu, tai (2) muokkaa kaavion kokoa SVG rytmisellä tavalla muuttaaksesi verkkoa näyttävän selainikkunan kokoa. Jos valitset ensimmäisen kaavan, voit ennustaa magnitudit ja piirtää absoluuttisilla mitoilla, vaikka ne korjataan valitun koon ja kaavion arvojen perusteella. Jos valitset toisen tavan, jota ehdotan, suuruudet ovat aina prosenttiosuuksia esitetyistä arvoista. Toisen menetelmän etuna on sen soveltuvuus verkkoon ja haittapuolena kaavion mukana tulevien elementtien, kuten pisteiden tai tekstien, piirtäminen.

Viivojen paksuudessa mahdollisesti ilmenevän muodonmuutoksen korjaamiseksi käytetään efektiä. vector-effect="non-scaling-stroke" reiteillä, jotka ovat välttämättömiä (niillä, joiden arvo on stroke muu kuin none). Esineiden vuoksi text Ei ole vertailukelpoista vaikutusta, joten on välttämätöntä muuttaa niitä (yhdessä niihin liittyvien kanssa) päinvastaiseen suuntaan kuin säiliön koon muutoksen aiheuttama.

Muutokset sisään SVG Niitä voidaan soveltaa objektiryhmiin siten, että grafiikan useat tekstit ja muut objektit voidaan yhdistää yhdeksi ryhmäksi ja kätevämmin tehdä muunnos kaikille.

Elementit, jotka ovat osa ryhmää, sisällytetään tunnisteiden joukkoon <g> y </g>, määrittämään muunnos ominaisuutta käytetään transform ja joukko operaatioita, jotka ovat meidän tapauksessamme merkityksellisiä scale, jolle ilmoitetaan vaaka- ja pystysuuntainen suurennuskerroin. Jos arvo scale on suurempi kuin yksi leventää vastaavaa akselia ja jos se on pienempi kuin yksi, objektien koko pienenee tällä akselilla.

Edellisessä esimerkissä ensimmäistä ja toista tekstiä on muokattu puolittamalla niiden vaakamitta ja kaksinkertaistamalla pystysuuntainen mittaus arvoilla 0.5 ja 2.0 scale(0.5,2.0)

Sarjan seuraava artikkeli aiheesta IoT:hen liitettyjen antureiden datakaavioiden esitys selittää kuinka luodaan tai muokataan kaavioita reaaliajassa käyttämällä JavaScript jonka avulla voit nähdä kaavion animaation, kun se edustaa viimeisiä palvelimelta ladattuja arvoja.

Seuraavassa on esimerkki siitä, miltä tämän ehdotuksen avulla luodut kaaviot näyttäisivät.