モノのインターネットIoTに接続されたセンサーのステータスグラフ
センサー ネットワークをモノのインターネットに接続する利点の XNUMX つは、取得したデータを分析できることです。この情報をグラフィカルに表現することにより、人は（プログラムではなく）監視対象の量を相互に比較したり、時間の経過に伴う変化を追跡したりすることで、監視対象の量の意味をより直観的に理解できるようになります。
この記事は、IoT に接続されたセンサーによって取得されたデータのグラフ表現に関する簡単な提案を説明する XNUMX 部構成のシリーズの始まりです。他の記事と同じ考え方で、主な目的は教訓的ではありますが、提案された方法は完全に機能します。対象となる一般の技術的プロファイルとして、 ブログpolaridad.es、このテキストは Web 開発ではなくエレクトロニクスに関するものであり、各セクションは使用される言語またはテクノロジの紹介として機能します。 HTML, CSS, SVG y JavaScriptを.
以前のシリーズの記事 モノのインターネット (IoT) に接続されたデバイスによって取得されたデータを保存する方法 最後に、データベースに保存されている情報にアクセスする方法を説明しました。このシリーズの例では、プロセスを容易にするために、HTTP プロトコルの POST リクエストを通じてデータを受信し、データベースに保存して Web ページに表示する役割を担う Web サーバーを仲介者として使用しました。
このシステムの主な欠点はパフォーマンスです (これについては、今後の記事で説明する Node.js や MongoDB などの代替手段を使用して軽減できます)。その代わりに、XNUMX つの大きな利点があります。その実装は非常に簡単です (可用性を含む)。つまり、インターネットに接続されているデバイスの履歴ステータスを表す保存された情報を表示するために、特定のアプリケーション (モバイル デバイス用のアプリなど) を必要としません。もの。
本システムで蓄積したIoTに接続された機器の状態情報をWebページ上で簡単に提示できる利点を活かし、この情報を以下の形式でグラフィカルに表示する方法について説明します。 SVG から JavaScriptを Webページを動的に生成するには HTML.
本屋がたくさんあります JavaScriptを データのグラフィック表示を解決するために使用します。これらの記事は別の記事を開発することを意図したものではありません。このテキストの目的は、プロセスを理解し、独自の実装を開発できるようになることです。教訓的な目的であると同時に生産的な目的でもあります。自分で開発するのではなく、製品を使用することに興味がある場合は、グラフィックを生成するための優れたライブラリをいくつか参照することをお勧めします。 JavaScriptを のような無料ライセンスを使用すると、 チャート.js, Highcharts, Google チャート ツール, エポック, ラファエル, チャート （に基づく ラファエル), dc.js, チャーティスト.js, D3.js (私のおすすめ)、 C3.js （に基づく D3.js), NVD3 (再利用可能なグラフィックス D3.js）...
SVGグラフィックスを使用したHTMLドキュメント構造
センサー データをグラフィカルに表示するというこの記事の提案では、センサー データが表示される Web ページは次のもので構成されます。
- コンテナとして機能するドキュメントが書かれています 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>
|
最初の行は、読み取っているドキュメントが次の言語で書かれていることを Web ブラウザに示す役割を果たします。 HTML、特にバージョン 5 (として知られています) HTML5）。以前のバージョンの HTML、 に基づく SGML (標準汎用マークアップ言語)、ドキュメント タイプ定義 (DTD) 文書を記述するために言語で使用される規則のタイプが宣言されています。
XNUMX 行目と最後の行にはコードが含まれています HTML 指令の中には <html> y </html> それぞれ開閉として機能します。指令 HTML これらは、名前と属性を記号「未満」と「以上」で囲み、一種の「鋭括弧」記号を形成します。要素 HTML コンテンツを囲むものには、次のように名前の前にスラッシュを含む終了ディレクティブがあります。 </html>.
要素のプロパティまたは属性は、名前とスペースで区切られ、要素同士もスペースで区切られ、プレーン テキストとして、または多くの場合、テキスト (プロパティの名前) の後に等号と引用符で囲まれた値として表現されます。コードオープンディレクティブの場合 HTML プロパティが使用されました lang 勇気を持って es, lang="es" 文書のテキストであることを示すために HTML スペイン語を使用します。
HTML コードの開始ディレクティブの後にコメントが含まれています。のコメント HTML 複数行を占有し、コードを開始記号として使用することができます。 <!-- そして締めくくりとして -->
コード HTML これは XNUMX つのブロックで構成されます: ヘッダー <head> そして体 <body>。 XNUMX つ目の目的は、文書に関する情報 (メタ情報) を含む文書自体について知らせることであり、XNUMX つ目は文書の内容をサポートすることです。
指令では <body> イベントが組み込まれています onload 関数を自動的に実行するために使用します JavaScriptを コンテンツがロードされたら。このリソースを使用すると、グラフィック オブジェクトを定義するコードの実行を開始し、これらのグラフィックを表すセンサーの状態に関する情報がサーバーからロードされるときにオブジェクトを更新できます。
ドキュメントのヘッダー内に含めることができるすべてのメタ情報のうち、 HTML、特に次のディレクティブで記述されているものを知りたいと考えています。
-
<title>これは文書にタイトルを付けるのに役立ちます。通常、ブラウザ ウィンドウまたは対応するタブに表示され、そこに含まれるグラフィックを識別するのに役立ちます。 -
<charset>ドキュメントのエンコードに使用される文字セットを宣言します。これは、エネやアクセントなどの「特別な」記号の場合に特に重要です。 -
<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 これにより、フッター、サイドセクション、ナビゲーションバーなど、Web ページ上で最も頻繁に使用されるコンポーネントに特定の構造を作成できますが、私たちが興味を持っているのは、ドキュメントをグラフィックスコンテナとして使用することです。 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> この中には他に XNUMX つが含まれています。この例では、コードを使用するために非常に重要な XNUMX つのプロパティを紹介します。 HTML: id 要素に一意の識別子を割り当てるために使用されます HTML （A <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 XNUMX つのクラスが割り当てられています。 aspecto_de_hijo, aspecto_raro y tipografia_grande、これらは一緒になって要素の外観と動作を定義すると考えられています。以下の記事で解説しているように、 CSS を使用した IoT センサー グラフィックスの Web 外観の定義、複数のクラスを使用する場合、アスペクトを定義するプロパティのいずれかが両方で定義されている場合は、最後に参照されたものが優先されます。
これまで見てきたように、要素は <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 およびそれらはクラスを通じて関連付けられていますが、XNUMX つの方法でそれらの一部を要素に直接割り当てることもできます。一方で、不動産を利用することもできます。 style そして、オブジェクトのさまざまなグラフィック特性をその値として割り当てます。論理的には、アスペクトをクラスに割り当てる前述の手法を使用することが望ましいですが、この可能性を使用すると、新しいクラスを作成せずに要素に小さな修正を追加できます (非常に特殊な例外)。
一方で、いくつかの要素は、 HTML これらを使用すると、外観を定義する特定のプロパティを使用できます。一般に、これらのプロパティが存在する場合でも、クラスを使用することが望ましいですが、残念ながら、すべての要素がこの代替手段を提供しているわけではありません。一部の要素は、関連付けられたクラスを参照するのではなく、特定のプロパティで特定の値が直接示されることを期待しています。この種の動作を持つ要素の XNUMX つは、まさにコードです。 SVG、プロパティで幅と高さのパーセンテージ値を割り当てる必要があります。 width y height、クラスの代わりにそれぞれ。
でさらに詳しく見られるように、 SVG コードについて説明した記事提案されている単純な方法を使用するには、グラフの次元をパーセンテージとして考慮することをお勧めします。オブジェクトの合計サイズの場合、幅と高さの値に 100% を指定すると、最終的な寸法を設定するコンテナになります ( <div> とともに id="dibujo"、前の例では）
グラフの異なるコンポーネントの場合 SVG (線、円、長方形など) を 100×100 (任意の単位) の領域に含め、比率を保たずに長方形に展開します。プロパティ viewBox y preserveAspectRatio 要素の SVG これらの価値観を確立するのは彼らの責任です。最初のケースでは、座標点 (0,0) から座標点 (100,100) に向かう長方形のビューがあり、次のように表されます。 "0 0 100 100" そしてXNUMX番目には値が入ります 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を。以下の例には、次の形式を使用する XNUMX つのグラフィック ブロックが含まれています。 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コメント