A dolgok internetéhez kapcsolódó érzékelők állapotdiagramjai
A szenzorhálózatnak a dolgok internetéhez való csatlakoztatásának egyik előnye a kapott adatok elemzése. Ennek az információnak a grafikus ábrázolásával az ember (szemben a programmal) intuitívebben megértheti a megfigyelt mennyiségek jelentését, például összehasonlítva azokat egymással vagy nyomon követheti fejlődésüket az idő múlásával.
Ez a cikk egy négy részből álló sorozatot indít, amely egy egyszerű javaslatot magyaráz meg az IoT-hez csatlakoztatott érzékelők által kapott adatok grafikus ábrázolására. Ugyanazzal a filozófiával, mint más cikkekben, a javasolt módszer tökéletesen működőképes, bár a fő cél didaktikai. Mint a nyilvánosság műszaki profilja, amelyhez a blog polaridad.es, és ez a szöveg az elektronikáról szól, nem pedig a webfejlesztésről, az egyes részek bevezetőként szolgálnak a használt nyelvekhez vagy technológiához: HTML, CSS, SVG y JavaScript.
Az előző sorozat cikkei a hogyan lehet tárolni a tárgyak internetéhez (IoT) csatlakoztatott eszközök által szerzett adatokat Végül elmagyarázták, hogyan lehet hozzáférni az adatbázisokban tárolt információkhoz. A sorozat példáiban a folyamat megkönnyítése érdekében egy webszervert használtunk közvetítőként, amely a HTTP protokoll POST kérésein keresztül az adatok fogadásáért, adatbázisban való tárolásáért és weboldalon való megjelenítéséért volt felelős.
Bár ennek a rendszernek a fő hátránya a teljesítmény (amelyet a későbbi cikkekben ismertetett Node.js és MongoDB alternatívákkal lehetne enyhíteni), cserébe két nagy előnye van: megvalósítása nagyon egyszerű (beleértve a rendelkezésre állást is). szolgáltatások nyilvánosak) és böngészőben is megjelenítheti az adatokat, vagyis nincs szüksége speciális alkalmazásokra (például mobileszközre való alkalmazásra) a tárolt információk megjelenítéséhez, amelyek a Dolgok.
Kihasználva azt az előnyt, hogy könnyen megjeleníthetők egy weboldalon a rendszerrel tárolt információk az IoT-hez csatlakoztatott eszközök állapotáról, ez a cikk elmagyarázza, hogyan jelenítheti meg grafikusan ezeket az információkat a formátum használatával. SVG -tól JavaScript weboldal dinamikus létrehozásához HTML.
Sok könyvesbolt van JavaScript amellyel megoldható az adatok grafikus megjelenítése. Ezek a cikkek nem kívánnak újabbat kidolgozni; Ennek a szövegnek az a célja, hogy megértse a folyamatot, és képes legyen saját megvalósításokat kidolgozni; egy didaktikai cél, valamint egy produktív. Ha érdekli egy termék használata ahelyett, hogy saját maga fejlesztené azt, akkor azt javaslom, hogy tekintsen meg néhány kiváló programkönyvtárat, amelyek segítségével grafikát készíthet. JavaScript ingyenes licencekkel, mint pl Charts.js, Highcharts, Google Chart Tools, Korszak, Raphaël, diagram (alapján Raphaël), dc.js, Chartist.js, D3.js (ajánlom), C3.js (alapján D3.js), NVD3 (újrafelhasználható grafika ehhez D3.js) ...
HTML dokumentumstruktúra SVG grafikával
Ebben a cikkben az érzékelőadatok grafikus megjelenítésére vonatkozó javaslatban a weboldal, amelyen ezek megjelennek, a következőkből áll:
- be van írva a tárolóként szolgáló dokumentum HTML,
- az oldal megjelenése kóddal van meghatározva CSS,
- a grafikon rajzolása a nyelv segítségével történik SVG y
- Be van programozva az adatok kiolvasása a szerverről és a grafikonok megjelenítése JavaScript
Minden elem, különösen a kód HTML oldal, a szerveren PHP-vel generálható, amint azt a cikkben ismertetjük PHP programozási nyelv című sorozatból adattárolás a tárgyak internetéhez csatlakoztatott eszközökről.
A kód CSS y JavaScript kódban tölthető (importálható). HTML ahelyett, hogy közvetlenül a dokumentum részeként írnák le HTML. Ennek az az előnye, hogy ugyanazokat a dokumentumokat több oldalon is fel lehet használni, és kényelmesebben szerkeszthetőek; de talán az a kényelmetlenség, hogy egy kicsit tovább tart a betöltés attól függően, hogy használhatja-e a gyorsítótárban található (korábbi használat során betöltött) kódot vagy akár egy CDN. A gyártási fázisban triviális az összes PHP kódot integrálni, egyetlen dokumentumot generálni HTML minden információval, ha ezt az alternatívát választja. Ebben a cikksorozatban az egyértelműség kedvéért úgy tekintjük, hogy külön dokumentumokkal dolgozunk.
A minket érdeklő célokra, grafikus konténerként való felhasználásra, és nagyon durván egy dokumentum szerkezetének első szintjének tartalma HTML lenne:
|
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>
|
Az első sor arra szolgál, hogy jelezze a böngésző számára, hogy az éppen olvasott dokumentum be van írva HTML, különösen az 5-ös verzióban (úgy ismert, mint HTML5). Korábbi verziói HTML, alapján SGML (Standard Generalized Markup Language), tartalmazott egy dokumentumtípus-definíciót (DTD), amelyben deklarálták a dokumentum leírására használt nyelven használt szabályok típusát.
A második és az utolsó sor tartalmazza a kódot HTML az irányelvek között <html> y </html> amelyek nyitásként és zárásként funkcionálnak. Az irányelvek HTML A nevet és az attribútumokat a „kisebb, mint” és a „nagyobb, mint” jelek közé teszik, egyfajta „akut zárójeleket” képezve. Az elemek HTML a befoglaló tartalomnak van egy záró direktívája, amely tartalmazza a perjelet a név előtt, ahogyan az in </html>.
Az elemek tulajdonságait vagy attribútumait szóközök választják el a névtől és egymástól, és egyszerű szövegként, vagy gyakrabban szövegként (a tulajdonság neve) fejezik ki, amelyet egyenlőségjel és idézőjelbe tett érték követ. A kódnyitó direktíva esetén HTML ingatlant használták lang a bátorsággal es, lang="es" jelezni, hogy a dokumentum szövege HTML spanyol nyelvet használ.
A HTML kód nyitó direktívája után megjegyzés került be. A kommentek benne HTML Több sort is elfoglalhatnak, és a kódot nyitójelként használhatják <!-- és zárásként -->
A kód HTML Két blokkból áll: a fejlécből <head> és a test <body>. Az első célja, hogy magáról a dokumentumról tájékozódjon, beleértve az arra vonatkozó információkat is (metainformáció), a második pedig a dokumentum tartalmának támogatása.
Az irányelvben <body> esemény szerepelt benne onload amellyel automatikusan végrehajt egy függvényt JavaScript a tartalom betöltése után. Ez az erőforrás lehetővé teszi annak a kódnak a végrehajtását, amely meghatározza a grafikus objektumokat, és frissíti azokat, amint a szerverről információ töltődik be az ezeket a grafikákat reprezentáló érzékelők állapotáról.
Az összes metainformáció közül, amely a dokumentum fejlécében szerepelhet HTML, különösen kíváncsiak vagyunk a következő direktívák által leírtak megismerésére:
-
<title>amely a dokumentumnak címet ad. Általában a böngészőablakban vagy a megfelelő lapon jelenik meg, és segít azonosítani a benne lévő grafikákat. -
<charset>deklarálja a dokumentum kódolásához használt karakterkészletet. Különösen fontos a „különleges” jelek, például az eñe vagy az ékezetek esetében. -
<link>lehetővé teszi a kapcsolat létrehozását a dokumentumok között HTML jelenlegi és egyéb külső. Segít a stíluslap formátumban történő betöltésében CSS a dokumentum megjelenésével. -
<script>futtatható kóddal rendelkező szkriptet tartalmaz. Ezzel a direktívával töltjük be a függvényeket JavaScript amellyel grafikát generálhat vagy módosíthat 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>
|
Amint az a példán látható HTML fent a dokumentum nevét (és elérési útját, ha van) a stílussal CSS az attribútum jelzi href, míg a kód esetében JavaScript használt src. Mindkettő részesedése type a bátorsággal text/css y text/javascript volt.
A dokumentum tartalmát tekintve az elemnek megfelelő rész <body>, HTML5 Lehetővé teszi speciális struktúrák létrehozását a weboldalak leggyakrabban előforduló összetevőihez, például lábléchez, oldalsó részhez vagy navigációs sávhoz, de számunkra érdekes, hogy a dokumentumot grafikus tárolóként használjuk. SVG azok az elemek <div> amelyek független blokkokként működnek, amelyek lehetővé teszik egy hierarchikus struktúra meghatározását egyesek egymásba ágyazásával <div> másokon belül.
|
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>
|
Az előző példában egy elemet használunk <div> amely két másikat tartalmaz. Ez a példa két nagyon fontos tulajdonságot mutat be a kód felhasználásához. HTML: id amely egy elemhez egyedi azonosító hozzárendelésére szolgál HTML (a <div>, ebben az esetben) és class amellyel hozzá van rendelve egy kategória, amelyet a megjelenés megállapítására fogunk használni. A kategóriának, az osztálynak nem kell egyedinek lennie, sőt, hatékonyságának nagy része abban rejlik, hogy több, ugyanazon szempontot megosztó elem.
Az elem (vagy címke) <p> egy olyan bekezdés meghatározására szolgál, amely általában szöveget tartalmaz (bár HTML ebben a tekintetben nincs korlátozás). Csoportosítás létrehozása egy bekezdésen belül (vagy a <div>, szintén nincsenek korlátozások) a címke használatos <span>. Ezzel az elemmel például szöveget is beilleszthet egy bekezdésbe, hogy más megjelenést, például aláhúzott vagy félkövér megjelenést adjon.
A grafikus jellemzők meghatározása és általában az elemhez kapcsolódó viselkedés HTML Az osztály hozzárendelése a kódban történik CSS; a dokumentumban szereplő előző példa esetében aspecto.css.
A jellemzők hozzárendelésének optimalizálása CSS lehetséges, hogy ugyanaz az elem HTML több osztályba tartozik, és így az általuk meghatározott megjelenéssel vagy viselkedéssel rendelkezik. A feladat elvégzéséhez írja be a különböző osztályok nevét, vesszővel elválasztva a tulajdonság jobb oldalán. 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>
|
Az előző példában az elem <div> amelyet úgy azonosítottak primer_hijo Három osztályt jelöltek ki: aspecto_de_hijo, aspecto_raro y tipografia_grande, amelyek állítólag együttesen határozzák meg az elem megjelenését és viselkedését. Amint azt a következő cikkben ismertetjük Az IoT-érzékelő grafikai webes megjelenésének meghatározása CSS-sel, ha több osztályt használunk, ha az aspektust meghatározó tulajdonságok bármelyike mindkettőben definiálva van, akkor az utoljára hivatkozott az irányadó.
Mint látható, az elemek <div> Tartalmazhatnak más elemeket is, beleértve az egyéb elemeket is <div>. Egyszerűbb eset lenne <div> amely szöveget tartalmazott. A stílust meghatározó megjelenés CSS az elemben található szöveget is érintené.
A jellemzők hozzárendelésének optimalizálása CSS lehetséges, hogy ugyanaz az elem HTML több osztályba tartozik, és így az általuk meghatározott megjelenéssel vagy viselkedéssel rendelkezik. A feladat elvégzéséhez írja be a különböző osztályok nevét, vesszővel elválasztva a tulajdonság jobb oldalán. 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>
|
Az előző példában a három osztályhoz tartozó <div> primer_hijo Meghatároznák az elem megjelenését és az azt tartalmazó szöveget, például nagyra szabva a betűtípust, amellyel írják (ha az utolsó osztályban a nevével jelzett cél igaz)
Az 5-ös verzió óta (HTML5) lehetőség van a grafikus kód formátumban való feltüntetésére SVG magában a kódban HTML mint még egy elem. A kód szempontjából HTML, A tartalmat SVG ez egy elem <svg> amely tartalmazza a különböző grafikai elemeket (vonalak, körök, téglalapok...
|
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>
|
Bár azt mondták, hogy az elemek grafikai jellemzői HTML stílusban vannak meghatározva CSS és egy osztályon keresztül kapcsolódnak hozzá, kétféleképpen is lehetséges néhányat közvetlenül az elemekhez rendelni. Egyrészt használhatja az ingatlant style és az objektum különböző grafikai jellemzőit rendelje hozzá értékként. Logikusan előnyösebb a fent említett technikát használni az aspektus osztályhoz való hozzárendelésére, de ezzel a lehetőséggel egy kis javítást is hozzáadhat egy elemhez (egy nagyon különleges kivétel), anélkül, hogy új osztályt kellene létrehoznia.
Másrészt egyes elemek HTML Lehetővé teszik bizonyos tulajdonságok használatát, amelyek meghatározzák a megjelenésüket. Általánosságban elmondható, hogy még akkor is, ha ezek a tulajdonságok léteznek, előnyösebb az osztályok használata, de sajnos nem minden elem kínálja ezt az alternatívát, egyesek azt várják, hogy egy bizonyos érték közvetlenül az adott tulajdonságokkal együtt kerüljön feltüntetésre, ahelyett, hogy a kapcsolódó osztályra hivatkozna. Az egyik ilyen típusú viselkedési elem pontosan a kód SVG, amelyhez hozzá kell rendelnünk a tulajdonságokban a szélesség és magasság százalékos értékét width y height, illetve az osztály helyett.
Amint az részletesebben látható lesz a cikk, amely az SVG kódról szól, a javasolt egyszerű módszer használatához ajánlatos a grafikon méreteit százalékban kifejezni. Az objektum összmérete esetén a szélesség és magasság értékben 100%-os feltüntetéssel a konténer lesz az, amely a végső méreteket (a <div> a id="dibujo", az előző példában)
A gráf különböző komponensei esetében SVG (vonalak, körök, téglalapok...), egy 100×100-as (bármilyen mértékegység) méretű területen szerepelnek, és az arány megőrzése nélkül téglalap alakúra bővülnek. A tulajdonságok viewBox y preserveAspectRatio az elem SVG Ők felelősek ezen értékek kialakításáért. az első esetben egy téglalap alakú nézettel, amely a (0,0) koordinátaponttól a koordinátapontig (100,100) megy, és a következőképpen fejeződik ki: "0 0 100 100" a másodikban pedig az értékkel 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>
|
A fentiek mindegyikével meghatározhat egy teljes kódot, amely grafikus tárolóként szolgálna. SVG származó vagy módosított JavaScript. Az alábbi példa négy grafikus blokkot tartalmaz, amelyek ezt a formátumot használják HTML a képviseleti javaslatról, amelyet használni fogunk.
|
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 –>
|
Alább láthatja, hogyan nézne ki az előző kód a stílussal formázva CSS megfeleltetve, azzal generálva JavaScript a grafika SVG az IoT-hez csatlakoztatott érzékelők által tárolt adatok szerver általi leolvasásával. Kivéve, hogy az adatok nem a szerverről töltődnek be, hanem véletlenszerűen generálódnak a kliensben (az Ön böngészőjében), a kód többi része az ebben a cikksorozatban meghatározott javaslatban lesz felhasználva.
A sorozat következő cikke elmagyarázza hogyan határozzuk meg a CSS-stílusokat a grafika tárolójaként működő HTML-kód megjelenése érdekében SVG amellyel a dolgok internetéhez (IoT) kapcsolt érzékelők állapotát reprezentálják.
1 megjegyzés