JavaScript を使用して IoT に接続されたセンサーからのデータの SVG グラフィックを生成および変更する

描画に関する一連の記事の最後の部分です。モノのインターネットに接続されたセンサーからのデータを含むグラフィックスで生成または変更する方法について説明します。 JavaScriptを形式の図面 SVG そしていくつかの要素 HTML コンテナとして機能するか、グラフィックスに補足的な情報を提供するもの。

モノのインターネット (IoT) に接続されたセンサーからのデータグラフ JavaScript による生成と変更

このチュートリアルの対象ユーザーは、エレクトロニクスおよびコンピュータープログラミングのプロファイルを作成することになっています。マイクロコントローラー、彼らはよく知らないかもしれません。 HTML, CSS o SVG;このため、前回の記事では、言語または対応するテクノロジについて簡単に説明しました。この最後の部分では、アプローチが少し異なります。読者は確かにプログラミング方法を知っているため、言語を使用する可能性があります。 C + + その方法 JavaScriptを、基本的な構文を共有します C 基本的なプログラミング概念のほとんどをスキップして、相違点と、IoT でセンサーグラフィックスを作成する際の関心のある特定の使用法に焦点を当てるための参考資料として捉えることができます。

名前は、最初の違いを理解する手がかりを与えます。 JavaScriptをプログラミング言語ですスクリプト (ハイフン) したがって、それは解釈された、コンパイルする必要はありません。その文脈スクリプト (Web ブラウザなど) が注文を読み取り、翻訳し、実行します。正確に言うと、ほとんどの場合、ランタイムコンパイル(JIT)ただし、コードを書くプロセスに関しては JavaScriptをそれは私たちには影響しません。コードを書くだけで機能します。

この名前には最初の混乱も含まれています。 JavaScriptを～とは全く関係がありません Java。開発当初は、ネットスケープそのブラウザでは、最初は Mocha と呼ばれ、次に、より混乱の少ない LiveScript と呼ばれました。ブラウザでの実装が成功し、ブラウザを超えた後、次のように標準化されました。 ECMAScriptの（AT ECMA-262、バージョン 6 執筆時点では)、それを実装するブラウザに関して中立的になるためです。現在では標準規格もあります ISO 5 年バージョン 2011 以降 (ISO / IEC 16262：2011 記事執筆時点）

JavaScript の変数、基本データ型、オブジェクト

たとえば、次のような場合とは異なります。 C + +, en JavaScriptを変数の宣言時にデータ型が含まれていない また、変数に関連付けられた型は固定されていないため、プログラムの実行中に別の型の値を割り当てる可能性があります。

<br />
var cosa;<br />
cosa=”texto”;<br />
console.log(typeof cosa); // Debería mostrar string en la consola<br />
cosa=123;<br />
console.log(typeof cosa); // Debería mostrar number en la consola<br />
cosa={temperatura:22,corriente:1.5};<br />
console.log(typeof cosa); // Debería mostrar object en la consola

var cosa;

cosa=“texto”;

console.log(typeof cosa); // Debería mostrar string en la consola

cosa=123;

console.log(typeof cosa); // Debería mostrar number en la consola

cosa={temperatura:22,corriente:1.5};

console.log(typeof cosa); // Debería mostrar object en la consola

前の例では、変数「thing」が (データ型を示さずに) 宣言されており、その後、別の型のデータが割り当てられ、それが参照されます。 typeof というタイプ JavaScriptを彼が解釈したことだ。コードをデバッグするには、Web ブラウザのインスペクターコンソール (Web のプレゼンテーションには影響しません) にコードを記述します。 console.log().

データを特定の型、特にテキストから数値に強制的に変換するには、次のような関数を使用できます。 parseInt() o parseFloat() それぞれ整数または浮動小数点数に変換されます。逆の変換は次のように行うことができます String()ただし、通常は自動変換で十分であるため、必要になる可能性は低いです。と parseFloat()たとえば、オブジェクトの幅や高さなど、単位を含む Web ページプロパティの値を取得できます。このように、表現は、 parseFloat("50px"); 結果として数値 50 が返されます。

En JavaScriptを二重引用符と一重引用符の区別はありません;どちらの場合もデータ型は次のとおりです。 string、エスケープコードを必要とせずに、それぞれにもう一方を含めることができます。

<br />
var texto;<br />
console.log(typeof texto); // Debería mostrar string en la undefined<br />
texto=”esto es un texto”;<br />
console.log(typeof texto); // Debería mostrar string en la consola<br />
texto=’A’;<br />
console.log(typeof texto); // Debería mostrar string en la consola<br />
texto=”esto es un ‘texto'”;<br />
console.log(typeof texto); // Debería mostrar string en la consola<br />
texto='”A”‘;<br />
console.log(typeof texto); // Debería mostrar string en la consola

var texto;

console.log(typeof texto); // Debería mostrar string en la undefined

texto=“esto es un texto”;

console.log(typeof texto); // Debería mostrar string en la consola

texto=‘A’;

console.log(typeof texto); // Debería mostrar string en la consola

texto=“esto es un ‘texto'”;

console.log(typeof texto); // Debería mostrar string en la consola

texto=‘”A”‘;

console.log(typeof texto); // Debería mostrar string en la consola

前の例では、変数が宣言されている (存在している) が値が割り当てられていない場合、その変数には未定義のデータ型が含まれていることがわかります (undefined）。未割り当てのオブジェクトには次の値があります null;つまり、オブジェクトは存在しますが、値はありません。それを参照する変数には、 typeof undefined シノ object。オブジェクトは空にすることもできます。つまり、null ではなく、プロパティを持たないこともあります。

へ オブジェクトを定義する JavaScriptを 中括弧 ({ y }) コロン記号 (:) プロパティ名プロパティ値とカンマ (,) 異なるプロパティ。オブジェクトを表現するこの方法の詳細については、次の記事を参照してください。 JSON形式.

別の考えにつながる可能性のある構文を使用することもできますが、 en JavaScriptをプロトタイプ以外にクラスはありませんつまり、オブジェクトがプロパティとメソッドを継承するために、他のオブジェクト (子) が参照として使用する別のオブジェクト (プロトタイプ) が作成されます。のスタイルに最も近い構文 JavaScriptをプロトタイプを使用することは Object.create を使用することも可能です (そして場合によっては便利です) new 他のオブジェクト指向言語と同様です。

<br />
var perro=new Mamifero(); // Esto funciona, pero no es exactamente el nuevo estilo JavaScript<br />
console.log(perro instanceof Mamifero);<br />
var gato=Object.create(Mamifero); // Crear un objeto usando un prototipo al estilo JavaScript<br />
console.log(Mamifero.isPrototypeOf(gato));

var perro=new Mamifero(); // Esto funciona, pero no es exactamente el nuevo estilo JavaScript

console.log(perro instanceof Mamifero);

var gato=Object.create(Mamifero); // Crear un objeto usando un prototipo al estilo JavaScript

console.log(Mamifero.isPrototypeOf(gato));

へ あるオブジェクトが別のオブジェクトのインスタンスであるかどうかをクエリする、プロトタイプとして使用する場合、そのプロパティを継承する場合、つまり、次のように使用できます。 instanceof (で作成 new）または isPrototypeOf (で作成 Object.create) オブジェクトがプロトタイプを使用する場合は true、使用しない場合は false と評価されます。

別のオブジェクトをプロトタイプとして使用してオブジェクトが作成されると、つまりオブジェクトがインスタンス化されると、そのオブジェクトは 新しいプロパティを追加するか、プロトタイプのプロパティをオーバーライドします 次のようなドット構文を使用します gato.peso=2.5.

La の配列 JavaScriptを それらはあなたがおそらく知っているものとは異なります C。まず、それらは長さを示す必要がなく、開き角かっこと閉じ角かっこの記号のみを使用して宣言されます ([ y ])、コンポーネントは異種 (同じ配列内の異なるデータ型) にすることができ、制限に制限されることなく新しい要素を追加できます。の行列 JavaScriptを実際には要素のリスト (コレクション) です。 数値インデックスまたは名前によって参照される。配列には数値インデックスと要素名を同時に含めることができますが、XNUMX 番目のタイプを活用するにはオブジェクト (プロパティ) を使用するのが一般的です。

<br />
// Declarar matrices (arrays)<br />
var preparada=[]; // La matriz ha sido declarada pero (todavía) no contiene valores<br />
var cosas=[“silla”,”mesa”,”caja”]; // Matriz declarada con componentes formada por cadenas de texto<br />
var valores=[200,”lleno”,0.5,true,”simple”,false,false,10]; // Matriz declarada con componentes heterogéneos<br />
var ramas=[20,”abc”,[1,2,3],false,[10,20,[“uno”,”dos”]]]; // Matriz que contiene matrices<br />
var demode=new Array(10,20,30,4,3,2,1); // La sintaxis con new no es la preferida de JavaScript aunque funciona…<br />
var peligrosa=new Array(10); // …pero con el riesgo de confundir índices con elementos: la matriz peligrosa tiene 10 elementos, no un elemento de valor 10</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>// Acceder a los valores de la matriz<br />
preparada.push(33.33); // Añade un nuevo valor al final de la matriz<br />
console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 1 elemento<br />
console.log(cosas[0]); // Muestra en la consola el primer valor de la matriz (las matrices empiezan en el índice cero)<br />
cosas[2]=”tarro”;<br />
preparada[10]=50; // Los índices no tienen que ser consecutivos<br />
console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 11 elementos<br />
console.log(“Elemento sexto: “+preparada[5]); // undefined</p>
<p>// Verificar si una variable es (apunta a) una matriz<br />
console.log(Array.isArray(cosas)); // Nuevas versiones de JavaScript (ECMAScript versión 5 o superior)<br />
console.log(cosas instanceof Array); // Implementaciones de JavaScript (ECMAScript) más viejas</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>// Para esto es mejor usar objetos<br />
var frutas=[];<br />
frutas[“peras”]=20;<br />
frutas[“manzanas”]=30;<br />
frutas[4]=10;<br />
console.log(frutas.peras);<br />
console.log(frutas[“manzanas”]);<br />
console.log(frutas[4]);<br />
console.log(frutas[3]); // undefined<!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-719" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_9 - incontent_9 --><!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-122" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_9 - incontent_9 --><!-- Ezoic - wp_incontent_9 - incontent_9 --><div id="ezoic-pub-ad-placeholder-122" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_9 - incontent_9 -->

// Declarar matrices (arrays)

var preparada=[]; // La matriz ha sido declarada pero (todavía) no contiene valores

var cosas=[“silla”,“mesa”,“caja”]; // Matriz declarada con componentes formada por cadenas de texto

var valores=[200,“lleno”,0.5,true,“simple”,false,false,10]; // Matriz declarada con componentes heterogéneos

var ramas=[20,“abc”,[1,2,3],false,[10,20,[“uno”,“dos”]]]; // Matriz que contiene matrices

var demode=new Array(10,20,30,4,3,2,1); // La sintaxis con new no es la preferida de JavaScript aunque funciona…

var peligrosa=new Array(10); // …pero con el riesgo de confundir índices con elementos: la matriz peligrosa tiene 10 elementos, no un elemento de valor 10

// Acceder a los valores de la matriz

preparada.push(33.33); // Añade un nuevo valor al final de la matriz

console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 1 elemento

console.log(cosas[0]); // Muestra en la consola el primer valor de la matriz (las matrices empiezan en el índice cero)

cosas[2]=“tarro”;

preparada[10]=50; // Los índices no tienen que ser consecutivos

console.log(“La matriz ‘preparada’ contiene “+preparada.length+” elementos”); // Ahora contine 11 elementos

console.log(“Elemento sexto: “+preparada[5]); // undefined

// Verificar si una variable es (apunta a) una matriz

console.log(Array.isArray(cosas)); // Nuevas versiones de JavaScript (ECMAScript versión 5 o superior)

console.log(cosas instanceof Array); // Implementaciones de JavaScript (ECMAScript) más viejas

// Para esto es mejor usar objetos

var frutas=[];

frutas[“peras”]=20;

frutas[“manzanas”]=30;

frutas[4]=10;

console.log(frutas.peras);

console.log(frutas[“manzanas”]);

console.log(frutas[4]);

console.log(frutas[3]); // undefined

前の例でわかるように、変数が配列 (配列オブジェクトである) のインスタンスに対応するかどうかを確認するには、次のコマンドを使用できます。 instanceof、すでに汎用オブジェクトで使用されているか、またはより新しいバージョンの JavaScriptを頼ることができます Array.isArray()

配列の要素にアクセスするには、そのインデックス (matriz[7])、または角かっこ内の名前を含むプロパティ名 (matriz["nombre"]) またはオブジェクトの通常のドット構文 (matriz.nombre）。名前はテキスト文字列であるため、変数を含む式を使用して作成できます。プロパティを含む配列をループするには、次の形式のループを使用できます。 for(propiedad in matriz).

<br />
var matriz=[];<br />
matriz[“color”]=”verde”;<br />
matriz[“grosor”]=10;<br />
matriz[“estado”]=”nuevo”;<br />
matriz[0]=25.0;<br />
matriz[1]=”uno”;<br />
for(propiedad in matriz)<br />
{<br />
  console.log(propiedad+” valor “+matriz[propiedad]);<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>/* El resultado en la consola será:</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>0 valor 25<br />
1 valor uno<br />
color valor verde<br />
grosor valor 10<br />
estado valor nuevo</p>
<p>*/<!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-125" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_12 - incontent_12 --><!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-125" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_12 - incontent_12 --><!-- Ezoic - wp_incontent_12 - incontent_12 --><div id="ezoic-pub-ad-placeholder-722" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_12 - incontent_12 -->

var matriz=[];

matriz[“color”]=“verde”;

matriz[“grosor”]=10;

matriz[“estado”]=“nuevo”;

matriz[0]=25.0;

matriz[1]=“uno”;

for(propiedad in matriz)

{

console.log(propiedad+” valor “+matriz[propiedad]);

}

/* El resultado en la consola será:

0 valor 25

1 valor uno

color valor verde

grosor valor 10

estado valor nuevo

私たちの治療目的にとって興味深いのは、 オブジェクト Date、日付と時刻を表現および管理するために使用します。 JavaScriptを。オブジェクトはデータなしでインスタンス化できるため、現在の日付と時刻を取得することも、1 年 1970 月 XNUMX 日からのミリ秒単位で日付を値として指定して作成することもできます (例: Unix 時間または POSIX 時間ただし、秒ではなくミリ秒で表現されます)、または年、月、日、時間などの個別の値を指定します。

オブジェクトには、一連の完全なオブジェクトが含まれています。 日付と時刻をクエリまたは設定するメソッド:

now()
1 年 1970 月 XNUMX 日からの現在の日付と時刻をミリ秒単位で返します。
getTime() | setTime()
1 年 1970 月 XNUMX 日からの時間値をそれぞれミリ秒単位で取得または変更します。 valueOf()これはほとんどのオブジェクトに存在するメソッドですが、対応する Date オブジェクトの値も取得されます。 getTime() とともに Unix 時間または POSIX 時間ミリ秒で表されます。
getMilliseconds() | setMilliseconds()
オブジェクトのミリ秒の小数部をクエリまたは設定するために使用されます。 Date それが実行される上で。参照すると、取得される値は 0 ～ 999 ですが、合計日付と時刻に累積されるより大きな値を割り当てることができるため、他の get メソッドと同様に、オブジェクトの値を増やすのに役立ちます。 Date (負の値が使用されている場合は、値を減らします)。

getSeconds() | setSeconds()
オブジェクトの秒の値をそれぞれ返すか変更します Date.
getMinutes() | setMinutes()
オブジェクトの議事録を参照または設定するために使用されます Date.
getHours() | setHours()
オブジェクトの時間 (0 ～ 23) を参照または変更できます。 Date.

getDay()
日付の曜日を 0 ～ 6 (日曜日から土曜日) の値で返します。
getDate() | setDate()
オブジェクトの日付を返すか変更します。 Date それが適用されます。
getMonth() | setMonth()
オブジェクトの月番号を参照または変更するために使用されます Date.

getFullYear() | setFullYear()
日付と時刻を含むオブジェクトの年の値をクエリまたは設定します。

以前の方法 Date バージョンを含める UTC 中間計算を行わずに世界時を直接操作できるようになります。そういう意味では、例えば、 getHours() バージョンがあります getUTCHours() o getMilliseconds() 代替案 getUTCMilliseconds() 公式（法定）時間または世界時と交互に動作します。と getTimezoneOffset() 世界時と地方公時の間に存在する違いを知ることができます。

<br />
var dia_semana=[“domingo”,”lunes”,”martes”,”miércoles”,”jueves”,”viernes”,”sábado”];<br />
var nombre_mes=[“enero”,”febrero”,”marzo”,”abril”,”mayo”,”junio”,”julio”,”agosto”,”septiembre”,”octubre”,”noviembre”,”diciembre”];<br />
var digitos_hora;<br />
var hoy=new Date();<br />
var texto_hoy=””;<br />
texto_hoy+=”Hoy es “;<br />
texto_hoy+=dia_semana[hoy.getDay()];<br />
texto_hoy+=”, “;<br />
texto_hoy+=hoy.getDate();<br />
texto_hoy+=” de “;<br />
texto_hoy+=nombre_mes[hoy.getMonth()];<br />
texto_hoy+=” de “;<br />
texto_hoy+=hoy.getFullYear();<br />
texto_hoy+=” y son las “;<br />
digitos_hora=hoy.getHours();<br />
texto_hoy+=digitos_hora>9?digitos_hora:”0″+digitos_hora;<br />
texto_hoy+=”:”;<br />
digitos_hora=hoy.getMinutes();<br />
texto_hoy+=digitos_hora>9?digitos_hora:”0″+digitos_hora;<br />
texto_hoy+=”:”;<br />
digitos_hora=hoy.getSeconds();<br />
texto_hoy+=digitos_hora>9?digitos_hora:”0″+digitos_hora;

var dia_semana=[“domingo”,“lunes”,“martes”,“miércoles”,“jueves”,“viernes”,“sábado”];

var nombre_mes=[“enero”,“febrero”,“marzo”,“abril”,“mayo”,“junio”,“julio”,“agosto”,“septiembre”,“octubre”,“noviembre”,“diciembre”];

var digitos_hora;

var hoy=new Date();

var texto_hoy=“”;

texto_hoy+=“Hoy es “;

texto_hoy+=dia_semana[hoy.getDay()];

texto_hoy+=“, “;

texto_hoy+=hoy.getDate();

texto_hoy+=” de “;

texto_hoy+=nombre_mes[hoy.getMonth()];

texto_hoy+=” de “;

texto_hoy+=hoy.getFullYear();

texto_hoy+=” y son las “;

digitos_hora=hoy.getHours();

texto_hoy+=digitos_hora>9?digitos_hora:“0”+digitos_hora;

texto_hoy+=“:”;

digitos_hora=hoy.getMinutes();

texto_hoy+=digitos_hora>9?digitos_hora:“0”+digitos_hora;

texto_hoy+=“:”;

digitos_hora=hoy.getSeconds();

texto_hoy+=digitos_hora>9?digitos_hora:“0”+digitos_hora;

JavaScript関数

これを読んでいるあなたは、きっとプログラミングの仕方を知っているはずです。マイクロコントローラー en C またはで C + + そして関数の概念を知る。基本的な考え方は同じですが、 JavaScriptをそれらの定義と使用方法は少し異なります。まず最初に、すでに言われていますが、 JavaScriptをデータ型を明示的に使用しないため、関数を定義するときにデータ型を指定する必要はありません。。フォローするには、 関数に名前を付けることは必須ではなく、匿名でもかまいません。これらを呼び出すために変数に関連付けることもできますが、関数の定義の後に括弧とパラメーターを追加してすぐに呼び出すと便利な場合もあるため、必ずしも必要でない場合もあります。

関数を定義するには、接頭辞を付けます function、該当する場合は、名前、引数 (関数に渡されるパラメーター) を括弧内に記述し、関数が呼び出されたときに実行されるコードを中括弧内に記述します。

<br />
function doble(numero)<br />
{<br />
  var resultado=numero*2;<br />
  return resultado;<br />
}

function doble(numero)

{

var resultado=numero*2;

return resultado;

}

確かに、前の例では「result」変数はまったく必要ありませんでしたが、これは次のことを覚えておく良い言い訳になります。 変数スコープこれは期待どおりに機能します。「result」変数は「double」関数内にのみ存在します。で JavaScriptをも使用できます letの代わりに var、変数のスコープをコードブロックコンテキストに設定します (中括弧で囲まれています)。 { y })

前のセクションでオブジェクトについて説明したとき、基本的なものが欠けていました。プロパティは定義されていますが、メソッドは定義されていませんでした。予想通り、 オブジェクトメソッドは関数です、それらには名前がなく、オブジェクト定義によって割り当てられた（プロパティ）名から使用（呼び出されます）します。

<br />
var<br />
termostato=<br />
{<br />
  temperatura_actual:0.0,<br />
  temperatura_frio:18.5,<br />
  temperatura_calor:22.0,<br />
  consumo:0,<br />
  ver_temperatura:<br />
  function()<br />
  {<br />
    console.log(“Temperatura actual: “+this.temperatura_actual+” °C”);<br />
  }<br />
}

var

termostato=

{

temperatura_actual:0.0,

temperatura_frio:18.5,

temperatura_calor:22.0,

consumo:0,

ver_temperatura:

function()

{

console.log(“Temperatura actual: “+this.temperatura_actual+” °C”);

}

前の例には、コンソールを介して「current_temperature」プロパティの値を表示するメソッド「view_temperature」がすでに存在します。あまり便利ではありませんが、オブジェクトの定義がどのようなものであるかについてより完全なアイデアが得られます。 JavaScriptを.

オブジェクトのメソッド (関数) のプロパティにアクセスするには、次を使用します。 this11 行目の前の例と同様に、「current_temperature」プロパティを使用する場合。

JavaScript を使用してドキュメントオブジェクトモデル (DOM) にアクセスする

から JavaScriptをシステムリソースにはアクセスできませんが、Web ページが実行される Web ページのコンテンツや、そのページを表示するブラウザの一部にはアクセスできます。 からアクセスされるプロパティとメソッドをサポートするデータ構造 JavaScriptをウィンドウオブジェクトの一部、具体的には、オブジェクト (ドキュメント) のコンテンツ HTML) オブジェクトに対応します document。わかりやすくするために使用されることもありますが、メソッドやプロパティを参照するためにウィンドウの前に置く必要はありません。たとえば、次のように使用するだけで十分です。 documentのように、ルートオブジェクトの名前を記述する必要はありません。 window.document現在のウィンドウが参照されている限り。

最もよく使われる形式は、 文書内のオブジェクトを見つける HTML それはメソッドを通じてです getElementById()、コード作成時に指定したidが引数として渡されます。 HTML。前のセクションで説明したことから、オブジェクト内のコンポーネントにもアクセスできると容易に推測できます。 document ドット構文を使用する (document.componente) または両方の名前を使用した括弧 (document["componente"])、数値インデックスなどの最も便利なものは、手動で作成された Web ページのコンテンツにアクセスする場合には使用が難しく、実用的ではありません。

とともに JavaScriptをかもしれない 別の要素 (要素または親ノード) を含む要素を取得します あなたの財産を相談する parentNode またはあなたの財産 parentElementの違いは、親要素 (parentElement) 文字列の最後の要素 DOM ヌルです(null) と親ノード (parentNode) はドキュメント自体です (document).

へ 要素の内容を変更する HTML、たとえばラベルのもの <div>、使用できます innerHTML そのプロパティを変更するには、次のようにして別のクラスを割り当てることを選択できます。 className またはそのプロパティを個別に変更します style。 Web ページ上の要素によって表示されるスタイルを参照することは、必ずしも有用であるとは限りません。 style それは、いくつかの要因に依存するか、単に明示的に指定されていない可能性があるためです。 最終的にWebページに表示される要素のスタイルを確認するには、getComputedStyleメソッドを使用します。.

文書要素へ HTML いくつかのクラスをそれに割り当てて、その外観と動作を決定できます。 オブジェクトのクラスのリストを管理する JavaScriptを 頼ることができます classList メソッドを提供する add 新しいクラスをリストに追加するには、 remove それを削除するには、 toggle それを置き換えるか、要素のクラスリストの内容を参照するには item と contains、リスト内の特定の位置を占めるクラスと値を返します。 true o false 特定のクラスがリストにあるかどうか。

<br />
var contenedor_temperatura=document.getElementById(“temperatura”); // Encontrar el div con id=”temperatura”<br />
contenedor_temperatura.innerHTML=””; // Eliminar el contenido provisionalmente para que no se vean los cambios<br />
contenedor.className=”bloque_temperatura”; // Asignar una nueva clase<br />
if(temperatura>20) // Si la temperatura es mayor que 20 °C…<br />
{<br />
  contenedor.style.color=”#FF6666″; // …usar el color rojo en lugar del color normal de la clase<br />
}<br />
contenedor_temperatura.innerHTML=”La temperatura es “+temperatura+” °C”; // Cuando el aspecto esté preparado mostrar el valor<br />
if(document[“titulo”].classList.contains(“estilo_titulo”)) // Si el objeto “titulo” tiene la clase “estilo_titulo”…<br />
{<br />
  if(document[“titulo”].classList.contains(“general”)) // …y la clase “general”…<br />
  {<br />
    document[“titulo”].classList.remove(“general”);  // …quitar la clase “general”<br />
  }<br />
}<br />
else // Si el objeto “titulo” no tiene la clase “estilo_titulo”…<br />
{<br />
  document[“titulo”].classList.add(“estilo_titulo”); // …añadir la clase “estilo_titulo” (da igual que tenga o no la clase “general”)<br />
}

var contenedor_temperatura=document.getElementById(“temperatura”); // Encontrar el div con id=”temperatura”

contenedor_temperatura.innerHTML=“”; // Eliminar el contenido provisionalmente para que no se vean los cambios

contenedor.className=“bloque_temperatura”; // Asignar una nueva clase

if(temperatura>20) // Si la temperatura es mayor que 20 °C…

{

contenedor.style.color=“#FF6666”; // …usar el color rojo en lugar del color normal de la clase

}

contenedor_temperatura.innerHTML=“La temperatura es “+temperatura+” °C”; // Cuando el aspecto esté preparado mostrar el valor

if(document[“titulo”].classList.contains(“estilo_titulo”)) // Si el objeto “titulo” tiene la clase “estilo_titulo”…

{

if(document[“titulo”].classList.contains(“general”)) // …y la clase “general”…

{

document[“titulo”].classList.remove(“general”); // …quitar la clase “general”

}

else // Si el objeto “titulo” no tiene la clase “estilo_titulo”…

{

document[“titulo”].classList.add(“estilo_titulo”); // …añadir la clase “estilo_titulo” (da igual que tenga o no la clase “general”)

}

前の例では、次の場所にあります。 getElementById 操作したいオブジェクト (要素) <div> 彼のために id)、外観を変更する前に、で割り当ててコンテンツを削除します。 innerHTML 空のテキスト文字列の場合は、次のような新しいクラスが割り当てられます。 className そしてそのスタイルは次のように変更されます style コンテンツの値 (温度) に応じて、該当する場合はプロパティを通じて色を変更します。 color。アスペクトが確立されると、値は再度使用して書き込まれます。 innerHTML.

上記の例の 9 番目の部分 (19 行目から XNUMX 行目) では、コード要素にアクセスします。 HTML 構文を使用する document[] そしてその財産 id 要素のクラスリストをメソッドで変更する classList.remove() そしてメソッドを使ってclassList.add()、条件付き実行で実行されるいくつかのクエリの結果に基づいて、以下を使用して比較します。 classList.contains().

いつ行くの？ 要素を参照する HTML varias コード全体で何度も JavaScriptを、それは少しです 変数に代入する方が効率的です または、名前の代わりにそのインデックスを使用します。それ以外の場合は、使用するメソッドが JavaScriptを毎回取得するにはその名前を検索する必要があり、変数にアクセスする場合よりも少し時間がかかります。

へ 新しいオブジェクトをドキュメントに追加する HTML、最初にメソッドで作成できます。 createElement de document そして後でそれらをツリーの必要な時点で残りの要素に組み込みます。 appendChild。オブジェクトを作成するには XML、オブジェクトのような SVG IoT センサーのグラフを描画するために使用します。 createElementNS (NS の場合ネームスペース）。形式について説明したときに説明したように、 SVG、それに対応する名前空間 (現在のバージョンの場合) は次のとおりです。 http://www.w3.org/2000/svgに渡す必要があります createElementNS 要素の型とともに引数として指定します。 svg、この場合。

A の代替 innerHTML テキストをコンテンツとしてドキュメント要素に追加するには HTML 方法です createTextNode() オブジェクト document。この代替手段を使用すると、次のことができます 新しいテキストを作成する (変数に割り当てられている場合は後でアクセスされます) メソッドを使用してオブジェクトツリーに組み込まれます appendChild()。いいね の代替 appendChild()、追加先のノードに既に存在するコンテンツの末尾に新しいコンテンツを追加します。次のように使用できます。 メソッド insertBefore()、既存のオブジェクトの前に新しいオブジェクトを追加します。着る insertBefore() 代わりに appendChild() たとえば、次のような機能を果たすメソッドを提供します。 新しいオブジェクトを既存のオブジェクトの前に並べ替える 前景または背景に近い要素があるグラフィック構造で、ある要素が別の要素の前にある必要がある場合 (リストなど)、またはその要素を覆い隠す必要がある場合。

JavaScript を使用してイベントに反応する

の方法のとき IoT に接続されたセンサーグラフのコンテナとして Web ページを使用する使われた onload ラベルに <body> をクリックしてグラフの描画を開始します。このプロパティは、コードオブジェクトに関連付けられています HTML、を参照 イベント JavaScriptを。すでに説明したように、ページがロードされたときに関数が実行されます。コードに関連付けられていますが、 HTML もっと念頭に置くために、コードに記述することもできます JavaScriptをとして body.onload=dibujar; さ dibujar Web ページのロード時に開始される関数の名前。

の最新バージョンでは、 JavaScriptをイベントは関数に関連付けることができます。 addEventListener フォーマットで objeto.addEventListener(evento,función); または構文を使用して objeto.evento=función; これは古い実装でも機能します。イベントに関連付けられた機能のリンクを解除するには、次のようにします。 removeEventListener と同じ形式です addEventListener.

JavaScriptを Web ページ上で発生する可能性のある多数のイベントに反応できます。たとえば、要素がクリックされたことを検出できます。 HTML とともに onmousedown、またはをクリックすると onclick、キーを押したとき onkeydownでスクロールバーを操作すると、 onscroll。私たちの目的のためには、これで十分です ページの読み込みを検出する onload そしてそのサイズ変更 onresize。これらのイベントをオブジェクトに関連付けます body y window インクルード DOM それぞれ。最初のものはコード内で割り当てることができます HTML、コード内の XNUMX 番目のとおり JavaScriptを最初に呼び出された関数内で、その形式で window.onresize=redimensionar; さ redimensionar ウィンドウのサイズが変更されるたびに呼び出される関数。

一定の時間間隔を置いて実行する

JavaScriptをのリソースが XNUMX つあります 遅延実行: setTimeout、一定時間後に関数を実行します。 setInterval 一定の時間間隔ごとに関数を実行します。どちらのメソッドもパラメータとして、(1) 呼び出された関数、および (2) ミリ秒単位で表される時間間隔を必要とします。動作を停止するには、これらの関数によって返された結果を変数に代入し、それらを引数として渡すことができます。 clearTimeout または clearInterval それらを再度呼び出したくない場合 (または初めて実行したくない場合) setTimeout o setInterval それぞれ。

<br />
var cuenta_atras=setTimeout(descansar,1000*60*20); // Recordar que hay que descansar cuando pasen 20 minutos<br />
var repeticion=setInterval(consultar_correo,1000*60*5); // Revisar el correo cada 5 minutos</p>
<p>function descansar()<br />
{<br />
  alert(“Puedes descansar un rato”); // Esto solamente aparecerá una vez<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function consultar_correo()<br />
{<br />
  alert(“Revisa el correo electrónico”); // Esto aparecerá cada cinco minutos<br />
}</p><!-- Ezoic - wp_incontent_35 - incontent_35 --><div id="ezoic-pub-ad-placeholder-745" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_35 - incontent_35 --><!-- Ezoic - wp_incontent_35 - incontent_35 --><div id="ezoic-pub-ad-placeholder-148" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_35 - incontent_35 --><!-- Ezoic - wp_incontent_35 - incontent_35 --><div id="ezoic-pub-ad-placeholder-148" data-inserter-version="2"></div><!-- End Ezoic - wp_incontent_35 - incontent_35 --><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>function detener_cuenta_atras() // No utiliza argumentos sino la variable global<br />
{<br />
  clearTimeout(cuenta_atras); // Detener la cuenta atrás para avisar a los 20 minutos<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function no_avisar_lectura_correo() // No utiliza argumentos sino la variable global<br />
{<br />
  clearInterval(repeticion); // Dejar de avisar cada 5 minutos<br />
}

var cuenta_atras=setTimeout(descansar,1000*60*20); // Recordar que hay que descansar cuando pasen 20 minutos

var repeticion=setInterval(consultar_correo,1000*60*5); // Revisar el correo cada 5 minutos

function descansar()

{

alert(“Puedes descansar un rato”); // Esto solamente aparecerá una vez

}

function consultar_correo()

{

alert(“Revisa el correo electrónico”); // Esto aparecerá cada cinco minutos

}

function detener_cuenta_atras() // No utiliza argumentos sino la variable global

{

clearTimeout(cuenta_atras); // Detener la cuenta atrás para avisar a los 20 minutos

}

function no_avisar_lectura_correo() // No utiliza argumentos sino la variable global

{

clearInterval(repeticion); // Dejar de avisar cada 5 minutos

}

前の例ではメソッドが導入されています alert 警告標識を表示する役割を果たします。過去には広く使用されていましたが、現在はコードからほぼ禁止されています JavaScriptを Web ページをダイアログボックスで覆うのは非常に攻撃的 (侵入的) であるためです。

のために書かれたプログラムでは、マイクロコントローラー小さなシリーズ（皿の上のものなど） Arduinoの宇野) 前の例のように、グローバル変数を使用するのが一般的です。 JavaScriptをその理由は、コードが短く、特に混乱が生じないこと、関数がアドホックに実装されることが多いこと、およびグローバル変数を使用することでメモリ使用量を非常にシンプルかつ直観的な方法で予測できるためであり、これはリソースが少ないシステムでは非常に重要です。その代わり、 en JavaScriptをグローバル変数の使用を可能な限り最小限に抑えるのが一般的です。 正常に動作するため、メモリ使用量を急ぐ必要がないからです。 CPU よりもはるかに優れたリソースを備えています。 MCUなぜなら、干渉することなく動作する必要がある多くのサードパーティコードと共存する可能性が高く、オープンシステムであるため、将来の実行コンテキストを予測できないためです (プログラムのプログラム)。マイクロコントローラー small は、一度動作するとコードを追加することなくその動作を完全に決定します)。また、コードがその動作をカプセル化してメソッドを可能な限り自己完結型にしないと、アプリケーションのサイズによって読み取りが困難になる可能性があるためです。

JavaScript Math オブジェクトを使用した数学的演算

より複雑な数学的計算の数学的操作はオブジェクトにグループ化されています。 Math。このオブジェクトは直接使用され、組み込まれているメソッドやプロパティ (定数) を使用するためにインスタンス化する必要はありません。

Math.abs(n) パラメータnの絶対値
Math.acos(n) パラメータ n の逆余弦 (結果はラジアン)

Math.asin(n) パラメータ n の逆正弦 (結果はラジアン)
Math.atan(n) パラメータ n の逆正接 (結果はラジアン)
Math.atan2(n,m) n/m の逆正接 (結果はラジアン)

Math.ceil(n) パラメータを最も近い整数に切り上げます
Math.cos(α) パラメータ α のコサイン (α 単位はラジアン)
Math.E 電子番号 (≃2.718281828459045)

Math.exp(n) e をパラメータ n に変換します: eⁿ
Math.floor(n) パラメータ n を最も近い整数に切り捨てます
Math.log(n) パラメータ n の自然対数 (底 e)

Math.LN2 2 の自然対数 (底 e) (≃0.6931471805599453)
Math.LN10 10 の自然対数 (底 e) (≃2.302585092994046)
Math.LOG2E e の底 2 の対数 (≃1.4426950408889634)

Math.LOG10E e の底 10 の対数 (≃0.4342944819032518)
Math.max(a,b,c,…) 渡されたパラメータのリストの最大値
Math.min(a,b,c,…) 渡されるパラメータのリストの最小値

Math.PI 数値 π (≃3.141592653589793)
Math.pow(n,m) 最初のパラメータ n が XNUMX 番目のパラメータ m に累算されます: n^m
Math.random() 0.0から1.0までの（ほぼ）乱数

Math.round(n) パラメータ n を最も近い整数に丸めます
Math.sin(α) パラメータ α の正弦 (α 単位はラジアン)
Math.sqrt(n) パラメータ n の平方根

Math.SQRT1_2 1/2 の平方根 (≃0.7071067811865476)
Math.SQRT2 2 の平方根 (≃1.4142135623730951)
Math.tan(α) パラメータ α のタンジェント (α 単位はラジアン)

AJAX を使用してサーバーからデータをロードする

IoT に保存された情報を描画するために使用される方法は、サーバーからデータを時々ロードし、それらを表すグラフを再描画することで構成されます。 サーバーからデータを読み取るにはテクノロジーが使用されます AJAX (非同期 JavaScript および XML) 物体を通して XMLHttpRequest de JavaScriptを。データグラフのプロットはオブジェクトを再利用して行われます SVG これはすでにコードに含まれています HTML これには、読み込まれた新しいデータに対応するように座標が変更されたプロットが含まれています。

この提案の例では、図面の更新に加えて、各グラフの最終測定データの日付と値を示す Web ページ上のテキストも更新されます。

サーバー側には情報が含まれるデータベースがあります IoTに接続されたセンサーが監視していることを確認します。このデータベースはオブジェクトリクエストによって読み取られます XMLHttpRequest でエンコードされた情報で応答する JSON形式ただし、使用されるメソッドの名前は形式との関係を示唆しています。 XML.

最初の Polaridad.es チュートリアルでは、 IoTデータストレージモノのインターネットに接続されたデバイスから提供される情報をサーバー側から管理するインフラストラクチャの例をご覧いただけます。このシリーズの記事では、サーバーがリソースとして使用されますアパッチそこからプログラミング言語を使用できるようになります PHP データベースにアクセスするには MySQL o MariaDB。 IoT をサポートするために使用されるサーバーでは、データベースが見つかるのが非常に一般的です。 MongoDBの (NoSQL) とプログラミング言語 JavaScriptをオン Node.js ソフトウェアインフラストラクチャとして。

次の関数は、センサーの XNUMX つからの最新データをサーバーに要求する役割を果たします。関数呼び出しでは、オブジェクトが引数として使用されます。 JavaScriptを描画されるデータをサポートします。同じグラフが複数の値を表す場合、たとえば相関関係を視覚的に検索する場合、複数の値を同時に返すようにサーバーにリクエストを行うことができます。これはサーバーの動作方法により、より最適な方法です。 HTTPプロトコル.

<br />
function consultar_ultimo_valor_sensores(objeto_grafico)<br />
{<br />
  var consulta=”zona=”+objeto_grafico.sufijo_nombre;<br />
  var pagina=”ultimo_valor_sensor.php”;<br />
  var resultado;<br />
  var ajax;<br />
  if(window.XMLHttpRequest)<br />
  {<br />
    ajax=new XMLHttpRequest(); // ajax=Object.create(XMLHttpRequest);<br />
  }<br />
  else // Versiones antiguas de MS Internet Explorer<br />
  {<br />
    ajax=new ActiveXObject(“Microsoft.XMLHTTP”);<br />
  }<br />
  ajax.onreadystatechange=<br />
  function()<br />
  {<br />
    if(ajax.readyState==4&&ajax.status==200&&ajax.responseType==”json”)<br />
    {<br />
      resultado=JSON.parse(ajax.responseText);<br />
      if(resultado.fecha>objeto_grafico.fecha[objeto_grafico.fecha.length-1])<br />
      {<br />
        // Normalmente se gestionará la respuesta utilizando el objeto<br />
        redibujar_grafico(objeto_grafico,resultado);<br />
        // Si los datos son sencillos y tienen una estructura clara puede ser más práctico usarla directamente<br />
        // redibujar_grafico(objeto_grafico,[resultado.fecha,resultado.temperatura]);<br />
      }<br />
    }<br />
  }<br />
  ajax.open(“POST”,pagina);<br />
  ajax.setRequestHeader(“Method”,”POST “+pagina+” HTTP/1.1″);<br />
  ajax.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);<br />
  ajax.setRequestHeader(“Content-length”,consulta.length);<br />
  ajax.setRequestHeader(“Connection”,”close”);<br />
  ajax.send(consulta);<br />
}

function consultar_ultimo_valor_sensores(objeto_grafico)

{

var consulta=‘zona=”+objeto_grafico.sufijo_nombre;

var pagina=“ultimo_valor_sensor.php”;

var resultado;

var ajax;

if(window.XMLHttpRequest)

{

ajax=new XMLHttpRequest(); // ajax=Object.create(XMLHttpRequest);

}

else // Versiones antiguas de MS Internet Explorer

{

ajax=new ActiveXObject(“Microsoft.XMLHTTP”);

}

ajax.onreadystatechange=

function()

{

if(ajax.readyState==4&&ajax.status==200&&ajax.responseType==“json”)

{

resultado=JSON.parse(ajax.responseText);

if(resultado.fecha>objeto_grafico.fecha[objeto_grafico.fecha.length–1])

{

// Normalmente se gestionará la respuesta utilizando el objeto

redibujar_grafico(objeto_grafico,resultado);

// Si los datos son sencillos y tienen una estructura clara puede ser más práctico usarla directamente

// redibujar_grafico(objeto_grafico,[resultado.fecha,resultado.temperatura]);

}

ajax.open(“POST”,pagina);

ajax.setRequestHeader(“Method”,“POST “+pagina+” HTTP/1.1″);

ajax.setRequestHeader(“Content-type”,“application/x-www-form-urlencoded”);

ajax.setRequestHeader(“Content-length”,consulta.length);

ajax.setRequestHeader(“Connection”,“close”);

ajax.send(consulta);

}

前の例の XNUMX 行目では、サーバーに対して行われるクエリが準備されています。このクエリには「zone」引数が渡されます。その値は、監視対象の場所の名前またはコードになります。異なるセンサー (たとえば、異なる部屋の温度を測定する温度計) が同じデータベース内に共存する可能性があります。前の関数に渡されるパラメーター (チャートデータを含むオブジェクト) には、部屋の名前 (「name_suffix」) を含むプロパティが含まれることが期待されます。

前のコードの 7 行目と 14 行目の間では、 対象 XMLHttpRequest これは変数「ajax」に保存されます。オブジェクトの作成方法を選択する前に、検索します。 window もし XMLHttpRequest は利用できませんでした (Microsoft のエクスプローラーの古いバージョンで発生した問題であり、大幅に遅れていますが、(よりネイティブな) 構文を使用してオブジェクトを作成する代替例として機能します) Object.create o new他のオブジェクト指向言語と同様です。

応答をすぐに管理できるようにするために、サーバーにリクエストを送信する前に、応答を処理するコードが 15 ～ 26 行目に用意されています。

の方法 クエリを実行します HTTP サーバーへの送信内容は次のとおりです 接続を開く とともに open タイプとページ (オプションでユーザー名とパスワード) を示します。 ヘッダーを準備する プロトコルの setRequestHeader y リクエストを送信する とともに send。ヘッダー HTTP Content-length 次を使用して計算されるクエリの長さ (文字数) を知る必要があります。 length.

リクエストのとき AJAX 準備が完了すると、イベントに関連付けられた関数が実行されます onreadystatechange。前の例では、関数を割り当てる代わりに、サーバーから到着するデータの受信を管理する匿名関数がオンザフライで定義されています。まず、18 行目で、リクエストのステータスが「終了」であることを確認します。これは、値に対応します。 4 プロパティの readyState、ステータスが「OK」であること HTTPプロトコル（コード 200）プロパティから取得できます status そして到着したデータは JSON形式、物件の相談 responseType.

応答のステータスが期待どおりであることを確認したら、前の例の 20 行目 結果を含むオブジェクトを作成し、テキストを変換します JSONの。応答には返される日付が指定されています。これにより、サーバーが送信した結果が以前にグラフに表現されていたかどうかを確認できます。これは 21 行目で確認されます。データが新しい場合は、23 行目で次の関数が実行されます。と呼ばれる新しい情報を使用してグラフを再描画する責任があります。

この読み取り方法を提案するときの考え方は、データが非常に頻繁に更新されるということです。提示された情報が長期間に相当する場合 (XNUMX 日または XNUMX 週間の気温など)、利用可能なすべてのデータを収集する最初のリクエストを実装してから、例のようなデータを更新するリクエストを実装できます。時代の特派員。

テスト用のランダムデータを生成する

すべてのサーバーとクライアントのインフラストラクチャの準備ができたら、前のセクションのような関数がデータの読み取りとグラフの描画を担当しますが、 テスト段階では、制御された範囲内で乱数を使用する方が現実的である可能性があります。 書かれているコードが正しいかどうかを確認します。次の関数は、最終アプリケーションの構築中にデータを取得する例として機能します。

<br />
function consultar_ultimo_valor_sensores<br />
(<br />
  objeto_grafico,// Objeto dentro del elemento SVG que representa el trazado<br />
  valor_maximo,  // Valor máximo<br />
  valor_minimo,  // Valor mínimo<br />
  margen_valor   // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo<br />
)<br />
{<br />
  // La forma más genérica es usar objetos<br />
  /*<br />
  var nuevo_valor_inventado=<br />
  {<br />
    fecha:Math.round(Date.now()+Math.random()*1000),<br />
    temperatura:Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo<br />
  };<br />
  */<br />
  // En este caso concreto, como son pocos datos y con una estructura concreta es más práctico usar un vector<br />
  var nuevo_valor_inventado=<br />
  [<br />
    Math.round(Date.now()+Math.random()*1000),<br />
    Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo<br />
  ];<br />
  redibujar_grafico(objeto_grafico,nuevo_valor_inventado);<br />
}

function consultar_ultimo_valor_sensores

(

objeto_grafico,// Objeto dentro del elemento SVG que representa el trazado

valor_maximo, // Valor máximo

valor_minimo, // Valor mínimo

margen_valor // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo

)

{

// La forma más genérica es usar objetos

var nuevo_valor_inventado=

{

fecha:Math.round(Date.now()+Math.random()*1000),

temperatura:Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo

};

// En este caso concreto, como son pocos datos y con una estructura concreta es más práctico usar un vector

var nuevo_valor_inventado=

[

Math.round(Date.now()+Math.random()*1000),

Math.random()*Math.abs(valor_maximo–valor_minimo)+valor_minimo

];

redibujar_grafico(objeto_grafico,nuevo_valor_inventado);

}

上記の例では、データベースから情報を読み取る代わりに、情報をランダムに生成し、グラフの描画を担当する関数に渡します。作成されたデータは、ミリ秒単位の値で表される日付、センサー情報を記録した瞬間、および最大値と最小値の間の監視データによって形成されるベクトルです。

この例では、日付を生成するときに、発明時の日付に対して最大 1000 秒 (XNUMX ミリ秒) 遅れる可能性があります。として Math.random() 0.0 ～ 1.0 の数値を生成し、それに 1000 を掛けると 0 ～ 1000 の数値が生成され、それが整数に変換されます。同様に、値は乱数に範囲 (最大値から最小値を引いた値) を乗算し、最小値を加算することによって取得されます。

SVG プロットを使用して IoT センサーグラフを描画する

表現したい値 (この例では温度) とその時間的位置を取得する方法を説明しました。これらは座標の形で一緒に表現できます。以下の例は、パスを描画する関数を示しています。これらの点と、オプションで上部の線で区切られた色付きの領域を結合します。結果は次の画像のようになります。

IoT センサーからのデータを表すために SVG と JavaScript で生成されたグラフの例

グラフの横軸（X）は時間を表し、縦軸（Y）はIoTに接続されたセンサーが監視した値を表します。この提案では、センサーのステータスに関するほぼリアルタイムの情報を提供するためにグラフが非常に頻繁に (たとえば、XNUMX 秒ごとに) 更新されるため、水平間隔は数秒です。

<br />
function actualizar_grafico<br />
(<br />
  grafico, // Objeto SVG con el que se dibuja la gráfico<br />
  coordenada, // Matriz con las coordenadas del trazado formada por pares [tiempo,valor] ordenados primero el más antiguo (tiempo menor) último el más nuevo<br />
  tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)<br />
  valor_maximo, // Valor máximo aceptable antes de emitir una alarma<br />
  valor_minimo, // Valor mínimo aceptable antes de emitir una alarma<br />
  margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo<br />
  parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)<br />
)<br />
{<br />
  var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  var coordenadas_trazado=”M “; // Cadena de texto que representa la propiedad “d” del trazado SVG<br />
  var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico<br />
  var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico<br />
  var sin_recortar=true; // False si la gráfico se sale de la caja (si se sale, si recorta, se hace false para no seguir dibujando puntos)</p>
<p>  var contador_valor=coordenada.length-1; // Variable para recorrer los valores (índice)<br />
  var posicion=[]; // Variable intermedia (para hacer más legible el código) con la que calcular la posición horizontal y vertical de un punto del trazado</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X<br />
  escala[1]=alto_caja/(Math.abs(valor_maximo-valor_minimo)+margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y<br />
  desplazamiento[0]=coordenada[coordenada.length-1][0]-tiempo_total_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado<br />
  desplazamiento[1]=margen_valor-valor_minimo; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)<br />
  if(cerrado) // Si se dibuja un path (trazado) cerrado…<br />
  {<br />
    coordenadas_trazado+=ancho_caja+”,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja<br />
  }<br />
  while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…<br />
  {<br />
    posicion[0]=(coordenada[contador_valor][0]-desplazamiento[0])*escala[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal<br />
    posicion[1]=alto_caja-(coordenada[contador_valor][1]+desplazamiento[1])*escala[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)<br />
    coordenadas_trazado+=posicion[0]+”,”+posicion[1]; // Formar la coordenada con la X y la Y<br />
    if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…<br />
    {<br />
      coordenadas_trazado+=contador_valor>0?” L “:””; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo<br />
      contador_valor–; // Pasar al siguiente valor<br />
    }<br />
    else // Si se ha rebasado el margen izquierdo…<br />
    {<br />
      sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)<br />
    }<br />
  }<br />
  if(cerrado) // Si se dibuja un trazado (path) cerrado…<br />
  {<br />
    coordenadas_trazado+=” L “+posicion[0]+”,”+alto_caja+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG<br />
  }<br />
  grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado<br />
}

function actualizar_grafico

(

grafico, // Objeto SVG con el que se dibuja la gráfico

coordenada, // Matriz con las coordenadas del trazado formada por pares [tiempo,valor] ordenados primero el más antiguo (tiempo menor) último el más nuevo

tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)

valor_maximo, // Valor máximo aceptable antes de emitir una alarma

valor_minimo, // Valor mínimo aceptable antes de emitir una alarma

margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo

parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)

parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)

parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)

)

{

var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)

var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)

var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)

var coordenadas_trazado=“M “; // Cadena de texto que representa la propiedad “d” del trazado SVG

var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico

var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico

var sin_recortar=true; // False si la gráfico se sale de la caja (si se sale, si recorta, se hace false para no seguir dibujando puntos)

var contador_valor=coordenada.length–1; // Variable para recorrer los valores (índice)

var posicion=[]; // Variable intermedia (para hacer más legible el código) con la que calcular la posición horizontal y vertical de un punto del trazado

escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X

escala[1]=alto_caja/(Math.abs(valor_maximo–valor_minimo)+margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y

desplazamiento[0]=coordenada[coordenada.length–1][0]–tiempo_total_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado

desplazamiento[1]=margen_valor–valor_minimo; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)

if(cerrado) // Si se dibuja un path (trazado) cerrado…

{

coordenadas_trazado+=ancho_caja+“,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja

}

while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…

{

posicion[0]=(coordenada[contador_valor][0]–desplazamiento[0])*escala[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal

posicion[1]=alto_caja–(coordenada[contador_valor][1]+desplazamiento[1])*escala[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)

coordenadas_trazado+=posicion[0]+“,”+posicion[1]; // Formar la coordenada con la X y la Y

if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…

{

coordenadas_trazado+=contador_valor>0?” L “:“”; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo

contador_valor—; // Pasar al siguiente valor

}

else // Si se ha rebasado el margen izquierdo…

{

sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)

}

if(cerrado) // Si se dibuja un trazado (path) cerrado…

{

coordenadas_trazado+=” L “+posicion[0]+“,”+alto_caja+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG

}

grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado

}

前のコードには XNUMX つの興味深い側面があります。XNUMX つは、次のことを可能にする計算です。 表現される値の範囲を調整する そして第二に、 不動産建設 d これは、レイアウト上の点の座標を示します (path).

表現される値の範囲を調整するために、目に見える大きさがグラフのサイズに対応するように、値が最小値から移動され、スケーリングされます。。時間の場合、最長時間（現在に最も近い日時）から表示したい範囲を引いた値（例では20秒）がオフセットとなります。温度値の変位は、下限範囲 (XNUMX 度) から最低値を引いたものであるため、以下に示すデータは許容される最低値に最も類似していますが、その値を評価できるマージンを残しています。。合格

グラフの水平座標を取得するために時間値に乗算する係数は、グラフの全幅 (この例では 100 単位) を表される時間範囲 (この例では 20 秒) で割ることによって取得されます。スカラー温度値の係数を取得するには、表される範囲が最小値を下回るマージンから最大値を上回るマージンまで (どちらの場合も 100 度) であることを覚えておく必要があります。このように、垂直スケール係数は、グラフの高さ (この例では XNUMX 単位) を最大値、最小値、上下のマージンを引いた値で割った結果として得られます。これらの値は負の温度で完全に発達する可能性があるため、次を使用します。 Math.abs() 差の絶対値を使用します。

プロパティ d オブジェクト path テキスト内の点の座標を連結することによって構築されます。座標の各ペアの前にコードが付きます SVG L、現在位置から座標で示される絶対値まで線を描きます。 X と Y の値はカンマで区切られ、各操作が行われます SVG 次のものとスペースで区切られます。

レイアウトを開始するには、次のコードを使用します M (絶対座標へ移動)。閉じた塗りつぶされたプロットの場合は右下から開始し、データプロファイルを描画する開いたプロットの場合は、最後に表示された値 (最新の値) から開始します。 閉じたレイアウトを完成させるには、次のコードを使用します Z 線の最後の点と同じ X 座標値を持つものを最後の点として追加し、表された最小値を Y 座標として追加します。

<br />
function dibujar_grafico()<br />
{<br />
  var tiempo_mostrado=20000; // Se representan 20 segundos (20000 milisegundos)<br />
  var valor_maximo=10; // 10 grados sobre cero<br />
  var valor_minimo=-5; // Cinco grados bajo cero<br />
  var fecha_hora=Date.now(); // Hora actual<br />
  var matriz_de_coordenadas_de_prueba=[]; // Preparar el vector de coordenadas<br />
  for(var contador=0;contador<20;contador++)<br />
  {<br />
    fecha_hora+=500+1500*Math.random(); // Añadir medio segundo a la hora anterior y entre 0 y segundo y medio aleatoriamente<br />
    matriz_de_coordenadas_de_prueba[contador]=[]; // Preparar el siguiente punto del vector de coordenadas<br />
    matriz_de_coordenadas_de_prueba[contador][0]=fecha_hora; // En la coordenada horizontal, situar la hora<br />
    matriz_de_coordenadas_de_prueba[contador][1]=Math.random()*Math.abs(valor_maximo-valor_minimo)+valor_minimo; // En la coordenada vertical situar el valor del sensor<br />
  }<br />
  actualizar_grafico<br />
  (<br />
    document.getElementById(“relleno_temperatura”), // Trazado para el relleno definido en el código HTML<br />
    matriz_de_coordenadas_de_prueba,<br />
    tiempo_mostrado,<br />
    valor_maximo, // Diez grados de valor máximo<br />
    valor_minimo, // Cinco grados bajo cero como valor mínimo<br />
    1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente<br />
    true // Cerrar el trazado para representar el área rellena<br />
  );<br />
  actualizar_grafico<br />
  (<br />
    document.getElementById(“linea_temperatura”), // Trazado para el relleno definido en el código HTML<br />
    matriz_de_coordenadas_de_prueba,<br />
    tiempo_mostrado,<br />
    valor_maximo, // Diez grados de valor máximo<br />
    valor_minimo, // Cinco grados bajo cero como valor mínimo<br />
    1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente<br />
    false // No cerrar el trazado para representar la linea que une los puntos que representan las temperaturas<br />
  );<br />
}

function dibujar_grafico()

{

var tiempo_mostrado=20000; // Se representan 20 segundos (20000 milisegundos)

var valor_maximo=10; // 10 grados sobre cero

var valor_minimo=–5; // Cinco grados bajo cero

var fecha_hora=Date.now(); // Hora actual

var matriz_de_coordenadas_de_prueba=[]; // Preparar el vector de coordenadas

for(var contador=0;contador<20;contador++)

{

fecha_hora+=500+1500*Math.random(); // Añadir medio segundo a la hora anterior y entre 0 y segundo y medio aleatoriamente

matriz_de_coordenadas_de_prueba[contador]=[]; // Preparar el siguiente punto del vector de coordenadas

matriz_de_coordenadas_de_prueba[contador][0]=fecha_hora; // En la coordenada horizontal, situar la hora

matriz_de_coordenadas_de_prueba[contador][1]=Math.random()*Math.abs(valor_maximo–valor_minimo)+valor_minimo; // En la coordenada vertical situar el valor del sensor

}

actualizar_grafico

(

document.getElementById(“relleno_temperatura”), // Trazado para el relleno definido en el código HTML

matriz_de_coordenadas_de_prueba,

tiempo_mostrado,

valor_maximo, // Diez grados de valor máximo

valor_minimo, // Cinco grados bajo cero como valor mínimo

1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente

true // Cerrar el trazado para representar el área rellena

);

actualizar_grafico

(

document.getElementById(“linea_temperatura”), // Trazado para el relleno definido en el código HTML

matriz_de_coordenadas_de_prueba,

tiempo_mostrado,

valor_maximo, // Diez grados de valor máximo

valor_minimo, // Cinco grados bajo cero como valor mínimo

1, // Un grado por encima y por debajo de las temperatura mínimas y máximas respectivamente

false // No cerrar el trazado para representar la linea que une los puntos que representan las temperaturas

);

}

この例では、関数 dibujar_grafico()これはページ読み込み時の呼び出しであり、テストする初期値 (最後のリアルタイム値ではない) を取得し、データがレンダリングされる範囲を準備します: 水平方向に 20 秒 (20000 ミリ秒)、内部温度が 15°C -5°C ～ +10°C で垂直方向に XNUMX 度の上下マージンを持たせます。に XNUMX 回電話をかける actualizar_grafico()、最初のパスで true 引数として、塗りつぶされた領域を表すためにチャートを閉じる必要があることを示し、XNUMX 回目の呼び出しで渡されます。 false 線を引くために。いずれの場合も、オブジェクトは path 変更されたものは、対応する外観を持つもので、最初の場合は塗りつぶしがあり境界線なし、XNUMX 番目の場合は一定の線の太さで塗りつぶしがありません。

関数 actualizar_grafico() オブジェクトに取り組む SVG 次のコードをコンテナとして使用します HTML。オブジェクト SVG には XNUMX つのパスが含まれており、XNUMX つは線を描画するためのもので、もう XNUMX つは塗りつぶされた領域を描画するためのものです。 Web ページを読み込むときに、要素から <body> 前の関数が自動的に呼び出されます。 dibujar_grafico() イベントのおかげで JavaScriptを onload.

<br />
<!DOCTYPE html><br />
<html lang=”es”><br />
  <head><br />
    <meta charset=”utf-8″><br />
    <title>Temperatura</title><br />
    <script type=”text/javascript” src=”https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/grafico.js”></script><br />
  </head><br />
  <body onload=”dibujar_grafico();” style=”margin:0;”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript dibujar_grafico() –><br />
    <div id=”temperatura”><br />
      <div id=”bloque_temperatura” style=”width:820px;height:150px”><br />
        <svg<br />
          id=”grafico_temperatura”<br />
          width=”100%”<br />
          height=”100%”<br />
          viewBox=”0 0 100 100″<br />
          preserveAspectRatio=”none”><br />
          <path<br />
            id=”relleno_temperatura”<br />
            d=””<br />
            style=”fill:#A8C3EA;stroke:none;”<br />
            vector-effect=”non-scaling-stroke”<br />
          /><br />
          <path<br />
            id=”linea_temperatura”<br />
            d=””<br />
            style=”fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;”<br />
            vector-effect=”non-scaling-stroke”<br />
          /><br />
        </svg><br />
      </div><br />
    </div><br />
  </body><br />
</html>

<!DOCTYPE html>

<head>

<title>Temperatura</title>

</head>

<svg

id=“grafico_temperatura”

width=“100%”

height=“100%”

viewBox=“0 0 100 100”

preserveAspectRatio=“none”>

<path

id=“relleno_temperatura”

d=“”

style=“fill:#A8C3EA;stroke:none;”

vector-effect=“non-scaling-stroke”

<path

id=“linea_temperatura”

d=“”

style=“fill:none;stroke:#205587;stroke-width:4;stroke-opacity:1;”

vector-effect=“non-scaling-stroke”

</svg>

</div>

</body>

</html>

コードの10行目 HTML 上では、(例として) 820 ピクセルの幅と 150 ピクセルの高さがスタイルで確立されています (これは、最終バージョンではクラスとドキュメントで行うことをお勧めします) CSS）。 13行目と14行目でオブジェクトのサイズを定義しているのは奇妙に思えます SVG 100% の幅と高さ (ウィンドウの寸法 100×100 に最もよく一致します) など。すでに述べたように、これを行う理由は、常に既知の寸法を使用して作業し、表示された値をそれに合わせて調整するためです。他の方法としては、毎回グラフのスペースを計算し、値を再調整するか、グラフの寸法を強制的に固定することで、ドキュメントはこれに従う必要があります。

コードに応じて寸法が変化するグラフを選択した場合 HTML、プロパティを含める必要があります vector-effect 勇気を持って non-scaling-stroke 前の提案で発生したように、グラフが表示される Web ページ上で選択された 1:1 の比率を維持しない場合に、線の太さが変形するのを防ぐため。

グラフを「トリミング」して、選択した領域のみを表示するには、次を使用します。 viewBox。この場合、0,0 (左上隅) から始まり右下に 100x100 のグラフの部分を表示することを選択しました。負の値または 100 を超える座標にある描画部分は、オブジェクト内に存在しても Web ページには表示されません。 SVG

SVG 描画に新しい要素を追加する

前の例では、関数 actualizar_grafico() レイアウトを使用する SVG 所有権が変更される d、これが座標連鎖を表現するものです。別の方法としては、再描画されるたびにオブジェクト全体を作成することもできます。最初のオプションの利点は、グラフィックの側面 (太さや色など) がコード内で定義されることです。 HTMLの場合、オブジェクトは事前に作成しておく必要があるという制限があります。

SVG オブジェクトを作成するには、次を使用します。 createElementNS()を含めることができます。名前空間。以下の例では、新しいテキストオブジェクトが作成されます (text) 要素に関連付けられています SVG コード内にすでに存在するもの HTML ウェブサイトの。新しい要素が作成されると、そのプロパティは次のように割り当てられます。 setAttribute() に追加されます SVG とともに appendChild().

<br />
function<br />
rotular<br />
(<br />
  objeto_grafico,<br />
  texto,<br />
  inicio=[0,0],<br />
  altura=10.0,<br />
  tipo_letra=”SircuitoRegularMedium”,<br />
  color_texto=”#000000″,<br />
  color_fondo=”#FFFFFF”<br />
)<br />
{<br />
  nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,”text”);<br />
  nuevo_objeto_svg.setAttribute(“x”,inicio[0]);<br />
  nuevo_objeto_svg.setAttribute(“y”,inicio[1]);<br />
  nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);<br />
  nuevo_objeto_svg.setAttribute(“font-size”,altura);<br />
  nuevo_objeto_svg.setAttribute(“fill”,color_texto);<br />
  nuevo_objeto_svg.textContent=texto;<br />
  objeto_grafico.appendChild(nuevo_objeto_svg);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);

function

rotular

(

objeto_grafico,

texto,

inicio=[0,0],

altura=10.0,

tipo_letra=“SircuitoRegularMedium”,

color_texto=“#000000”,

color_fondo=“#FFFFFF”

)

{

nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,“text”);

nuevo_objeto_svg.setAttribute(“x”,inicio[0]);

nuevo_objeto_svg.setAttribute(“y”,inicio[1]);

nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);

nuevo_objeto_svg.setAttribute(“font-size”,altura);

nuevo_objeto_svg.setAttribute(“fill”,color_texto);

nuevo_objeto_svg.textContent=texto;

objeto_grafico.appendChild(nuevo_objeto_svg);

}

//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);

描画要素の比率を変更する

前のセクションの例の関数を使用してラベル付けを試してみた場合は、Web ページ上のオブジェクトの比率 (width y height コードの HTML) は、表される面積 (viewBox）。比率を調整するには、オブジェクトの寸法を知る必要があります SVG オブジェクトまたはコンテナのスタイルを参照できます。 HTML、オブジェクトの場合 SVG この財産を譲渡します。所有権の割り当て transform オブジェクトへ SVG 比率に依存する変形は、スケーリング操作を適用することで修正できます。 scale() ここで、X の係数は Y の係数と異なります。

<br />
function<br />
rotular<br />
(<br />
  objeto_grafico,<br />
  texto,<br />
  inicio=[0,0],<br />
  altura=10.0,<br />
  proporcion=1.0,<br />
  tipo_letra=”SircuitoRegularMedium”,<br />
  color_texto=”#000000″,<br />
  color_fondo=”#FFFFFF”<br />
)<br />
{<br />
  var escala_horizontal=parseFloat(getComputedStyle(objeto_grafico).height)/parseFloat(getComputedStyle(objeto_grafico).width);<br />
  nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,”text’);<br />
  nuevo_objeto_svg.setAttribute(“transform”,”scale(“+escala_horizontal+”,1.0)”); // scale permite cambiar la escala en X e Y<br />
  //nuevo_objeto_svg.setAttribute(“transform”,”scaleX(“+escala_horizontal+”)”); // Como se sabe que sólo cambia la escala en X, se puede usar scaleX<br />
  nuevo_objeto_svg.setAttribute(“x”,inicio[0]);<br />
  nuevo_objeto_svg.setAttribute(“y”,inicio[1]);<br />
  nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);<br />
  nuevo_objeto_svg.setAttribute(“font-size”,altura);<br />
  nuevo_objeto_svg.setAttribute(“fill”,color_texto);<br />
  nuevo_objeto_svg.textContent=texto;<br />
  objeto_grafico.appendChild(nuevo_objeto_svg);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);

function

rotular

(

objeto_grafico,

texto,

inicio=[0,0],

altura=10.0,

proporcion=1.0,

tipo_letra=“SircuitoRegularMedium”,

color_texto=“#000000”,

color_fondo=“#FFFFFF”

)

{

var escala_horizontal=parseFloat(getComputedStyle(objeto_grafico).height)/parseFloat(getComputedStyle(objeto_grafico).width);

nuevo_objeto_svg=document.createElementNS(“http://www.w3.org/2000/svg”,‘text’);

nuevo_objeto_svg.setAttribute(“transform”,“scale(“+escala_horizontal+“,1.0)”); // scale permite cambiar la escala en X e Y

//nuevo_objeto_svg.setAttribute(“transform”,”scaleX(“+escala_horizontal+”)”); // Como se sabe que sólo cambia la escala en X, se puede usar scaleX

nuevo_objeto_svg.setAttribute(“x”,inicio[0]);

nuevo_objeto_svg.setAttribute(“y”,inicio[1]);

nuevo_objeto_svg.setAttribute(“font-family”,tipo_letra);

nuevo_objeto_svg.setAttribute(“font-size”,altura);

nuevo_objeto_svg.setAttribute(“fill”,color_texto);

nuevo_objeto_svg.textContent=texto;

objeto_grafico.appendChild(nuevo_objeto_svg);

}

//rotular(document.getElementById(“cosa_svg”),”HOLA”,[10,10]);

SVG プロパティもサポートする新しい複合要素を形成する複数のオブジェクトをグループ化できます。、単純なオブジェクトのような。同じ変換を各オブジェクトを個別に適用するのではなく、一連のオブジェクトに一度に適用するには、このリソースに従ってオブジェクトをグループ化し、単一のプロパティを適用します。 transform 彼ら全員に。

について話したときに説明したように、 SVG形式、グループの要素はラベル内に囲まれます。 <g> y </g>。から追加するには JavaScriptを要素をグループに追加 SVG 前の例で示したように、次のように使用されます。 appendChild() 新しいオブジェクトが定義されたら。

変換を適用するときに原点を確立するには、オブジェクトに対してプロパティを使用できます。 SVG transform-origin、その値は、変換が開始される点の X 座標と Y 座標です。変換の原点の値が (Web ブラウザーで) 明示的に指定されていない場合は、座標の中心が使用されます。残念ながら、この記事の執筆時点では、デフォルト以外のソースを使用して変換の動作を指定することはブラウザ間で均一ではないため、注意して使用する必要があります。

スケール変換に伴い、 scale との回転など他にもあります。 rotation との動き translateを提供します。 グラフ表現の代替: 新しい座標を取得する代わりに、それらを独自の空間で表現し、表現したい形式に合わせてグラフを変換できます。

チャートに参照を追加する

プロファイルと塗りつぶし領域で値をプロットすることでグラフの主要部分が解決されたので、その読み取りに役立つ参照を追加して完成させることができます。例として、許容可能な最大値と最小値、および目的の値をマークするいくつかの水平方向の基準 (線) を描画することから始めましょう。説明したように、オブジェクトを SVG からまっすぐ JavaScriptをまたはコードに手動で含めます HTML 後でそれらを変更します JavaScriptを.

<br />
var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT<br />
var NS=”http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)<br />
var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones<br />
var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones<br />
var VALOR_MAXIMO=10.0; // Mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia<br />
var VALOR_MINIMO=-5.0; // Menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia<br />
var VALOR_DESEADO=5.0; // Mejor valor del parámetro medido (temperatura). Sirve para tener una idea rápida de cómo de correcto es el estado del sistema<br />
var MARGEN_VALOR=1.0; // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function inicializar_grafico()<br />
{<br />
  CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);<br />
  crear_referencia_horizontal_svg(VALOR_MAXIMO,”#FF0000″);<br />
  crear_referencia_horizontal_svg(VALOR_DESEADO,”#00FF00″);<br />
  crear_referencia_horizontal_svg(VALOR_MINIMO,”#0000FF”);<br />
}</p>
<p>function crear_referencia_horizontal_svg<br />
(<br />
  altura=0.0,<br />
  color=”#000000″,<br />
  grosor=0.5,<br />
  opacidad=1.0<br />
)<br />
{<br />
  var altura_corregida=ALTO_CAJA-(altura+MARGEN_VALOR-VALOR_MINIMO)*ALTO_CAJA/(Math.abs(VALOR_MAXIMO-VALOR_MINIMO)+MARGEN_VALOR*2);<br />
  var referencia_horizontal=document.createElementNS(NS,’line’);<br />
  referencia_horizontal.setAttribute(“x1”,0.0);<br />
  referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);<br />
  referencia_horizontal.setAttribute(“y1”,altura_corregida);<br />
  referencia_horizontal.setAttribute(“y2”,altura_corregida);<br />
  referencia_horizontal.style.stroke=color;<br />
  referencia_horizontal.style.strokeWidth=grosor;<br />
  referencia_horizontal.style.strokeOpacity=opacidad;<br />
  CONTENEDOR_SVG.appendChild(referencia_horizontal);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//inicializar_grafico();

var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT

var NS=“http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)

var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones

var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones

var VALOR_MAXIMO=10.0; // Mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia

var VALOR_MINIMO=–5.0; // Menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia

var VALOR_DESEADO=5.0; // Mejor valor del parámetro medido (temperatura). Sirve para tener una idea rápida de cómo de correcto es el estado del sistema

var MARGEN_VALOR=1.0; // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo

function inicializar_grafico()

{

CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);

crear_referencia_horizontal_svg(VALOR_MAXIMO,“#FF0000”);

crear_referencia_horizontal_svg(VALOR_DESEADO,“#00FF00”);

crear_referencia_horizontal_svg(VALOR_MINIMO,“#0000FF”);

}

function crear_referencia_horizontal_svg

(

altura=0.0,

color=“#000000”,

grosor=0.5,

opacidad=1.0

)

{

var altura_corregida=ALTO_CAJA–(altura+MARGEN_VALOR–VALOR_MINIMO)*ALTO_CAJA/(Math.abs(VALOR_MAXIMO–VALOR_MINIMO)+MARGEN_VALOR*2);

var referencia_horizontal=document.createElementNS(NS,‘line’);

referencia_horizontal.setAttribute(“x1”,0.0);

referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);

referencia_horizontal.setAttribute(“y1”,altura_corregida);

referencia_horizontal.setAttribute(“y2”,altura_corregida);

referencia_horizontal.style.stroke=color;

referencia_horizontal.style.strokeWidth=grosor;

referencia_horizontal.style.strokeOpacity=opacidad;

CONTENEDOR_SVG.appendChild(referencia_horizontal);

}

//inicializar_grafico();

これらの水平方向の参照に、それらが表す値を明確にするテキストのラベルを付けるのは論理的だと思われます。テキストを強調表示するには、背景やグラフィックから目立つ長方形を使用します。変形を補正するにはテキストにスケール変換を適用する必要があるため、テキストをすべてグループ化して、スケールが適用されるオブジェクトにまとめることができます。この方法で行う主な利点は、グラフコンテナー (ブラウザウィンドウ) のサイズが変更され、スケールが修正する比率が変更された場合に、XNUMX 回の操作で変更できることです。

<br />
// Este código de ejemplo usa constantes para hacerlo más legible a desarrolladores de aplicaciones para microcontroladores de series pequeñas. La opción más recomendable, y más propia del estilo JavaScript, es crear un objeto cuyas propiedades serían las constantes y que incluiría los métodos (aquí funciones) que generan o modifican el gráfico o en este caso las referencias</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>var NS=”http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones<br />
var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones</p>
<p>var TIEMPO_REPRESENTADO=30000; // Milisegundos visibles en el gráfico empezando en el valor mayor (fecha y hora del último valor monitorizado)</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var VALOR_MAXIMO=10.0; // Mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia<br />
var VALOR_MINIMO=-5.0; // Menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia<br />
var VALOR_OPTIMO=5.0; // Mejor valor del parámetro medido (temperatura). Sirve para tener una idea rápida de cómo de correcto es el estado del sistema<br />
var MARGEN_VALOR=2.0; // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo</p>
<div style="clear:both; margin-top:0em; margin-bottom:1em;"><a href="https://polaridad.es/como-elegir-un-amplificador-de-audio/" target="_blank" rel="dofollow" class="sc536b1be7529576a29ec2b1a452e09ee"><!-- INLINE RELATED POSTS 1/1 //--><div style="padding-left:1em; padding-right:1em;"><span class="ctaText">Te interesa: </span>  <span class="postTitle">Consejos para elegir el mejor amplificador de audio</span></div></a></div><p>var desplazamiento_valor=desplazamiento(Date.now());<br />
var escala_valor=escala();</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var TIPOGRAFIA=”SircuitoRegularMedium”; // Tipografía con la que se rotula todo el gráfico (se usa una constante buscando la uniformidad, pero se puede rotular usando diferentes tipos de letra si es necesario)<br />
var ALTURA_TEXTO=10.0; // Altura de los textos en valor absoluto (píxeles)</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>var COLOR_MINIMO=”#621D87″; // Color de la referencia que indica el valor mínimo<br />
var COLOR_OPTIMO=”#1D8762″; // Color de la referencia que indica el valor máximo<br />
var COLOR_MAXIMO=”#871E35″; // Color de la referencia que indica el valor óptimo<br />
var COLOR_TIPOGRAFIA=”#A8C3EA”; // Color del tipo de letra con que se rotulan las referencias</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>var GROSOR_REFERENCIA=0.5; // Grosor de la línea que se dibuja como referencia en valor absoluto (píxeles)<br />
var OPACIDAD_REFERENCIA=1.0; // Opacidad de la línea de referencia. Si se dibuja sobre el gráfico con cierta transparencia permite ver el dibujo bajo ella<br />
var RELLENO_FONDO_REFERENCIA=4.0; // Margen entre el fondo de la referencia y el texto medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)<br />
var MARGEN_FONDO_REFERENCIA=10.0; // Separación de la referencia y el borde izquierdo del gráfico medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)<br />
var ANCHO_FONDO_REFERENCIA=34.0; // Medida horizontal del rectángulo que hace de fondo al texto de la referencia medido en valor absoluto</p>
<p>function proporcion_grafico()<br />
{<br />
  return parseFloat(getComputedStyle(CONTENEDOR_SVG).height)/parseFloat(getComputedStyle(CONTENEDOR_SVG).width); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function medida_grafico()<br />
{<br />
  var proporcion=[]; // Coeficiente que calcula la medida absoluta en píxeles en función del ancho/alto base del gráfico y de la representación en la página web // Coeficiente que calcula la medida absoluta en píxeles en función del ancho/alto base del gráfico y de la representación en la página web<br />
  proporcion[0]=ANCHO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).width);<br />
  proporcion[1]=ALTO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).height);<br />
  return proporcion;<br />
}</p>
<p>function desplazamiento(valor_mayor)<br />
{<br />
  var desplazamiento_valor=[];<br />
  desplazamiento_valor[0]=valor_mayor-TIEMPO_REPRESENTADO; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado<br />
  desplazamiento_valor[1]=MARGEN_VALOR-VALOR_MINIMO; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)<br />
  return desplazamiento_valor;<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>function escala()<br />
{<br />
  var escala_valor=[];<br />
  escala_valor[0]=ANCHO_CAJA/TIEMPO_REPRESENTADO; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X<br />
  escala_valor[1]=ALTO_CAJA/(Math.abs(VALOR_MAXIMO-VALOR_MINIMO)+MARGEN_VALOR*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y<br />
  return escala_valor;<br />
}</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>

<p>function crear_referencia_horizontal_svg<br />
(<br />
  posicion=0.0,<br />
  color_dibujo=”#000000″,<br />
  grosor_linea=GROSOR_REFERENCIA,<br />
  opacidad_linea=OPACIDAD_REFERENCIA,<br />
  color_texto=COLOR_TIPOGRAFIA,<br />
  altura_texto=ALTURA_TEXTO<br />
)<br />
{<br />
  var proporcion_horizontal=proporcion_grafico(); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño<br />
  var coeficiente_medida=medida_grafico();<br />
  var posicion_corregida=ALTO_CAJA-(posicion+desplazamiento_valor[1])*escala_valor[1];<br />
  var referencia_horizontal=document.createElementNS(NS,’line’); // El orden en el que se crean los objetos determina qué tapa (lo último) y que es tapado (lo primero)<br />
  var fondo_referencia=document.createElementNS(NS,’rect’); // El rectángulo (opaco) se creará después de la línea (que puede ser un poco transparente) para definir con claridad el fondo del texto<br />
  var texto_referencia=document.createElementNS(NS,’text’); // El texto se creará en último lugar para que quede sobre los otros objetos</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  referencia_horizontal.setAttribute(“x1”,0.0);<br />
  referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);<br />
  referencia_horizontal.setAttribute(“y1”,posicion_corregida);<br />
  referencia_horizontal.setAttribute(“y2”,posicion_corregida);<br />
  referencia_horizontal.style.stroke=color_dibujo;<br />
  referencia_horizontal.style.strokeWidth=grosor_linea*coeficiente_medida[1];<br />
  referencia_horizontal.style.strokeOpacity=opacidad_linea;<br />
  CONTENEDOR_SVG.appendChild(referencia_horizontal); // Añadir la línea de referencia lo más abajo</p>
<p>  fondo_referencia.setAttribute(“x”,MARGEN_FONDO_REFERENCIA*coeficiente_medida[0]);<br />
  fondo_referencia.setAttribute(“y”,posicion_corregida-(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]/2.0);<br />
  fondo_referencia.setAttribute(“width”,ANCHO_FONDO_REFERENCIA*coeficiente_medida[0]);<br />
  fondo_referencia.setAttribute(“height”,(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]);<br />
  fondo_referencia.style.fill=color_dibujo;<br />
  fondo_referencia.style.fillOpacity=1.0;<br />
  fondo_referencia.style.strokeWidth=0;<br />
  CONTENEDOR_SVG.appendChild(fondo_referencia);</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  texto_referencia.setAttribute(“x”,(MARGEN_FONDO_REFERENCIA+RELLENO_FONDO_REFERENCIA)*coeficiente_medida[0]/proporcion_horizontal);<br />
  texto_referencia.setAttribute(“y”,posicion_corregida+ALTURA_TEXTO/2.0*coeficiente_medida[1]);<br />
  texto_referencia.setAttribute(“font-family”,TIPOGRAFIA);<br />
  texto_referencia.setAttribute(“font-size”,ALTURA_TEXTO*coeficiente_medida[1]);<br />
  texto_referencia.setAttribute(“fill”,COLOR_TIPOGRAFIA);<br />
  texto_referencia.setAttribute(“transform”,”scale(“+proporcion_horizontal+”,1.0)”);<br />
  texto_referencia.textContent=(posicion>=0?”+”:””)+posicion;<br />
  CONTENEDOR_SVG.appendChild(texto_referencia);<br />
}</p>
<p>function inicializar_grafico()<br />
{<br />
  CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);<br />
  crear_referencia_horizontal_svg(VALOR_MAXIMO,COLOR_MAXIMO);<br />
  crear_referencia_horizontal_svg(VALOR_OPTIMO,COLOR_OPTIMO);<br />
  crear_referencia_horizontal_svg(VALOR_MINIMO,COLOR_MINIMO);<br />
}</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>//inicializar_grafico();

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

// Este código de ejemplo usa constantes para hacerlo más legible a desarrolladores de aplicaciones para microcontroladores de series pequeñas. La opción más recomendable, y más propia del estilo JavaScript, es crear un objeto cuyas propiedades serían las constantes y que incluiría los métodos (aquí funciones) que generan o modifican el gráfico o en este caso las referencias

var CONTENEDOR_SVG; // Objeto SVG que contiene el gráfico que representa los valores monitorizados por los sensores en la IoT

var NS=“http://www.w3.org/2000/svg”; // Nombre del espacio de nombres (name space NS)

var ANCHO_CAJA=100.0; // Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones

var ALTO_CAJA=100.0; // Alto del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones

var TIEMPO_REPRESENTADO=30000; // Milisegundos visibles en el gráfico empezando en el valor mayor (fecha y hora del último valor monitorizado)

var VALOR_MAXIMO=10.0; // Mayor valor admisible en el gráfico SVG. Los valores mayores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia

var VALOR_MINIMO=–5.0; // Menor valor admisible en el gráfico SVG. Los valores menores se saldrán del gráfico salvo por un margen que permite tener una idea de la tendencia

var VALOR_OPTIMO=5.0; // Mejor valor del parámetro medido (temperatura). Sirve para tener una idea rápida de cómo de correcto es el estado del sistema

var MARGEN_VALOR=2.0; // Zona por encima del valor mayor y por debajo del valor menor que se representa para tener una idea aproximada de la tendencia cuando los datos monitorizados rebasen los valores máximo y/o mínimo

var desplazamiento_valor=desplazamiento(Date.now());

var escala_valor=escala();

var TIPOGRAFIA=“SircuitoRegularMedium”; // Tipografía con la que se rotula todo el gráfico (se usa una constante buscando la uniformidad, pero se puede rotular usando diferentes tipos de letra si es necesario)

var ALTURA_TEXTO=10.0; // Altura de los textos en valor absoluto (píxeles)

var COLOR_MINIMO=“#621D87”; // Color de la referencia que indica el valor mínimo

var COLOR_OPTIMO=“#1D8762”; // Color de la referencia que indica el valor máximo

var COLOR_MAXIMO=“#871E35”; // Color de la referencia que indica el valor óptimo

var COLOR_TIPOGRAFIA=“#A8C3EA”; // Color del tipo de letra con que se rotulan las referencias

var GROSOR_REFERENCIA=0.5; // Grosor de la línea que se dibuja como referencia en valor absoluto (píxeles)

var OPACIDAD_REFERENCIA=1.0; // Opacidad de la línea de referencia. Si se dibuja sobre el gráfico con cierta transparencia permite ver el dibujo bajo ella

var RELLENO_FONDO_REFERENCIA=4.0; // Margen entre el fondo de la referencia y el texto medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)

var MARGEN_FONDO_REFERENCIA=10.0; // Separación de la referencia y el borde izquierdo del gráfico medido en valor absoluto (la línea empieza en el margen izquierdo y recorre todo el gráfico)

var ANCHO_FONDO_REFERENCIA=34.0; // Medida horizontal del rectángulo que hace de fondo al texto de la referencia medido en valor absoluto

function proporcion_grafico()

{

return parseFloat(getComputedStyle(CONTENEDOR_SVG).height)/parseFloat(getComputedStyle(CONTENEDOR_SVG).width); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño

}

function medida_grafico()

{

var proporcion=[]; // Coeficiente que calcula la medida absoluta en píxeles en función del ancho/alto base del gráfico y de la representación en la página web // Coeficiente que calcula la medida absoluta en píxeles en función del ancho/alto base del gráfico y de la representación en la página web

proporcion[0]=ANCHO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).width);

proporcion[1]=ALTO_CAJA/parseFloat(getComputedStyle(CONTENEDOR_SVG).height);

return proporcion;

}

function desplazamiento(valor_mayor)

{

var desplazamiento_valor=[];

desplazamiento_valor[0]=valor_mayor–TIEMPO_REPRESENTADO; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado

desplazamiento_valor[1]=MARGEN_VALOR–VALOR_MINIMO; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)

return desplazamiento_valor;

}

function escala()

{

var escala_valor=[];

escala_valor[0]=ANCHO_CAJA/TIEMPO_REPRESENTADO; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X

escala_valor[1]=ALTO_CAJA/(Math.abs(VALOR_MAXIMO–VALOR_MINIMO)+MARGEN_VALOR*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y

return escala_valor;

}

function crear_referencia_horizontal_svg

(

posicion=0.0,

color_dibujo=“#000000”,

grosor_linea=GROSOR_REFERENCIA,

opacidad_linea=OPACIDAD_REFERENCIA,

color_texto=COLOR_TIPOGRAFIA,

altura_texto=ALTURA_TEXTO

)

{

var proporcion_horizontal=proporcion_grafico(); // La escala debe calcularse cada vez ya que no se sabe si se ha redimensionado el objeto HTML que contiene al objeto SVG y que le da el tamaño

var coeficiente_medida=medida_grafico();

var posicion_corregida=ALTO_CAJA–(posicion+desplazamiento_valor[1])*escala_valor[1];

var referencia_horizontal=document.createElementNS(NS,‘line’); // El orden en el que se crean los objetos determina qué tapa (lo último) y que es tapado (lo primero)

var fondo_referencia=document.createElementNS(NS,‘rect’); // El rectángulo (opaco) se creará después de la línea (que puede ser un poco transparente) para definir con claridad el fondo del texto

var texto_referencia=document.createElementNS(NS,‘text’); // El texto se creará en último lugar para que quede sobre los otros objetos

referencia_horizontal.setAttribute(“x1”,0.0);

referencia_horizontal.setAttribute(“x2”,ANCHO_CAJA);

referencia_horizontal.setAttribute(“y1”,posicion_corregida);

referencia_horizontal.setAttribute(“y2”,posicion_corregida);

referencia_horizontal.style.stroke=color_dibujo;

referencia_horizontal.style.strokeWidth=grosor_linea*coeficiente_medida[1];

referencia_horizontal.style.strokeOpacity=opacidad_linea;

CONTENEDOR_SVG.appendChild(referencia_horizontal); // Añadir la línea de referencia lo más abajo

fondo_referencia.setAttribute(“x”,MARGEN_FONDO_REFERENCIA*coeficiente_medida[0]);

fondo_referencia.setAttribute(“y”,posicion_corregida–(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]/2.0);

fondo_referencia.setAttribute(“width”,ANCHO_FONDO_REFERENCIA*coeficiente_medida[0]);

fondo_referencia.setAttribute(“height”,(ALTURA_TEXTO+RELLENO_FONDO_REFERENCIA*2.0)*coeficiente_medida[1]);

fondo_referencia.style.fill=color_dibujo;

fondo_referencia.style.fillOpacity=1.0;

fondo_referencia.style.strokeWidth=0;

CONTENEDOR_SVG.appendChild(fondo_referencia);

texto_referencia.setAttribute(“x”,(MARGEN_FONDO_REFERENCIA+RELLENO_FONDO_REFERENCIA)*coeficiente_medida[0]/proporcion_horizontal);

texto_referencia.setAttribute(“y”,posicion_corregida+ALTURA_TEXTO/2.0*coeficiente_medida[1]);

texto_referencia.setAttribute(“font-family”,TIPOGRAFIA);

texto_referencia.setAttribute(“font-size”,ALTURA_TEXTO*coeficiente_medida[1]);

texto_referencia.setAttribute(“fill”,COLOR_TIPOGRAFIA);

texto_referencia.setAttribute(“transform”,“scale(“+proporcion_horizontal+“,1.0)”);

texto_referencia.textContent=(posicion>=0?“+”:“”)+posicion;

CONTENEDOR_SVG.appendChild(texto_referencia);

}

function inicializar_grafico()

{

CONTENEDOR_SVG=document.getElementById(“contenedor_svg”);

crear_referencia_horizontal_svg(VALOR_MAXIMO,COLOR_MAXIMO);

crear_referencia_horizontal_svg(VALOR_OPTIMO,COLOR_OPTIMO);

crear_referencia_horizontal_svg(VALOR_MINIMO,COLOR_MINIMO);

}

//inicializar_grafico();

上記のコード例には、興味深い点がいくつかあります。まず最初に、プログラミング出身のユーザーにとってサンプルを読みやすくするために定数 (グローバル変数) が使用されているとコメントします。マイクロコントローラー en C またはで C + +。後で説明しますが、それをプログラムする最適な方法は、 JavaScriptをこれらの値を含むオブジェクトと、この例やグラフの参照を管理するメソッドを、実稼働システムで一般的に使用することになります。

一方、より一般的なコードを発展させて、テキストを調整するためにグラフの比率を修正するさまざまな係数を計算する別の関数が開発されました。 proporcion_grafico()、値の範囲に応じたスケール escala() 絶対値で既知の測定値 (基準値の測定値など) の補正係数 medida_grafico().

このコードを読むと、このようなアプリケーションが動作するコンテキストが明確になるはずです。このアプリケーションはリアルタイムでグラフィックを描画し、さまざまなグラフィックコンテキスト (少なくともさまざまなサイズと比率) で表示できる柔軟性が必要です。まず最初にオブジェクトを生成する必要があります SVG、コード内で「手動で」 HTMLコードを通じて JavaScriptをいずれの場合も、これらのオブジェクトを操作するには、その後、これらのオブジェクトへの参照を取得する必要があります。 JavaScriptをこれにより、新しいグラフを描画したり、既に描画されたグラフの表現を、それが表示される媒体の変化に適応させることができます。

グラフを簡単に解釈するのに役立つもう XNUMX つの参考資料は、特定の値を表す点 (線のノード) です。この例では、単一の大きさを表すため、シンボルの選択は重要ではありませんが、相関関係を探すためにいくつかの異なる値を重ね合わせる場合、色などの他のリソースを使用することに加えて、区別することは興味深いことです。、さまざまなシンボルを描くことによって。ラインノードに使用されるグラフィックスは、テキストの場合と同様に、サイズと比率を変更する必要があります。その結果、その寸法は絶対値となり、含まれるボックスの寸法が変更された場合でもその比率が維持されます。

前の例では、図面の比率を再スケールして修正するためのさまざまな係数を計算する方法をすでに見てきました。グラフのノードまたは頂点のシンボルの管理を実装する方法に関して、考えられる解決策は、オブジェクトを保存することです。 SVG をベクトルに変換し、新しい値を読み取ってグラフを更新するとき、またはコンテナのサイズを変更してグラフを再描画するときに、その位置を変更します。前者の場合はその位置を変更する必要があり、後者の場合はプロパティとの比率を変更する必要があります。 transform の値 scale。次のコードは関数を変更したものです actualizar_grafico() グラフの頂点シンボルの再配置を含めます。

<br />
function actualizar_grafico_puntos<br />
(<br />
  grafico, // Objeto SVG con el que se dibuja la gráfico<br />
  coordenada, // Matriz con las coordenadas del trazado formada por pares [tiempo,valor] ordenados primero el más antiguo (tiempo menor) último el más nuevo<br />
  puntos, // Matriz con los objetos SVG que se representan en los nodos de la línea (los valores reales)<br />
  tiempo_total_representado, // Tiempo total representado por la gráfico (en milisegundos)<br />
  valor_maximo, // Valor máximo aceptable antes de emitir una alarma<br />
  valor_minimo, // Valor mínimo aceptable antes de emitir una alarma<br />
  margen_valor, // Cantidad extra que se representa sobre/bajo el valor máximo/mínimo<br />
  parametro_cerrado, // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  parametro_ancho_caja, // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  parametro_alto_caja // Alto de la caja que contiene la gráfico (por defecto 100.0)<br />
)<br />
{<br />
  var cerrado=parametro_cerrado||false; // Valor booleano que indica si el trazado se cierra o no (por defecto false)<br />
  var ancho_caja=parametro_ancho_caja||100.0; // Ancho de la caja que contiene la gráfico (por defecto 100.0)<br />
  var alto_caja=parametro_alto_caja||100.0; // Alto de la caja que contiene la gráfico (por defecto 100.0)</p><div class='code-block code-block-3' style='margin: 8px 0; clear: both;'>
<!--<div id="atContainer-0a74c00538b6422edd8125aff29ce57b"></div>--></div>
<div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  var coordenadas_trazado=”M “; // Cadena de texto que representa la propiedad “d” del trazado SVG<br />
  var desplazamiento=[]; // Desplazamientos X e Y para posicionar el tiempo y el valor representado dentro del rango del gráfico<br />
  var escala=[]; // Coeficientes X e Y para calcular el tamaño al representar el gráfico<br />
  var sin_recortar=true; // False si la gráfico se sale de la caja (si se sale, si recorta, se hace false para no seguir dibujando puntos)</p>
<p>  var contador_valor=coordenada.length-1; // Variable para recorrer los valores (índice)<br />
  var posicion=[]; // Variable intermedia (para hacer más legible el código) con la que calcular la posición horizontal y vertical de un punto del trazado</p><div class='code-block code-block-1' style='margin: 8px 0; clear: both;'>
<!--<div id="container-47c28108315e3e5ea6399dcc79ceeefc"></div>--></div>

<p>  escala[0]=ancho_caja/tiempo_total_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X<br />
  escala[1]=alto_caja/(Math.abs(valor_maximo-valor_minimo)+margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y<br />
  desplazamiento[0]=coordenada[coordenada.length-1][0]-tiempo_total_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado<br />
  desplazamiento[1]=margen_valor-valor_minimo; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)<br />
  if(cerrado) // Si se dibuja un path (trazado) cerrado…<br />
  {<br />
    coordenadas_trazado+=ancho_caja+”,”+alto_caja+” L “; // …se empieza por la parte inferior de la caja<br />
  }<br />
  while(contador_valor>=0&&sin_recortar) // Mientras queden valores por representar y no se haya llegado al borde izquierdo del gráfico…<br />
  {<br />
    posicion[0]=(coordenada[contador_valor][0]-desplazamiento[0])*escala[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal<br />
    posicion[1]=alto_caja-(coordenada[contador_valor][1]+desplazamiento[1])*escala[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)<br />
    punto[contador_valor].setAttribute(“cx”,posicion[0]);<br />
    punto[contador_valor].setAttribute(“cy”,posicion[1]);<br />
    coordenadas_trazado+=posicion[0]+”,”+posicion[1]; // Formar la coordenada con la X y la Y<br />
    if(posicion[0]>0) // Si no se ha rebasado el margen izquierdo…<br />
    {<br />
      coordenadas_trazado+=contador_valor>0?” L “:””; // …y quedan valores que represntar, añadir una nueva línea (código L) para el próximo<br />
    }<br />
    else // Si se ha rebasado el margen izquierdo…<br />
    {<br />
      sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)<br />
    }<br />
    contador_valor–; // Pasar al siguiente valor<br />
  }<br />
  if(cerrado) // Si se dibuja un trazado (path) cerrado…<br />
  {<br />
    coordenadas_trazado+=” L “+posicion[0]+”,”+alto_caja+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG<br />
  }<br />
  grafico.setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado<br />
  for(;contador_valor>=0;contador_valor–)<br />
  {<br />
    punto[contador_valor].setAttribute(“cx”,-10000);<br />
    punto[contador_valor].setAttribute(“cy”,0);<br />
  }<br />
}

function actualizar_grafico_puntos

(

grafico, // Objeto SVG con el que se dibuja la gráfico

coordenada, // Matriz con las coordenadas del trazado formada por pares [tiempo,valor] ordenados primero el más antiguo (tiempo menor) último el más nuevo

puntos, // Matriz con los objetos SVG que se representan en los nodos de la línea (los valores reales)