Mga status graph ng mga sensor na konektado sa Internet of Things IoT
Isa sa mga pakinabang ng pagkonekta ng isang sensor network sa Internet of Things ay ang kakayahang pag-aralan ang data na nakuha. Sa pamamagitan ng graphic na pagpapakita ng impormasyong ito, ang isang tao (kumpara sa isang programa) ay mas madaling maunawaan ang kahulugan ng mga sinusubaybayang dami, halimbawa, sa pamamagitan ng paghahambing ng mga ito sa isa't isa o pagsunod sa kanilang pag-unlad sa paglipas ng panahon.
Nagsisimula ang artikulong ito ng isang serye, na binubuo ng apat na bahagi, na nagpapaliwanag ng isang simpleng panukala para sa graphical na representasyon ng data na nakuha ng mga sensor na konektado sa IoT. Sa parehong pilosopiya tulad ng sa ibang mga artikulo, ang iminungkahing pamamaraan ay ganap na gumagana kahit na ang pangunahing layunin ay didaktiko. Bilang teknikal na profile ng publiko kung saan ang blog polaridad.es, at ang tekstong ito ay tungkol sa electronics at hindi web development, bawat isa sa mga seksyon ay nagsisilbing panimula sa mga wika o teknolohiyang ginamit: HTML, CSS, SVG y JavaScript.
Ang mga artikulo sa nakaraang serye sa paano mag-imbak ng data na nakuha ng mga device na nakakonekta sa Internet of Things (IoT) Nagtapos sila sa pamamagitan ng pagpapaliwanag kung paano i-access ang impormasyong nakaimbak sa mga database. Sa mga halimbawa ng serye, upang gawing mas madali ang proseso, ginamit ang isang web server bilang isang tagapamagitan na responsable para sa pagtanggap ng data sa pamamagitan ng mga kahilingan ng POST ng HTTP protocol, pag-iimbak nito sa isang database at pagpapakita nito sa isang web page.
Bagama't ang pangunahing disbentaha ng sistemang ito ay ang pagganap (na maaaring maibsan sa mga alternatibo tulad ng Node.js at MongoDB, na ipapaliwanag sa mga artikulo sa hinaharap), bilang kapalit ay nagbibigay ito ng dalawang magagandang pakinabang: ang pagpapatupad nito ay napakasimple (kabilang ang pagkakaroon ng mga serbisyong pampubliko) at maaaring magpakita ng data sa isang browser, ibig sabihin, hindi nito kailangan ng mga partikular na application (tulad ng isang app para sa isang mobile device) upang ipakita ang nakaimbak na impormasyon na kumakatawan sa makasaysayang katayuan ng mga device na konektado sa Internet ng Mga bagay.
Pinagsasamantalahan ang kalamangan ng pagiging madaling maipakita sa isang web page ang impormasyong nakaimbak sa system na ito tungkol sa katayuan ng mga device na nakakonekta sa IoT, ipinapaliwanag ng artikulong ito kung paano graphical na ipakita ang impormasyong ito gamit ang format SVG mula sa JavaScript upang dynamic na bumuo ng isang web page sa HTML.
Maraming bookstores JavaScript na kung saan upang malutas ang graphical na presentasyon ng data. Ang mga artikulong ito ay hindi naglalayong bumuo ng isa pa; Ang layunin ng tekstong ito ay upang maunawaan ang proseso at makapagbuo ng sarili mong mga pagpapatupad; isang didactic na layunin pati na rin ang isang produktibo. Kung interesado ka sa paggamit ng isang produkto sa halip na pagbuo nito sa iyong sarili, inirerekumenda ko na tingnan mo ang ilan sa mga mahuhusay na aklatan para sa pagbuo ng mga graphics na may JavaScript na may mga libreng lisensya tulad ng Charts.js, Highcharts, Google Chart Tools, Kapanahunan, Raphael, tsart (batay sa Raphael), dc.js, Chartist.js, D3.js (ang aking rekomendasyon), C3.js (batay sa D3.js), NVD3 (magagamit muli ang mga graphics para sa D3.js) ...
HTML na istraktura ng dokumento na may SVG graphics
Sa panukala ng artikulong ito na graphical na ipakita ang data ng sensor, ang web page kung saan ito ipinapakita ay binubuo ng:
- nakasulat ang dokumentong nagsisilbing lalagyan HTML,
- ang hitsura ng pahina ay tinukoy gamit ang code CSS,
- ang pagguhit ng graph ay ginagawa gamit ang wika SVG y
- Naka-program ang pagbabasa ng data mula sa server at pagpapakita ng mga graph JavaScript
Lahat ng elemento, lalo na ang code HTML ng page, ay maaaring mabuo sa server gamit ang PHP gaya ng ipinaliwanag sa artikulo sa PHP programming language mula sa serye tungkol sa imbakan ng data mula sa mga device na konektado sa Internet of Things.
Ang code CSS y JavaScript maaaring i-load (na-import) sa code HTML sa halip na direktang isulat bilang bahagi ng dokumento HTML. Ito ay may bentahe ng kakayahang magamit muli ang parehong mga dokumento sa ilang mga pahina at ma-edit ang mga ito nang mas kumportable; ngunit marahil ang abala ng medyo matagal na pag-load depende sa kung magagamit mo ang code na nilalaman sa cache (na-load sa nakaraang paggamit) o kahit isang CDN. Sa yugto ng produksyon, mahalaga na isama ang lahat ng code mula sa PHP, na bumubuo ng isang dokumento HTML kasama ang lahat ng impormasyon kung pipiliin mo ang alternatibong ito. Sa buong serye ng mga artikulong ito, para sa kalinawan, itinuturing na nagtatrabaho kami sa magkahiwalay na mga dokumento.
Para sa mga layuning interesado kami, gamitin ito bilang isang lalagyan ng graphics, at halos, ang nilalaman ng unang antas ng istraktura ng isang dokumento HTML ay:
|
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>
|
Ang unang linya ay nagsisilbing ipahiwatig sa web browser na ang dokumentong binabasa nito ay nakasulat HTML, partikular sa bersyon 5 (kilala bilang HTML5). Mga nakaraang bersyon ng HTML, batay sa SGML (Standard Generalized Markup Language), may kasamang kahulugan ng uri ng dokumento (DTD) kung saan idineklara ang uri ng mga panuntunang ginamit sa wika upang ilarawan ang dokumento.
Ang pangalawa at huling linya ay naglalaman ng code HTML kabilang sa mga direktiba <html> y </html> na gumaganap bilang pagbubukas at pagsasara ayon sa pagkakabanggit. Ang mga direktiba HTML Isinama nila ang pangalan at mga katangian sa pagitan ng mga palatandaan na "mas mababa sa" at "mas malaki kaysa sa" na bumubuo ng isang uri ng mga palatandaan na "acute parenthesis". Ang mga elemento HTML ang nakalakip na nilalaman na iyon ay may pangwakas na direktiba na kinabibilangan ng slash sa harap ng pangalan tulad ng sa </html>.
Ang mga katangian o katangian ng mga elemento ay pinaghihiwalay ng mga puwang mula sa pangalan at mula sa isa't isa at ipinahayag bilang plain text o, mas madalas, bilang text (ang pangalan ng property) na sinusundan ng isang pantay na tanda at isang halaga na nakapaloob sa mga panipi. Sa kaso ng direktiba sa pagbubukas ng code HTML nagamit na ang ari-arian lang sa tapang es, lang="es" upang ipahiwatig na ang teksto ng dokumento HTML gumagamit ng wikang Espanyol.
Isang komento ang isinama pagkatapos ng pambungad na direktiba ng HTML code. Ang mga komento sa HTML Maaari nilang sakupin ang ilang linya at gamitin ang code bilang pambungad na tanda <!-- at bilang pagsasara -->
Ang code HTML Binubuo ito ng dalawang bloke: ang header <head> at ang katawan <body>. Ang una ay naglalayong ipaalam ang tungkol sa mismong dokumento, kabilang ang impormasyon tungkol dito (meta-impormasyon) at ang pangalawa ay suportahan ang nilalaman ng dokumento.
Sa direktiba <body> may kasamang kaganapan onload kung saan awtomatikong maisagawa ang isang function JavaScript kapag na-load na ang nilalaman. Binibigyang-daan ka ng mapagkukunang ito na simulan ang pagpapatupad ng code na tutukuyin ang mga graphic na bagay at i-update ang mga ito habang nilo-load ang impormasyon mula sa server tungkol sa estado ng mga sensor na kumakatawan sa mga graphics na ito.
Sa lahat ng metainformation na maaaring isama sa loob ng header ng dokumento HTML, lalo kaming interesadong malaman ang inilalarawan ng mga sumusunod na direktiba:
-
<title>na nagsisilbing pagbibigay ng pamagat sa dokumento. Karaniwan itong lalabas sa window ng browser o sa kaukulang tab at tutulong sa amin na matukoy ang mga graphics na nilalaman nito. -
<charset>ipinapahayag ang set ng character na ginamit upang i-encode ang dokumento. Ito ay lalong mahalaga para sa mga "espesyal" na mga palatandaan tulad ng mga eñes o accent. -
<link>nagbibigay-daan sa pagtatatag ng ugnayan sa pagitan ng dokumento HTML kasalukuyan at iba pang panlabas. Makakatulong ito sa amin na i-load ang style sheet sa format CSS kasama ang hitsura ng dokumento. -
<script>naglalaman ng script na may executable code. Gamit ang direktiba na ito ilo-load namin ang mga function JavaScript kung saan bubuo o baguhin ang mga graphics 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>
|
Tulad ng makikita sa halimbawa ng HTML sa itaas, ang pangalan (at path, kung naaangkop) ng dokumentong may istilo CSS ay ipinahiwatig kasama ng katangian href, habang sa kaso ng code JavaScript ginamit na src. Parehong nagbabahagi ng pagmamay-ari type sa tapang text/css y text/javascript ayon sa pagkakabanggit.
Sa paggalang sa nilalaman ng dokumento, ang bahagi na tumutugma sa elemento <body>, HTML5 Binibigyang-daan ka nitong lumikha ng mga partikular na istruktura para sa pinakamadalas na bahagi sa isang web page gaya ng footer, side section o navigation bar, ngunit ang kinaiinteresan namin ay gamitin ang dokumento bilang isang lalagyan ng graphics. SVG ay ang mga elemento <div> na gumaganap bilang mga independiyenteng bloke na nagbibigay-daan sa pagtukoy ng isang hierarchical na istraktura sa pamamagitan ng paglalagay ng ilan <div> sa loob ng iba.
|
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>
|
Sa nakaraang halimbawa isang elemento ang ginamit <div> na naglalaman ng dalawa pang iba. Ang halimbawang ito ay nagpapakilala ng dalawang napakahalagang katangian para sa paggamit na gusto nating gawin ng code. HTML: id na ginagamit upang magtalaga ng natatanging identifier sa isang elemento HTML (a <div>, sa kasong ito) at class kung saan ito ay itinalaga ng isang kategorya na gagamitin namin upang itatag ang hitsura. Ang kategorya, ang klase, ay hindi kailangang maging natatangi, sa katunayan, ang karamihan sa pagiging epektibo nito ay nakasalalay sa ilang mga elemento na nagbabahagi ng parehong aspeto.
Ang elemento (o tag) <p> nagsisilbing tukuyin ang isang talata na karaniwang naglalaman ng teksto (bagaman sa HTML walang limitasyon sa bagay na ito). Upang gumawa ng mga pagpapangkat sa loob ng isang talata (o a <div>, wala ring limitasyon) ginagamit ang tag <span>. Sa elementong ito, posible, halimbawa, na magsama ng teksto sa loob ng isang talata upang bigyan ito ng ibang hitsura gaya ng may salungguhit o naka-bold.
Ang kahulugan ng mga graphic na katangian at sa pangkalahatan, ang pag-uugali na nauugnay sa isang elemento HTML Ang pag-attribute sa isang klase ay ginagawa sa code CSS; sa kaso ng nakaraang halimbawa sa dokumento aspecto.css.
Upang ma-optimize ang pagtatalaga ng mga katangian CSS ito ay posible na ang parehong elemento HTML nabibilang sa ilang mga klase at sa gayon ay may hitsura o pag-uugali na tinukoy ng mga ito. Upang gawin ang takdang-aralin na ito, isulat ang mga pangalan ng iba't ibang klase, na pinaghihiwalay ang mga ito sa pamamagitan ng mga kuwit sa kanan ng ari-arian. 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>
|
Sa nakaraang halimbawa, ang elemento <div> na kinilala bilang primer_hijo Tatlong klase ang itinalaga: aspecto_de_hijo, aspecto_raro y tipografia_grande, na dapat na magkasamang tukuyin ang hitsura at pag-uugali ng elemento. Gaya ng ipinaliwanag sa susunod na artikulo sa Pagtukoy sa IoT Sensor Graphics Web Appearance gamit ang CSS, kapag gumagamit ng maraming klase, kung ang alinman sa mga katangian na tumutukoy sa aspeto ay tinukoy sa pareho, ang huling na-refer ang mangingibabaw.
Tulad ng nakita, ang mga elemento <div> Maaaring naglalaman ang mga ito ng iba pang elemento, kabilang ang iba pa <div>. Ang isang mas simpleng kaso ay magiging <div> na naglalaman ng teksto. Ang hitsura na tumutukoy sa estilo CSS ay makakaapekto rin sa tekstong nakapaloob sa elemento.
Upang ma-optimize ang pagtatalaga ng mga katangian CSS ito ay posible na ang parehong elemento HTML nabibilang sa ilang mga klase at sa gayon ay may hitsura o pag-uugali na tinukoy ng mga ito. Upang gawin ang takdang-aralin na ito, isulat ang mga pangalan ng iba't ibang klase, na pinaghihiwalay ang mga ito sa pamamagitan ng mga kuwit sa kanan ng ari-arian. 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>
|
Sa nakaraang halimbawa, ang tatlong klase na nauugnay sa <div> primer_hijo Tutukuyin nila ang hitsura ng elemento at ang tekstong naglalaman nito, halimbawa, ginagawang malaki ang font kung saan ito nakasulat (kung ang layunin na ipinahiwatig ng pangalan nito sa huling klase ay totoo)
Mula noong bersyon 5 (HTML5) posibleng isama ang graphics code sa format SVG sa loob mismo ng code HTML bilang isa pang elemento. Mula sa punto ng view ng code HTML, ang nilalaman SVG ito ay isang elemento <svg> na naglalaman ng iba't ibang mga graphic na elemento (mga linya, bilog, parihaba...
|
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>
|
Kahit na sinabi na ang mga graphic na katangian ng mga elemento HTML ay tinukoy sa isang istilo CSS at nauugnay dito sa pamamagitan ng isang klase, posible ring italaga ang ilan sa mga ito nang direkta sa mga elemento sa dalawang paraan. Sa isang banda, maaari mong gamitin ang ari-arian style at italaga ang iba't ibang graphic na katangian ng bagay bilang halaga nito. Sa lohikal na paraan, mas mainam na gamitin ang nabanggit na pamamaraan ng pagtatalaga ng aspeto sa isang klase, ngunit sa posibilidad na ito maaari kang magdagdag ng isang maliit na pagwawasto sa isang elemento (isang napaka-partikular na pagbubukod) nang hindi kinakailangang lumikha ng isang bagong klase.
Sa kabilang banda, ang ilang mga elemento HTML Pinapayagan ka nilang gumamit ng mga partikular na katangian na tumutukoy sa kanilang hitsura. Sa pangkalahatan, kahit na umiiral ang mga katangiang ito, mas mainam na gumamit ng mga klase ngunit, sa kasamaang-palad, hindi lahat ng elemento ay nag-aalok ng alternatibong ito, inaasahan ng ilan na direktang ipahiwatig ang isang partikular na halaga kasama ang mga partikular na katangiang iyon sa halip na tumukoy sa nauugnay na klase. Ang isa sa mga elemento na may ganitong uri ng pag-uugali ay tiyak ang code SVG, kung saan dapat nating italaga ang porsyento na halaga ng lapad at taas sa mga katangian width y height, ayon sa pagkakabanggit, sa halip na ang klase.
Tulad ng makikita nang mas detalyado sa artikulo na nagsasalita tungkol sa SVG code, upang magamit ang simpleng paraan na iminungkahi, ipinapayong isaalang-alang ang mga sukat ng graph bilang mga porsyento. Sa kaso ng kabuuang sukat ng bagay, sa pamamagitan ng pagpapakita ng 100% sa lapad at taas na halaga, ito ang magiging lalagyan na nagtatakda ng mga huling sukat (ang <div> sa id="dibujo", sa nakaraang halimbawa)
Sa kaso ng iba't ibang bahagi ng graph SVG (mga linya, bilog, parihaba...), ay kasama sa isang lugar na may sukat na 100×100 (anumang unit) at lumalawak sa isang hugis-parihaba na hugis nang hindi pinapanatili ang proporsyon. Ang mga ari-arian viewBox y preserveAspectRatio ng elemento SVG Responsable sila sa pagtatatag ng mga pagpapahalagang ito. sa unang kaso na may isang hugis-parihaba na view na napupunta mula sa coordinate point (0,0) hanggang sa coordinate point (100,100) at ipinahayag bilang "0 0 100 100" at sa pangalawa na may halaga 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>
|
Sa lahat ng nasa itaas, maaari mo na ngayong tukuyin ang isang kumpletong code na magsisilbing isang lalagyan ng graphics. SVG nabuo o binago mula sa JavaScript. Ang halimbawa sa ibaba ay naglalaman ng apat na graphics block na gumagamit ng format HTML ng panukalang representasyon na ating gagamitin.
|
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 –>
|
Sa ibaba makikita mo kung ano ang magiging hitsura ng nakaraang code, na na-format gamit ang istilo CSS naaayon, bumubuo ng JavaScript ang mga graphics SVG na may mga pagbabasa ng server ng data na inimbak ng mga sensor na konektado sa IoT. Maliban na ang data ay hindi nilo-load mula sa server ngunit random na nabubuo sa client (iyong browser), ang natitirang code ay ang gagamitin sa panukalang tinukoy sa seryeng ito ng mga artikulo.
Ang susunod na artikulo sa seryeng ito ay nagpapaliwanag paano tukuyin ang mga istilo ng CSS upang magbigay ng hitsura sa HTML code na gumaganap bilang isang lalagyan para sa mga graphics SVG kung saan kinakatawan ang estado ng mga sensor na konektado sa Internet of Things (IoT).
1 puna