Створюйте та змінюйте графіку SVG даних із датчиків, підключених до IoT за допомогою JavaScript

У цій останній частині циклу статей про малювання графіка з даними датчиків, підключених до Інтернету речей, настав час поговорити про те, як створити або змінити за допомогою JavaScript малюнки у форматі SVG і деякі з елементів HTML які служать контейнером або представляють додаткову інформацію до графіки.

Зміст

Графіки даних від датчиків, підключених до Інтернету речей (IoT). Генерація та модифікація за допомогою JavaScript

Передбачається, що цільові користувачі цього підручника мають профіль електроніки та комп’ютерного програмування. мікроконтролери, вони можуть бути не знайомі HTML, CSS o SVG; З цієї причини в попередніх частинах було зроблено короткий вступ до мови або відповідної технології. У цій останній частині підхід дещо інший, оскільки читачі напевно знають, як програмувати, можливо, що використовуючи мову C + + що як JavaScript, спільний базовий синтаксис з C і це можна взяти як посилання, щоб пропустити більшість базових концепцій програмування та, таким чином, зосередитися на відмінностях і конкретному використанні, яке нас цікавить для створення сенсорної графіки в IoT.

Назва дає ключ до першої відмінності: JavaScript Це мова програмування сценарій (дефіс) і як такий, він є інтерпретується, немає необхідності компілювати його; контекст, у якому сценарій (наприклад, веб-браузер) буде читати, перекладати та виконувати накази. Якщо бути точним, то в більшості випадків є компіляція під час виконання (JIT), але для процесу написання коду JavaScript Це не впливає на нас, ми просто пишемо код, і він може працювати.

Назва також містить першу плутанину: JavaScript не має жодного відношення до Java. Спочатку, коли він був розроблений Netscape для свого браузера він спочатку називався Mocha, а потім менш заплутаним LiveScript. Після його успішного впровадження в браузери та виходу за їх межі, він був стандартизований як ECMAScript ( 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 що він інтерпретував. Щоб налагодити код, ви можете написати його на консолі інспектора веб-переглядача (що не вплине на представлення веб-сторінки) за допомогою console.log().

Щоб примусово перетворити дані в певний тип, особливо текстові в числові, ви можете використовувати такі функції, як parseInt() o parseFloat() які перетворюються на цілі чи числа з плаваючою комою відповідно. Зворотне перетворення можна здійснити за допомогою String(), хоча це навряд чи буде потрібно, оскільки зазвичай достатньо автоматичного перетворення. с parseFloat()Наприклад, ви можете отримати значення властивості веб-сторінки, наприклад ширину або висоту об’єкта, яке включає одиниці; Таким чином вираз 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; Тобто об'єкт існує, але без вартості; змінна, яка посилається на неї, не матиме a typeof undefined sino object. Об’єкт також може бути порожнім, тобто не нульовим, але не мати жодних властивостей.

в визначити об'єкт в 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 фактично є списками (колекціями) елементів, до яких посилається цифровим індексом або назвою. Масив може одночасно містити числові індекси та імена елементів, але зазвичай використовують об’єкти (властивості) для використання другого типу.

<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 року (наприклад, Час Unix або POSIX але виражені в мілісекундах замість секунд) або вказуючи окремі значення року, місяця, дня, години...

Об'єкт включає повну серію методи запиту або встановлення дати й часу:

now()
Повертає поточну дату й час, виражені в мілісекундах з 1 січня 1970 року
getTime() | setTime()
Отримує або змінює, відповідно, значення часу в мілісекундах з 1 січня 1970 року. Використання 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" існує лише у функції "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”);

}

У попередньому прикладі вже існує метод «view_temperature», який відображає значення властивості «current_temperature» через консоль. Це не дуже корисно, але дає більш повне уявлення про те, що таке визначення об'єкта JavaScript.

Для доступу методів об’єкта (функцій) до його властивостей використовуйте this, як і в попередньому прикладі в рядку 11, при використанні властивості «current_temperature».

Доступ до об’єктної моделі документа (DOM) за допомогою JavaScript

від JavaScript Ви маєте доступ до вмісту веб-сторінки, на якій вона працює, а також до деяких аспектів браузера, який відображає цю сторінку, але не до системних ресурсів. Структура даних, яка підтримує властивості та методи, з яких здійснюється доступ JavaScript частина об'єкта вікна, зокрема, зміст об’єкта (документ HTML) відповідає об’єкту document. Хоча це іноді використовується для ясності, немає необхідності передувати window методам або властивостям, щоб посилатися на них, достатньо, наприклад, використовувати document, немає необхідності писати назву кореневого об’єкта, як у window.document, доки є посилання на поточне вікно.

Найбільш вживана форма знайти об’єкт у документі HTML Це через метод getElementById(), якому як аргумент передається ідентифікатор, який було вказано при створенні коду HTML. З того, що було пояснено в попередніх розділах, легко припустити, що ви також можете отримати доступ до компонентів всередині об’єкта document використовуючи крапковий синтаксис (document.componente) або в квадратних дужках із використанням імені (document["componente"]), найкорисніший, такий як числовий індекс, складний у використанні та непрактичний під час доступу до вмісту веб-сторінки, створеної вручну.

з JavaScript ти можеш отримати елемент, який містить інший елемент (елемент або батьківський вузол) консультування вашої власності parentNode або вашу власність parentElementрізниця в тому, що батьківський елемент (parentElement) кінцевого елемента рядка DOM Це нуль (null) і батьківський вузол (parentNode) є самим документом (document).

в змінити вміст елемента HTML, наприклад, етикетка <div>, Його можна використовувати innerHTML і щоб змінити його властивості, ви можете призначити йому інший клас className або змінювати його властивості окремо style. Переглядати стиль, який відображається елементом на веб-сторінці, не обов’язково корисно style оскільки це може залежати від кількох факторів або просто не було вказано явно. Щоб перевірити стиль елемента, який остаточно відображається на веб-сторінці, використовується метод 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) здійснюється доступ до елемента коду HTML використовуючи синтаксис document[] і майно id елемента, щоб змінити його список класів за допомогою методу classList.remove() і з методомclassList.add(), на основі результатів кількох запитів, які виконуються в умовних виконаннях, за допомогою яких вони порівнюються classList.contains().

Коли це буде посилатися на елемент HTML кілька разів у всьому коді JavaScript, це трохи ефективніше призначити його змінній або використовуйте його індекс замість назви, інакше метод, який ви б використовували JavaScript щоб отримати її щоразу, знадобиться шукати її ім’я, що затрачає трохи більше часу, ніж у випадку доступу до змінної.

в додати нові об’єкти до документа HTML, їх можна спочатку створити за допомогою методу createElement de document і пізніше включити їх до решти елементів у тій точці дерева, яка потрібна appendChild. Щоб створити об'єкт XML, як предмети SVG який ми використовуємо для малювання графіка датчиків IoT, ви можете використовувати createElementNS (НС для простір імен). Як пояснюється при розмові про формат SVG, простір імен, який йому відповідає (для поточної версії), є http://www.w3.org/2000/svg, який слід передати createElementNS як аргумент разом із типом елемента, svg, в цьому випадку.

Una альтернатива innerHTML щоб додати текст як вміст до елемента документа HTML це метод createTextNode() об'єкт document. За допомогою цієї альтернативи ви можете створити новий текст (до якого пізніше можна отримати доступ, якщо його присвоїти змінній), який включено в дерево об’єктів за допомогою методу appendChild(). Як альтернатива appendChild(), який додає новий вміст у кінець того, що вже існує у вузлі, до якого він додається, ви можете використовувати метод insertBefore(), який додає новий об’єкт перед існуючим. Носити insertBefore() замість appendChild() надає метод, який служить, наприклад, для сортувати нові об'єкти перед існуючими коли елемент має бути попереду іншого (як у списку) або покривати або бути покритим у графічній структурі, у якій є елементи ближче до переднього плану чи фону.

Реагувати на події за допомогою JavaScript

Коли шлях о використовувати веб-сторінку як контейнер для графіків підключених датчиків IoT це було використано onload На етикетці <body> щоб почати малювати графік. Це властивість, пов'язане з кодом об'єктів HTML, відноситься до Події JavaScript. Як уже пояснювалося, він виконує функцію, коли сторінка завантажується. Хоча це було пов'язано з кодом HTML щоб більше пам’ятати, це можна було б записати в коді JavaScript як body.onload=dibujar; буття dibujar ім'я функції, яка повинна запускатися під час завантаження веб-сторінки.

В останніх версіях JavaScript події можна асоціювати з функціями за допомогою addEventListener з форматом objeto.addEventListener(evento,función); або за допомогою синтаксису objeto.evento=función; який також працює в старих реалізаціях. Щоб від’єднати функцію, пов’язану з подією, у вас є removeEventListener який має такий самий формат, як addEventListener.

JavaScript Він здатний реагувати на безліч подій, які можуть відбуватися на веб-сторінці. Наприклад, він може визначити, коли клацнуто елемент HTML з onmousedownабо при натисканні за допомогою onclick, коли натиснуто клавішу з onkeydown, керуючи смугою прокрутки за допомогою onscroll. Для нашої мети нам цього достатньо виявити завантаження сторінки за допомогою onload і його зміна розміру з onresize. Ці події ми будемо пов’язувати з об’єктами body y window Дель DOM відповідно. Перший можна призначити в коді HTML, як видно, і другий у коді JavaScript всередині функції, викликаної першим і з форматом window.onresize=redimensionar; буття redimensionar функція, яка буде викликана кожного разу, коли вікно змінює розмір.

Запустити через інтервал часу

JavaScript має два ресурси для відстрочене виконання: 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 через те, наскільки агресивним (нав’язливим) є закриття веб-сторінки діалоговим вікном.

У програмі, написаній для a мікроконтролер невеликої серії (наприклад, на тарілці Arduino Uno) зазвичай використовують глобальні змінні, як у попередньому прикладі в JavaScript, оскільки код короткий і не особливо заплутаний, оскільки часто функції реалізуються ad hoc і оскільки використання глобальних змінних дає змогу передбачити використання пам’яті дуже простим та інтуїтивно зрозумілим способом, що є критичним у системах з невеликою кількістю ресурсів . Натомість en JavaScript Зазвичай використання глобальних змінних зводиться до мінімуму. оскільки йому не потрібно поспішати з використанням пам’яті, оскільки він працює нормально на a центральний процесор з ресурсами, значно перевершуючими ресурси a 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) Арктангенс н/м (результат у радіанах)

Math.ceil(n) Округліть параметр до найближчого цілого числа вгору
Math.cos(α) Косинус параметра α (α в радіанах)
Math.E e число (≃2.718281828459045)

Math.exp(n) e піднесено до параметра n: eⁿ
Math.floor(n) Округліть параметр n до найближчого цілого числа вниз
Math.log(n) Натуральний логарифм (за основою e) параметра n

Math.LN2 Натуральний логарифм (за основою e) від 2 (≃0.6931471805599453)
Math.LN10 Натуральний логарифм (за основою e) від 10 (≃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 піднято до другого параметра 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 і містить графік, координати якого змінено, щоб вони відповідали новим завантаженим даним.

У прикладі цієї пропозиції, крім оновлення креслення, також оновлюється текст на веб-сторінці, який показує дату та значення останніх виміряних даних для кожного графіка.

На стороні сервера є база даних, яка містить інформацію що датчики, підключені до IoT, контролювали. Ця база даних зчитується запитом об'єкта XMLHttpRequest відповідаючи інформацією, закодованою в Формат JSON, хоча назва використовуваного методу передбачає зв’язок із форматом XML.

У першому посібнику polaridad.es про Зберігання даних IoT Ви можете побачити приклад інфраструктури для керування інформацією з боку сервера, яку надають пристрої, підключені до Інтернету речей. У цій серії статей сервер використовується як ресурс Apache з якого можна використовувати мову програмування PHP отримати доступ до бази даних MySQL o MariaDB. На серверах, які використовуються для підтримки IoT, дуже часто можна знайти бази даних MongoDB (NoSQL) і мова програмування JavaScript на Node.js як програмна інфраструктура.

Наступна функція відповідає за запит останніх даних одного з датчиків із сервера. Під час виклику функції об’єкт використовується як аргумент 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);

}

У третьому рядку попереднього прикладу готується запит, який буде зроблено на сервер, в якому буде переданий аргумент «зона», значенням якого буде назва або код моніторингового місця, оскільки інформація про в одній базі даних можуть співіснувати різні датчики (наприклад, термометри, які вимірюють температуру в різних кімнатах). Очікується, що параметр, переданий у попередню функцію, об’єкт із даними діаграми, міститиме властивість із назвою кімнати («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 функція, яка відповідає за перемальовування графіка з новою інформацією.

Ідея, коли пропонується цей метод читання, полягає в тому, що дані будуть оновлюватися дуже часто. Якщо представлена інформація відповідає тривалому періоду (наприклад, температури за день або тиждень), можна реалізувати початковий запит, який збирає всі доступні дані, а потім запит, подібний до того, що в прикладі, який оновлює їх у кореспондент періоду.

Генерувати випадкові дані для тестування

Коли вся інфраструктура сервера та клієнта буде готова, функція, подібна до тієї, що описана в попередньому розділі, відповідатиме за читання даних і малювання з ними графіка, але На етапі тестування може бути практичніше використовувати випадкові числа в контрольованому діапазоні щоб перевірити, чи правильно написаний код. Наступна функція може слугувати прикладом для отримання даних під час створення кінцевої програми.

<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 мілісекунд) відносно дати на момент винаходу. як Math.random() генерує число від 0.0 до 1.0, множення його на 1000 дає число від 0 до 1000, яке потім перетворюється на ціле число. Таким же чином значення отримується множенням випадкового числа на діапазон (максимум мінус мінімум) і додаванням мінімуму.

Намалюйте графік датчиків IoT за допомогою діаграми SVG

Оскільки ми побачили, як ми можемо отримати значення, які ми хочемо представити (температура, у прикладі) та їхнє місцезнаходження в часі, які можуть бути виражені разом у формі координат, приклад нижче показує функцію для малювання шляху яка з’єднує ці точки, і, за бажанням, кольорову область, обмежену лінією вгорі. Результат буде схожий на наступне зображення.

Приклад графіка, створеного за допомогою SVG і JavaScript для представлення даних з датчиків IoT

Горизонтальна вісь (X) графіка представляє час, а вертикальна вісь (Y) – значення, які контролювали датчики, підключені до IoT. Горизонтальний інтервал становить кілька секунд, оскільки в цій пропозиції графік оновлюється дуже часто (наприклад, кожну секунду), щоб надати інформацію про стан датчиків майже в реальному часі.

<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

}

У попередньому коді є два цікаві аспекти, по-перше, обчислення, яке дозволяє адаптувати діапазон значень, які представлені а по-друге будівництво власності d який вказує координати точок на макеті (path).

Щоб адаптувати діапазон представлених значень, вони переміщуються від мінімуму та масштабуються так, щоб видима величина відповідала розміру графіка. У випадку часу зсув отримується шляхом віднімання діапазону, який потрібно відобразити, із найдовшого часу (дата й час, найближчі до поточного) (20 секунд у прикладі). Зміщення значень температури є нижнім діапазоном (один градус) мінус найнижче значення, так що дані, наведені нижче, є найбільш схожими на найнижче дозволене значення, але залишають запас, який дозволяє нам оцінити ті, які відповідають .пас

Коефіцієнт, який множить значення часу для отримання горизонтальних координат графіка, виходить шляхом ділення загальної ширини графіка (100 одиниць у прикладі) на представлений діапазон часу (20 секунд у прикладі). Щоб отримати коефіцієнт зі скалярними значеннями температури, слід пам’ятати, що представлений діапазон проходить від запасу нижче мінімального значення до запасу вище максимального, на один градус в обох випадках. Таким чином, коефіцієнт вертикального масштабу є результатом ділення висоти графіка (100 одиниць у прикладі) на максимальне значення мінус мінімальне плюс верхнє та нижнє поле. Оскільки ці значення могли повністю розвиватися при негативних температурах, ми використовуємо 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 з верхнім і нижнім полем на один градус. Зробіть два дзвінки до actualizar_grafico(), у першому проході true як аргумент, який вказує, що діаграма повинна бути закрита, щоб представити заповнену область, і під час другого виклику вона пропускається false провести лінію. У кожному випадку об'єкт path модифікований – це той, який має відповідний вигляд, із заливкою і без рамки в першому випадку та з певною товщиною лінії і без заливки в другому.

Функція actualizar_grafico() працювати над об'єктом SVG який використовує наступний код як контейнер HTML. Об'єкт SVG містить два шляхи, один для малювання лінії, а інший для малювання заповненої області. Під час завантаження веб-сторінки з елемента <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 px і висота 150 px встановлено в стилі (те, що в остаточній версії буде доцільно зробити з класом і документом CSS). Здається дивним, що рядки 13 і 14 визначають розмір об'єкта SVG наприклад 100% ширини та висоти (що найкраще відповідає розмірам вікна, 100×100). Як уже згадувалося, причина цього полягає в тому, щоб завжди працювати з відомими розмірами та коригувати представлені значення до них. Інші альтернативи полягають у тому, щоб кожного разу обчислювати простір графіка, а потім переналаштовувати значення або примусово фіксувати розміри для графіка, яких документ повинен буде дотримуватися.

Вибравши графік, розміри якого змінюються відповідно до коду HTML, необхідно включити майно vector-effect з мужністю non-scaling-stroke щоб запобігти деформації товщини ліній, коли графік не підтримує вибрані пропорції 1:1 на веб-сторінці, на якій він відображається, як це відбувається в попередній пропозиції.

Щоб «обрізати» графік і показати лише вибрану вами область, використовуйте viewBox. У цьому випадку ми вирішили побачити частину графіка, яка починається з 0,0 (верхній лівий кут) і має розміри 100x100 вниз і праворуч. Частина малюнка, розташована в координатах з від'ємними значеннями або більше 100, не буде відображатися на веб-сторінці, навіть якщо вони існують в об'єкті 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]);

Змініть співвідношення елементів малюнка

Якщо ви спробували додати позначки за допомогою функції в прикладі в попередньому розділі, ви побачили, що текст виглядає деформованим, коли пропорція об’єкта на веб-сторінці (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 точки, з якої починається перетворення. Якщо значення для джерела перетворення явно не вказано (у веб-браузері), використовується центр координат. На жаль, на момент написання статті вказівка поведінки перетворень із використанням джерела, відмінного від джерела за замовчуванням, не є однорідним у різних браузерах, і його слід використовувати з обережністю.

Поряд з масштабним перетворенням с 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();

Здається логічним позначити ці горизонтальні посилання текстом, який пояснює значення, яке вони представляють. Для виділення тексту можна використовувати прямокутники, які будуть виділятися на тлі та малюнку. Оскільки тексти повинні бути масштабовані, щоб компенсувати деформацію, усі вони можуть бути згруповані в об’єкт, до якого буде застосовано масштаб; Основна перевага цього способу полягає в тому, що ви можете змінювати їх за одну операцію, якщо розмір контейнера графіка (вікна браузера) змінюється та змінюється ця пропорція, яку виправляє масштаб.

<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/delonghi-ariadry-multi-ddsx225/" 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">Análisis completo de la De'Longhi Ariadry Multi DDSX225: La solución definitiva para el control de la humedad</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 щоб можна було намалювати нові графіки, а подання вже намальованого графіка можна адаптувати до зміни середовища, в якому він представлений.

Іншим довідником, який може допомогти легко інтерпретувати графік, є точки, які представляють конкретні значення (вузли лінії). У цьому прикладі, де ми представляємо одну величину, вибір символу не є критичним, але якщо кілька різних значень накладаються для пошуку кореляції, це цікаво розрізнити, крім використання інших ресурсів, таких як колір , малюючи різні символи. Графіка, яка використовується для вузла лінії, повинна бути змінена за розміром і пропорціями, як це відбувається, наприклад, з текстами, щоб її розміри були абсолютними і щоб її пропорції зберігалися, навіть якщо змінюються розміри коробки, яку вона містить.

У попередньому прикладі ми вже бачили, як обчислити різні коефіцієнти для зміни масштабу та виправлення пропорцій малюнка; Стосовно того, як реалізувати керування символами вузлів або вершин графа, можливим рішенням може бути зберігання об’єктів 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)