Nubraižykite duomenų diagramas iš jutiklių, prijungtų prie daiktų interneto (IoT) naudojant SVG

Šiame serijos straipsnyje apie vaizduojančių duomenų grafikus daiktų internete Paaiškinu, kaip nubraižyti grafikus naudojant SVG kalba. Kaip ir kitais atvejais, straipsnis taip pat yra trumpas įvadas į kalbą.

SVG formatu

SVG atitinka Scalable Vector Graphics (angl. Scalable Vector Graphics) akronimą. Tai yra žymėjimo kalba kuri remiasi XML ir tai leidžia daugiausia apibūdinti brėžinį jį apibrėžiančia geometrija; priešingai nei matricos metodas, naudojamas, pavyzdžiui, nuotraukai, kuriai koduoti būtų naudojamas spalvotų pikselių tinklelis.

piešinio viduje SVG Taip pat gali būti įtrauktas vaizdas (pikselių matrica), nurodantis išorinį dokumentą arba įterptas į patį piešinį. SVG.

Šio straipsnio rašymo metu galiojanti kalbos versija yra SVG 1.1 nors versijos apibrėžimas jau kuriamas SVG 2. Kiek įmanoma, pasistengsiu padaryti tai, kas paaiškinta įžangoje, net jei tai yra nuoroda SVG 1.1 taip pat tarnauja SVG 2.

Jei piešinys SVG Jis įtrauktas į atskirą dokumentą, o ne į kodą HTML (mano pasiūlymas šiame sprendime atstovauti daiktų interneto duomenis įterpia juos į kodą HTML) turi būti su nuoroda XML ir dokumento tipo apibrėžimas (DTD).

Pirmoje ankstesnio kodo eilutėje pranešama versija XML naudota (1.0) simbolių koduotė (UTF-8) ir nurodo, ar jums reikia išorinių apibrėžimų (standalone="no") ar tai yra atskiras dokumentas (standalone="yes"). Antroji eilutė išreiškia dokumento tipo apibrėžimas (DTD), kurios kitoje versijoje neprireiks SVG.

Kodas, kuriuo apibrėžiamas brėžinys, yra tarp etikečių <sgv> y </sgv> kurios taip pat rodo, kaip jau buvo minėta kalbant apie HTML kodas, veikiantis kaip daiktų interneto duomenų grafikų talpykla, išmatavimai, bendros sumos dalis, proporcija, taip pat tipas ir versija.

Aukščiau pateiktame pavyzdyje apibrėžiamas 500 pikselių pločio ir 250 pikselių aukščio piešinys (500 x 250 peržiūros sritis), kuris bus apkarpytas 460 x 80 stačiakampiu (460 x 80 peržiūros laukeliu), pradedant nuo 20,10 koordinačių, naudojant visą talpykloje esančią erdvę (tinklalapio elemente, mūsų atveju), nesilaikant pradinės naudojimo proporcijos preserveAspectRatio="none". Be to, dabar galite matyti pirmąjį dokumento turinį, įtrauktus komentarus <!-- y --> kaip ir kituose formatuose, paremtuose XML.

Pasirinkta koordinačių sistema SVG Jis orientuotas horizontaliai (X ašis) ir vertikaliai (Y ašis), o teigiama kryptis yra Vakarų rašymo kryptis, tai yra, X ašies reikšmės auga į dešinę, o teigiamos Y ašies reikšmės auga. žemyn.

Apibrėžkite grafiką naudodami SVG

Norėdami apibrėžti mūsų jutiklių, prijungtų prie daiktų interneto, saugomos informacijos grafiką, turėsime nurodyti nubraižomo objekto tipą, jo geometriją (koordinates, matmenis...) ir išvaizdą (storį, spalvą...). šio straipsnio pavyzdys linijinis grafikas, kurį galima sudaryti sujungiant linijos segmentus su objektu line, labiausiai naudinga braižant nepriklausomus elementus arba naudojant kelių segmentų liniją, objektą path, praktiškesnis sujungtų linijų serijoms.

Su stichija path Siekiama sukurti piešinį, panašų į toliau pateiktame paveikslėlyje, sudarytą iš uždaro takelio, užpildyto šviesesne spalva, viršuje yra atviras takas, be užpildymo ir nubrėžtas stora linija.

Norėdami apibūdinti eilutę, naudojama tokio tipo išraiška:

Kuriame X1,Y1 yra pirmojo tiesės taško koordinatės, o X2,Y2 yra antrojo taško koordinatės. Buvo naudojamas atributas stroke-width storiui apibrėžti. Yra keletas būdų, kaip apibrėžti objektų išvaizdą SVG, su atskiromis savybėmis, kaip ir ankstesnė, arba su nuosavybe style kuri juos visus sujungia ir kuris yra metodas, kuris bus naudojamas straipsnio pasiūlyme.

Aukščiau pateiktas kodas susijungia su nuosavybe style vertybes stroke (brūkšnio spalva), stroke-width (linijos storis) ir stroke-opacity (objekto neskaidrumas)

Objekto aprašymas path turi formą

Aukščiau pateiktas kodas naudoja operacijas SVG M, L y Z nuosavybės viduje d, kurie atitinkamai reiškia „moveto“ (perkelti į), „lineto“ (linija į) ir „closepath“ (uždaryti kelią). Jei reikia, jie gali būti išreikšti didžiosiomis arba mažosiomis raidėmis, kad būtų nurodyta absoliuti arba santykinė vertė (jei yra ZPavyzdžiui, nesvarbu). Yra daug kitų operacijų, kuriomis, pavyzdžiui, galime nubrėžti apskritas kreives, elipsines kreives, Bezier kreives... kurių šiame pavyzdyje mums neprireiks.

Nors šis pasiūlymas nubrėžia linijinius grafikus, galinčius aptverti sritį, gali būti naudinga nupiešti kitus paprastus elementus, kad būtų pažymėti taškai arba paryškintos sritys. Iš turimų SVG Įdomūs gali būti daugiakampiai (su kuriais galima nupiešti ir užpildą), stačiakampiai (patogesni konkrečiam atvejui), elipsės ir apskritimai (kaip konkretus elipsės atvejis). Šių elementų sintaksę galima pamatyti šiame pavyzdiniame kode.

Ankstesnio kodo išvaizda būtų panaši į šį paveikslėlį (su tam tikra gudrybe, kad būtų galima pakartotinai panaudoti aukščiau pateikto pavyzdžio taškus)

Daugiakampio taškai (polygon) yra nurodyti nuosavybėje points kaip x,y koordinačių poros, atskirtos tarpais tarp jų. Norėdami apibrėžti elipses (ellipse) naudojamos savybės cx (x centro koordinatė), cy (y centro koordinatė), rx (plotis) ir ry (aukštas). Vietoj dviejų spindulių verčių (horizontalus ir vertikalus spindulys, rx y ry) apskritimas (circle) apibrėžiamas spinduliu su savybe r o centro koordinates su cx y cy. Norėdami apibrėžti stačiakampį (rectangle) nurodytos viršutinio kairiojo kampo koordinatės (x e y) plotis (width) ir aukštas (height)

Galiausiai, norint įtraukti tekstą, naudojamas objektas text taip:

Teksto vieta nurodoma x ir y koordinatėmis, šriftas atitinka savybę font-family, dydis su font-size ir spalva su nuosavybe fill.

HTML leidžia integruoti brėžinius SVG kaip kitą puslapio elementą. Turtu, kaip ir kitais objektais, galite naudotis ID priskirti jiems unikalų identifikatorių, su kuriuo jie gali būti nurodyti JavaScript jais manipuliuoti. Žvelgiant iš taško HTML, objektas SVG būtų tokia forma:

Turint tai, ką matėme iki šiol, būtų galima nubraižyti pagrindinio grafiko tipą, kurio ieškoma šiame pasiūlyme, tačiau, kad konteinerio (tinklalapio) išvaizda būtų lankstesnė, tai turės įtakos grafiko proporcijai. (pavyzdžiui preserveAspectRatio="none") pakeitus jo dydį, kad jis būtų pritaikytas elementų išdėstymui naršyklės lange HTML.

Apskritai, keičiant naršyklės lango, kuriame rodomas diagramos tinklalapis, dydį, yra dvi alternatyvos: (1) išlaikyti diagramos dydį. SVG palikite tuščią vietą, jei jos perteklius, arba pridėkite slinkties juostas, jei jos trūksta, arba (2) pakeiskite diagramos dydį SVG ritmiškai keisti naršyklės lango, kuriame rodomas žiniatinklis, dydį. Jei pasirinksite pirmąją formulę, galėsite numatyti dydžius ir braižyti absoliučiais išmatavimais, nors pataisyti pagal pasirinktą dydį ir grafiko reikšmes. Jei pasirinksite antrąjį būdą, kurį aš siūlau, dydžiai visada yra procentai nuo pateiktų verčių. Antrojo metodo pranašumas yra jo pritaikomumas žiniatinklyje, o trūkumas yra grafiką lydinčių elementų, tokių kaip taškai ar tekstai, piešimas.

Norint ištaisyti deformaciją, kuri gali atsirasti linijų storyje, naudojamas efektas. vector-effect="non-scaling-stroke" maršrutuose, kurie yra būtini (kurių vertė yra stroke kitaip nei none). Dėl objektų text Panašaus efekto nėra, todėl juos (kartu su susijusiais) reikia deformuoti priešinga kryptimi, nei atsiranda pasikeitus konteinerio dydžiui.

Transformacijos į SVG Juos galima pritaikyti objektų grupėms, kad keli tekstai ir kiti grafikos objektai galėtų būti integruoti į vieną grupę ir, patogiau, atlikti visų jų transformaciją.

Elementai, kurie yra grupės dalis, įtraukiami tarp žymų <g> y </g>, transformacijai priskirti naudojama nuosavybė transform ir eilė operacijų, kurios mūsų atveju yra svarbios scale, kuriai nurodomas horizontalus ir vertikalus padidinimo koeficientas. Jei vertė scale yra didesnis nei vienas, išplečia atitinkamą ašį, o jei ji yra mažesnė už vieną, objektų dydis išilgai tos ašies sumažėja.

Ankstesniame pavyzdyje pirmasis ir antrasis tekstai modifikuoti perpus sumažinant jų horizontalųjį matavimą ir padvigubinant vertikalų matavimą reikšmėmis 0.5 ir 2.0. scale(0.5,2.0)

Kitas serijos straipsnis apie duomenų grafikų iš jutiklių, prijungtų prie daiktų interneto, vaizdavimas paaiškina, kaip generuoti arba keisti grafikus realiuoju laiku naudojant JavaScript kuri leis jums pamatyti grafiko animaciją, kai bus nurodytos paskutinės iš serverio įkeltos reikšmės.

Toliau pateikiamas pavyzdys, kaip atrodytų grafikai, sukurti naudojant šį pasiūlymą.