Asjade Internetiga ühendatud andurite olekugraafikud
Andurivõrgu asjade internetiga ühendamise üheks eeliseks on võimalus analüüsida saadud andmeid. Seda teavet graafiliselt kujutades saab inimene (erinevalt programmist) intuitiivsemalt aru jälgitavate suuruste tähendusest, näiteks neid omavahel võrreldes või nende arengut ajas jälgides.
See artikkel alustab neljast osast koosnevat seeriat, mis selgitab lihtsat ettepanekut asjade Internetiga ühendatud andurite abil saadud andmete graafiliseks esitamiseks. Sama filosoofiaga nagu teistes artiklites, on pakutud meetod täiesti toimiv, kuigi peamine eesmärk on didaktiline. Avalikkuse tehnilise profiilina, kellele ajaveebi polaridad.esja see tekst käsitleb elektroonikat, mitte veebiarendust, kõik jaotised on sissejuhatuseks kasutatavatesse keeltesse või tehnoloogiasse: HTML, CSS, SVG y JavaScript.
Eelmise sarja artiklid teemal kuidas salvestada asjade Internetiga (IoT) ühendatud seadmete abil saadud andmeid Need lõppesid andmekogudesse salvestatud teabele juurdepääsu selgitamisega. Seeria näidetes kasutati protsessi lihtsustamiseks vahendajana veebiserverit, mis vastutas HTTP-protokolli POST päringute kaudu andmete vastuvõtmise, andmebaasi salvestamise ja veebilehel kuvamise eest.
Kuigi selle süsteemi peamiseks puuduseks on jõudlus (mida saab leevendada alternatiividega nagu Node.js ja MongoDB, mida selgitatakse tulevastes artiklites), annab see vastutasuks kaks suurt eelist: selle rakendamine on väga lihtne (sealhulgas kättesaadavus teenuste avalik) ja suudab kuvada andmeid brauseris, see tähendab, et see ei vaja spetsiaalseid rakendusi (nt mobiilseadme rakendust), et esitada salvestatud teave, mis kajastaks Interneti-ühendusega seadmete ajaloolist olekut. Asjad.
Selles artiklis selgitatakse, kuidas seda teavet vormingus graafiliselt kuvada, kasutades ära selle eelise, et veebilehel on lihtne esitada sellesse süsteemi salvestatud teavet asjade Internetiga ühendatud seadmete oleku kohta. SVG pärit JavaScript veebilehe dünaamiliseks genereerimiseks HTML.
Raamatupoode on palju JavaScript millega lahendada andmete graafiline esitus. Need artiklid ei kavatse arendada teist; Selle teksti eesmärk on mõista protsessi ja olla võimeline välja töötama oma teostusi; nii didaktiline kui ka produktiivne eesmärk. Kui olete huvitatud toote kasutamisest, mitte selle ise arendamisest, soovitan teil vaadata mõnda suurepärast teeki graafika loomiseks. JavaScript tasuta litsentsidega nagu Charts.js, Edetabelid, Google'i diagrammitööriistad, Ajastu, Raphael, skeem (põhineb Raphael), dc.js, Chartist.js, D3.js (minu soovitus), C3.js (põhineb D3.js), NVD3 (korduvkasutatav graafika jaoks D3.js) ...
HTML-dokumendi struktuur SVG-graafikaga
Selle artikli ettepanekus andurite andmete graafiliseks esitamiseks koosneb veebileht, millel need kuvatakse:
- konteinerina kasutatav dokument on sisse kirjutatud HTML,
- lehe välimus määratakse koodiga CSS,
- graafiku joonistamine toimub keele abil SVG y
- Andmete lugemine serverist ja graafikute kuvamine on sisse programmeeritud JavaScript
Kõik elemendid, eriti kood HTML lehe, saab serveris PHP-ga genereerida, nagu on selgitatud lehe artiklis PHP programmeerimiskeel sarjast umbes andmete salvestamine asjade Internetiga ühendatud seadmetest.
Kood CSS y JavaScript saab laadida (importida) koodina HTML selle asemel, et kirjutada otse dokumendi osana HTML. Selle eeliseks on võimalus samu dokumente mitmel lehel uuesti kasutada ja neid mugavamalt redigeerida; kuid võib-olla tekitab laadimine veidi kauem aega, olenevalt sellest, kas saate kasutada vahemälus sisalduvat koodi (laetud eelneval kasutamisel) või isegi CDN. Tootmisfaasis on triviaalne integreerida kogu PHP-st pärit kood, genereerides sisse ühe dokumendi HTML koos kogu teabega, kui valite selle alternatiivi. Selguse huvides leitakse kogu selle artiklisarja jooksul, et töötame eraldi dokumentidega.
Meid huvitavatel eesmärkidel kasutada seda graafikakonteinerina ja väga umbkaudu dokumendi struktuuri esimese taseme sisu HTML oleks:
|
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>
|
Esimene rida näitab veebibrauserile, et loetav dokument on sisse kirjutatud HTML, täpsemalt versioonis 5 (tuntud kui HTML5). Eelmised versioonid HTML, põhineb SGML (Standardne üldistatud märgistuskeel), sisaldas dokumendi tüübi määratlust (DTD), milles deklareeriti dokumendi kirjeldamiseks kasutatud reeglite tüüp.
Teine ja viimane rida sisaldavad koodi HTML direktiivide hulgas <html> y </html> mis toimivad vastavalt avamise ja sulgemisena. Direktiivid HTML Nad lisavad nime ja atribuudid märkide "vähem kui" ja "suurem kui" vahele, moodustades omamoodi "ägeda sulgude" märgid. Elemendid HTML kaasasoleval sisul on sulgemiskäskkiri, mis sisaldab nime ees kaldkriipsu nagu ka </html>.
Elementide omadused või atribuudid eraldatakse nimest ja üksteisest tühikutega ning neid väljendatakse lihttekstina või sagedamini tekstina (omaduse nimi), millele järgneb võrdusmärk ja väärtus jutumärkides. Koodiavamise käskkirja puhul HTML vara on kasutatud lang julgusega es, lang="es" näidata, et dokumendi tekst HTML kasutab hispaania keelt.
Pärast HTML-koodi avamiskäsku on lisatud kommentaar. Kommentaarid sisse HTML Need võivad hõivata mitu rida ja kasutada koodi avamärgina <!-- ja lõpetuseks -->
Kood HTML See koosneb kahest plokist: päisest <head> ja keha <body>. Esimene eesmärk on teavitada dokumendist endast, sealhulgas teavet selle kohta (meta-informatsioon) ja teise eesmärk on toetada dokumendi sisu.
Käskkirjas <body> sündmus on lisatud onload millega funktsiooni automaatselt täita JavaScript kui sisu on laaditud. See ressurss võimaldab teil käivitada koodi täitmine, mis määratleb graafilised objektid ja värskendab neid, kui serverist laaditakse teavet graafikat esindavate andurite oleku kohta.
Kogu metainfost, mida saab dokumendi päisesse lisada HTML, oleme eriti huvitatud sellest, mida kirjeldavad järgmised direktiivid:
-
<title>mis annab dokumendile pealkirja. Tavaliselt kuvatakse see brauseriaknas või vastaval vahekaardil ja aitab meil tuvastada selles sisalduvat graafikat. -
<charset>deklareerib dokumendi kodeerimiseks kasutatud märgistiku. See on eriti oluline "eriliste" märkide puhul, nagu eñes või aktsendid. -
<link>võimaldab luua seose dokumendi vahel HTML praegused ja muud välised. See aitab meil laaditabeli vormingus laadida CSS koos dokumendi välimusega. -
<script>sisaldab käivitatava koodiga skripti. Selle direktiivi abil laadime funktsioonid JavaScript millega graafikat genereerida või muuta 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>
|
Nagu on näha näites HTML ülal dokumendi nimi (ja tee, kui see on kohaldatav) koos stiiliga CSS tähistatakse atribuudiga href, samas kui koodi puhul JavaScript seda kasutatakse src. Mõlemad aktsiad type julgusega text/css y text/javascript vastavalt.
Dokumendi sisu osas elemendile vastav osa <body>, HTML5 See võimaldab teil luua konkreetseid struktuure veebilehe kõige sagedasemate komponentide jaoks, nagu jalus, külgmine osa või navigeerimisriba, kuid meile pakub huvi dokumendi kasutamine graafikakonteinerina. SVG on elemendid <div> mis toimivad sõltumatute plokkidena, mis võimaldavad määratleda hierarhilise struktuuri, pesastades mõnda <div> teiste sees.
|
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>
|
Eelmises näites kasutatakse elementi <div> mis sisaldab veel kahte. See näide tutvustab kahte väga olulist atribuuti koodi kasutamiseks. HTML: id mida kasutatakse elemendile kordumatu tunnuse määramiseks HTML ( <div>, antud juhul) ja class millega sellele määratakse kategooria, mille abil me välimust määrame. Kategooria, klass, ei pea olema ainulaadne, tegelikult seisneb suur osa selle tõhususest mitmes elemendis, millel on sama aspekt.
Element (või silt) <p> kasutatakse lõigu määratlemiseks, mis tavaliselt sisaldab teksti (kuigi sees HTML selles osas piiranguid ei ole). Rühmitamiseks lõigu sees (või a <div>, pole ka piiranguid) kasutatakse silti <span>. Selle elemendiga on võimalik näiteks lisada teksti lõiku, et anda sellele erinev välimus, näiteks allakriipsutatud või paksus kirjas.
Graafiliste omaduste määratlus ja üldiselt elemendiga seotud käitumine HTML Klassi omistamine toimub koodis CSS; dokumendi eelmise näite puhul aspecto.css.
Karakteristikute määramise optimeerimiseks CSS võimalik, et sama element HTML kuulub mitmesse klassi ja seega on neil nende poolt määratletud välimus või käitumine. Selle ülesande tegemiseks kirjutage erinevate klasside nimed, eraldades need komadega atribuudi paremale küljele. 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>
|
Eelmises näites element <div> mis on tuvastatud kui primer_hijo Kolm klassi on määratud: aspecto_de_hijo, aspecto_raro y tipografia_grande, mis peaksid koos määratlema elemendi välimuse ja käitumise. Nagu on selgitatud järgmises artiklis IoT anduri graafika veebiilme määratlemine CSS-iga, kui kasutate mitut klassi, kui mõni aspekti defineeriv atribuut on mõlemas määratletud, domineerib viimane, millele viidatakse.
Nagu näha, elemendid <div> Need võivad sisaldada muid elemente, sealhulgas muid <div>. Lihtsam juhtum oleks <div> mis sisaldas teksti. Välimus, mis määrab stiili CSS mõjutaks ka elemendis sisalduvat teksti.
Karakteristikute määramise optimeerimiseks CSS võimalik, et sama element HTML kuulub mitmesse klassi ja seega on neil nende poolt määratletud välimus või käitumine. Selle ülesande tegemiseks kirjutage erinevate klasside nimed, eraldades need komadega atribuudi paremale küljele. 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>
|
Eelmises näites olid kolm klassiga seotud <div> primer_hijo Need määraksid elemendi välimuse ja seda sisaldava teksti, näiteks muutes fondi, milles see on kirjutatud, suureks (kui selle nimega viimases klassis märgitud eesmärk on tõsi)
Alates versioonist 5 (HTML5) on võimalik graafikakood vormingusse lisada SVG koodi enda sees HTML veel ühe elemendina. Koodi seisukohalt HTML, sisu SVG see on element <svg> mis sisaldab erinevaid graafilisi elemente (jooned, ringid, ristkülikud...
|
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>
|
Kuigi on öeldud, et elementide graafilised omadused HTML on määratletud stiilis CSS ja on sellega seotud klassi kaudu, on võimalik ka osa neist kahel viisil otse elementidele määrata. Ühest küljest saab kinnisvara kasutada style ja määrake selle väärtuseks objekti erinevad graafilised omadused. Loogiliselt on eelistatav kasutada eelmainitud klassile aspekti määramise tehnikat, kuid selle võimalusega saab lisada elemendile väikese paranduse (väga konkreetne erand), ilma et peaks uut klassi looma.
Teisest küljest mõned elemendid HTML Need võimaldavad teil kasutada spetsiifilisi omadusi, mis määravad nende välimuse. Üldiselt, isegi kui need omadused on olemas, on eelistatav kasutada klasse, kuid kahjuks ei paku kõik elemendid seda alternatiivi, mõned eeldavad, et seotud klassile viitamise asemel näidatakse teatud väärtust otse nende spetsiifiliste omadustega. Üks seda tüüpi käitumise elemente on täpselt kood SVG, millele peame atribuutides määrama laiuse ja kõrguse protsendiväärtuse width y height, vastavalt klassi asemel.
Nagu on üksikasjalikumalt näha artikkel, mis räägib SVG-koodist, pakutud lihtsa meetodi kasutamiseks on soovitatav graafiku mõõtmeid käsitleda protsentides. Objekti kogusuuruse puhul, märkides laiuse ja kõrguse väärtuses 100%, määrab konteineri lõplikud mõõtmed ( <div> koos id="dibujo", eelmises näites)
Graafiku erinevate komponentide puhul SVG (jooned, ringid, ristkülikud...) sisalduvad alas, mille mõõtmed on 100 × 100 (ükskõik milline ühik) ja laienevad ristkülikukujuliselt ilma proportsiooni säilitamata. Omadused viewBox y preserveAspectRatio elemendi SVG Nad vastutavad nende väärtuste kehtestamise eest. esimesel juhul ristkülikukujulise vaatega, mis läheb koordinaatpunktist (0,0) koordinaatpunkti (100,100) ja mida väljendatakse kui "0 0 100 100" ja teises väärtusega 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>
|
Kõigi ülalnimetatutega saate nüüd määratleda täieliku koodi, mis toimiks graafikakonteinerina. SVG loodud või muudetud JavaScript. Allolev näide sisaldab nelja vormingut kasutavat graafikaplokki HTML esindusettepanekust, mida kavatseme kasutada.
|
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 –>
|
Allpool on näha, kuidas eelmine kood stiiliga vormindatuna välja näeks CSS vastav, koos genereerimine JavaScript graafika SVG IoT-ga ühendatud andurite salvestatud andmete serveri lugemistega. Välja arvatud see, et andmeid ei laadita serverist, vaid need genereeritakse juhuslikult kliendis (teie brauseris), kasutatakse ülejäänud koodi selles artiklite sarjas määratletud ettepanekus.
Selle sarja järgmine artikkel selgitab kuidas defineerida CSS-stiile et anda välimus HTML-koodile, mis toimib graafika konteinerina SVG millega näidata asjade internetti (IoT) ühendatud andurite olekut.
1 kommentaar