Grafice de stare ale senzorilor conectați la Internet of Things IoT
Unul dintre avantajele conectării unei rețele de senzori la Internetul lucrurilor este posibilitatea de a analiza datele obținute. Reprezentând grafic aceste informații, o persoană (spre deosebire de un program) poate înțelege mai intuitiv sensul cantităților monitorizate, de exemplu, comparându-le între ele sau urmărindu-le evoluția în timp.
Acest articol începe o serie, formată din patru părți, care explică o propunere simplă de reprezentare grafică a datelor obținute de senzori conectați la IoT. Cu aceeași filozofie ca și în alte articole, metoda propusă este perfect funcțională, deși obiectivul principal este didactic. Ca profilul tehnic al publicului către care blog polaridad.es, iar acest text este despre electronică și nu despre dezvoltare web, fiecare dintre secțiuni servește ca o introducere în limbajele sau tehnologia utilizată: HTML, CSS, SVG y JavaScript.
Articolele din seria anterioară despre cum să stocați datele obținute de dispozitivele conectate la Internet of Things (IoT) Aceștia au încheiat prin a explica cum se poate accesa informațiile stocate în bazele de date. În exemplele seriei, pentru a ușura procesul, s-a folosit ca intermediar un web server care era responsabil de primirea datelor prin solicitări POST ale protocolului HTTP, stocarea lor într-o bază de date și afișarea lor pe o pagină web.
Deși principalul dezavantaj al acestui sistem este performanța (care ar putea fi atenuată cu alternative precum Node.js și MongoDB, care vor fi explicate în articolele viitoare), în schimb oferă două mari avantaje: implementarea sa este foarte simplă (inclusiv disponibilitatea). de servicii publice) și poate afișa datele într-un browser, adică nu are nevoie de aplicații specifice (cum ar fi o aplicație pentru un dispozitiv mobil) pentru a prezenta informațiile stocate care ar reprezenta starea istorică a dispozitivelor conectate la internetul Lucruri.
Exploatând avantajul de a putea prezenta cu ușurință pe o pagină web informațiile care au fost stocate cu acest sistem despre starea dispozitivelor conectate la IoT, acest articol explică modul de afișare grafică a acestor informații folosind formatul SVG de la JavaScript pentru a genera dinamic o pagină web în HTML.
Sunt multe librării JavaScript cu care se rezolvă prezentarea grafică a datelor. Aceste articole nu intenționează să dezvolte altul; Scopul acestui text este de a înțelege procesul și de a putea dezvolta propriile implementări; un obiectiv didactic cât şi unul productiv. Dacă sunteți interesat să utilizați un produs în loc să îl dezvoltați singur, vă recomand să aruncați o privire la unele dintre bibliotecile excelente pentru generarea de grafică cu JavaScript cu licențe gratuite ca Charts.js, Diagramele superioare, Instrumente Google Chart, Epocă, Raphaël, grafic (bazat pe Raphaël), dc.js, Chartist.js, D3.js (recomandarea mea), C3.js (bazat pe D3.js), NVD3 (grafică reutilizabilă pentru D3.js) ...
Structura documentului HTML cu grafică SVG
În propunerea acestui articol de a prezenta grafic datele senzorilor, pagina web pe care sunt afișate este formată din:
- în care este scris documentul care servește drept container HTML,
- aspectul paginii este definit cu cod CSS,
- desenarea graficului se face folosind limbajul SVG y
- Citirea datelor de pe server și afișarea graficelor sunt programate în JavaScript
Toate elementele, în special codul HTML a paginii, poate fi generat pe server cu PHP așa cum este explicat în articolul despre limbaj de programare PHP din seria despre stocarea datelor de pe dispozitivele conectate la Internetul lucrurilor.
Codul CSS y JavaScript poate fi încărcat (importat) în cod HTML în loc să fie scris direct ca parte a documentului HTML. Acest lucru are avantajul de a putea reutiliza aceleași documente pe mai multe pagini și de a le putea edita mai confortabil; dar poate inconvenientul de a dura ceva mai mult pentru încărcare, în funcție de faptul că poți folosi codul conținut în cache (încărcat în utilizarea anterioară) sau chiar un CDN. În faza de producție este banal să integrezi tot codul din PHP, generând un singur document în HTML cu toate informațiile dacă alegeți această alternativă. Pe parcursul acestei serii de articole, pentru claritate, se consideră că lucrăm cu documente separate.
În scopurile care ne interesează, să-l folosim ca container grafic, și foarte aproximativ, conținutul primului nivel al structurii unui document HTML ar putea:
|
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>
|
Prima linie servește pentru a indica browserului web că documentul pe care îl citește este scris HTML, în special în versiunea 5 (cunoscută ca HTML5). Versiunile anterioare ale HTML, bazat pe SGML (Standard Generalized Markup Language), a inclus o definiție a tipului de document (DTD) în care s-a declarat tipul de reguli utilizate în limba pentru a descrie documentul.
A doua și ultima linie conțin codul HTML dintre directive <html> y </html> care funcţionează ca deschidere şi respectiv închidere. Directivele HTML Ele includ numele și atributele între semnele „mai puțin decât” și „mai mare decât” formând un fel de semne de „paranteză acută”. Elementele HTML care includ conținutul au o directivă de închidere care include bara oblică în fața numelui ca în </html>.
Proprietățile sau atributele elementelor sunt separate prin spații de nume și unele de altele și sunt exprimate ca text simplu sau, mai frecvent, ca text (numele proprietății) urmat de un semn egal și o valoare cuprinsă între ghilimele. În cazul directivei de deschidere a codului HTML proprietatea a fost folosită lang cu valoarea es, lang="es" pentru a indica că textul documentului HTML folosește limba spaniolă.
Un comentariu a fost inclus după directiva de deschidere a codului HTML. Comentariile din HTML Ei pot ocupa mai multe linii și pot folosi codul ca semn de deschidere <!-- și ca închidere -->
Codul HTML Este alcătuit din două blocuri: antetul <head> si corpul <body>. Primul are ca scop informarea despre documentul în sine, inclusiv informații despre acesta (meta-informații), iar al doilea este să susțină conținutul documentului.
În directivă <body> a fost inclus un eveniment onload cu care să execute automat o funcție JavaScript odată ce conținutul a fost încărcat. Această resursă vă permite să începeți execuția codului care va defini obiectele grafice și să le actualizați pe măsură ce se încarcă informații de pe server despre starea senzorilor care reprezintă aceste grafice.
Dintre toate metainformațiile care pot fi incluse în antetul documentului HTML, ne interesează în mod deosebit cunoașterea celui descris de următoarele directive:
-
<title>care serveşte la darea unui titlu documentului. Acesta va apărea în mod normal în fereastra browserului sau în fila corespunzătoare și ne va ajuta să identificăm elementele grafice pe care le conține. -
<charset>declară setul de caractere folosit pentru a codifica documentul. Este deosebit de important pentru semnele „speciale” precum eñes sau accente. -
<link>permite stabilirea unei relaţii între document HTML curente și altele externe. Ne va ajuta să încărcăm foaia de stil în format CSS cu aspectul documentului. -
<script>conține un script cu cod executabil. Folosind această directivă vom încărca funcțiile JavaScript cu care să generați sau să modificați grafica 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>
|
După cum se poate vedea în exemplul de HTML mai sus, numele (și calea, dacă este cazul) documentului cu stilul CSS este indicat cu atributul href, în timp ce în cazul codului JavaScript este folosit src. Ambele actiuni type cu valoarea text/css y text/javascript respectiv.
În ceea ce privește conținutul documentului, partea care corespunde elementului <body>, HTML5 Vă permite să creați structuri specifice pentru cele mai frecvente componente dintr-o pagină web precum un subsol, o secțiune laterală sau o bară de navigare, dar ceea ce ne interesează este să folosim documentul ca container grafic. SVG sunt elementele <div> care funcţionează ca blocuri independente care permit definirea unei structuri ierarhice prin imbricarea unora <div> în cadrul altora.
|
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>
|
În exemplul precedent este folosit un element <div> care contine alte doua. Acest exemplu introduce două proprietăți foarte importante pentru utilizarea pe care dorim să o facem codului. HTML: id care este folosit pentru a atribui un identificator unic unui element HTML (A <div>, în acest caz) și class cu care i se atribuie o categorie pe care o vom folosi pentru stabilirea aspectului. Categoria, clasa, nu trebuie să fie unică, de fapt, o mare parte din eficacitatea sa constă în mai multe elemente care împărtășesc același aspect.
Elementul (sau eticheta) <p> servește la definirea unui paragraf care va conține în mod normal text (deși în HTML nu există nicio limitare în acest sens). Pentru a face grupări în cadrul unui paragraf (sau a <div>, nu există nici limitări) se utilizează eticheta <span>. Cu acest element este posibil, de exemplu, să includeți text într-un paragraf pentru a-i oferi un aspect diferit, cum ar fi subliniat sau aldine.
Definirea caracteristicilor grafice și, în general, a comportamentului care este asociat unui element HTML Atribuirea unei clase se face în cod CSS; în cazul exemplului anterior din document aspecto.css.
Pentru a optimiza atribuirea caracteristicilor CSS este posibil ca același element HTML aparține mai multor clase și are astfel aspectul sau comportamentul definit de acestea. Pentru a face această atribuire, scrieți numele diferitelor clase, separându-le prin virgule în dreapta proprietății. 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>
|
În exemplul anterior, elementul <div> care a fost identificat ca primer_hijo Au fost repartizate trei clase: aspecto_de_hijo, aspecto_raro y tipografia_grande, care ar trebui să definească împreună aspectul și comportamentul elementului. După cum se explică în următorul articol despre Definirea aspectului web al senzorului IoT cu CSS, când se utilizează mai multe clase, dacă oricare dintre proprietățile care definesc aspectul sunt definite în ambele, prevalează ultima la care se face referire.
După cum s-a văzut, elementele <div> Ele pot conține și alte elemente, inclusiv altele <div>. Un caz mai simplu ar fi <div> care conținea text. Aspectul care definește stilul CSS ar afecta și textul conținut în element.
Pentru a optimiza atribuirea caracteristicilor CSS este posibil ca același element HTML aparține mai multor clase și are astfel aspectul sau comportamentul definit de acestea. Pentru a face această atribuire, scrieți numele diferitelor clase, separându-le prin virgule în dreapta proprietății. 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>
|
În exemplul anterior, cele trei clase asociate cu <div> primer_hijo Acestea ar defini aspectul elementului și textul care îl conține, de exemplu, făcând fontul în care este scris mare (dacă scopul indicat de numele său în ultima clasă este adevărat)
Din versiunea 5 (HTML5) este posibilă includerea codului grafic în format SVG în cadrul codului însuși HTML ca încă un element. Din punct de vedere al codului HTML, continutul SVG este un element <svg> care contine diferitele elemente grafice (linii, cercuri, dreptunghiuri...
|
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>
|
Deşi s-a spus că caracteristicile grafice ale elementelor HTML sunt definite într-un stil CSS și sunt asociate cu acesta printr-o clasă, este de asemenea posibilă atribuirea unora dintre ele direct elementelor în două moduri. Pe de o parte, puteți folosi proprietatea style și atribuiți diferitele caracteristici grafice ale obiectului ca valoare. În mod logic, este de preferat să folosiți tehnica menționată mai sus de atribuire a aspectului unei clase, dar cu această posibilitate puteți adăuga o mică corecție unui element (o excepție foarte specială) fără a fi nevoie să creați o nouă clasă.
Pe de altă parte, unele elemente HTML Acestea vă permit să utilizați proprietăți specifice care le definesc aspectul. În general, chiar dacă aceste proprietăți există, este de preferat să folosiți clase dar, din păcate, nu toate elementele oferă această alternativă, unii se așteaptă ca o anumită valoare să fie indicată direct cu acele proprietăți specifice în loc să se refere la clasa asociată. Unul dintre elementele care au acest tip de comportament este tocmai codul SVG, căruia trebuie să îi atribuim valoarea procentuală a lățimii și înălțimii din proprietăți width y height, respectiv, în locul clasei.
După cum se va vedea mai detaliat în articol care vorbește despre codul SVG, pentru a utiliza metoda simplă propusă, este indicat să se considere dimensiunile graficului ca procente. În cazul mărimii totale a obiectului, prin indicarea 100% în valoarea lățimii și înălțimii, containerul va fi cel care stabilește dimensiunile finale ( <div> cu id="dibujo", în exemplul anterior)
În cazul diferitelor componente ale graficului SVG (linii, cercuri, dreptunghiuri...), sunt incluse într-o zonă care măsoară 100×100 (orice unitate) și se extind în formă dreptunghiulară fără a păstra proporția. Proprietatile viewBox y preserveAspectRatio a elementului SVG Ei sunt responsabili pentru stabilirea acestor valori. în primul caz cu o vedere dreptunghiulară care merge de la punctul de coordonate (0,0) la punctul de coordonată (100,100) și se exprimă ca "0 0 100 100" iar în al doilea cu valoarea 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>
|
Cu toate cele de mai sus, acum puteți defini un cod complet care să servească drept container grafic. SVG generat sau modificat din JavaScript. Exemplul de mai jos conține patru blocuri grafice care utilizează formatul HTML a propunerii de reprezentare pe care urmează să o folosim.
|
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 –>
|
Mai jos puteți vedea cum ar arăta codul anterior, formatat cu stilul CSS corespunzator, generand cu JavaScript grafica SVG cu citiri de server ale datelor stocate de senzorii conectați la IoT. Cu excepția faptului că datele nu sunt încărcate de pe server, ci sunt generate aleator în client (browserul dvs.), restul codului este ceea ce va fi folosit în propunerea definită în această serie de articole.
Următorul articol din această serie explică cum să definești stilurile CSS pentru a da aspect codului HTML care acționează ca un container pentru grafică SVG cu care să reprezinte starea senzorilor conectați la Internet of Things (IoT).
1 comentariu