Wykresy stanu czujników podłączonych do Internetu Rzeczy IoT
Jedną z zalet podłączenia sieci czujników do Internetu Rzeczy jest możliwość analizy uzyskanych danych. Graficznie przedstawiając te informacje, człowiek (w przeciwieństwie do programu) może bardziej intuicyjnie zrozumieć znaczenie monitorowanych wielkości, na przykład porównując je ze sobą lub śledząc ich rozwój w czasie.
Artykuł rozpoczyna składający się z czterech części cykl wyjaśniający prostą propozycję graficznej reprezentacji danych uzyskiwanych przez czujniki podłączone do IoT. Przy tej samej filozofii, co w innych artykułach, zasugerowana metoda jest w pełni funkcjonalna, chociaż głównym celem jest dydaktyczny. Jako profil techniczny publiczności, do której blog polaridad.es, a ten tekst dotyczy elektroniki, a nie tworzenia stron internetowych, każda z sekcji służy jako wprowadzenie do używanych języków lub technologii: HTML, CSS, SVG y JAVASCRIPT.
Artykuły z poprzedniej serii dot jak przechowywać dane pozyskane przez urządzenia podłączone do Internetu Rzeczy (IoT) Zakończyli wyjaśnieniem, jak uzyskać dostęp do informacji przechowywanych w bazach danych. W przykładach serii, aby ułatwić proces, jako pośrednika wykorzystano serwer WWW, który odpowiadał za przyjmowanie danych poprzez żądania POST protokołu HTTP, przechowywanie ich w bazie danych i wyświetlanie na stronie internetowej.
Chociaż główną wadą tego systemu jest wydajność (którą można złagodzić za pomocą alternatyw takich jak Node.js i MongoDB, co zostanie wyjaśnione w przyszłych artykułach), w zamian zapewnia on dwie ogromne zalety: jego wdrożenie jest bardzo proste (w tym dostępność usług publicznych) i może wyświetlać dane w przeglądarce, czyli nie potrzebuje specjalnych aplikacji (takich jak aplikacja na urządzenie mobilne), aby zaprezentować zapisane informacje, które odzwierciedlałyby historyczny stan urządzeń podłączonych do Internetu Rzeczy.
Wykorzystując zaletę możliwości łatwego zaprezentowania na stronie internetowej przechowywanych w tym systemie informacji o stanie urządzeń podłączonych do IoT, w artykule wyjaśniono, jak graficznie wyświetlić te informacje w formacie SVG z JAVASCRIPT do dynamicznego generowania strony internetowej HTML.
Jest wiele księgarń JAVASCRIPT za pomocą którego można rozwiązać graficzną prezentację danych. Artykuły te nie mają na celu rozwijania kolejnego; Celem tego tekstu jest zrozumienie procesu i możliwość opracowania własnych wdrożeń; cel dydaktyczny i produktywny. Jeśli jesteś zainteresowany wykorzystaniem produktu, a nie jego samodzielnym opracowywaniem, polecam zapoznać się z niektórymi doskonałymi bibliotekami do generowania grafiki za pomocą JAVASCRIPT z darmowymi licencjami, takimi jak Charts.js, Highcharts, Narzędzia wykresów Google, Epoka, Raphael, graficzny (oparte na Raphael), dc.js, Chartist.js, D3.js (moja rekomendacja), C3.js (oparte na D3.js), NVD3 (grafika wielokrotnego użytku dla D3.js) ...
Struktura dokumentu HTML z grafiką SVG
W przedstawionej w artykule propozycji graficznego przedstawienia danych z czujników stronę WWW, na której są one wyświetlane, tworzą:
- dokument, który służy jako pojemnik, jest zapisany HTML,
- wygląd strony definiowany jest za pomocą kodu CSS,
- rysowanie wykresu odbywa się za pomocą języka SVG y
- Zaprogramowany jest odczyt danych z serwera i wyświetlanie wykresów JAVASCRIPT
Wszystkie elementy, szczególnie kod HTML strony, można wygenerować na serwerze za pomocą PHP, jak wyjaśniono w artykule na temat Język programowania PHP z serii o przechowywanie danych z urządzeń podłączonych do Internetu Rzeczy.
Kod CSS y JAVASCRIPT można załadować (zaimportować) w kodzie HTML zamiast być zapisywane bezpośrednio jako część dokumentu HTML. Ma to tę zaletę, że można ponownie wykorzystać te same dokumenty na kilku stronach i wygodniej je edytować; ale być może niedogodność polegająca na nieco dłuższym ładowaniu w zależności od tego, czy możesz użyć kodu zawartego w pamięci podręcznej (załadowanego podczas poprzedniego użycia), czy nawet CDN. W fazie produkcyjnej banalna jest integracja całego kodu z PHP, generując w nim pojedynczy dokument HTML ze wszystkimi informacjami, jeśli wybierzesz tę alternatywę. Dla jasności przyjmuje się, że w całej tej serii artykułów pracujemy z oddzielnymi dokumentami.
W celach, które nas interesują, aby wykorzystać go jako kontener graficzny i bardzo z grubsza zawartość pierwszego poziomu struktury dokumentu HTML by:
|
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>
|
Pierwsza linia służy do wskazania przeglądarce internetowej, że czytany dokument jest napisany HTML, szczególnie w wersji 5 (znanej jako HTML5). Poprzednie wersje HTML, oparte na SGML (Standard Generalized Markup Language), zawiera definicję typu dokumentu (DTD), w którym zadeklarowano rodzaj reguł stosowanych w języku do opisu dokumentu.
Druga i ostatnia linia zawiera kod HTML wśród dyrektyw <html> y </html> które pełnią odpowiednio funkcję otwierania i zamykania. Dyrektywy HTML Zawierają nazwę i atrybuty pomiędzy znakami „mniejszy niż” i „większy niż”, tworząc rodzaj znaków „ostrego nawiasu”. Elementy HTML które obejmują treść, mają dyrektywę zamykającą, która zawiera ukośnik przed nazwą, jak in </html>.
Właściwości lub atrybuty elementów oddzielane są spacjami od nazwy i od siebie nawzajem i wyrażane są w postaci zwykłego tekstu lub częściej jako tekst (nazwa właściwości), po którym następuje znak równości i wartość ujęta w cudzysłów. W przypadku dyrektywy otwierającej kod HTML nieruchomość została wykorzystana lang z odwagą es, lang="es" aby wskazać, że tekst dokumentu HTML używa języka hiszpańskiego.
Po dyrektywie otwierającej kod HTML dodano komentarz. Komentarze w HTML Mogą zajmować kilka linii i używać kodu jako znaku otwierającego <!-- i jako zamknięcie -->
Kod HTML Składa się z dwóch bloków: nagłówka <head> i ciało <body>. Pierwsza ma na celu informowanie o samym dokumencie, w tym informacje o nim (metainformacje), a druga ma na celu wsparcie treści dokumentu.
W dyrektywie <body> wydarzenie zostało uwzględnione onload za pomocą którego można automatycznie wykonać funkcję JAVASCRIPT po załadowaniu zawartości. Zasób ten umożliwia rozpoczęcie wykonywania kodu, który zdefiniuje obiekty graficzne i będzie je aktualizował w miarę ładowania informacji z serwera o stanie czujników reprezentujących te grafiki.
Ze wszystkich metainformacji, które można zawrzeć w nagłówku dokumentu HTML, szczególnie interesuje nas poznanie tej opisanej przez następujące dyrektywy:
-
<title>który służy do nadania tytułu dokumentowi. Zwykle pojawi się w oknie przeglądarki lub na odpowiedniej karcie i pomoże nam zidentyfikować zawarte w nim grafiki. -
<charset>deklaruje zestaw znaków używany do kodowania dokumentu. Jest to szczególnie ważne w przypadku znaków „specjalnych”, takich jak eñes czy akcenty. -
<link>pozwala na ustalenie powiązania pomiędzy dokumentem HTML bieżących i innych zewnętrznych. Pomoże nam to załadować arkusz stylów w formacie CSS z wyglądem dokumentu. -
<script>zawiera skrypt z kodem wykonywalnym. Za pomocą tej dyrektywy załadujemy funkcje JAVASCRIPT za pomocą którego można generować lub modyfikować grafikę 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>
|
Jak widać na przykładzie HTML powyżej nazwę (i ścieżkę, jeśli ma to zastosowanie) dokumentu ze stylem CSS jest oznaczony atrybutem href, natomiast w przypadku kodu JAVASCRIPT to jest używane src. Obaj mają udziały we własności type z odwagą text/css y text/javascript odpowiednio.
W odniesieniu do treści dokumentu część odpowiadająca elementowi <body>, HTML5 Pozwala na tworzenie konkretnych struktur dla najczęściej występujących elementów strony internetowej takich jak stopka, sekcja boczna czy pasek nawigacyjny, ale nas interesuje przede wszystkim wykorzystanie dokumentu jako kontenera graficznego. SVG są elementy <div> które działają jako niezależne bloki, które umożliwiają zdefiniowanie struktury hierarchicznej poprzez zagnieżdżenie niektórych <div> w innych.
|
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>
|
W poprzednim przykładzie użyto elementu <div> który zawiera dwa inne. Ten przykład przedstawia dwie bardzo ważne właściwości dotyczące sposobu, w jaki chcemy wykorzystać kod. HTML: id który służy do przypisania unikalnego identyfikatora do elementu HTML (a <div>w tym przypadku) i class z którą przypisano mu kategorię, na podstawie której ustalimy wygląd. Kategoria, klasa, nie musi być wyjątkowa, w rzeczywistości znaczna część jej skuteczności leży w kilku elementach mających ten sam aspekt.
Element (lub znacznik) <p> służy do zdefiniowania akapitu, który zwykle będzie zawierał tekst (chociaż w HTML nie ma w tym zakresie żadnych ograniczeń). Aby utworzyć grupowanie w obrębie akapitu (lub a <div>, nie ma też żadnych ograniczeń) tag jest używany <span>. Za pomocą tego elementu można na przykład umieścić tekst w akapicie, aby nadać mu inny wygląd, np. podkreślenie lub pogrubienie.
Definicja cech graficznych i ogólnie zachowania skojarzonego z elementem HTML Przypisanie klasy odbywa się w kodzie CSS; w przypadku poprzedniego przykładu w dokumencie aspecto.css.
Aby zoptymalizować przypisanie cech CSS możliwe, że to ten sam element HTML należy do kilku klas i dlatego ma określony przez nie wygląd lub zachowanie. Aby dokonać tego przypisania, wpisz nazwy różnych klas, oddzielając je przecinkami po prawej stronie właściwości. 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>
|
W poprzednim przykładzie element <div> który został zidentyfikowany jako primer_hijo Przydzielono trzy klasy: aspecto_de_hijo, aspecto_raro y tipografia_grande, które mają wspólnie definiować wygląd i zachowanie elementu. Jak wyjaśniono w poniższym artykule na temat Definiowanie wyglądu grafiki internetowej czujnika IoT za pomocą CSS, w przypadku korzystania z wielu klas, jeśli którakolwiek z właściwości definiujących aspekt jest zdefiniowana w obu, pierwszeństwo ma ta, do której odnosi się ostatnia.
Jak widać elementy <div> Mogą zawierać inne elementy, w tym inne <div>. Prostszy przypadek byłby <div> który zawierał tekst. Wygląd, który definiuje styl CSS miałoby to również wpływ na tekst zawarty w elemencie.
Aby zoptymalizować przypisanie cech CSS możliwe, że to ten sam element HTML należy do kilku klas i dlatego ma określony przez nie wygląd lub zachowanie. Aby dokonać tego przypisania, wpisz nazwy różnych klas, oddzielając je przecinkami po prawej stronie właściwości. 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>
|
W poprzednim przykładzie trzy klasy powiązane z <div> primer_hijo Określiliby wygląd elementu i tekstu, który go zawiera, np. zwiększając czcionkę, którą jest napisany (jeśli cel wskazany przez jego nazwę w ostatniej klasie jest prawdziwy)
Od wersji 5 (HTML5) możliwe jest załączenie kodu graficznego w formacie SVG w samym kodzie HTML jako jeszcze jeden element. Z punktu widzenia kodu HTML, Treść SVG to element <svg> który zawiera różne elementy graficzne (linie, okręgi, prostokąty...
|
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>
|
Chociaż powiedziano, że charakterystyka graficzna elementów HTML są zdefiniowane w stylu CSS i są z nim powiązane poprzez klasę, możliwe jest także przypisanie części z nich bezpośrednio do elementów na dwa sposoby. Z jednej strony można korzystać z nieruchomości style i przypisz różne cechy graficzne obiektu jako jego wartość. Logicznie rzecz biorąc, lepiej jest zastosować wspomnianą technikę przypisywania aspektu do klasy, ale dzięki tej możliwości możesz dodać małą poprawkę do elementu (bardzo szczególny wyjątek) bez konieczności tworzenia nowej klasy.
Z drugiej strony pewne elementy HTML Pozwalają na użycie określonych właściwości, które definiują ich wygląd. Ogólnie rzecz biorąc, nawet jeśli takie właściwości istnieją, lepiej jest używać klas, ale niestety nie wszystkie elementy oferują tę alternatywę, niektórzy oczekują wskazania określonej wartości bezpośrednio z tymi konkretnymi właściwościami, zamiast odnosić się do powiązanej klasy. Jednym z elementów charakteryzujących się tego typu zachowaniem jest właśnie kod SVG, do którego musimy we właściwościach przypisać procentową wartość szerokości i wysokości width y height, odpowiednio, zamiast klasy.
Jak będzie można zobaczyć bardziej szczegółowo w artykuł mówiący o kodzie SVG, aby zastosować zaproponowaną prostą metodę, zaleca się uwzględnienie wymiarów wykresu w procentach. W przypadku całkowitego rozmiaru obiektu, podając 100% wartości szerokości i wysokości, to kontener ustali ostateczne wymiary (tzw. <div> z id="dibujo", w poprzednim przykładzie)
W przypadku różnych składowych wykresu SVG (linie, okręgi, prostokąty...), mieszczą się w obszarze o wymiarach 100×100 (dowolna jednostka) i rozszerzają się w kształt prostokąta bez zachowania proporcji. Właściwości viewBox y preserveAspectRatio elementu SVG Są odpowiedzialni za ustanowienie tych wartości. w pierwszym przypadku z widokiem prostokątnym biegnącym od punktu współrzędnych (0,0) do punktu współrzędnych (100,100) i wyraża się jako "0 0 100 100" a w drugim z wartością 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>
|
Dzięki temu wszystkiemu możesz teraz zdefiniować kompletny kod, który będzie służył jako kontener graficzny. SVG wygenerowane lub zmodyfikowane z JAVASCRIPT. Poniższy przykład zawiera cztery bloki graficzne korzystające z tego formatu HTML propozycji reprezentacji, z której będziemy korzystać.
|
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 –>
|
Poniżej możesz zobaczyć, jak wyglądałby poprzedni kod, sformatowany przy użyciu stylu CSS odpowiedni, generujący z JAVASCRIPT grafika SVG z odczytami serwera danych przechowywanych przez czujniki podłączone do IoT. Z wyjątkiem tego, że dane nie są ładowane z serwera, ale są generowane losowo w kliencie (Twojej przeglądarce), reszta kodu zostanie wykorzystana w propozycji określonej w tej serii artykułów.
Wyjaśnia to następny artykuł z tej serii jak zdefiniować style CSS aby nadać wygląd kodowi HTML, który działa jako pojemnik na grafikę SVG za pomocą którego można reprezentować stan czujników podłączonych do Internetu rzeczy (IoT).
1 komentarz