Графики на състоянието на сензори, свързани към интернет на нещата IoT
Едно от предимствата на свързването на сензорна мрежа към Интернет на нещата е възможността да се анализират получените данни. Чрез графично представяне на тази информация, човек (за разлика от програма) може по-интуитивно да разбере значението на наблюдаваните количества, например като ги сравнява едно с друго или проследява тяхното развитие във времето.
Тази статия започва серия, съставена от четири части, която обяснява просто предложение за графично представяне на данни, получени от сензори, свързани към IoT. Със същата философия, както в други статии, предложеният метод е напълно функционален, въпреки че основната цел е дидактическа. Като технически профил на обществеността, към която блог polaridad.esи този текст е за електроника, а не за уеб разработка, всеки от разделите служи като въведение в използваните езици или технологии: HTML, CSS, SVG y JavaScript.
Статиите от предишната серия на как да съхранявате данни, получени от устройства, свързани с Интернет на нещата (IoT) Те завършиха с обяснение как да получите достъп до информацията, съхранявана в базите данни. В примерите от поредицата, за да се улесни процеса, уеб сървър беше използван като посредник, който отговаряше за получаването на данните чрез POST заявки на HTTP протокола, съхраняването им в база данни и показването им на уеб страница.
Въпреки че основният недостатък на тази система е производителността (която може да бъде облекчена с алтернативи като Node.js и MongoDB, които ще бъдат обяснени в бъдещи статии), в замяна тя осигурява две големи предимства: внедряването й е много просто (включително наличността на публичните услуги) и може да показва данните в браузър, тоест не се нуждае от специфични приложения (като приложение за мобилно устройство), за да представи съхранената информация, която би представлявала историческото състояние на устройства, свързани към интернет на неща.
Използвайки предимството да можете лесно да представяте на уеб страница информацията, която е била съхранена с тази система за състоянието на устройствата, свързани към IoT, тази статия обяснява как да покажете графично тази информация, като използвате формата SVG от JavaScript за динамично генериране на уеб страница в HTML.
Има много книжарници JavaScript с които да решите графичното представяне на данни. Тези статии нямат за цел да развият друга; Целта на този текст е да разберете процеса и да можете да разработите свои собствени реализации; дидактическа цел, както и продуктивна. Ако се интересувате от използването на продукт, вместо да го разработвате сами, препоръчвам ви да разгледате някои от отличните библиотеки за генериране на графики с JavaScript с безплатни лицензи като Charts.js, Високи класации, Инструменти за диаграми на Google, Епоха, Raphael, диаграма (базиран на Raphael), dc.js, Chartist.js, D3.js (моя препоръка), C3.js (базиран на D3.js), NVD3 (графики за многократна употреба за D3.js) ...
Структура на HTML документ със SVG графики
В предложението на тази статия за графично представяне на сензорни данни уеб страницата, на която се показват, се състои от:
- се записва документът, който служи като контейнер HTML,
- външният вид на страницата се определя с код CSS,
- изчертаването на графиката се извършва с помощта на езика SVG y
- Програмирано е четене на данни от сървъра и показване на графики JavaScript
Всички елементи, особено кода HTML на страницата, може да се генерира на сървъра с PHP, както е обяснено в статията за PHP език за програмиране от поредицата за съхранение на данни от устройства, свързани към Интернет на нещата.
Кодът CSS y JavaScript могат да бъдат заредени (импортирани) в код HTML вместо да бъде написан директно като част от документа HTML. Това има предимството да можете да използвате повторно едни и същи документи на няколко страници и да можете да ги редактирате по-удобно; но може би неудобството да отнеме малко повече време за зареждане в зависимост от това дали можете да използвате кода, съдържащ се в кеша (зареден при предишна употреба) или дори CDN. Във фазата на производство е тривиално да се интегрира целият код от PHP, генерирайки един документ HTML с цялата информация, ако изберете тази алтернатива. В цялата тази поредица от статии, за яснота, се счита, че работим с отделни документи.
За целите, които ни интересуват, да го използваме като графичен контейнер и много грубо, съдържанието на първото ниво на структурата на документ HTML би се:
|
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>
|
Първият ред служи за указване на уеб браузъра, че документът, който чете, е написан в него HTML, по-специално във версия 5 (известна като HTML5). Предишни версии на HTML, базиран на SGML (стандартен генерализиран език за маркиране), включва дефиниция на типа документ (DTD), в който е деклариран типът правила, използвани в езика за описание на документа.
Вторият и последният ред съдържат кода HTML сред директивите <html> y </html> които функционират съответно като отваряне и затваряне. Директивите HTML Те затварят името и атрибутите между знаците "по-малко от" и "по-голямо от", образувайки един вид знаци "остра скоба". Елементите HTML които обхващат съдържание, имат затваряща директива, която включва наклонената черта пред името, както в </html>.
Свойствата или атрибутите на елементите са разделени с интервали от името и един от друг и се изразяват като обикновен текст или, по-често, като текст (името на свойството), последвано от знак за равенство и стойност, затворена в кавички. В случай на директива за отваряне на кода HTML имотът е използван lang със смелостта es, lang="es" за да се посочи, че текстът на документа HTML използва испански език.
След отварящата директива на HTML кода е включен коментар. Коментарите в HTML Те могат да заемат няколко реда и да използват кода като начален знак <!-- и като завършване -->
Кодът HTML Състои се от два блока: заглавката <head> и тялото <body>. Първият има за цел да информира за самия документ, включително информация за него (метаинформация), а вторият е да поддържа съдържанието на документа.
В директивата <body> е включено събитие onload с който автоматично да изпълни дадена функция JavaScript след като съдържанието е заредено. Този ресурс ви позволява да започнете изпълнението на кода, който ще дефинира графичните обекти и ще ги актуализира, когато информацията се зарежда от сървъра за състоянието на сензорите, които представляват тези графики.
От цялата метаинформация, която може да бъде включена в заглавката на документа HTML, ние сме особено заинтересовани да знаем този, описан от следните директиви:
-
<title>който служи за заглавие на документа. Обикновено ще се появи в прозореца на браузъра или в съответния раздел и ще ни помогне да идентифицираме графиките, които съдържа. -
<charset>декларира набора от знаци, използван за кодиране на документа. Това е особено важно за „специални“ знаци като eñes или ударения. -
<link>позволява установяване на връзка между документа HTML текущи и други външни. Това ще ни помогне да заредим листа със стилове във формат CSS с външния вид на документа. -
<script>съдържа скрипт с изпълним код. С помощта на тази директива ще заредим функциите JavaScript с които да генерирате или модифицирате графики 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>
|
Както може да се види в примера на HTML по-горе, името (и пътя, ако е приложимо) на документа със стила CSS се обозначава с атрибута href, докато в случая с кода JavaScript използва се src. И двамата споделят собствеността type със смелостта text/css y text/javascript съответно.
По отношение на съдържанието на документа частта, която съответства на елемента <body>, HTML5 Тя ви позволява да създавате специфични структури за най-често срещаните компоненти на уеб страница, като долен колонтитул, странична секция или навигационна лента, но това, което ни интересува, е да използваме документа като графичен контейнер. SVG са елементите <div> които функционират като независими блокове, които позволяват дефиниране на йерархична структура чрез влагане на някои <div> в рамките на други.
|
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>
|
В предишния пример е използван елемент <div> която съдържа две други. Този пример въвежда две много важни свойства за употребата, която искаме да направим от кода. HTML: id който се използва за присвояване на уникален идентификатор на елемент HTML (A <div>, в този случай) и class с което му се задава категория, която ще използваме за установяване на външния вид. Категорията, класът, не трябва да бъде уникален, всъщност голяма част от неговата ефективност се крие в няколко елемента, споделящи един и същ аспект.
Елементът (или етикет) <p> служи за определяне на параграф, който обикновено съдържа текст (въпреки че в HTML няма ограничение в това отношение). За да направите групи в рамките на параграф (или a <div>, също няма ограничения) се използва етикетът <span>. С този елемент е възможно например да включите текст в абзац, за да му придадете различен вид, като например подчертан или удебелен.
Дефинирането на графичните характеристики и като цяло поведението, което е свързано с даден елемент HTML Приписването на клас се извършва в кода CSS; в случая на предишния пример в документа aspecto.css.
За оптимизиране на присвояването на характеристики CSS възможно е същият елемент HTML принадлежи към няколко класа и следователно има вида или поведението, дефинирано от тях. За да направите това присвояване, напишете имената на различните класове, като ги разделите със запетаи отдясно на свойството. 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>
|
В предишния пример елементът <div> който е идентифициран като primer_hijo Разпределени са три класа: aspecto_de_hijo, aspecto_raro y tipografia_grande, които заедно трябва да определят външния вид и поведението на елемента. Както е обяснено в следващата статия за Дефиниране на уеб облик на IoT сензорна графика с CSS, когато използвате множество класове, ако някое от свойствата, които дефинират аспекта, е дефинирано и в двата, последното споменато има предимство.
Както се видя, елементите <div> Те могат да съдържат други елементи, включително други <div>. По-прост случай би бил <div> който съдържа текст. Визията, която определя стила CSS също ще повлияе на текста, съдържащ се в елемента.
За оптимизиране на присвояването на характеристики CSS възможно е същият елемент HTML принадлежи към няколко класа и следователно има вида или поведението, дефинирано от тях. За да направите това присвояване, напишете имената на различните класове, като ги разделите със запетаи отдясно на свойството. 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>
|
В предишния пример трите класа, свързани с <div> primer_hijo Те биха дефинирали външния вид на елемента и текста, който го съдържа, например, правейки шрифта, с който е написан, голям (ако целта, посочена от името му в последния клас, е вярна)
От версия 5 (HTML5) е възможно да включите графичния код във формат SVG в самия код HTML като още един елемент. От гледна точка на кода HTML, съдържанието SVG това е елемент <svg> който съдържа различни графични елементи (линии, кръгове, правоъгълници...
|
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>
|
Въпреки че е казано, че графичните характеристики на елементите HTML са определени в стил CSS и са свързани с него чрез клас, също така е възможно някои от тях да се присвоят директно на елементите по два начина. От една страна можете да използвате имота style и задайте различните графични характеристики на обекта като негова стойност. Логично е за предпочитане да използвате гореспоменатата техника за присвояване на аспекта на клас, но с тази възможност можете да добавите малка корекция към елемент (много специално изключение), без да се налага да създавате нов клас.
От друга страна някои елементи HTML Те ви позволяват да използвате специфични свойства, които определят външния им вид. Като цяло, дори ако тези свойства съществуват, за предпочитане е да се използват класове, но, за съжаление, не всички елементи предлагат тази алтернатива, някои очакват определена стойност да бъде указана директно с тези специфични свойства, вместо да препраща към свързания клас. Един от елементите, които имат такъв тип поведение, е именно кодът SVG, на който трябва да присвоим процентната стойност на ширината и височината в свойствата width y height, съответно вместо класа.
Както ще се види по-подробно в статия, която говори за SVG код, за да използвате предложения прост метод, е препоръчително да разгледате размерите на графиката като проценти. В случай на общия размер на обекта, чрез посочване на 100% в стойността на ширината и височината, контейнерът ще задава крайните размери ( <div> с id="dibujo", в предишния пример)
В случай на различните компоненти на графиката SVG (линии, кръгове, правоъгълници...), са включени в площ с размери 100×100 (всяка единица) и се разширяват в правоъгълна форма, без да се запазва пропорцията. Свойствата viewBox y preserveAspectRatio на елемента SVG Те са отговорни за установяването на тези ценности. в първия случай с правоъгълен изглед, който преминава от координатната точка (0,0) до координатната точка (100,100) и се изразява като "0 0 100 100" а във втория със стойността 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>
|
С всичко по-горе вече можете да дефинирате пълен код, който ще служи като графичен контейнер. SVG генерирани или модифицирани от JavaScript. Примерът по-долу съдържа четири графични блока, които използват формата HTML на предложението за представителство, което ще използваме.
|
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 –>
|
По-долу можете да видите как би изглеждал предишният код, форматиран със стила CSS съответстващ, генериращ с JavaScript графиките SVG със сървърни показания на данни, съхранявани от сензори, свързани към IoT. С изключение на това, че данните не се зареждат от сървъра, а се генерират на случаен принцип в клиента (вашия браузър), останалата част от кода е това, което ще се използва в предложението, дефинирано в тази поредица от статии.
Следващата статия от тази серия обяснява как да дефинирате CSS стилове за да придаде вид на HTML кода, който действа като контейнер за графиките SVG с които да се представи състоянието на сензорите, свързани с Интернет на нещата (IoT).
1 коментар