Графики состояния датчиков, подключенных к Интернету вещей IoT
Одним из преимуществ подключения сенсорной сети к Интернету вещей является возможность анализа полученных данных. Графически представляя эту информацию, человек (в отличие от программы) может более интуитивно понять смысл контролируемых величин, например, сравнивая их между собой или прослеживая их развитие во времени.
Эта статья начинает серию, состоящую из четырех частей, в которой объясняется простое предложение по графическому представлению данных, полученных датчиками, подключенными к Интернету вещей. С той же философией, что и в других статьях, предлагаемый метод вполне функционален, хотя основная цель – дидактическая. В качестве технического профиля публики, для которой блог Polaridad.es, и этот текст посвящен электронике, а не веб-разработке, каждый из разделов служит введением в используемые языки или технологии: HTML, CSS, SVG y JavaScript.
Статьи из предыдущей серии, посвященные как хранить данные, полученные устройствами, подключенными к Интернету вещей (IoT) В конце они объяснили, как получить доступ к информации, хранящейся в базах данных. В примерах серии для упрощения процесса в качестве посредника использовался веб-сервер, который отвечал за получение данных через POST-запросы протокола HTTP, их сохранение в базе данных и отображение на веб-странице.
Хотя основным недостатком этой системы является производительность (которая может быть устранена с помощью таких альтернатив, как Node.js и MongoDB, которые будут объяснены в будущих статьях), взамен она дает два больших преимущества: ее реализация очень проста (включая доступность общедоступных служб) и может отображать данные в браузере, то есть ему не нужны специальные приложения (например, приложение для мобильного устройства) для представления сохраненной информации, которая будет отражать историческое состояние устройств, подключенных к Интернету. Вещи.
Используя преимущество возможности легко представить на веб-странице информацию, хранящуюся в этой системе, о состоянии устройств, подключенных к IoT, в этой статье объясняется, как графически отобразить эту информацию в формате SVG от JavaScript для динамического создания веб-страницы в HTML.
Есть много книжных магазинов JavaScript с помощью которого можно решить графическое представление данных. Эти статьи не предназначены для развития еще одной; Цель этого текста — понять процесс и иметь возможность разработать собственные реализации; дидактическая цель, а также продуктивная. Если вы заинтересованы в использовании продукта, а не в его самостоятельной разработке, я рекомендую вам взглянуть на некоторые отличные библиотеки для создания графики с помощью JavaScript с бесплатными лицензиями, такими как Графики.js, Highcharts, Инструменты Google Charts, Эпоха, Рафаэль, графический (на основе Рафаэль), dc.js, Чартист.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 ограничений в этом нет). Чтобы выполнить группировку внутри абзаца (или <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 с помощью 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> con 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 с серверными показаниями данных, хранящимися датчиками, подключенными к Интернету вещей. За исключением того, что данные не загружаются с сервера, а генерируются случайным образом в клиенте (вашем браузере), остальная часть кода будет использоваться в предложении, определенном в этой серии статей.
В следующей статье этой серии объясняется как определить стили CSS чтобы придать вид HTML-коду, который действует как контейнер для графики SVG с помощью которого можно отобразить состояние датчиков, подключенных к Интернету вещей (IoT).
1 комментарий