Gumuhit ng mga graph ng data mula sa mga sensor na konektado sa Internet of Things (IoT) gamit ang SVG
Sa artikulong ito sa serye sa kumakatawan sa mga graph ng data sa IoT Ipinapaliwanag ko kung paano i-plot ang mga graph gamit ang SVG na wika. Tulad ng iba pang mga okasyon, ang artikulo ay nagsisilbi rin bilang isang maikling panimula sa wika.
SVG na format
SVG tumutugma sa acronym para sa Scalable Vector Graphics (scalable vector graphics, sa English). Ito ay wika ng markup na batay sa XML at iyon ay nagbibigay-daan, pangunahin, upang ilarawan ang isang guhit sa pamamagitan ng geometry na tumutukoy dito; kabaligtaran sa pamamaraan ng matrix, na ginagamit halimbawa para sa isang litrato, na gagamit ng grid ng mga may kulay na pixel upang i-encode ito.
sa loob ng isang drawing SVG Ang isang imahe (isang matrix ng mga pixel) ay maaari ding isama, maaaring tumutukoy sa isang panlabas na dokumento o naka-embed sa loob ng mismong drawing. SVG.
Ang bersyon ng wika na kasalukuyang sa oras ng pagsulat ng artikulong ito ay ang SVG 1.1 kahit na ang kahulugan ng bersyon ay binuo na SVG 2. Hangga't maaari, susubukan kong gawin ang ipinaliwanag sa panimula, kahit na ito ay tumutukoy SVG 1.1 nagsisilbi rin para sa SVG 2.
Kung ang pagguhit SVG Ito ay kasama sa isang hiwalay na dokumento at hindi sa loob ng code HTML (Ang aking panukala sa solusyon na ito upang kumatawan sa data ng IoT ay naka-embed nito sa code HTML) ay dapat na pinamumunuan ng isang sanggunian XML at kahulugan ng uri ng dokumento (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”>
|
Sa unang linya ng nakaraang code ang bersyon ay aabisuhan XML ginamit (1.0) character encoding (UTF-8) at nagpapahiwatig kung kailangan mo ng mga panlabas na kahulugan (standalone="no") o ito ba ay isang stand-alone na dokumento (standalone="yes"). Ang ikalawang linya ay nagpapahayag ng kahulugan ng uri ng dokumento (DTD), na hindi na kakailanganin sa susunod na bersyon ng SVG.
Ang code kung saan tinukoy ang pagguhit ay nakapaloob sa pagitan ng mga label <sgv> y </sgv> na nagpapahiwatig din, tulad ng nabanggit na kapag pinag-uusapan HTML code na nagsisilbing container para sa mga data graph sa IoT, ang mga sukat, ang bahagi ng kabuuang kinakatawan, ang proporsyon at gayundin ang uri at bersyon.
|
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>
|
Tinutukoy ng halimbawa sa itaas ang isang drawing na 500 pixels ang lapad at 250 pixels ang taas (500x250 viewport) na i-crop gamit ang 460x80 rectangle (460x80 viewbox) simula sa mga coordinate 20,10 gamit ang lahat ng espasyong available sa container (isang elemento sa isang web page, sa aming kaso) nang hindi iginagalang ang orihinal na proporsyon na gagamitin preserveAspectRatio="none". Bilang karagdagan, maaari mo na ngayong makita ang unang nilalaman ng dokumento, ang mga komento na kasama sa <!-- y --> tulad ng sa iba pang mga format batay sa XML.
Ang coordinate system na pinili ni SVG Ito ay naka-orient nang pahalang (X axis) at patayo (Y axis) at ang positibong direksyon ay ang Western writing, iyon ay, ang mga halaga ng X axis ay lumalaki sa kanan at ang mga positibong halaga ng Y axis ay lumalaki. pababa.
Tukuyin ang graph gamit ang SVG
Upang tukuyin ang mga graphics ng impormasyong nakaimbak ng aming mga sensor na konektado sa IoT kakailanganin naming tukuyin ang uri ng bagay na iginuhit, ang geometry nito (mga coordinate, mga sukat...) at ang hitsura nito (kapal, kulay...) Sa halimbawa ng artikulong ito isang line graph na maaaring gawin sa pamamagitan ng pagsasama ng mga segment ng linya sa bagay line, pinakakapaki-pakinabang para sa pag-plot ng mga independiyenteng elemento, o sa isang multi-segment na linya, isang bagay path, mas praktikal para sa serye ng mga konektadong linya.
Gamit ang elemento path Ang layunin ay gumawa ng isang guhit tulad ng nasa larawan sa ibaba, na binubuo ng isang saradong landas na puno ng mas magaan na kulay na nangunguna sa itaas ng isang bukas na landas, nang walang pagpuno at iginuhit ng makapal na linya.
Upang ilarawan ang isang linya, ginagamit ang isang expression ng uri:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
Kung saan ang X1,Y1 ay ang mga coordinate ng unang punto sa linya at ang X2,Y2 ay ang mga coordinate ng pangalawa. Isang katangian ang ginamit stroke-width upang tukuyin ang kapal. Mayroong ilang mga paraan upang tukuyin ang hitsura ng mga bagay SVG, kasama ang mga indibidwal na katangian nito, tulad ng nauna, o kasama ang ari-arian style na pinagsasama-sama ang lahat at alin ang paraan na gagamitin sa panukalang artikulo.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
Ang code sa itaas ay sumasali sa property style ang mga halaga ng stroke (ang kulay ng stroke), stroke-width (ang kapal ng linya) at stroke-opacity (ang opacity ng bagay)
Ang paglalarawan ng isang bagay path may porma
|
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;” />
|
Ginagamit ng code sa itaas ang mga operasyon SVG M, L y Z sa loob ng ari-arian d, na ang ibig sabihin, ayon sa pagkakabanggit, ay “moveto” (move to), “lineto” (line to) at “closepath” (close path). Maaaring ipahayag ang mga ito sa malaki o maliit na titik upang ipahiwatig ang isang ganap o kamag-anak na halaga kung saan naaangkop (sa kaso ng Z, halimbawa, ay hindi nauugnay). Mayroong maraming iba pang mga operasyon kung saan, halimbawa, maaari tayong gumuhit ng mga pabilog na kurba, mga elliptic na kurba, mga kurba ng Bézier... na hindi namin kakailanganin sa halimbawang ito.
Bagama't ang panukalang ito ay gumuhit ng mga line graph na maaaring maglagay ng isang lugar, maaari itong maging kapaki-pakinabang upang gumuhit ng iba pang mga simpleng elemento upang markahan ang mga punto o i-highlight ang mga lugar. Sa mga available sa SVG Ang mga polygons (kung saan maaari mo ring iguhit ang pagpuno), mga parihaba (mas maginhawa para sa partikular na kaso), mga ellipse at bilog (bilang isang partikular na kaso ng mga ellipse) ay maaaring maging kawili-wili. Ang syntax ng mga elementong ito ay makikita sa sumusunod na halimbawang code.
|
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>
|
Ang hitsura ng nakaraang code ay magiging katulad ng sumusunod na larawan (na may ilang trick upang magamit muli ang mga punto mula sa halimbawa sa itaas)
Ang mga punto ng polygon (polygon) ay nakasaad sa property points bilang mga pares ng x,y coordinate na pinaghihiwalay ng mga puwang sa pagitan nila. Upang tukuyin ang mga ellipse (ellipse) mga katangian ay ginagamit cx (x coordinate ng sentro), cy (y coordinate ng sentro), rx (lapad) at ry (mataas). Sa halip na dalawang halaga ng radius (horizontal at vertical radius, rx y ry) ang bilog (circle) ay tinukoy ng isang radius na may ari-arian r at ang mga coordinate ng sentro na may cx y cy. Upang tukuyin ang parihaba (rectangle) ang mga coordinate ng kaliwang sulok sa itaas ay ipinahiwatig (x e y) Ang lapad (width) at ang matangkad (height)
Sa wakas, upang isama ang teksto, ang bagay ay ginagamit text tulad ng sumusunod:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
Ang posisyon ng teksto ay ipinahiwatig sa x at y na mga coordinate, ang font ay tumutugma sa property font-family, ang laki na may font-size at ang kulay na may ari-arian fill.
HTML ay nagbibigay-daan sa iyo upang isama ang mga guhit SVG bilang isa pang elemento ng pahina. Tulad ng ibang mga bagay, maaari mong gamitin ang property ID upang magtalaga sa kanila ng isang natatanging identifier kung saan maaari silang i-refer JavaScript para manipulahin sila. Mula sa pananaw ng HTML, isang bagay SVG magkakaroon ng sumusunod na anyo:
|
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>
|
Sa nakita natin sa ngayon, posibleng iguhit ang uri ng pangunahing graph na hinahangad sa panukalang ito ngunit, upang magbigay ng flexibility sa hitsura ng container (ang web page), maaapektuhan ang proporsyon ng graph (Halimbawa preserveAspectRatio="none") sa pamamagitan ng pagbabago sa laki nito upang iakma ito sa layout sa window ng browser ng mga elemento HTML.
Sa pangkalahatan, mayroong dalawang alternatibo sa pag-uugali kapag binabago ang laki ng window ng browser na nagpapakita ng naglalaman ng web page ng chart: (1) panatilihin ang laki ng chart SVG nag-iiwan ng blangkong espasyo kung may sobra o magdagdag ng mga scroll bar kung nawawala ito o (2) baguhin ang laki ng graph SVG sa isang maindayog na paraan upang baguhin ang laki ng browser window na nagpapakita ng web. Kung pipiliin mo ang unang formula, maaari mong hulaan ang mga magnitude at gumuhit gamit ang ganap na mga sukat, bagama't naitama batay sa napiling laki at mga halaga ng graph. Kung pipiliin mo ang pangalawang paraan, na kung saan ay ang iminungkahi ko, ang mga magnitude ay palaging mga porsyento ng mga halaga na kinakatawan. Ang bentahe ng pangalawang paraan ay ang kakayahang umangkop nito sa web at ang disbentaha ay ang pagguhit ng mga elemento na kasama ng graph, tulad ng mga punto o teksto.
Upang itama ang pagpapapangit na maaaring mangyari sa kapal ng mga linya, ginagamit ang epekto. vector-effect="non-scaling-stroke" sa mga rutang kinakailangan (yaong may halaga ng stroke maliban sa none). Para sa mga bagay text Walang maihahambing na epekto, kaya kinakailangang i-deform ang mga ito (kasama ang mga nauugnay sa kanila) sa kabaligtaran na direksyon sa ginawa ng pagbabago sa laki ng lalagyan.
Ang mga pagbabago sa SVG Maaari silang ilapat sa mga pangkat ng mga bagay upang ang ilang mga teksto at iba pang mga bagay sa isang graphic ay maisama sa isang grupo at, mas maginhawa, magsagawa ng pagbabago para sa lahat ng mga ito.
Ang mga elemento na bahagi ng isang pangkat ay kasama sa mga tag <g> y </g>, para magtalaga ng pagbabagong ginagamit ang property transform at isang serye ng mga operasyon na, para sa aming kaso, ay may kaugnayan scale, kung saan ipinapahiwatig ang isang pahalang at patayong magnification factor. Kung ang halaga ng scale ay mas malaki kaysa sa isa ay nagpapalawak sa kaukulang axis at kung ito ay mas mababa sa isa ay magkakaroon ng pagbawas sa laki ng mga bagay sa kahabaan ng axis na iyon.
|
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>
|
Sa nakaraang halimbawa, ang una at pangalawang teksto ay binago sa pamamagitan ng paghahati ng pahalang na laki at pagdodoble sa vertical na laki ng mga halagang 0.5 at 2.0 na ginamit sa scale(0.5,2.0)
Ang susunod na artikulo sa serye sa representasyon ng mga graph ng data mula sa mga sensor na konektado sa IoT nagpapaliwanag kung paano bumuo o magbago ng mga graph sa real time gamit JavaScript na magbibigay-daan sa iyo upang makita ang isang animation ng graph kapag kumakatawan sa mga huling halaga na na-load mula sa server.
Ang sumusunod ay isang halimbawa ng magiging hitsura ng mga graph na nabuo gamit ang panukalang ito.
Post Komento