Generuj i modyfikuj grafiki SVG danych z czujników podłączonych do IoT za pomocą JavaScript

W tej ostatniej części cyklu artykułów o rysunku grafika z danymi z czujników podłączonych do Internetu Rzeczy, czas porozmawiać o tym, jak generować lub modyfikować za pomocą JAVASCRIPT rysunki w formacie SVG i niektóre elementy HTML które służą jako pojemnik lub prezentują informacje uzupełniające grafikę.

Spis treści

Wykresy danych z czujników podłączonych do Internetu Rzeczy (IoT) Generowanie i modyfikacja za pomocą JavaScript

Docelowi użytkownicy tego samouczka powinni stworzyć profil elektroniki i programowania komputerowego. mikrokontrolery, mogą nie być zaznajomieni HTML, CSS o SVG; Z tego powodu w poprzednich odsłonach dokonano krótkiego wprowadzenia do języka lub odpowiadającej mu technologii. W tej ostatniej części podejście jest nieco inne, ponieważ czytelnicy z pewnością wiedzą, jak programować, możliwe jest, że użyją tego języka C + + co, jak JAVASCRIPT, ma taką samą podstawową składnię jak C i można go wykorzystać jako odniesienie, aby pominąć większość podstawowych koncepcji programowania i w ten sposób skupić się na różnicach i konkretnym zastosowaniu, które nas interesuje przy tworzeniu grafiki czujników w IoT.

Nazwa daje wskazówkę co do pierwszej różnicy: JAVASCRIPT Jest to język programowania scenariusz (łącznik) i jako taki, tak jest interpretowane, nie ma potrzeby go kompilować; kontekst, w którym scenariusz (np. przeglądarka internetowa) odczyta, przetłumaczy i zrealizuje zamówienia. Mówiąc ściślej, w większości przypadków istnieje kompilacja środowiska uruchomieniowego (JIT), ale dla procesu pisania kodu JAVASCRIPT Nas to nie dotyczy, po prostu piszemy kod i może działać.

W nazwie kryje się także pierwsze zamieszanie: JAVASCRIPT nie ma najmniejszego związku z Java. Początkowo, kiedy został opracowany Netscape w swojej przeglądarce nazywał się najpierw Mocha, a następnie mniej zagmatwany LiveScript. Po pomyślnym wdrożeniu w przeglądarkach i przekroczeniu ich, został ustandaryzowany jako ECMAScript (Na ECMA-262, wersja 6 w momencie pisania tego tekstu), aby stać się neutralnym w stosunku do przeglądarek, które je implementują. Obecnie istnieje również standard ISO od wersji 5, 2011 (ISO / IEC 16262: 2011 w momencie pisania artykułu)

Zmienne, podstawowe typy danych i obiekty w JavaScript

W odróżnieniu od tego, co dzieje się np C + +, en JAVASCRIPT typ danych nie jest uwzględniany podczas deklarowania zmiennej a także typ powiązany ze zmienną nie jest ustalony, możliwe jest przypisanie wartości innego typu w trakcie wykonywania programu.

<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

W poprzednim przykładzie zadeklarowana została zmienna „thing” (bez wskazania typu danych), następnie przypisane są dane innego typu i są one konsultowane z typeof typ, który JAVASCRIPT który zinterpretował. Aby zdebugować kod, możesz napisać go w konsoli inspektora przeglądarki internetowej (co nie będzie miało wpływu na prezentację sieci) za pomocą console.log().

Aby wymusić konwersję danych na określony typ, szczególnie tekstowy na numeryczny, można skorzystać z funkcji takich jak parseInt() o parseFloat() które konwertują odpowiednio na liczby całkowite lub zmiennoprzecinkowe. Można dokonać odwrotnej konwersji String(), chociaż jest mało prawdopodobne, aby było to konieczne, ponieważ zwykle wystarcza automatyczna konwersja. Z parseFloat()Na przykład można uzyskać wartość właściwości strony internetowej, taką jak szerokość lub wysokość obiektu, zawierającą jednostki; W ten sposób wyrażenie parseFloat("50px"); w rezultacie zwróci 50, czyli wartość liczbową.

En JAVASCRIPT nie ma rozróżnienia między cudzysłowami podwójnymi i pojedynczymi; Typ danych w obu przypadkach to string, a każdy z nich może zawierać drugi bez potrzeby stosowania kodów ucieczki.

<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

W poprzednim przykładzie widać, że zmienna, gdy została zadeklarowana (istnieje), ale nie ma przypisanej żadnej wartości, zawiera niezdefiniowany typ danych (undefined). Nieprzypisany obiekt ma wartość null; Oznacza to, że przedmiot istnieje, ale bez wartości; zmienna, która się do niej odwołuje, nie miałaby a typeof undefined ale object. Obiekt może być również pusty, to znaczy nie mieć wartości null, ale nie może mieć żadnych właściwości.

do zdefiniować obiekt w JAVASCRIPT są ujęte w nawiasy klamrowe ({ y }) właściwości lub metody oddzielone dwukropkiem (:) nazwa właściwości wartość właściwości i przecinek (,) różne właściwości. Więcej informacji na temat tego sposobu wyrażania przedmiotu znajdziesz w artykule na temat Format JSON.

Chociaż możesz użyć składni, która może skłonić Cię do innego myślenia, en JAVASCRIPT Nie ma klas, są tylko prototypyOznacza to, że aby obiekt mógł dziedziczyć właściwości i metody, tworzony jest inny obiekt (prototyp), którego inne obiekty (dzieci) używają jako odniesienia. Składnia najbliższa stylowi JAVASCRIPT użycie prototypu jest Object.create chociaż jest to również możliwe (i czasami przydatne) w użyciu new jak w innych językach obiektowych.

<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));

do zapytanie, czy jeden obiekt jest instancją innego, jeśli użyjesz go jako prototypu, jeśli odziedziczysz jego właściwości, krótko mówiąc, możesz użyć instanceof (utworzony z new) Lub isPrototypeOf (utworzony z Object.create), która będzie miała wartość true, gdy obiekt użyje prototypu, i false, jeśli tego nie zrobi.

Po utworzeniu obiektu przy użyciu innego obiektu jako prototypu, to znaczy po utworzeniu instancji obiektu, można go dodać nowe właściwości lub zastąpić właściwości prototypu używając składni kropki jak w gato.peso=2.5.

La tablice w JAVASCRIPT Różnią się od tych, które zapewne znasz C. Na początek deklaruje się je bez konieczności podawania ich długości, jedynie ze znakami otwierania i zamykania nawiasów kwadratowych ([ y ]), komponenty mogą być heterogeniczne (różne typy danych w tej samej tablicy), a nowe elementy można dodawać bez ograniczeń. Macierze JAVASCRIPT są w rzeczywistości listami (zbiórami) elementów, do których odwołuje się do indeksu liczbowego lub nazwy. Tablica może jednocześnie zawierać indeksy numeryczne i nazwy elementów, ale często używa się obiektów (właściwości) do wykorzystania drugiego typu.

<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

Jak widać w poprzednim przykładzie, aby dowiedzieć się, czy zmienna odpowiada instancji tablicy (jest to obiekt tablicowy), można użyć instanceof, jak to było już używane w przypadku obiektów ogólnych lub, w nowszych wersjach JAVASCRIPT możesz się powołać Array.isArray()

Aby uzyskać dostęp do elementów tablicy, możesz użyć jej indeksu (matriz[7]) lub po nazwie nieruchomości z nazwą w nawiasie kwadratowym (matriz["nombre"]) lub ze zwykłą składnią kropkową dla obiektów (matriz.nombre). Ponieważ nazwa jest ciągiem tekstowym, do jej utworzenia można użyć wyrażenia zawierającego zmienne. Aby przejść przez tablicę z właściwościami, można użyć pętli z formatem 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

Leczenie jest interesujące z punktu widzenia naszego celu obiekt Date, za pomocą którego można reprezentować datę i godzinę oraz zarządzać nią w JAVASCRIPT. Obiekt można utworzyć bez danych, więc będzie przyjmować bieżącą datę i godzinę, lub można go utworzyć poprzez wskazanie daty jako wartości w milisekundach od 1 stycznia 1970 r. (np. Czas uniksowy lub czas POSIX ale wyrażone w milisekundach zamiast w sekundach) lub podając osobne wartości roku, miesiąca, dnia, godziny...

Obiekt obejmuje kompletną serię metody wysyłania zapytań lub ustawiania daty i godziny:

now()
Zwraca bieżącą datę i godzinę wyrażoną w milisekundach od 1 stycznia 1970 r
getTime() | setTime()
Pobiera lub zmienia odpowiednio wartość czasu w milisekundach od 1 stycznia 1970 r. Używanie valueOf(), czyli metoda występująca w większości obiektów, uzyskiwana jest także wartość odpowiedniego obiektu Date, np getTime() z Czas uniksowy lub czas POSIX wyrażone w ms.
getMilliseconds() | setMilliseconds()
Służy do wysyłania zapytań lub ustawiania ułamkowej milisekundowej części obiektu Date na którym jest wykonywany. Po konsultacji uzyskana wartość mieści się w przedziale od 0 do 999, ale można przypisać większe wartości, które będą kumulować się w całkowitej dacie i godzinie, więc podobnie jak pozostałe metody get służy to zwiększeniu wartości obiektu Date (lub zmniejsz ją, jeśli używane są wartości ujemne).

getSeconds() | setSeconds()
Odpowiednio zwraca lub zmienia wartość sekund obiektu Date.
getMinutes() | setMinutes()
Służy do sprawdzania lub ustawiania minut obiektu Date.
getHours() | setHours()
Umożliwia sprawdzenie lub modyfikację godzin (od 0 do 23) obiektu Date.

getDay()
Zwraca dzień tygodnia dla daty wyrażonej jako wartość od 0 do 6 (od niedzieli do soboty).
getDate() | setDate()
Zwraca lub zmienia dzień miesiąca obiektu Date na którym jest stosowany.
getMonth() | setMonth()
Służy do sprawdzania lub modyfikowania numeru miesiąca obiektu Date.

getFullYear() | setFullYear()
Wysyła zapytanie o wartość roku lub ustawia ją w obiekcie zawierającym datę i godzinę.

Poprzednie metody Date zawierać wersję UTC aby móc bezpośrednio pracować z czasem uniwersalnym, bez konieczności wykonywania obliczeń pośrednich. W tym sensie np. getHours() ma wersję getUTCHours() o getMilliseconds() alternatywa getUTCMilliseconds() pracować na zmianę z czasem urzędowym (prawnym) lub powszechnym. Z getTimezoneOffset() Możesz poznać różnicę między czasem uniwersalnym a lokalnym czasem urzędowym.

<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;

Funkcje JavaScriptu

Jeśli to czytasz, na pewno wiesz, jak programować. mikrokontrolery en C lub C + + i znać pojęcie funkcji. Chociaż podstawowa idea jest taka sama, w JAVASCRIPT Sposób ich definiowania i używania jest nieco inny. Na początek powiedziano już, że JAVASCRIPT Nie używa jawnie typów danych, więc nie trzeba tego wskazywać przy definiowaniu funkcji. Podążać, Funkcja nie musi mieć nazwy, może być anonimowa. Można je powiązać ze zmienną w celu ich wywołania, ale może też nie być konieczne, gdyż czasem warto wywołać je od razu, dla czego nawiasy i parametry dodawane są po definicji funkcji.

Aby zdefiniować funkcję, przedrostek function, jeśli ma to zastosowanie, wpisz nazwę, argumenty (parametry przekazywane do funkcji) w nawiasach, a w nawiasach klamrowych kod, który zostanie wykonany po wywołaniu funkcji.

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

function doble(numero)

{

var resultado=numero*2;

return resultado;

}

Oczywiście w poprzednim przykładzie zmienna „result” nie była w ogóle potrzebna, ale jest to dobry pretekst, aby o tym pamiętać zakres zmienny, który działa zgodnie z oczekiwaniami: zmienna „result” istnieje tylko w funkcji „double”. W JAVASCRIPT można również użyć let, zamiast var, aby określić zakres zmiennej w kontekście bloku kodu (ujętego w nawiasy klamrowe, { y })

Mówiąc o obiektach w poprzedniej sekcji, zabrakło czegoś podstawowego: zdefiniowano właściwości, ale nie zdefiniowano metod. Zgodnie z oczekiwaniami, metody obiektowe są funkcjami, nie mają nazwy i są używane (wywoływane) na podstawie nazwy (właściwości) przypisanej przez definicję obiektu.

<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”);

}

W poprzednim przykładzie istnieje już metoda „view_temperature”, która wyświetla w konsoli wartość właściwości „current_temperature”. Nie jest to zbyt przydatne, ale daje pełniejszy obraz tego, jak wygląda definicja obiektu JAVASCRIPT.

Aby uzyskać dostęp do metod obiektu (funkcji) i jego właściwości, użyj this, jak w poprzednim przykładzie w linii 11, gdy używana jest właściwość „current_temperature”.

Uzyskaj dostęp do modelu obiektowego dokumentu (DOM) za pomocą JavaScript

z JAVASCRIPT Masz dostęp do zawartości strony internetowej, na której ona działa, a także do niektórych aspektów przeglądarki, która wyświetla tę stronę, ale nie do zasobów systemowych. Struktura danych obsługująca właściwości i metody, z których można uzyskać dostęp JAVASCRIPT część obiektu okna, w szczególności zawartość obiektu (dokument HTML) odpowiada obiektowi document. Chociaż czasami używa się go dla przejrzystości, nie jest konieczne poprzedzanie okna do metod lub właściwości, aby się do nich odwołać, wystarczy np. użyć document, nie ma potrzeby wpisywania nazwy obiektu głównego jak w window.document, o ile odwołuje się do bieżącego okna.

Najczęściej używana forma znaleźć obiekt w dokumencie HTML To poprzez metodę getElementById(), do którego jako argument przekazywany jest identyfikator wskazany podczas tworzenia kodu HTML. Z tego, co wyjaśniono w poprzednich sekcjach, łatwo założyć, że dostęp do komponentów wewnątrz obiektu jest również możliwy document używając składni kropki (document.componente) lub nawiasy, używając zarówno nazwy (document["componente"]), najbardziej przydatne, jak indeks liczbowy, trudne w użyciu i niepraktyczne przy dostępie do treści ręcznie utworzonej strony internetowej.

z JAVASCRIPT możesz pobierz element zawierający inny element (element lub węzeł nadrzędny) konsultacja z Twoją nieruchomością parentNode lub Twoją własność parentElementróżnica polega na tym, że element nadrzędny (parentElement) ostatniego elementu ciągu DOM Jest zerowy (null) i węzeł nadrzędny (parentNode) to sam dokument (document).

do modyfikować zawartość elementu HTML, na przykład etykieta <div>, To może być użyte innerHTML i aby zmienić jego właściwości, możesz przypisać mu inną klasę className lub zmieniać jego właściwości indywidualnie za pomocą style. Sprawdzanie stylu wyświetlanego przez element na stronie internetowej niekoniecznie jest przydatne style ponieważ może to zależeć od kilku czynników lub po prostu nie zostało wyraźnie określone. Aby sprawdzić styl elementu ostatecznie wyświetlonego na stronie internetowej, wykorzystywana jest metoda getComputedStyle.

Do elementu dokumentu HTML Można mu przypisać kilka klas, aby określić jego wygląd i zachowanie zarządzaj listą klas obiektu z JAVASCRIPT możesz się powołać classList który oferuje metody add aby dodać nową klasę do listy, remove aby go usunąć, toggle aby go zastąpić lub sprawdzić zawartość listy klas elementu item i contains, która zwraca klasę zajmującą określoną pozycję na liście oraz wartość true o false czy dana klasa znajduje się na liście.

<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”)

}

W poprzednim przykładzie znajduje się on w getElementById obiekt, którym chcesz manipulować (element <div> dla jego id), przed zmianą wyglądu treść zostaje usunięta poprzez przypisanie za pomocą innerHTML pusty ciąg tekstowy, z którym zostaje przypisana nowa klasa className i jego styl jest modyfikowany za pomocą style w zależności od wartości zawartości (temperatury), ewentualnie zmieniając kolor poprzez właściwość color. Po ustaleniu aspektu wartość jest zapisywana ponownie za pomocą innerHTML.

W drugiej części powyższego przykładu (linie od 9 do 19) uzyskiwany jest dostęp do elementu kodu HTML używając składni document[] i własności id elementu, aby zmienić jego listę klas za pomocą metody classList.remove() i z metodąclassList.add(), na podstawie wyników kilku zapytań wykonywanych w wykonaniach warunkowych, za pomocą których porównują classList.contains().

Kiedy to się stanie odnosić się do elementu HTML varias razy w całym kodzie JAVASCRIPT, To trochę bardziej efektywne jest przypisanie go do zmiennej lub użyj jego indeksu zamiast nazwy, ponieważ w przeciwnym razie użyłbyś metody JAVASCRIPT uzyskanie go za każdym razem wymagałoby wyszukiwania jego nazwy, co zajęłoby nieco więcej czasu niż w przypadku dostępu do zmiennej.

do dodać nowe obiekty do dokumentu HTML, można je najpierw utworzyć za pomocą metody createElement de document a później dołącz je do pozostałych elementów w odpowiednim miejscu drzewa appendChild. Aby utworzyć obiekt XML, jak przedmioty SVG którego używamy do rysowania wykresu czujników IoT, możesz użyć createElementNS (NS dla przestrzeń nazw). Jak wyjaśniono, mówiąc o formacie SVG, odpowiadająca mu przestrzeń nazw (dla bieżącej wersji) to http://www.w3.org/2000/svg, do którego należy przekazać createElementNS jako argument wraz z typem elementu, svg, w tym przypadku.

A alternatywa dla innerHTML aby dodać tekst jako treść do elementu dokumentu HTML jest metoda createTextNode() Obiekt document. Dzięki tej alternatywie możesz utwórz nowy tekst (który jest później dostępny, jeśli jest przypisany do zmiennej), który jest włączany do drzewa obiektów za pomocą metody appendChild(). Jak alternatywa dla appendChild(), który dodaje nową treść na końcu tego, co już istnieje w węźle, do którego jest dodawana, możesz użyć metoda insertBefore(), który dodaje nowy obiekt przed istniejącym. Nosić insertBefore() zamiast appendChild() udostępnia metodę, która służy np sortuj nowe obiekty przed istniejącymi gdy element musi znajdować się przed innym (jak na liście) lub zakrywać lub być przykryty strukturą graficzną, w której znajdują się elementy bliżej pierwszego planu lub tła.

Reaguj na wydarzenia za pomocą JavaScript

Kiedy sposób użyj strony internetowej jako pojemnika na wykresy czujników podłączonych do IoT było użyte onload Na etykiecie <body> aby rozpocząć rysowanie wykresu. Ta właściwość powiązana z obiektami kodu HTML, odnosi się do wydarzenia JAVASCRIPT. Jak już wyjaśniono, wykonuje funkcję po załadowaniu strony. Chociaż zostało to powiązane z kodem HTML aby lepiej o tym pamiętać, można było to zapisać w kodzie JAVASCRIPT jako body.onload=dibujar; bycie dibujar nazwa funkcji, która powinna zostać uruchomiona podczas ładowania strony internetowej.

W najnowszych wersjach JAVASCRIPT zdarzenia można powiązać z funkcjami za pomocą addEventListener z formatem objeto.addEventListener(evento,función); lub używając składni objeto.evento=función; co działa również w starszych wdrożeniach. Aby odłączyć funkcję powiązaną ze zdarzeniem, musisz removeEventListener który ma taki sam format jak addEventListener.

JAVASCRIPT Potrafi reagować na wiele zdarzeń, które mogą wystąpić na stronie internetowej. Może na przykład wykryć kliknięcie elementu HTML z onmousedownlub po kliknięciu onclick, po naciśnięciu klawisza onkeydown, korzystając z paska przewijania za pomocą onscroll. Dla naszych celów to wystarczy wykryć ładowanie strony za pomocą onload i jego zmiana rozmiaru za pomocą onresize. Skojarzymy te zdarzenia z przedmiotami body y window del DOM odpowiednio. Pierwszy można przypisać w kodzie HTML, jak widać, i drugi w kodzie JAVASCRIPT wewnątrz funkcji wywoływanej przez pierwszą i z formatem window.onresize=redimensionar; bycie redimensionar funkcja, która będzie wywoływana za każdym razem, gdy okno zmieni rozmiar.

Uruchom po pewnym czasie

JAVASCRIPT ma dwa zasoby dla odroczona realizacja: setTimeout, który wykonuje funkcję po upływie określonego czasu i setInterval który będzie wykonywał funkcję w określonym przedziale czasu. Obie metody wymagają jako parametrów (1) wywoływanej funkcji i (2) przedziału czasu wyrażonego w milisekundach. Aby zatrzymać ich działanie, możesz przypisać wynik zwracany przez te funkcje do zmiennych i przekazać je jako argument do clearTimeout lub clearInterval kiedy nie chcesz ich ponownie wywoływać (lub kiedy nie chcesz, aby były wykonywane po raz pierwszy) setTimeout o setInterval odpowiednio.

<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

}

W poprzednim przykładzie wprowadzono metodę alert który służy do wyświetlania znaku ostrzegawczego. Chociaż był szeroko stosowany w przeszłości, obecnie jest prawie zakazany w kodzie JAVASCRIPT ze względu na to, jak agresywne (natrętne) jest zakrywanie strony internetowej oknem dialogowym.

W programie napisanym dla a mikrokontroler małej serii (takiej jak ta na talerzu Arduino Uno) często stosuje się zmienne globalne, jak w poprzednim przykładzie JAVASCRIPT, ponieważ kod jest krótki i niezbyt zagmatwany, ponieważ wielokrotnie funkcje są implementowane ad hoc, a użycie zmiennych globalnych pozwala w bardzo prosty i intuicyjny sposób przewidzieć wykorzystanie pamięci, co jest krytyczne w systemach o małych zasobach . Zamiast, en JAVASCRIPT Powszechnym zjawiskiem jest ograniczanie użycia zmiennych globalnych do możliwego minimum. ponieważ nie musi przyspieszać użycia pamięci, ponieważ działa normalnie na komputerze CPU z zasobami znacznie przewyższającymi zasoby A MCU, ponieważ prawdopodobnie współistnieje z dużą ilością kodu stron trzecich, z którym musi współpracować bez ingerencji, a ponieważ jest to system otwarty, nie można przewidzieć przyszłego kontekstu wykonania (program mikrokontroler small całkowicie określa jego działanie bez dodawania więcej kodu po jego uruchomieniu) oraz ponieważ wymiary aplikacji mogą utrudniać czytanie, jeśli kod nie zawiera jego działania, czyniąc metody tak samodzielnymi, jak to tylko możliwe.

Operacje matematyczne na obiekcie JavaScript Math

W obiekcie zgrupowane są operacje matematyczne bardziej skomplikowanych obliczeń matematycznych Math. Ten obiekt jest używany bezpośrednio, nie jest konieczne tworzenie jego instancji, aby móc korzystać z metod lub właściwości (stałych), które zawiera.

Math.abs(n) Wartość bezwzględna parametru n
Math.acos(n) Arccosinus parametru n (wynik w radianach)

Math.asin(n) Arcsine parametru n (wynik w radianach)
Math.atan(n) Arcus tangens parametru n (wynik w radianach)
Math.atan2(n,m) Arcus tangens n/m (wynik w radianach)

Math.ceil(n) Zaokrąglij parametr do najbliższej liczby całkowitej w górę
Math.cos(α) Cosinus parametru α (α w radianach)
Math.E liczba (≃2.718281828459045)

Math.exp(n) e podniesione do parametru n: eⁿ
Math.floor(n) Zaokrąglij parametr n do najbliższej liczby całkowitej w dół
Math.log(n) Logarytm naturalny (o podstawie e) parametru n

Math.LN2 Logarytm naturalny (podstawa e) liczby 2 (≃0.6931471805599453)
Math.LN10 Logarytm naturalny (podstawa e) liczby 10 (≃2.302585092994046)
Math.LOG2E Logarytm o podstawie 2 z e (≃1.4426950408889634)

Math.LOG10E Logarytm o podstawie 10 z e (≃0.4342944819032518)
Math.max(a,b,c,…) Największa wartość z listy przekazanych parametrów
Math.min(a,b,c,…) Najmniejsza wartość z listy przekazanych parametrów

Math.PI Liczba π (≃3.141592653589793)
Math.pow(n,m) Pierwszy parametr n podniesiony do drugiego parametru m: n^m
Math.random() (Prawie) losowa liczba z zakresu od 0.0 do 1.0

Math.round(n) Zaokrąglij parametr n do najbliższej liczby całkowitej
Math.sin(α) Sinus parametru α (α w radianach)
Math.sqrt(n) Pierwiastek kwadratowy z parametru n

Math.SQRT1_2 Pierwiastek kwadratowy z 1/2 (≃0.7071067811865476)
Math.SQRT2 Pierwiastek kwadratowy z 2 (≃1.4142135623730951)
Math.tan(α) Tangens parametru α (α w radianach)

Załaduj dane z serwera za pomocą AJAX

Metoda rysowania informacji przechowywanych w IoT polega na co pewien czas ładowaniu danych z serwera i ponownym rysowaniu wykresu, za pomocą którego są one reprezentowane. Do odczytu danych z serwera wykorzystywana jest technologia AJAX (asynchroniczny JavaScript i XML) przez obiekt XMLHttpRequest de JAVASCRIPT. Wykreślanie wykresu danych odbywa się poprzez ponowne wykorzystanie obiektu SVG co jest już w kodzie HTML i który zawiera wykres, którego współrzędne są modyfikowane, aby odpowiadały nowym załadowanym danym.

W przykładzie tej propozycji, oprócz aktualizacji rysunku, zaktualizowano także tekst na stronie internetowej, który pokazuje datę i wartość ostatnich danych pomiarowych dla każdego wykresu.

Po stronie serwera znajduje się baza danych zawierająca informacje że czujniki podłączone do Internetu Rzeczy monitorują. Ta baza danych jest odczytywana przez żądanie obiektu XMLHttpRequest odpowiadając informacjami zakodowanymi w pliku Format JSON, choć nazwa zastosowanej metody sugeruje związek z formatem XML.

W pierwszym tutorialu polaridad.es na temat Przechowywanie danych IoT Można zobaczyć przykładową infrastrukturę do zarządzania od strony serwera informacjami dostarczanymi przez urządzenia podłączone do Internetu Rzeczy. W tej serii artykułów serwer jest używany jako zasób Apache z którego można korzystać z języka programowania PHP aby uzyskać dostęp do bazy danych MySQL o MariaDB. Na serwerach obsługujących IoT bardzo często spotyka się bazy danych MongoDB (NoSQL) i język programowania JAVASCRIPT na node.js jako infrastruktura oprogramowania.

Kolejna funkcja odpowiada za żądanie od serwera najświeższych danych z jednego z czujników. W wywołaniu funkcji obiekt jest używany jako argument JAVASCRIPT obsługujący rysowane dane. Jeśli ten sam wykres przedstawia kilka wartości, na przykład w celu wizualnego wyszukiwania korelacji, do serwera można wysłać żądanie zwrócenia kilku wartości jednocześnie, co jest metodą bardziej optymalną ze względu na sposób działania serwera. Protokół 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);

}

W trzeciej linii poprzedniego przykładu przygotowywane jest zapytanie, które zostanie skierowane do serwera, w którym zostanie przekazany argument „strefa”, którego wartością będzie nazwa lub kod monitorowanego miejsca, gdyż informacja o obszar może współistnieć w tej samej bazie danych, różne czujniki (np. termometry mierzące temperaturę w różnych pomieszczeniach). Oczekuje się, że parametr przekazany do poprzedniej funkcji, czyli obiekt z danymi wykresu, będzie zawierał właściwość z nazwą pomieszczenia („przyrostek_nazwy”).

Pomiędzy wierszami 7 i 14 poprzedniego kodu, obiekt XMLHttpRequest który jest przechowywany w zmiennej „ajax”. Zanim wybierzesz sposób utworzenia obiektu, przeprowadzasz wyszukiwanie window Jeśli XMLHttpRequest nie był dostępny (coś, co miało miejsce w starych wersjach eksploratora Microsoftu i chociaż jest daleko w tyle, służy jako przykład alternatywy do utworzenia obiektu przy użyciu (bardziej natywnej) składni. Object.create o new, podobnie jak w przypadku innych języków obiektowych.

Aby móc natychmiast zarządzać odpowiedzią, kod obsługujący ją jest przygotowywany w liniach od 15 do 26 przed wysłaniem żądania do serwera.

Sposób wykonać zapytanie HTTP na serwer składa się z otwórz połączenie z open wskazanie typu i strony (opcjonalnie nazwa użytkownika i hasło), przygotuj nagłówki protokołu z setRequestHeader y wyślij prośbę z send. Nagłówek HTTP Content-length będziesz musiał znać długość zapytania (liczbę znaków), która jest obliczana za pomocą length.

Kiedy prośba AJAX jest gotowy, wykonywana jest funkcja powiązana ze zdarzeniem onreadystatechange. Zamiast przypisywać funkcję, w poprzednim przykładzie na bieżąco definiowana jest anonimowa funkcja, która będzie zarządzać odbiorem danych przychodzących z serwera. Przede wszystkim w linii 18 sprawdzane jest, czy status żądania to „zakończone”, co odpowiada wartości 4 nieruchomości readyState, że status pliku to „OK”. Protokół HTTP (kod 200), które można uzyskać od nieruchomości status i że dane, które nadeszły, są Format JSON, konsultując nieruchomość responseType.

Po sprawdzeniu, czy status odpowiedzi jest zgodny z oczekiwaniami, w linii 20 poprzedniego przykładu tworzy obiekt z wynikiem, konwertując tekst JSON. W odpowiedzi oczekuje się zwrócenia daty, dzięki temu możemy sprawdzić, czy wynik, który wysyła serwer, był już wcześniej przedstawiony na wykresie, co jest weryfikowane w linii 21. Jeżeli dane są nowe, w linii 23 nazywa się funkcję odpowiedzialną za przerysowanie wykresu o nowe informacje.

Założeniem proponowania tej metody odczytu jest to, że dane będą bardzo często odświeżane. Jeśli prezentowane informacje dotyczą okresu długoterminowego (np. temperatury w ciągu dnia lub tygodnia), można wdrożyć żądanie wstępne, które zbierze wszystkie dostępne dane, a następnie podobne do tego w przykładzie, które je zaktualizuje w ciągu korespondent epoki.

Generuj losowe dane do testów

Kiedy cała infrastruktura serwerowa i kliencka będzie gotowa, funkcja taka jak w poprzedniej sekcji będzie odpowiedzialna za odczytanie danych i narysowanie z nich wykresu, ale W fazie testowania bardziej praktyczne może być użycie liczb losowych w kontrolowanym zakresie aby sprawdzić, czy pisany kod jest poprawny. Poniższa funkcja może posłużyć jako przykład pozyskiwania danych podczas budowania finalnej aplikacji.

<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);

}

Zamiast czytać informacje z bazy danych, powyższy przykład generuje je losowo i przekazuje do funkcji odpowiedzialnej za rysowanie wykresu. Wymyślone dane to wektor utworzony przez datę wyrażoną w milisekundach, moment zarejestrowania informacji z czujnika oraz monitorowane dane, które mieszczą się pomiędzy wartością maksymalną a wartością minimalną.

W tym przykładzie podczas generowania daty można ją opóźnić o maksymalnie jedną sekundę (1000 milisekund) w stosunku do daty w momencie wynalezienia. Jak Math.random() generuje liczbę od 0.0 do 1.0, pomnożenie jej przez 1000 daje liczbę od 0 do 1000, która następnie jest konwertowana na liczbę całkowitą. W ten sam sposób wartość uzyskuje się, mnożąc liczbę losową przez zakres (maksimum minus minimum) i dodając minimum.

Narysuj wykres czujników IoT z wykresem SVG

Ponieważ widzieliśmy, jak możemy uzyskać wartości, które chcemy przedstawić (w przykładzie temperaturę) i ich położenie w czasie, które można wyrazić łącznie w postaci współrzędnych, poniższy przykład pokazuje funkcję rysowania ścieżki łączący te punkty i opcjonalnie kolorowy obszar ograniczony tą linią u góry. Rezultat będzie taki jak na poniższym obrazku.

Przykład wykresu wygenerowanego za pomocą SVG i JavaScript w celu przedstawienia danych z czujników IoT

Oś pozioma (X) wykresu przedstawia czas, a oś pionowa (Y) wartości monitorowane przez czujniki podłączone do IoT. Odstęp poziomy wynosi kilka sekund, ponieważ w tej propozycji wykres jest aktualizowany bardzo często (na przykład co sekundę), aby zapewnić informacje o stanie czujników w czasie niemal rzeczywistym.

<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

}

W poprzednim kodzie są dwa interesujące aspekty, po pierwsze, obliczenia, które na to pozwalają dostosować zakres reprezentowanych wartości a po drugie budowa nieruchomości d który wskazuje współrzędne punktów na układzie (path).

Aby dostosować zakres reprezentowanych wartości, przesuwa się je od minimum i skaluje tak, aby widoczna wielkość odpowiadała rozmiarowi wykresu. W przypadku czasu przesunięcie uzyskuje się poprzez odjęcie zakresu, który chcesz wyświetlić od najdłuższego czasu (data i godzina najbliższa bieżącej) (w przykładzie 20 sekund). Przesunięcie wartości temperatur to dolny zakres (jeden stopień) minus najniższa wartość, tak aby dane pokazane poniżej były jak najbardziej zbliżone do najniższej dopuszczalnej wartości, ale z pozostawieniem marginesu, który pozwala nam docenić to, co mija

Współczynnik mnożący wartości czasu w celu uzyskania współrzędnych poziomych wykresu uzyskuje się poprzez podzielenie całkowitej szerokości wykresu (w przykładzie 100 jednostek) przez reprezentowany zakres czasu (w przykładzie 20 sekund). Aby uzyskać współczynnik ze skalarnymi wartościami temperatury, należy pamiętać, że przedstawiony zakres rozciąga się od marginesu poniżej wartości minimalnej do marginesu powyżej maksimum, o jeden stopień w obu przypadkach. W ten sposób współczynnik skali pionowej wynika z podzielenia wysokości wykresu (w przykładzie 100 jednostek) przez wartość maksymalną minus minimum plus górny i dolny margines. Ponieważ wartości te mogą całkowicie rozwinąć się w temperaturach ujemnych, używamy Math.abs() użyć wartości bezwzględnej różnicy.

Własność d Obiekt path Konstruuje się go poprzez połączenie współrzędnych punktów w tekście. Każda para współrzędnych jest poprzedzona kodem SVG L, który rysuje linię od aktualnej pozycji do wartości bezwzględnej wskazanej przez współrzędne. Wartości X i Y oddzielamy przecinkami i każdą operację SVG jest oddzielona spacją od następnego.

Aby rozpocząć układ, użyj kodu M (przejdź do współrzędnej absolutnej). W przypadku wykresu zamkniętego i wypełnionego zaczynasz od prawego dolnego rogu, w przypadku wykresu otwartego rysującego profil danych zaczynasz od ostatniej reprezentowanej wartości (najnowszej). Aby zakończyć zamknięty układ, używany jest kod Z dodając jako ostatni punkt ten, który ma tę samą wartość współrzędnej X co ostatni punkt linii, a jako współrzędną Y najmniejszą reprezentowaną wartość.

<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

);

}

W tym przykładzie funkcja dibujar_grafico(), czyli wywołanie ładowania strony, pobiera początkowe wartości do przetestowania (nie ostatnią wartość w czasie rzeczywistym) i przygotowuje zakres, w jakim dane będą renderowane: 20 sekund (20000 ms) w poziomie i 15°C w pionowo od -5°C do +10°C z jednostopniowym marginesem górnym i dolnym. Wykonaj dwa połączenia do actualizar_grafico(), w pierwszym przejściu true jako argument wskazujący, że wykres powinien zostać zamknięty, aby reprezentował wypełniony obszar, a przy drugim wywołaniu zostaje uznany false narysować linię. W każdym przypadku przedmiot path zmodyfikowany to taki, który ma odpowiedni wygląd, z wypełnieniem i bez obramowania w pierwszym przypadku oraz z określoną grubością linii i bez wypełnienia w drugim przypadku.

Funkcja actualizar_grafico() pracować nad przedmiotem SVG który używa następującego kodu jako kontenera HTML. Obiekt SVG zawiera dwie ścieżki, jedną do rysowania linii i drugą do rysowania wypełnionego obszaru. Podczas ładowania strony internetowej z elementu <body> poprzednia funkcja wywoływana jest automatycznie, dibujar_grafico() dzięki wydarzeniu 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>

W linii 10 kodu HTML powyżej, w stylu ustalona jest szerokość (dla przykładu) 820 px i wysokość 150 px (coś, co w ostatecznej wersji będzie wskazane z klasą i dokumentem CSS). Wydaje się dziwne, że linie 13 i 14 określają rozmiar obiektu SVG np. 100% szerokości i wysokości (która najlepiej odpowiada wymiarom okna, 100×100). Jak już wspomniano, powodem tego jest zawsze praca ze znanymi wymiarami i dostosowywanie do nich reprezentowanych wartości. Inną alternatywą byłoby każdorazowe obliczenie przestrzeni wykresu i późniejsze dostosowanie wartości lub wymuszenie stałych wymiarów wykresu, których dokument będzie musiał przestrzegać.

Wybierając wykres, którego wymiary zmieniają się zgodnie z kodem HTML, konieczne jest uwzględnienie nieruchomości vector-effect z odwagą non-scaling-stroke aby zapobiec deformacji grubości linii, gdy wykres nie zachowuje wybranych proporcji 1:1 na stronie internetowej, na której jest wyświetlany, jak to miało miejsce w poprzedniej propozycji.

Aby „przyciąć” wykres i wyświetlić tylko wybrany obszar, użyj opcji viewBox. W tym przypadku wybraliśmy część wykresu zaczynającą się od 0,0 (lewy górny róg) i mającą wymiary 100x100 w dół i w prawo. Część rysunku znajdująca się we współrzędnych o wartościach ujemnych lub większych niż 100 nie będzie wyświetlana na stronie internetowej nawet jeśli istnieją w obiekcie SVG

Dodaj nowe elementy do rysunku SVG

W poprzednim przykładzie funkcja actualizar_grafico() użyj układu SVG na który następuje zmiana właściciela d, co wyraża łańcuch współrzędnych. Alternatywą byłoby utworzenie całego obiektu za każdym razem, gdy jest on przerysowywany. Zaletą pierwszej opcji jest to, że wygląd graficzny (np. grubość czy kolor) jest zdefiniowany w kodzie HTMLograniczeniem jest to, że obiekty muszą zostać wcześniej utworzone.

Aby utworzyć obiekty SVG, użyj createElementNS(), co pozwala na włączenie przestrzeń nazw. W poniższym przykładzie tworzony jest nowy obiekt tekstowy (text) i jest powiązany z elementem SVG który już istnieje w kodzie HTML strony internetowej. Po utworzeniu nowego elementu przypisywane są jego właściwości setAttribute() i jest dodawany do SVG z 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]);

Zmień proporcje elementów rysunku

Jeśli próbowałeś etykietować za pomocą funkcji z przykładu z poprzedniej sekcji, zauważyłeś, że tekst wydaje się zdeformowany, gdy proporcje obiektu na stronie internetowej (width y height kodu HTML) nie jest równy reprezentowanemu obszarowi (viewBox). Aby dostosować proporcje, konieczna jest znajomość wymiarów obiektu SVG dla którego możesz sprawdzić styl obiektu lub pojemnika HTML, jeśli obiekt SVG przenieść tę nieruchomość. Przypisywanie własności transform do przedmiotów SVG które zależą od proporcji, deformację można skorygować, stosując operację skalowania scale() w którym współczynnik w X jest inny niż w 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 umożliwia zgrupowanie kilku obiektów w nowy element złożony, który obsługuje również właściwościjak proste przedmioty. Aby zastosować tę samą transformację do szeregu obiektów na raz, a nie do każdego obiektu osobno, możesz pogrupować je według tego zasobu i zastosować pojedynczą właściwość transform do nich wszystkich.

Jak wyjaśniono podczas rozmowy Format SVG, elementy grupy są otoczone etykietami <g> y </g>. Aby dodać z JAVASCRIPT elementy do grupy SVG jest używany, jak widać w poprzednim przykładzie, appendChild() po zdefiniowaniu nowego obiektu.

Aby ustalić początek podczas stosowania przekształceń, właściwość można zastosować na obiektach SVG transform-origin, którego wartością są współrzędne X i Y punktu, od którego rozpoczyna się transformacja. Jeżeli wartość początku transformacji nie jest wyraźnie wskazana (w przeglądarce internetowej), stosowany jest środek współrzędnych. Niestety, w momencie pisania tego tekstu, określenie zachowania transformacji przy użyciu źródła innego niż domyślne nie jest jednolite w różnych przeglądarkach i należy stosować je ostrożnie.

Wraz z transformacją skali za pomocą scale Istnieją inne, takie jak obrót z rotation i ruch z translate, które oferują alternatywa dla reprezentacji graficznej: zamiast uzyskiwać nowe współrzędne, możesz przedstawić je w ich własnej przestrzeni i przekształcić wykres tak, aby pasował do formatu, w jakim chcesz je przedstawić.

Dodaj odniesienia do wykresu

Teraz, gdy główna część wykresu została rozwiązana poprzez wykreślenie wartości z profilem i wypełnionym obszarem, można go uzupełnić odniesieniami, które pomogą w jego odczytaniu. Jako przykład zacznijmy od narysowania poziomych odniesień (linii), które zaznaczają maksymalne i minimalne akceptowalne wartości, a także pożądaną wartość. Jak wyjaśniono, możesz dodać obiekty do pliku SVG prosto z JAVASCRIPT lub umieść je ręcznie w kodzie HTML i zmodyfikuj je później za pomocą 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();

Logiczne wydaje się oznaczenie tych odniesień poziomych tekstem wyjaśniającym wartość, jaką reprezentują. Do wyróżnienia tekstu można zastosować prostokąty, które wyróżnią się na tle tła i grafiki. Ponieważ teksty będą musiały zostać przeskalowane, aby skompensować deformację, można je wszystkie pogrupować w obiekt, do którego zostanie zastosowana skala; Główną zaletą takiego działania jest możliwość ich modyfikacji w jednej operacji, jeśli rozmiar kontenera wykresu (okna przeglądarki) zostanie zmieniony i zmieni się proporcja korygowana przez skalę.

<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/power-bank-cuanto-tarda-en-cargarse/" 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">¿Cuánto tiempo tarda en cargarse un power bank?</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();

W powyższym przykładowym kodzie jest kilka interesujących aspektów. Na początek zauważ, że zastosowano stałe (zmienne globalne), aby przykład był bardziej czytelny dla użytkowników zajmujących się programowaniem. mikrokontrolery en C lub C + +. Jak się później okaże, optymalny sposób na zaprogramowanie tego JAVASCRIPT Byłoby to użycie obiektów zawierających te wartości i metod, które zarządzałyby referencjami w tym przykładzie lub ogólnie na wykresie w systemie produkcyjnym.

Z drugiej strony, udoskonalając wygląd bardziej ogólnego kodu, opracowano osobne funkcje, które obliczają różne współczynniki korygujące proporcje wykresu w celu dostosowania tekstu proporcion_grafico(), skala wartości w zależności od ich zakresu escala() oraz współczynnik korekcyjny dla pomiarów znanych w wartościach bezwzględnych, takich jak pomiary w odniesieniach medida_grafico().

Lektura tego kodu powinna pomóc w wyjaśnieniu kontekstu, w którym działa taka aplikacja, która rysuje grafikę w czasie rzeczywistym i musi być elastyczna, aby można ją było prezentować w różnych kontekstach graficznych (przynajmniej w różnych rozmiarach i proporcjach). Przede wszystkim należy wygenerować obiekty SVG, „ręcznie” w kodzie HTML, albo poprzez kod JAVASCRIPT w każdym razie należy następnie uzyskać odniesienia do tych obiektów, aby nimi manipulować JAVASCRIPT dzięki czemu można rysować nowe wykresy i dostosowywać reprezentację już narysowanego wykresu do zmiany medium, w którym jest on prezentowany.

Kolejnym odniesieniem, które może pomóc w łatwej interpretacji wykresu, są punkty reprezentujące określone wartości (węzły prostej). W tym przykładzie, w którym reprezentujemy pojedynczą wielkość, wybór symbolu nie jest krytyczny, ale jeśli nałoży się na siebie kilka różnych wartości w celu poszukiwania korelacji, warto rozróżnić, oprócz wykorzystania innych zasobów, takich jak kolor , rysując różne symbole. Grafika używana dla węzła linii musi zostać zmodyfikowana pod względem wielkości i proporcji, jak to ma miejsce na przykład w przypadku tekstów, tak aby jej wymiary były absolutne i aby jej proporcje zostały zachowane nawet w przypadku zmiany zawartych w grafice ramek.

W poprzednim przykładzie widzieliśmy już, jak obliczyć różne współczynniki w celu przeskalowania i skorygowania proporcji rysunku; Jeśli chodzi o sposób wdrożenia zarządzania symbolami węzłów lub wierzchołków grafu, możliwym rozwiązaniem może być przechowywanie obiektów SVG do wektora i modyfikować jego położenie podczas aktualizacji wykresu poprzez odczytanie nowej wartości lub podczas ponownego rysowania poprzez zmianę rozmiaru kontenera. W pierwszym przypadku należałoby zmienić jego położenie, a w drugim jego proporcje w stosunku do nieruchomości transform i wartość scale. Poniższy kod jest modyfikacją funkcji actualizar_grafico() aby uwzględnić zmianę położenia symboli wierzchołków wykresu.

<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)