Stavové grafy senzorov pripojených k internetu vecí IoT
Jednou z výhod pripojenia senzorovej siete k internetu vecí je schopnosť analyzovať získané údaje. Grafickým znázornením týchto informácií môže človek (na rozdiel od programu) intuitívnejšie pochopiť význam sledovaných veličín, napríklad ich vzájomným porovnávaním alebo sledovaním ich vývoja v čase.
Tento článok začína sériu pozostávajúcu zo štyroch častí, ktorá vysvetľuje jednoduchý návrh grafického znázornenia údajov získaných senzormi pripojenými k internetu vecí. S rovnakou filozofiou ako v iných článkoch je navrhovaná metóda dokonale funkčná, hoci hlavný cieľ je didaktický. Ako technický profil verejnosti, na ktorú sa blog polaridad.es, a tento text je o elektronike a nie o vývoji webu, každá zo sekcií slúži ako úvod do používaných jazykov alebo technológií: HTML, CSS, SVG y JavaScript.
Články v predchádzajúcej sérii o ako ukladať údaje získané zariadeniami pripojenými k internetu vecí (IoT) Skončili vysvetlením, ako sa dostať k informáciám uloženým v databázach. V príkladoch série sa na uľahčenie procesu použil ako sprostredkovateľ webový server, ktorý bol zodpovedný za príjem údajov prostredníctvom požiadaviek POST protokolu HTTP, ich uloženie do databázy a zobrazenie na webovej stránke.
Hoci hlavnou nevýhodou tohto systému je výkon (ktorý by sa dal zmierniť alternatívami ako Node.js a MongoDB, ktoré budú vysvetlené v ďalších článkoch), výmenou za to poskytuje dve veľké výhody: jeho implementácia je veľmi jednoduchá (vrátane dostupnosti verejných služieb) a dokáže zobraziť údaje v prehliadači, to znamená, že na prezentáciu uložených informácií, ktoré by reprezentovali historický stav zariadení pripojených na internet, nepotrebuje špecifické aplikácie (napríklad aplikáciu pre mobilné zariadenie). Veci.
Využitím výhody možnosti jednoducho prezentovať na webovej stránke informácie, ktoré boli uložené v tomto systéme o stave zariadení pripojených k internetu vecí, tento článok vysvetľuje, ako graficky zobraziť tieto informácie pomocou formátu SVG z JavaScript dynamicky generovať webovú stránku HTML.
Existuje veľa kníhkupectiev JavaScript s ktorým sa rieši grafické znázornenie údajov. Tieto články nemajú v úmysle rozvíjať ďalší; Účelom tohto textu je pochopiť proces a byť schopný vyvinúť svoje vlastné implementácie; didaktický cieľ, ako aj produktívny. Ak máte záujem o používanie produktu a nie o jeho vlastný vývoj, odporúčam vám pozrieť sa na niektoré z vynikajúcich knižníc na generovanie grafiky pomocou JavaScript s bezplatnými licenciami ako Charts.js, highcharts, Nástroje pre grafy Google, Epocha, Raphael, grafický (založené na Raphael), dc.js, Chartist.js, D3.js (moje odporúčanie), C3.js (založené na D3.js), NVD3 (opakovane použiteľná grafika pre D3.js) ...
Štruktúra HTML dokumentu s grafikou SVG
V návrhu tohto článku graficky prezentovať údaje zo senzorov sa webová stránka, na ktorej sú zobrazené, skladá z:
- je zapísaný dokument, ktorý slúži ako kontajner HTML,
- Vzhľad stránky je definovaný kódom CSS,
- kreslenie grafu sa vykonáva pomocou jazyka SVG y
- Načítavanie údajov zo servera a zobrazovanie grafov je naprogramované JavaScript
Všetky prvky, najmä kód HTML stránky, možno vygenerovať na serveri pomocou PHP, ako je vysvetlené v článku o PHP programovací jazyk zo seriálu o ukladanie dát zo zariadení pripojených k internetu vecí.
Kód CSS y JavaScript možno načítať (importovať) v kóde HTML namiesto toho, aby boli napísané priamo ako súčasť dokumentu HTML. To má tú výhodu, že je možné opätovne použiť rovnaké dokumenty na niekoľkých stranách a pohodlnejšie ich upravovať; ale možno je to nepohodlné, že načítanie trvá trochu dlhšie v závislosti od toho, či môžete použiť kód obsiahnutý vo vyrovnávacej pamäti (načítaný pri predchádzajúcom použití) alebo dokonca CDN. Vo produkčnej fáze je triviálne integrovať celý kód z PHP a vygenerovať jeden dokument HTML so všetkými informáciami, ak si zvolíte túto alternatívu. V rámci tejto série článkov sa kvôli prehľadnosti predpokladá, že pracujeme so samostatnými dokumentmi.
Na účely, ktoré nás zaujímajú, použiť ho ako grafický kontajner a veľmi zhruba obsah prvej úrovne štruktúry dokumentu HTML by mal:
|
1
2
3
4
5
6
7
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español –>
<head>
</head>
<body onload=“funcion();”>
</body>
</html>
|
Prvý riadok slúži na označenie webového prehliadača, že dokument, ktorý číta, je zapísaný HTML, konkrétne vo verzii 5 (známej ako HTML5). Predchádzajúce verzie HTML, založené na SGML (Standard Generalized Markup Language), zahŕňal definíciu typu dokumentu (DTD), v ktorom bol deklarovaný typ pravidiel použitých v jazyku na opis dokumentu.
Druhý a posledný riadok obsahuje kód HTML medzi smernicami <html> y </html> ktoré fungujú ako otváranie a zatváranie. Smernice HTML Meno a atribúty uzatvárajú medzi znaky „menej ako“ a „väčšie ako“ tvoriace akési znaky „akútnej zátvorky“. Prvky HTML ktoré uzatvárajú obsah majú záverečnú smernicu, ktorá obsahuje lomku pred názvom ako v </html>.
Vlastnosti alebo atribúty prvkov sú od názvu a od seba oddelené medzerami a sú vyjadrené ako obyčajný text alebo častejšie ako text (názov vlastnosti), za ktorým nasleduje znak rovnosti a hodnota v úvodzovkách. V prípade smernice na otvorenie kódu HTML nehnuteľnosť bola použitá lang s hodnotou es, lang="es" na označenie, že text dokumentu HTML používa španielsky jazyk.
Za úvodnou direktívou HTML kódu bol zahrnutý komentár. Komentáre v HTML Môžu zaberať niekoľko riadkov a použiť kód ako otvárací znak <!-- a ako záver -->
Kód HTML Skladá sa z dvoch blokov: hlavičky <head> a telo <body>. Prvým je informovať o samotnom dokumente vrátane informácií o ňom (metainformácie) a druhým je podpora obsahu dokumentu.
V smernici <body> bola zahrnutá udalosť onload pomocou ktorého sa funkcia automaticky vykoná JavaScript po načítaní obsahu. Tento prostriedok vám umožňuje spustiť vykonávanie kódu, ktorý bude definovať grafické objekty a aktualizovať ich, keď sa zo servera načítajú informácie o stave senzorov, ktoré reprezentujú tieto grafiky.
Zo všetkých metainformácií, ktoré možno zahrnúť do hlavičky dokumentu HTML, zaujíma nás najmä tá, ktorú popisujú nasledujúce smernice:
-
<title>ktorý slúži na označenie dokumentu. Zvyčajne sa zobrazí v okne prehliadača alebo na príslušnej karte a pomôže nám identifikovať grafiku, ktorú obsahuje. -
<charset>deklaruje znakovú sadu použitú na kódovanie dokumentu. Je to dôležité najmä pre „špeciálne“ znaky, ako sú eñes alebo akcenty. -
<link>umožňuje vytvoriť vzťah medzi dokumentom HTML aktuálne a iné externé. Pomôže nám to načítať šablónu štýlov vo formáte CSS so vzhľadom dokumentu. -
<script>obsahuje skript so spustiteľným kódom. Pomocou tejto direktívy načítame funkcie JavaScript pomocou ktorých sa generuje alebo upravuje grafika SVG.
|
1
2
3
4
5
6
7
8
9
10
11
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
</body>
</html>
|
Ako je možné vidieť na príklade HTML vyššie názov (a prípadne cestu) dokumentu so štýlom CSS je označené atribútom href, pričom v prípade kódexu JavaScript je to použité src. Obaja podielové vlastníctvo type s hodnotou text/css y text/javascript resp.
S ohľadom na obsah dokumentu časť, ktorá zodpovedá prvku <body>, HTML5 Umožňuje vytvárať špecifické štruktúry pre najčastejšie komponenty na webovej stránke, ako je päta, bočná sekcia alebo navigačná lišta, ale čo nás zaujíma, je použiť dokument ako grafický kontajner. SVG sú prvky <div> ktoré fungujú ako nezávislé bloky, ktoré umožňujú definovať hierarchickú štruktúru vnorením niektorých <div> v rámci iných.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE html>
<html lang=“es”> <!– El código del documento HTML está escrito en español… –>
<head>
<meta charset=“utf-8”> <!– …y codificado en el juego de caracteres UTF-8 –>
<title>Gáfico SVG de sensores conectados a la IoT</title>
<link href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/aspecto.css” type=“text/css” rel=“stylesheet” media=“all”>
<script src=“graficos.js” type=“text/javascript”></script>
</head>
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
</html>
|
V predchádzajúcom príklade je použitý prvok <div> ktorý obsahuje ďalšie dve. Tento príklad predstavuje dve veľmi dôležité vlastnosti pre použitie, ktoré chceme z kódu urobiť. HTML: id ktorý sa používa na priradenie jedinečného identifikátora prvku HTML (a <div>, v tomto prípade) a class s ktorou je priradená kategória, ktorú použijeme na stanovenie vzhľadu. Kategória, trieda, nemusí byť jedinečná, v skutočnosti veľká časť jej účinnosti spočíva v niekoľkých prvkoch zdieľajúcich rovnaký aspekt.
prvok (alebo značka) <p> slúži na definovanie odseku, ktorý bude normálne obsahovať text (hoci v HTML v tomto smere neexistuje žiadne obmedzenie). Ak chcete vytvoriť zoskupenia v rámci odseku (alebo a <div>, tiež neexistujú žiadne obmedzenia) používa sa značka <span>. Pomocou tohto prvku je možné napríklad vložiť text do odseku, aby mal iný vzhľad, napríklad podčiarknutý alebo tučný.
Definícia grafických charakteristík a vo všeobecnosti správanie, ktoré je spojené s prvkom HTML Priradenie triedy sa vykonáva v kóde CSS; v prípade predchádzajúceho príkladu v dokumente aspecto.css.
Optimalizovať priradenie charakteristík CSS je možné, že ten istý prvok HTML patrí do niekoľkých tried a teda má nimi definovaný vzhľad alebo správanie. Ak chcete vykonať toto priradenie, napíšte názvy rôznych tried a oddeľte ich čiarkami napravo od vlastnosti. class
|
9
10
11
12
13
14
15
16
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
V predchádzajúcom príklade prvok <div> ktorý bol identifikovaný ako primer_hijo Boli pridelené tri triedy: aspecto_de_hijo, aspecto_raro y tipografia_grande, ktoré majú spolu definovať vzhľad a správanie prvku. Ako je vysvetlené v nasledujúcom článku o Definovanie webového vzhľadu senzora IoT pomocou CSS, pri použití viacerých tried, ak je niektorá z vlastností, ktoré definujú aspekt, definovaná v oboch, má prednosť posledná uvedená.
Ako bolo vidieť, prvky <div> Môžu obsahovať ďalšie prvky, vrátane iných <div>. Jednoduchší prípad by bol <div> ktorý obsahoval text. Vzhľad, ktorý definuje štýl CSS by ovplyvnilo aj text obsiahnutý v prvku.
Optimalizovať priradenie charakteristík CSS je možné, že ten istý prvok HTML patrí do niekoľkých tried a teda má nimi definovaný vzhľad alebo správanie. Ak chcete vykonať toto priradenie, napíšte názvy rôznych tried a oddeľte ich čiarkami napravo od vlastnosti. class
|
9
10
11
12
13
14
15
16
17
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
</div>
</div>
</body>
|
V predchádzajúcom príklade sú tri triedy spojené s <div> primer_hijo Definovali by vzhľad prvku a text, ktorý ho obsahuje, napríklad by zväčšili písmo, ktorým je napísaný (ak je účel uvedený v jeho názve v poslednej triede pravdivý)
Od verzie 5 (HTML5) je možné zahrnúť grafický kód vo formáte SVG v samotnom kóde HTML ako ďalší prvok. Z pohľadu kódu HTML, obsah SVG je to prvok <svg> ktorý obsahuje rôzne grafické prvky (čiary, kruhy, obdĺžniky...
|
9
10
11
12
13
14
15
16
17
18
19
20
|
<body onload=“funcion();”>
<div id=“padre” class=“aspecto_de_padre”>
<div id=“primer_hijo” class=“aspecto_de_hijo aspecto_raro tipografia_grande”>
Este hijo de aspecto raro tiene la tipografía grande
</div>
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg id=“dibujo” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
</div>
</body>
|
Aj keď bolo povedané, že grafická charakteristika prvkov HTML sú definované v štýle CSS a sú s ním spojené prostredníctvom triedy, je možné niektoré z nich priradiť aj priamo k prvkom dvoma spôsobmi. Na jednej strane môžete nehnuteľnosť využívať style a priradiť rôzne grafické charakteristiky objektu ako jeho hodnotu. Logicky je vhodnejšie použiť vyššie uvedenú techniku priradenia aspektu triede, ale s touto možnosťou môžete pridať malú opravu prvku (veľmi špecifická výnimka) bez toho, aby ste museli vytvárať novú triedu.
Na druhej strane niektoré prvky HTML Umožňujú vám použiť špecifické vlastnosti, ktoré definujú ich vzhľad. Vo všeobecnosti, aj keď tieto vlastnosti existujú, je vhodnejšie použiť triedy, ale, žiaľ, nie všetky prvky ponúkajú túto alternatívu, niektorí očakávajú, že určitá hodnota bude uvedená priamo s týmito špecifickými vlastnosťami namiesto odkazu na pridruženú triedu. Jedným z prvkov, ktoré majú tento typ správania, je práve kód SVG, ktorému musíme vo vlastnostiach priradiť percentuálnu hodnotu šírky a výšky width y height, respektíve namiesto triedy.
Ako bude podrobnejšie vidieť v článok, ktorý hovorí o kóde SVG, aby ste mohli použiť navrhovanú jednoduchú metódu, je vhodné zvážiť rozmery grafu ako percentá. V prípade celkovej veľkosti objektu, uvedením 100 % v hodnote šírky a výšky, to bude kontajner, ktorý nastaví konečné rozmery (tzv. <div> s id="dibujo", v predchádzajúcom príklade)
V prípade rôznych komponentov grafu SVG (čiary, kruhy, obdĺžniky...), sú zahrnuté v ploche s rozmermi 100×100 (akákoľvek jednotka) a rozširujú sa v obdĺžnikovom tvare bez zachovania proporcie. Vlastnosti viewBox y preserveAspectRatio prvku SVG Sú zodpovední za stanovenie týchto hodnôt. v prvom prípade s pravouhlým pohľadom, ktorý prechádza zo súradnicového bodu (0,0) do súradnicového bodu (100,100) a je vyjadrený ako "0 0 100 100" a v druhom s hodnotou none.
|
14
15
16
17
18
|
<div id=“segundo_hijo” class=“aspecto_de_hijo”>
<svg viewBox=“0 0 100 100” preserveAspectRatio=“none” width=“100%” height=“100%” id=“dibujo” class=“grafico”>
<circle cx=“100” cy=“200” r=“50”>
</svg>
</div>
|
So všetkým vyššie uvedeným môžete teraz definovať kompletný kód, ktorý by slúžil ako grafický kontajner. SVG generované alebo upravené z JavaScript. Nižšie uvedený príklad obsahuje štyri grafické bloky, ktoré používajú formát HTML reprezentačného návrhu, ktorý budeme používať.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
|
<!DOCTYPE html>
<html lang=“es”> <!– Inicio del documento HTML con el idioma –>
<head> <!– Cabecera del documento HTML –>
<meta charset=“utf-8”> <!– Se utiliza el juego de caracteres UTF8 –>
<title>Temperaturas Nave E1</title> <!– Título del documento y seguramente de la ventana del navegador –>
<link rel=“stylesheet” href=“https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” type=“text/css” media=“all”> <!– Cargar el estilo “https://polaridad.es/grafica-sensor-internet-de-las-cosas-iot/estilo.css” guardado en la misma carpeta que este documento HTML –>
<script type=“text/javascript” src=“graficos.js”></script> <!– Cargar el código JavaScript del documento “graficos.js” guardado en la misma carpeta que este documento HTML –>
</head> <!– Final de la cabecera del documento HTML –>
<body onload=“iniciar_graficos();”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript iniciar_graficos() –>
<div id=“temperatura_frigorifico_a” class=“bloque_sensor”> <!– Bloque de datos del primer sensor –>
<div id=“titulo_temperatura_frigorifico_a” class=“bloque_titulo”>Temperatura frigorífico 01A</div> <!– Título del bloque de datos del sensor –>
<div id=“descripcion_temperatura_frigorifico_a” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01A</div> <!– Descripción del bloque de datos del sensor –>
<div id=“fecha_temperatura_frigorifico_a” class=“bloque_fecha”>Cargando emperaturas</div> <!– Fecha de la última lectura de datos del sensor. Por ahora vacío, luego se rellenará con la aplicación JavaScript –>
<div id=“bloque_temperatura_frigorifico_a” class=“bloque_grafico”> <!– Bloque con el gráfico –>
<svg id=“grafico_temperatura_frigorifico_a” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_a” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg> <!– Gráfico de los datos –>
</div> <!– Final del bloque que contiene el gráfico –>
</div> <!– Final del bloque de datos del primer sensor –>
<div id=“temperatura_frigorifico_b” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_b” class=“bloque_titulo”>Temperatura frigorífico 01B</div>
<div id=“descripcion_temperatura_frigorifico_b” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01B</div>
<div id=“fecha_temperatura_frigorifico_b” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_temperatura_frigorifico_b” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_b” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_b” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_c” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_c” class=“bloque_titulo”>Temperatura frigorífico 01C</div>
<div id=“descripcion_temperatura_frigorifico_c” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01C</div>
<div id=“fecha_temperatura_frigorifico_c” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_c” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_c” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_c” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
<div id=“temperatura_frigorifico_d” class=“bloque_sensor”>
<div id=“titulo_temperatura_frigorifico_d” class=“bloque_titulo”>Temperatura frigorífico 01D</div>
<div id=“descripcion_temperatura_frigorifico_d” class=“bloque_descripcion”>Media de las sondas de temperatura del frigorífico 01D</div>
<div id=“fecha_temperatura_frigorifico_d” class=“bloque_fecha”>Cargando emperaturas</div>
<div id=“bloque_grafico_frigorifico_d” class=“bloque_grafico”>
<svg id=“grafico_temperatura_frigorifico_d” class=“grafico” width=“100%” height=“100%” viewBox=“0 0 100 100” preserveAspectRatio=“none”>
<path id=“linea_temperatura_frigorifico_d” d=“” style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;” vector-effect=“non-scaling-stroke” />
</svg>
</div>
</div>
</body> <!– Final del cuerpo del documento HTML –>
</html> <!– Final del documento HTML –>
|
Nižšie vidíte, ako by vyzeral predchádzajúci kód naformátovaný štýlom CSS korešpondujúci, generujúci s JavaScript grafika SVG s údajmi zo servera uloženými senzormi pripojenými k internetu vecí. Okrem toho, že údaje sa nenačítavajú zo servera, ale náhodne sa generujú v klientovi (vo vašom prehliadači), zvyšok kódu sa použije v návrhu definovanom v tejto sérii článkov.
Ďalší článok tejto série vysvetľuje ako definovať štýly CSS dať vzhľad kódu HTML, ktorý funguje ako kontajner pre grafiku SVG pomocou ktorých reprezentovať stav senzorov pripojených k internetu vecí (IoT).
1 komentár