Joonistage andmegraafikuid SVG-ga asjade Internetiga (IoT) ühendatud anduritelt
Selles artiklis sarjas teemal andmegraafikute esitamine asjade Internetis Selgitan, kuidas joonistada graafikuid kasutades SVG keel. Nagu teistelgi juhtudel, toimib artikkel ka keele lühikeseks sissejuhatuseks.
SVG-vormingus
SVG vastab akronüümile Scalable Vector Graphics (inglise keeles skaleeritav vektorgraafika). See on märgistuskeel mis põhineb XML ja mis võimaldab peamiselt kirjeldada joonist seda määratleva geomeetriaga; erinevalt maatriksmeetodist, mida kasutatakse näiteks foto jaoks, mis kasutaks selle kodeerimiseks värviliste pikslite võrgustikku.
joonise sees SVG Samuti võib lisada pildi (pikslite maatriksi), mis viitab välisele dokumendile või on manustatud joonisele. SVG.
Selle artikli kirjutamise ajal kehtiv keeleversioon on SVG 1.1 kuigi versiooni määratlus on juba väljatöötamisel SVG 2. Nii palju kui võimalik, püüan teha seda, mida sissejuhatuses on selgitatud, isegi kui see viitab SVG 1.1 teenida ka SVG 2.
Kui joonis SVG See sisaldub eraldi dokumendis, mitte koodis HTML (minu selles lahenduses olev ettepanek IoT andmete esitamiseks manustab selle koodi HTML) peal peab olema viide XML ja dokumenditüübi määratlus (DTD).
|
1
2
|
<?xml version=“1.0” encoding=“utf-8” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
|
Eelmise koodi esimesel real teavitatakse versioonist XML kasutatud (1.0) märgikodeeringut (UTF-8) ja näitab, kas vajate väliseid määratlusi (standalone="no") või on see iseseisev dokument (standalone="yes"). Teine rida väljendab dokumenditüübi määratlus (DTD), mida pole järgmises versioonis vaja SVG.
Kood, millega joonis on määratletud, on siltide vahel <sgv> y </sgv> mis viitavad ka, nagu juba rääkides mainitud HTML-kood, mis toimib asjade internetis andmegraafikute konteinerina, mõõdud, esindatud kogusumma osa, osakaal ning ka tüüp ja versioon.
|
1
2
3
4
5
6
7
|
<?xml version=“1.0” standalone=“yes”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN” “http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=“500px” height=“250px” viewBox=“20 10 460 80” preserveAspectRatio=“none” xmlns=“http://www.w3.org/2000/svg” version=“1.1”>
<!–
dibujo en formato SVG
–>
</svg>
|
Ülaltoodud näide määratleb 500 pikslit laiuse ja 250 pikslit kõrge (500 x 250 vaateava) joonise, mis kärbitakse 460 x 80 ristkülikuga (460 x 80 vaateväljaga), mis algab koordinaatidest 20,10, kasutades kogu konteineris saadaolevat ruumi (element veebilehel meie puhul), austamata algset kasutusproportsiooni preserveAspectRatio="none". Lisaks näete nüüd dokumendi esimest sisu, sellesse lisatud kommentaare <!-- y --> nagu ka teistes vormingutes, mis põhinevad XML.
poolt valitud koordinaatsüsteem SVG See on orienteeritud horisontaalselt (X-telg) ja vertikaalselt (Y-telg) ning positiivne suund on läänekirja oma, see tähendab, et X-telje väärtused kasvavad paremale ja Y-telje positiivsed väärtused kasvavad. allapoole.
Määrake graafik SVG-ga
Meie asjade internetiga ühendatud andurite salvestatud teabe graafika määratlemiseks peame määrama joonistatava objekti tüübi, selle geomeetria (koordinaadid, mõõtmed...) ja välimuse (paksus, värvus...). Selle artikli näide on joondiagramm, mille saab luua joonelõikude ühendamisel objektiga line, kõige kasulikum sõltumatute elementide või mitmesegmendilise joonega objekti joonistamiseks path, praktilisem ühendatud liinide seeriate jaoks.
Koos elemendiga path Eesmärk on teha alloleval pildil kujutatu sarnane joonis, mis koosneb heledama värviga täidetud suletud rajast, mille ülaosas on avatud tee, ilma täidiseta ja jämeda joonega.
Rea kirjeldamiseks kasutatakse järgmist tüüpi avaldist:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
Milles X1,Y1 on sirge esimese punkti koordinaadid ja X2,Y2 teise punkti koordinaadid. Kasutati atribuuti stroke-width paksuse määramiseks. Objektide välimuse määramiseks on mitu võimalust SVG, selle üksikute omadustega, nagu eelmine, või atribuudiga style mis ühendab need kõik kokku ja millist meetodit artikli ettepanekus kasutatakse.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
Ülaltoodud kood liitub kinnistul style väärtused stroke (löögi värv), stroke-width (joone paksus) ja stroke-opacity (objekti läbipaistmatus)
Objekti kirjeldus path on kujuga
|
1
|
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
|
Ülaltoodud kood kasutab toiminguid SVG M, L y Z kinnistu sees d, mis tähendavad vastavalt "moveto" (liiguta), "lineto" (joon kuni) ja "closepath" (sulge tee). Neid saab väljendada suur- või väiketähtedega, et näidata vajaduse korral absoluutset või suhtelist väärtust (juhul, kui Znäiteks ei ole asjakohane). On palju muid tehteid, millega saame näiteks joonistada ringkõveraid, elliptilisi kõveraid, Bezier' kõveraid... mida me selles näites ei vaja.
Kuigi see ettepanek joonistab joongraafikuid, mis võivad ala ümbritseda, võib punktide tähistamiseks või alade esiletõstmiseks olla kasulik joonistada muid lihtsaid elemente. Nendest, mis on saadaval SVG Huvitavad võivad olla hulknurgad (millega saab ka täidist joonistada), ristkülikud (konkreetse juhtumi jaoks mugavam), ellipsid ja ringid (ellipside puhul). Nende elementide süntaksit saab näha järgmises näidiskoodis.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
<svg id=“formas_sencillas” width=“100%” height=“180px” viewBox=“0 0 100 100” preserveAspectRatio=“none” class=“foto_columna_sombra” style=“background-color:#A8C3EA;margin:20px auto;”>
<polygon points=“0,100 0,42 8,38 14,37 22,40 29,33 35,36 44,40 51,30 57,42 64,33 74,38 80,34 87,40 92,38 100,32 100,100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;fill:#205587;fill-opacity:0.5;” vector-effect=“non-scaling-stroke” />
<circle cx=“0” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“8” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“14” cy=“37” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“22” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“29” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“35” cy=“36” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“44” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“51” cy=“30” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“57” cy=“42” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“64” cy=“33” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“74” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“80” cy=“34” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“87” cy=“40” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“92” cy=“38” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<circle cx=“100” cy=“32” r=“5” style=“stroke:none;fill:#205587;fill-opacity:1;” />
<rect x=“0” y=“0” width=“100” height=“100” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
|
Eelmise koodi välimus oleks nagu järgmine pilt (mõne nipiga, et saaks ülaltoodud näite punkte uuesti kasutada)
Hulknurga punktid (polygon) on kinnistul märgitud points x,y koordinaatide paaridena, mis on eraldatud tühikutega. Ellipside määratlemiseks (ellipse) omadusi kasutatakse cx (keskpunkti x koordinaat), cy (keskpunkti y-koordinaat), rx (laius) ja ry (kõrge). Kahe raadiuse väärtuse asemel (horisontaalne ja vertikaalne raadius, rx y ry) ring (circle) on määratud atribuudiga raadiusega r ja keskuse koordinaadid koos cx y cy. Ristküliku (rectangle) näidatakse vasaku ülanurga koordinaadid (x e y) laius (width) ja pikk (height)
Lõpuks kasutatakse teksti kaasamiseks objekti text järgnevalt:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
Teksti asukoht on tähistatud x ja y koordinaatidega, font vastab omadusele font-family, suurus koos font-size ja värv koos varaga fill.
HTML võimaldab jooniseid integreerida SVG lehe teise elemendina. Sarnaselt teistele objektidele saab ka kinnistut kasutada ID et määrata neile kordumatu identifikaator, mille abil neile seejärel viidata JavaScript nendega manipuleerida. Vaatepunktist HTML, objekt SVG oleks järgmisel kujul:
|
1
2
3
4
5
6
7
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
</svg>
|
Seni nähtu põhjal oleks võimalik joonistada seda tüüpi põhigraafik, mida selles ettepanekus otsitakse, kuid konteineri (veebilehe) välimuse paindlikumaks muutmiseks mõjutab see graafiku osakaalu. (näiteks preserveAspectRatio="none"), muutes selle suurust, et kohandada seda elementide brauseriaknas oleva paigutusega HTML.
Laias laastus on diagrammi sisaldava veebilehte kuvava brauseriakna suuruse muutmisel käitumisele kaks alternatiivi: (1) säilitage diagrammi suurus. SVG tühja ruumi jätmine, kui seda on liiga palju, või kerimisribade lisamine, kui see puudub, või (2) muuta graafiku suurust SVG rütmiliselt muuta veebi kuvava brauseriakna suurust. Kui valite esimese valemi, saate ennustada suurusi ja joonistada absoluutsete mõõtudega, kuigi korrigeeritud vastavalt valitud suurusele ja graafiku väärtustele. Kui valite teise viisi, mida ma pakun, on suurused alati protsentides esitatud väärtustest. Teise meetodi eeliseks on selle kohandatavus veebiga ja puuduseks graafikuga kaasnevate elementide, näiteks punktide või tekstide, joonistamine.
Joone paksuses tekkida võiva deformatsiooni korrigeerimiseks kasutatakse efekti. vector-effect="non-scaling-stroke" marsruutidel, mis on vajalikud (need, mille väärtus on stroke muud kui none). Objektide jaoks text Võrreldavat efekti ei ole, seega on vaja neid (koos nendega seonduvatega) deformeerida vastupidises suunas sellele, mis tekib konteineri suuruse muutumisel.
Teisendused sisse SVG Neid saab rakendada objektirühmadele nii, et mitu teksti ja muud graafika objektid saab integreerida ühte rühma ja mugavamalt teostada nende kõigi jaoks teisendust.
Rühma kuuluvad elemendid on lisatud siltide hulka <g> y </g>, teisenduse määramiseks kasutatakse atribuuti transform ja rida toiminguid, mis meie puhul on asjakohased scale, millele on näidatud horisontaalne ja vertikaalne suurendustegur. Kui väärtus scale on suurem kui üks, laiendab vastavat telge ja kui see on väiksem kui üks, väheneb objektide suurus piki seda telge.
|
1
2
3
4
5
6
7
8
9
10
11
12
|
<svg width=“200.0” height=“100.0” id=“cosa_fea”>
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
<path d=“M 10.0,20.0 L 30.0,40.0 L 50.0,60.0 L 70.0,80.0 Z” style=“fill:#A8C3EA; fill-opacity:1.0; stroke:#205587; stroke-width:2; stroke-opacity:1.0;” />
<g transform=“scale(0.5,2.0)”>
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Primer texto
</text>
<text x=“10.0” y=“50.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Segundo texto
</text>
</g>
</svg>
|
Eelmises näites muudetakse esimest ja teist teksti, vähendades nende horisontaalset mõõtmist poole võrra ja kahekordistades vertikaalset mõõtmist 0.5 ja 2.0 võrra. scale(0.5,2.0)
Sarja järgmine artikkel teemal IoT-ga ühendatud andurite andmegraafikute esitus selgitab, kuidas luua või muuta graafikuid reaalajas kasutades JavaScript mis võimaldab teil näha graafiku animatsiooni, kui esitate serverist viimased laaditud väärtused.
Järgnevalt on toodud näide selle kohta, kuidas selle ettepaneku abil loodud graafikud välja näeksid.
Postita kommentaar