Графіки стану датчиків, підключених до Інтернету речей IoT
Однією з переваг підключення сенсорної мережі до Інтернету речей є можливість аналізувати отримані дані. Графічно представляючи цю інформацію, людина (на відміну від програми) може більш інтуїтивно зрозуміти значення контрольованих величин, наприклад, порівнюючи їх один з одним або стежачи за їхнім розвитком у часі.
Ця стаття розпочинає серію, що складається з чотирьох частин, і пояснює просту пропозицію щодо графічного представлення даних, отриманих датчиками, підключеними до IoT. З такою ж філософією, як і в інших статтях, запропонований метод є цілком функціональним, хоча головна мета — дидактична. Як технічний профіль громадськості, до якого блог polaridad.es, і цей текст стосується електроніки, а не веб-розробки, кожен із розділів служить вступом до мов або технологій, що використовуються: HTML, CSS, SVG y JavaScript.
Статті попередньої серії на як зберігати дані, отримані пристроями, підключеними до Інтернету речей (IoT) На завершення вони пояснили, як отримати доступ до інформації, що зберігається в базах даних. У прикладах серії, щоб полегшити процес, веб-сервер використовувався як посередник, який відповідав за отримання даних через POST-запити протоколу HTTP, збереження їх у базі даних і відображення на веб-сторінці.
Хоча основним недоліком цієї системи є продуктивність (яку можна було б зменшити за допомогою таких альтернатив, як Node.js і MongoDB, які будуть пояснені в наступних статтях), натомість вона забезпечує дві великі переваги: її реалізація дуже проста (зокрема доступність публічних служб) і може відображати дані у браузері, тобто йому не потрібні спеціальні програми (наприклад, програма для мобільного пристрою) для представлення збереженої інформації, яка представлятиме історичний статус пристроїв, підключених до Інтернету речі.
Використовуючи перевагу можливості легко представити на веб-сторінці інформацію про стан пристроїв, підключених до Інтернету речей, яка зберігається в цій системі, ця стаття пояснює, як графічно відобразити цю інформацію за допомогою формату SVG від JavaScript для динамічного створення веб-сторінки HTML.
Є багато книжкових магазинів JavaScript за допомогою якого можна вирішити графічне представлення даних. Ці статті не мають на меті розвиток іншої; Метою цього тексту є розуміння процесу та можливість розробки власних реалізацій; дидактична мета, а також продуктивна. Якщо ви зацікавлені у використанні продукту, а не в його розробці самостійно, я рекомендую вам поглянути на деякі чудові бібліотеки для створення графіки за допомогою JavaScript з безкоштовними ліцензіями, як Charts.js, Високі показники, Інструменти Google Chart, Епоха, Рафаель, діаграма (на основі Рафаель), dc.js, Chartist.js, D3.js (моя рекомендація), C3.js (на основі D3.js), НВД3 (багаторазова графіка для 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 (а <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 Sensor Graphics за допомогою 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 коментар