Grafi stanja senzorjev, povezanih z internetom stvari IoT
Ena od prednosti povezave senzorskega omrežja z internetom stvari je možnost analize pridobljenih podatkov. Z grafično predstavitvijo teh informacij lahko oseba (v nasprotju s programom) bolj intuitivno razume pomen spremljanih količin, na primer tako, da jih primerja med seboj ali sledi njihovemu razvoju skozi čas.
Ta članek začenja serijo, sestavljeno iz štirih delov, ki pojasnjuje preprost predlog za grafično predstavitev podatkov, pridobljenih s senzorji, povezanimi z IoT. Z enako filozofijo kot v drugih člankih je predlagana metoda popolnoma funkcionalna, čeprav je glavni cilj didaktičen. Kot tehnični profil javnosti, ki mu je blog polaridad.esin to besedilo govori o elektroniki in ne o spletnem razvoju, vsak od razdelkov služi kot uvod v uporabljene jezike ali tehnologijo: HTML, CSS, SVG y JavaScript.
Članki iz prejšnje serije o kako shraniti podatke, pridobljene z napravami, povezanimi z internetom stvari (IoT) Na koncu so razložili, kako dostopati do informacij, shranjenih v bazah podatkov. V primerih iz serije je bil za lažji postopek uporabljen spletni strežnik kot posrednik, ki je bil odgovoren za sprejemanje podatkov preko POST zahtev protokola HTTP, njihovo shranjevanje v bazo podatkov in prikaz na spletni strani.
Čeprav je glavna pomanjkljivost tega sistema zmogljivost (ki bi jo lahko ublažili z alternativami, kot sta Node.js in MongoDB, kar bo pojasnjeno v prihodnjih člankih), v zameno ponuja dve veliki prednosti: njegova implementacija je zelo preprosta (vključno z razpoložljivostjo javnih storitev) in lahko prikaže podatke v brskalniku, kar pomeni, da ne potrebuje posebnih aplikacij (kot je aplikacija za mobilno napravo) za prikaz shranjenih informacij, ki bi predstavljale zgodovinsko stanje naprav, povezanih z internetom. Stvari.
Z izkoriščanjem prednosti, da lahko na spletni strani preprosto predstavite informacije, ki so bile shranjene v tem sistemu o statusu naprav, povezanih z IoT, ta članek pojasnjuje, kako grafično prikazati te informacije z uporabo oblike SVG iz JavaScript za dinamično ustvarjanje spletne strani HTML.
Knjigarn je veliko JavaScript s katerimi bi rešili grafični prikaz podatkov. Ti članki ne nameravajo razviti drugega; Namen tega besedila je razumeti proces in biti sposoben razviti lastne izvedbe; didaktični cilj, pa tudi produktiven. Če vas zanima uporaba izdelka, namesto da bi ga razvijali sami, vam priporočam, da si ogledate nekaj odličnih knjižnic za ustvarjanje grafike z JavaScript z brezplačnimi licencami, kot je Charts.js, visoke lestvice, Orodja Google Chart, Epoha, Raphael, Graf (temelji na Raphael), dc.js, Chartist.js, D3.js (moje priporočilo), C3.js (temelji na D3.js), NVD3 (grafike za večkratno uporabo za D3.js) ...
Struktura dokumenta HTML z grafiko SVG
V predlogu tega članka za grafično predstavitev senzorskih podatkov je spletna stran, na kateri so prikazani, sestavljena iz:
- vpisan je dokument, ki služi kot vsebnik HTML,
- videz strani je definiran s kodo CSS,
- risanje grafa je narejeno z uporabo jezika SVG y
- Programirano je branje podatkov s strežnika in prikaz grafov JavaScript
Vsi elementi, še posebej koda HTML strani, je mogoče ustvariti na strežniku s PHP, kot je razloženo v članku o PHP programski jezik iz serije o shranjevanje podatkov iz naprav, povezanih z internetom stvari.
Koda CSS y JavaScript se lahko naloži (uvozi) v kodi HTML namesto da bi bila zapisana neposredno kot del dokumenta HTML. Prednost tega je, da lahko ponovno uporabite iste dokumente na več straneh in jih lahko udobneje urejate; vendar morda neprijetnost, da nalaganje traja nekoliko dlje, odvisno od tega, ali lahko uporabite kodo v predpomnilniku (naloženo v prejšnji uporabi) ali celo CDN. V produkcijski fazi je nepomembno integrirati vso kodo iz PHP in ustvariti en sam dokument HTML z vsemi informacijami, če izberete to možnost. V tej seriji člankov zaradi jasnosti velja, da delamo z ločenimi dokumenti.
Za namene, ki nas zanimajo, da ga uporabimo kot grafični vsebnik in zelo grobo, vsebino prve ravni strukture dokumenta HTML bi:
|
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>
|
Prva vrstica služi spletnemu brskalniku, da pokaže, da je dokument, ki ga bere, zapisan HTML, zlasti v različici 5 (znani kot HTML5). Prejšnje različice HTML, temelji na SGML (Standardni splošni označevalni jezik), vključeval definicijo vrste dokumenta (DTD), v katerem je bila deklarirana vrsta pravil, uporabljenih v jeziku za opis dokumenta.
Druga in zadnja vrstica vsebujeta kodo HTML med direktivami <html> y </html> ki delujeta kot odpiranje oziroma zapiranje. Direktive HTML Obdajajo ime in atribute med znakoma "manj kot" in "več kot", ki tvorijo neke vrste znake "ostrega oklepaja". Elementi HTML ki zajemajo vsebino, imajo zaključno direktivo, ki vključuje poševnico pred imenom kot v </html>.
Lastnosti ali atributi elementov so ločeni s presledki od imena in drug od drugega ter so izraženi kot golo besedilo ali, pogosteje, kot besedilo (ime lastnosti), ki mu sledi znak enačaja in vrednost v narekovajih. V primeru direktive o odpiranju kode HTML lastnina je bila uporabljena lang z vrednostjo es, lang="es" za navedbo, da je besedilo dokumenta HTML uporablja španski jezik.
Za uvodnim ukazom kode HTML je bil vključen komentar. Komentarji v HTML Zavzamejo lahko več vrstic in uporabljajo kodo kot začetni znak <!-- in kot zaključek -->
Koda HTML Sestavljen je iz dveh blokov: glave <head> in telo <body>. Prvi je namenjen obveščanju o samem dokumentu, vključno z informacijami o njem (metainformacije), drugi pa je podpora vsebini dokumenta.
V direktivi <body> dogodek je bil vključen onload s katerim samodejno izvede funkcijo JavaScript ko je vsebina naložena. Ta vir vam omogoča, da začnete z izvajanjem kode, ki bo definirala grafične objekte in jih posodabljala, ko se s strežnika nalagajo informacije o stanju senzorjev, ki predstavljajo te grafike.
Od vseh metainformacij, ki jih je mogoče vključiti v glavo dokumenta HTML, nas še posebej zanima tista, ki jo opisujejo naslednje direktive:
-
<title>ki služi za naslov dokumenta. Običajno se prikaže v oknu brskalnika ali na ustreznem zavihku in nam pomaga prepoznati grafiko, ki jo vsebuje. -
<charset>deklarira nabor znakov, uporabljen za kodiranje dokumenta. To je še posebej pomembno za "posebne" znake, kot so eñes ali poudarki. -
<link>omogoča vzpostavitev razmerja med dokumentom HTML trenutne in druge zunanje. Pomagal nam bo pri nalaganju slogovnega lista v formatu CSS z videzom dokumenta. -
<script>vsebuje skript z izvršljivo kodo. Z uporabo te direktive bomo naložili funkcije JavaScript s katerim ustvarite ali spremenite grafiko 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>
|
Kot je razvidno iz primera HTML zgoraj ime (in pot, če je primerno) dokumenta s slogom CSS je označen z atributom href, medtem ko je v primeru kode JavaScript uporablja se src. Oba delita lastništvo type z vrednostjo text/css y text/javascript oz.
Glede na vsebino dokumenta del, ki ustreza elementu <body>, HTML5 Omogoča ustvarjanje specifičnih struktur za najpogostejše komponente na spletni strani, kot je noga, stranski odsek ali navigacijska vrstica, toda tisto, kar nas zanima, je uporaba dokumenta kot vsebnika grafike. SVG so elementi <div> ki delujejo kot neodvisni bloki, ki omogočajo definiranje hierarhične strukture z gnezdenjem nekaterih <div> znotraj drugih.
|
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 prejšnjem primeru je uporabljen element <div> ki vsebuje še dva. Ta primer predstavlja dve zelo pomembni lastnosti za uporabo kode, ki jo želimo uporabiti. HTML: id ki se uporablja za dodelitev edinstvenega identifikatorja elementu HTML ( <div>, v tem primeru) in class s katerim mu je dodeljena kategorija, ki jo bomo uporabili za ugotavljanje videza. Ni nujno, da je kategorija, razred, edinstvena, pravzaprav je velik del njene učinkovitosti v več elementih, ki si delijo isti vidik.
Element (ali oznaka) <p> služi za določitev odstavka, ki bo običajno vseboval besedilo (čeprav v HTML v zvezi s tem ni omejitev). Za združevanje znotraj odstavka (ali a <div>, prav tako ni omejitev) se uporablja oznaka <span>. S tem elementom je mogoče na primer vključiti besedilo v odstavek in mu dati drugačen videz, na primer podčrtano ali krepko.
Opredelitev grafičnih značilnosti in na splošno obnašanja, ki je povezano z elementom HTML Pripisovanje razreda se izvede v kodi CSS; v primeru prejšnjega primera v dokumentu aspecto.css.
Za optimizacijo dodeljevanja karakteristik CSS možno je, da isti element HTML pripada več razredom in ima tako videz ali obnašanje, ki ga določajo. Če želite narediti to dodelitev, napišite imena različnih razredov in jih ločite z vejicami na desni strani lastnosti. 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 prejšnjem primeru je element <div> ki je bil identificiran kot primer_hijo Dodeljeni so trije razredi: aspecto_de_hijo, aspecto_raro y tipografia_grande, ki naj bi skupaj določala izgled in obnašanje elementa. Kot je pojasnjeno v naslednjem članku o Definiranje spletnega videza IoT senzorske grafike s CSS, pri uporabi več razredov, če je katera od lastnosti, ki definirajo vidik, definirana v obeh, prevlada zadnja navedena.
Kot smo videli, elementi <div> Lahko vsebujejo druge elemente, vključno z drugimi <div>. Enostavnejši primer bi bil <div> ki je vsebovalo besedilo. Videz, ki definira slog CSS vplivalo tudi na besedilo v elementu.
Za optimizacijo dodeljevanja karakteristik CSS možno je, da isti element HTML pripada več razredom in ima tako videz ali obnašanje, ki ga določajo. Če želite narediti to dodelitev, napišite imena različnih razredov in jih ločite z vejicami na desni strani lastnosti. 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 prejšnjem primeru so trije razredi, povezani z <div> primer_hijo Določili bi videz elementa in besedila, ki ga vsebuje, na primer, da bi pisavo, v kateri je napisan, naredili veliko (če je namen, ki ga navaja njegovo ime v zadnjem razredu, resničen)
Od različice 5 (HTML5) je možno vključiti grafično kodo v format SVG znotraj same kode HTML kot še en element. Z vidika kode HTML, vsebina SVG je element <svg> ki vsebuje različne grafične elemente (črte, kroge, pravokotnike...
|
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>
|
Čeprav je bilo rečeno, da grafične značilnosti elementov HTML so opredeljeni v slogu CSS in so z njim povezani prek razreda, je mogoče nekatere od njih tudi neposredno dodeliti elementom na dva načina. Po eni strani lahko uporabite nepremičnino style in dodelite različne grafične značilnosti predmeta kot njegovo vrednost. Logično je, da je bolje uporabiti zgoraj omenjeno tehniko dodeljevanja vidika razredu, vendar s to možnostjo lahko elementu dodate majhen popravek (zelo posebna izjema), ne da bi morali ustvariti nov razred.
Po drugi strani pa nekateri elementi HTML Omogočajo vam uporabo posebnih lastnosti, ki določajo njihov videz. Na splošno je, tudi če te lastnosti obstajajo, bolje uporabiti razrede, vendar na žalost vsi elementi ne ponujajo te možnosti, nekateri pričakujejo, da bo določena vrednost navedena neposredno s temi posebnimi lastnostmi, namesto da bi se nanašala na povezani razred. Eden od elementov, ki imajo tovrstno vedenje, je prav koda SVG, ki mu moramo v lastnostih dodeliti odstotno vrednost širine in višine width y height, namesto razreda.
Kot bo podrobneje razvidno iz članek, ki govori o kodi SVG, je za uporabo predlagane preproste metode priporočljivo upoštevati dimenzije grafa kot odstotke. V primeru skupne velikosti predmeta, z navedbo 100% vrednosti širine in višine, bo vsebnik tisti, ki nastavi končne dimenzije ( <div> z id="dibujo", v prejšnjem primeru)
V primeru različnih komponent grafa SVG (črte, krogi, pravokotniki ...), so vključeni v površino, ki meri 100×100 (poljubna enota) in se razširijo v pravokotno obliko, ne da bi ohranili razmerje. Lastnosti viewBox y preserveAspectRatio elementa SVG Odgovorni so za vzpostavitev teh vrednot. v prvem primeru s pravokotnim pogledom, ki poteka od koordinatne točke (0,0) do koordinatne točke (100,100) in je izražen kot "0 0 100 100" v drugem pa z vrednostjo 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>
|
Z vsem zgoraj naštetim lahko zdaj definirate celotno kodo, ki bi služila kot grafični vsebnik. SVG ustvarjen ali spremenjen iz JavaScript. Spodnji primer vsebuje štiri grafične bloke, ki uporabljajo format HTML predloga reprezentacije, ki ga bomo uporabili.
|
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 –>
|
Spodaj si lahko ogledate, kako bi izgledala prejšnja koda, oblikovana s slogom CSS ustrezen, ki ustvarja z JavaScript grafiko SVG s strežniškimi odčitki podatkov, ki jih hranijo senzorji, povezani z IoT. Razen tega, da se podatki ne nalagajo s strežnika, ampak se naključno generirajo v odjemalcu (vašem brskalniku), bo preostala koda uporabljena v predlogu, opredeljenem v tej seriji člankov.
Naslednji članek v tej seriji pojasnjuje kako definirati sloge CSS da se prikaže koda HTML, ki deluje kot vsebnik za grafiko SVG s katerim predstavljajo stanje senzorjev, povezanih z internetom stvari (IoT).
1 komentar