Kreslenie dátových grafov zo senzorov pripojených k internetu vecí (IoT) pomocou SVG
V tomto článku zo série o reprezentujúce dátové grafy v IoT Vysvetľujem, ako vykresliť grafy pomocou jazyk SVG. Ako pri iných príležitostiach, aj tento článok slúži ako krátky úvod do jazyka.
formát SVG
SVG zodpovedá skratke pre Scalable Vector Graphics (škálovateľná vektorová grafika, v angličtine). Je to a značkovací jazyk ktorý je založený na XML a to umožňuje predovšetkým opísať výkres geometriou, ktorá ho definuje; na rozdiel od maticovej metódy, používanej napríklad pre fotografiu, ktorá by na jej zakódovanie využívala mriežku farebných pixelov.
vnútri kresby SVG Môže byť zahrnutý aj obrázok (matica pixelov), buď odkazujúci na externý dokument, alebo vložený do samotného výkresu. SVG.
Jazyková verzia, ktorá je aktuálna v čase písania tohto článku, je SVG 1.1 hoci definícia verzie sa už pripravuje SVG 2. V rámci možností sa pokúsim urobiť to, čo je vysvetlené v úvode, aj keď sa to týka SVG 1.1 slúžiť aj pre SVG 2.
Ak kresba SVG Je zahrnutý v samostatnom dokumente a nie v kóde HTML (môj návrh v tomto riešení reprezentovať dáta IoT ich vkladá do kódu HTML) musí byť uvedený odkazom XML a definícia typu dokumentu (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”>
|
V prvom riadku predchádzajúceho kódu je oznámená verzia XML použité (1.0) kódovanie znakov (UTF-8) a označuje, či potrebujete externé definície (standalone="no") alebo ide o samostatný dokument (standalone="yes"). Druhý riadok vyjadruje definícia typu dokumentu (DTD), ktorý nebude potrebný v ďalšej verzii SVG.
Kód, ktorým je výkres definovaný, je uzavretý medzi štítkami <sgv> y </sgv> ktoré tiež naznačujú, ako už bolo spomenuté, keď sa hovorí o HTML kód, ktorý funguje ako kontajner pre dátové grafy v IoT, miery, zastúpená časť z celkového počtu, podiel a tiež typ a verzia.
|
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>
|
Vyššie uvedený príklad definuje kresbu so šírkou 500 pixlov a výškou 250 pixlov (výrez 500 x 250), ktorý bude orezaný pomocou obdĺžnika 460 x 80 (výrez 460 x 80) počnúc súradnicami 20,10 s využitím celého priestoru dostupného v kontajneri (prvok na webovej stránke, v náš prípad) bez rešpektovania pôvodného pomeru použitia preserveAspectRatio="none". Okrem toho teraz môžete vidieť prvý obsah dokumentu, komentáre, ktoré sú medzi nimi zahrnuté <!-- y --> ako v iných formátoch založených na XML.
Súradnicový systém zvolený SVG Je orientovaný horizontálne (os X) a vertikálne (os Y) a kladný smer je smer západného písma, to znamená, že hodnoty osi X rastú doprava a kladné hodnoty osi Y rastú. smerom nadol.
Definujte graf pomocou SVG
Na definovanie grafiky informácií uložených našimi senzormi pripojenými k IoT budeme musieť špecifikovať typ objektu, ktorý sa kreslí, jeho geometriu (súradnice, rozmery...) a jeho vzhľad (hrúbku, farbu...) príklad tohto článku čiarový graf, ktorý možno vytvoriť spojením segmentov čiary s objektom line, najužitočnejšie na vykresľovanie nezávislých prvkov alebo s viacsegmentovou čiarou, objekt path, praktickejšie pre série spojených liniek.
S prvkom path Cieľom je vytvoriť kresbu ako na obrázku nižšie, ktorá je tvorená uzavretým cestom vyplneným svetlejšou farbou zakončenou hore otvoreným cestom, bez výplne a nakresleným hrubou čiarou.
Na opis riadku sa používa výraz typu:
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” stroke-width=“5” />
|
V ktorom X1,Y1 sú súradnice prvého bodu na priamke a X2,Y2 sú súradnice druhého bodu. Bol použitý atribút stroke-width na definovanie hrúbky. Existuje niekoľko spôsobov, ako definovať vzhľad objektov SVG, s jeho jednotlivými vlastnosťami, ako predchádzajúci, alebo s vlastnosťou style ktorá ich všetky spája a ktorá metóda bude použitá v návrhu článku.
|
1
|
<line x1=“10.0” y1=“20.0” x2=“30.0” y2=“40.0” style=“stroke:#205587; stroke-width:5; stroke-opacity:1.0;” />
|
Vyššie uvedený kód sa pripája k nehnuteľnosti style hodnoty stroke (farba ťahu), stroke-width (hrúbka čiary) a stroke-opacity (nepriehľadnosť objektu)
Popis objektu path má tvar
|
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;” />
|
Vyššie uvedený kód používa operácie SVG M, L y Z vnútri nehnuteľnosti d, čo v tomto poradí znamená „presunúť“ (presunúť do), „lineto“ (priamo do) a „blízka cesta“ (blízka cesta). Môžu byť vyjadrené veľkými alebo malými písmenami na označenie absolútnej alebo relatívnej hodnoty, ak je to vhodné (v prípade Znapríklad , je irelevantné). Existuje mnoho ďalších operácií, pomocou ktorých môžeme napríklad kresliť kruhové krivky, eliptické krivky, Bézierove krivky... ktoré v tomto príklade nebudeme potrebovať.
Hoci tento návrh kreslí čiarové grafy, ktoré môžu ohraničiť oblasť, môže byť užitočné nakresliť ďalšie jednoduché prvky na označenie bodov alebo zvýraznenie oblastí. Z tých dostupných v SVG Zaujímavé môžu byť mnohouholníky (s ktorými môžete kresliť aj výplň), obdĺžniky (vhodnejšie pre konkrétny prípad), elipsy a kruhy (ako konkrétny prípad elipsy). Syntax týchto prvkov je možné vidieť v nasledujúcom príklade kódu.
|
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>
|
Vzhľad predchádzajúceho kódu by bol ako nasledujúci obrázok (s nejakým trikom, aby ste mohli znova použiť body z vyššie uvedeného príkladu)
Body mnohouholníka (polygon) sú uvedené vo vlastnostiach points ako dvojice súradníc x,y oddelené medzerami medzi nimi. Ak chcete definovať elipsy (ellipse) sa používajú vlastnosti cx (x súradnica stredu), cy (y súradnica stredu), rx (šírka) a ry (vysoká). Namiesto dvoch hodnôt polomeru (horizontálny a vertikálny polomer, rx y ry) kruh (circle) je definovaný polomerom s vlastnosťou r a súradnice stredu s cx y cy. Ak chcete definovať obdĺžnik (rectangle) sú uvedené súradnice ľavého horného rohu (x e y) Šírka (width) a vysoký (height)
Nakoniec sa na zahrnutie textu použije objekt text nasledovne:
|
1
2
3
|
<text x=“10.0” y=“20.0” font-family=“DejaVu” font-size=“24” fill=“#A8C3EA” >
Texto en formato SVG
</text>
|
Poloha textu je označená súradnicami x a y, font zodpovedá vlastnosti font-family, veľkosť s font-size a farba s vlastnosťou fill.
HTML umožňuje integrovať výkresy SVG ako ďalší prvok stránky. Rovnako ako iné objekty, môžete použiť vlastnosť ID priradiť im jedinečný identifikátor, pomocou ktorého sa na ne potom dá odkazovať JavaScript manipulovať s nimi. Z pohľadu HTML, objekt SVG by mal nasledovnú podobu:
|
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>
|
S tým, čo sme doteraz videli, by bolo možné nakresliť typ základného grafu, ktorý sa hľadá v tomto návrhu, ale aby sa poskytla flexibilita vzhľadu kontajnera (webovej stránky), podiel grafu bude ovplyvnený (napríklad preserveAspectRatio="none") úpravou jeho veľkosti tak, aby sa prispôsobila rozloženiu prvkov v okne prehliadača HTML.
Vo všeobecnosti existujú dve alternatívy správania pri úprave veľkosti okna prehliadača, ktoré zobrazuje webovú stránku obsahujúcu graf: (1) zachovať veľkosť grafu SVG ponechanie prázdneho miesta, ak je prebytok, alebo pridanie posuvných pruhov, ak chýbajú, alebo (2) úprava veľkosti grafu SVG rytmickým spôsobom meniť veľkosť okna prehliadača, ktoré zobrazuje web. Ak vyberiete prvý vzorec, môžete predpovedať veľkosti a kresliť s absolútnymi meraniami, aj keď korigované na základe zvolenej veľkosti a hodnôt grafu. Ak si vyberiete druhý spôsob, ktorý navrhujem, veličiny sú vždy percentá reprezentovaných hodnôt. Výhodou druhého spôsobu je jeho prispôsobivosť webu a nevýhodou je kreslenie prvkov, ktoré graf sprevádzajú, ako sú body alebo texty.
Na korekciu deformácie, ktorá by mohla nastať v hrúbke čiar, sa používa efekt. vector-effect="non-scaling-stroke" na trasách, ktoré sú potrebné (tie, ktoré majú hodnotu stroke iný ako none). Pre predmety text Neexistuje žiadny porovnateľný efekt, takže je potrebné ich deformovať (spolu s tými, ktoré sú s nimi spojené) v opačnom smere, než aký vytvára zmena veľkosti nádoby.
Premeny v SVG Môžu byť aplikované na skupiny objektov, takže niekoľko textov a iných objektov v grafike možno integrovať do jednej skupiny a pohodlnejšie vykonať transformáciu pre všetky z nich.
Prvky, ktoré sú súčasťou skupiny, sú zahrnuté medzi značkami <g> y </g>, na priradenie transformácie sa používa vlastnosť transform a sériu operácií, ktoré sú v našom prípade relevantné scale, na ktorom je uvedený horizontálny a vertikálny faktor zväčšenia. Ak je hodnota scale je väčšia ako jedna, rozširuje zodpovedajúcu os a ak je menšia ako jedna, dochádza k zmenšeniu veľkosti objektov pozdĺž tejto osi.
|
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>
|
V predchádzajúcom príklade sa prvý a druhý text upravia znížením ich horizontálneho merania na polovicu a zdvojnásobením vertikálneho merania o hodnoty 0.5 a 2.0 použité v scale(0.5,2.0)
Ďalší článok zo série na reprezentácia dátových grafov zo senzorov pripojených k IoT vysvetľuje, ako generovať alebo upravovať grafy v reálnom čase pomocou JavaScript čo vám umožní vidieť animáciu grafu pri reprezentácii posledných hodnôt načítaných zo servera.
Nasleduje príklad toho, ako by vyzerali grafy vytvorené pomocou tohto návrhu.
Pridať komentár