Rajzoljon adatgrafikonokat az SVG-vel a dolgok internetéhez (IoT) kapcsolódó érzékelőkről

Ebben a cikkben a sorozatban adatgrafikonokat ábrázol az IoT-ben Elmagyarázom, hogyan kell ábrázolni a grafikonokat a SVG nyelv. Mint más alkalmakkor, a cikk egyben a nyelv rövid bevezetőjeként is szolgál.

SVG formátum

SVG megfelel a Scalable Vector Graphics (angolul skálázható vektorgrafika) mozaikszónak. Ez egy jelölőnyelv amelynek alapja a XML és ez főként lehetővé teszi egy rajz leírását az azt meghatározó geometriával; szemben a mátrix módszerrel, amelyet például egy fényképhez használnak, amely színes pixelekből álló rácsot használ a kódolásához.

egy rajzon belül SVG Képet (pixelekből álló mátrixot) is be lehet helyezni, akár egy külső dokumentumra hivatkozva, akár magába a rajzba ágyazva. SVG.

A cikk írásakor aktuális nyelvi változat a SVG 1.1 bár a változat meghatározása már folyamatban van SVG 2. Amennyire lehet, igyekszem a bevezetőben kifejtetteket elkészíteni, még ha utal is SVG 1.1 számára is szolgálnak SVG 2.

Ha a rajz SVG Külön dokumentumban van benne, és nem a kódban HTML (Az IoT-adatok megjelenítésére vonatkozó javaslatom ebben a megoldásban beágyazza azt a kódba HTML) hivatkozással kell élni XML és a dokumentumtípus meghatározása (DTD).

Az előző kód első sorában a verzió értesítést kap XML használt (1.0) karakterkódolás (UTF-8) és jelzi, hogy szüksége van-e külső definíciókra (standalone="no") vagy ez egy önálló dokumentum (standalone="yes"). A második sor azt fejezi ki dokumentumtípus meghatározása (DTD), amelyre a következő verzióban nem lesz szükség SVG.

A kód, amellyel a rajzot meghatározták, a címkék között található <sgv> y </sgv> amelyek azt is jelzik, ahogy arról már beszéltünk HTML-kód, amely az IoT-ben adatgrafikonok tárolójaként működik, a méretek, a teljes képviselt rész, az arány, valamint a típus és a változat.

A fenti példa egy 500 pixel széles és 250 pixel magas rajzot határoz meg (500x250 nézetablak), amely egy 460x80-as téglalappal (460x80-as nézetmezővel) lesz levágva, a 20,10-es koordinátáktól kezdve, felhasználva a tárolóban (a weblap egyik elemében) rendelkezésre álló teljes területet. esetünkben) az eredeti felhasználási arány tiszteletben tartása nélkül preserveAspectRatio="none". Ezen kívül most már láthatja a dokumentum első tartalmát, a benne szereplő megjegyzéseket <!-- y --> mint más formátumok alapján XML.

által választott koordinátarendszer SVG Vízszintes (X tengely) és függőleges (Y tengely) tájolású, és a pozitív irány a nyugati írásé, vagyis az X tengely értékei jobbra nőnek, az Y tengely pozitív értékei pedig nőnek. lefelé.

Határozza meg a gráfot SVG-vel

Az IoT-hez csatlakoztatott szenzoraink által tárolt információk grafikájának meghatározásához meg kell adnunk a megrajzolt objektum típusát, geometriáját (koordináták, méretek...) és megjelenését (vastagság, szín...). Példa ebben a cikkben egy vonalgráfra, amelyet úgy lehet létrehozni, hogy vonalszakaszokat kapcsolunk össze az objektummal line, a leghasznosabb független elemek ábrázolására, vagy több szakaszos vonallal, objektumra path, praktikusabb a csatlakoztatott vonalak sorozatához.

Az elemmel path A cél egy olyan rajz elkészítése, mint amilyen az alábbi képen látható, amely egy világosabb színnel kitöltött zárt ösvényből áll, tetején nyitott pályával, kitöltés nélkül és vastag vonallal megrajzolva.

Egy sor leírásához a következő típusú kifejezést használjuk:

Amelyben X1,Y1 az egyenes első pontjának koordinátái, X2,Y2 pedig a második pont koordinátái. Egy attribútumot használtak stroke-width a vastagság meghatározásához. Számos módja van az objektumok megjelenésének meghatározására SVG, egyedi tulajdonságaival, mint az előzővel, vagy a tulajdonsággal style amely mindegyiket egyesíti, és melyik módszert fogják használni a cikkjavaslatban.

A fenti kód csatlakozik az ingatlanhoz style az értékeket stroke (a körvonal színe), stroke-width (a vonal vastagsága) és stroke-opacity (az objektum átlátszatlansága)

Egy objektum leírása path az alakja van

A fenti kód a műveleteket használja SVG M, L y Z az ingatlanon belül d, amelyek rendre a „moveto” (mozgatás ide), a „lineto” (sor to) és a „closepath” (közeli útvonal) kifejezéseket jelentik. Ezeket nagy- vagy kisbetűkkel fejezhetjük ki, hogy adott esetben abszolút vagy relatív értéket jelezzenek (a Zpéldául irreleváns). Sok más művelet van, amivel például körgörbét, elliptikus görbét, Bézier-görbét rajzolhatunk... amire ebben a példában nem lesz szükségünk.

Bár ez a javaslat vonaldiagramokat rajzol, amelyek behatárolhatnak egy területet, hasznos lehet más egyszerű elemek megrajzolása pontok megjelölésére vagy területek kiemelésére. A beszerezhetőek közül SVG Érdekesek lehetnek a sokszögek (amelyekkel a kitöltést is megrajzolhatjuk), a téglalapok (az adott esetre kényelmesebb), az ellipszisek és a körök (mint az ellipszisek sajátos esete). Ezen elemek szintaxisa a következő példakódban látható.

Az előző kód megjelenése olyan lenne, mint a következő képen (némi trükkel, hogy a fenti példa pontjait újra felhasználhassuk)

A sokszög pontjai (polygon) vannak feltüntetve az ingatlanban points x,y koordinátapárokként, amelyeket szóközzel választanak el egymástól. Az ellipszisek meghatározásához (ellipse) tulajdonságokat használják cx (a középpont x koordinátája), cy (a középpont y-koordinátája), rx (szélesség) és ry (magas). Két sugárérték helyett (vízszintes és függőleges sugár, rx y ry) a kör (circle) egy sugár határozza meg a tulajdonsággal r a középpont koordinátái pedig -val cx y cy. A téglalap meghatározásához (rectangle) megjelennek a bal felső sarok koordinátái (x e y) A szélesség (width) és a magas (height)

Végül a szöveg beillesztéséhez az objektumot használjuk text alábbiak szerint:

A szöveg helyzetét x és y koordinátákkal jelöljük, a betűtípus megfelel a tulajdonságnak font-family, a méret a font-size és a szín a tulajdonsággal fill.

HTML lehetővé teszi a rajzok integrálását SVG mint az oldal másik eleme. Más objektumokhoz hasonlóan használhatja a tulajdonságot ID egyedi azonosítót rendelni hozzájuk, amellyel azután hivatkozni lehet rájuk JavaScript manipulálni őket. Abból a szempontból HTML, egy tárgy SVG a következő formájú lenne:

Az eddig látottakkal meg lehetne rajzolni az alap gráf típusát, amit ebben a javaslatban keresünk, de a konténer (a weboldal) megjelenésének rugalmasabbá tétele érdekében ez a grafikon arányát érinti. (mert preserveAspectRatio="none") méretének módosításával, hogy igazodjon az elemek böngészőablakában megjelenő elrendezéshez HTML.

Általánosságban elmondható, hogy a diagramot tartalmazó weboldalt megjelenítő böngészőablak méretének módosítása során két alternatíva létezik: (1) a diagram méretének megőrzése SVG üres hely hagyása, ha többlet van, vagy görgetősávok hozzáadása, ha hiányzik, vagy (2) módosítsa a grafikon méretét SVG ütemes módon módosíthatja a webet megjelenítő böngészőablak méretét. Ha az első képletet választja, megjósolhatja a nagyságokat, és abszolút mérésekkel rajzolhat, bár a kiválasztott méret és a grafikon értékei alapján korrigálva. Ha a második módot választja, amely az általam javasolt, akkor a nagyságok mindig a megjelenített értékek százalékos arányai. A második módszer előnye a webhez való adaptálhatósága, hátránya pedig a grafikont kísérő elemek, például pontok vagy szövegek megrajzolása.

A vonalvastagságban előforduló deformáció korrigálására az effektust használják. vector-effect="non-scaling-stroke" a szükséges útvonalakon (azokon, amelyek értéke stroke más mint none). A tárgyakért text Nincs összehasonlítható hatás, ezért ezeket (a hozzájuk tartozókkal együtt) a tartályméret változásával ellentétes irányban kell deformálni.

Az átalakulások benne SVG Alkalmazhatók objektumcsoportokra, így egy grafikában több szöveg és egyéb objektum egyetlen csoportba integrálható, és kényelmesebben mindegyiknél transzformációt hajthat végre.

Azok az elemek, amelyek egy csoport részét képezik, szerepelnek a címkék között <g> y </g>, transzformáció hozzárendeléséhez a tulajdonságot használják transform és a mi esetünkben releváns műveletek sorozata scale, amelyhez vízszintes és függőleges nagyítási tényezőt jeleznek. Ha az értéke scale XNUMX-nél nagyobb, kiszélesíti a megfelelő tengelyt, és ha kisebb, mint egy, az objektumok mérete csökken a tengely mentén.

Az előző példában az első és a második szöveg úgy módosult, hogy a vízszintes méretét megfelezi, és a függőleges mérést megkétszerezi a 0.5 és 2.0 értékkel. scale(0.5,2.0)

A sorozat következő cikke a az IoT-hez csatlakoztatott érzékelők adatgrafikonjainak ábrázolása elmagyarázza, hogyan lehet valós idejű grafikonokat generálni vagy módosítani JavaScript amely lehetővé teszi a grafikon animációjának megtekintését, amikor a szerverről legutóbb betöltött értékeket ábrázolja.

A következő egy példa arra, hogyan néznek ki az ezzel a javaslattal létrehozott grafikonok.