Générez et modifiez des graphiques SVG des données des capteurs connectés à l'IoT avec JavaScript
Dans cette dernière partie de la série d'articles sur le dessin graphiques avec des données provenant de capteurs connectés à l'Internet des objets, il est temps de parler de comment générer ou modifier avec JavaScript dessins au format SVG et certains des éléments HTML qui servent de conteneur ou qui présentent des informations complémentaires aux graphiques.
Les utilisateurs cibles de ce tutoriel sont censés constituer un profil de programmation électronique et informatique. microcontrôleurs, ils ne connaissent peut-être pas HTML, CSS o SVG; Pour cette raison, dans les versions précédentes, une brève introduction au langage ou à la technologie correspondante a été réalisée. Dans cette dernière partie l'approche est un peu différente, puisque les lecteurs savent sûrement programmer, il est possible qu'en utilisant le langage C + + quoi comment JavaScript, partage la syntaxe de base avec C et il peut être utilisé comme référence pour sauter la plupart des concepts de programmation de base et ainsi se concentrer sur les différences et l'utilisation spécifique qui nous intéresse pour créer des graphiques de capteurs dans l'IoT.
Le nom donne une idée de la première différence : JavaScript C'est un langage de programmation scénario (trait d'union) et en tant que tel, c'est interprété, il n'est pas nécessaire de le compiler ; le contexte dans lequel le scénario (un navigateur web par exemple) lira, traduira et exécutera les commandes. Pour être précis, dans la plupart des cas, il existe un compilation d'exécution (JIT), mais pour le processus d'écriture de code JavaScript Cela ne nous affecte pas, nous écrivons simplement le code et cela peut fonctionner.
Le nom contient également la première confusion : JavaScript n'a pas le moindre rapport avec Java. Initialement, lors de son développement Netscape pour son navigateur, il s'appelait d'abord Mocha, puis LiveScript, moins déroutant. Après son implémentation réussie dans les navigateurs, et en les transcendant, il a été standardisé comme ECMAScript (Pour ECMA-262, version 6 au moment de la rédaction) pour devenir neutre vis-à-vis des navigateurs qui l'implémentent. Il existe actuellement également une norme ISO à partir de la version 5, 2011 (ISO/IEC 16262:2011 au moment de la rédaction de l'article)
Variables, types de données de base et objets en JavaScript
Contrairement à ce qui se passe, par exemple, dans C + +, en JavaScript type de données non inclus lors de la déclaration d'une variable et de plus le type associé à une variable n'est pas fixe, il est possible d'attribuer une valeur d'un type différent tout au long de l'exécution du programme.
|
1
2
3
4
5
6
7
|
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
|
Dans l'exemple précédent, la variable "chose" a été déclarée (sans indiquer le type de données), puis des données d'un type différent sont affectées et elles sont consultées. typeof le type qui JavaScript qu'il a interprété. Pour déboguer le code vous pouvez l'écrire dans la console de l'inspecteur du navigateur web (ce qui n'affectera pas la présentation du web) avec console.log().
Pour forcer la conversion des données vers un type spécifique, notamment du texte en numérique, vous pouvez utiliser des fonctions telles que parseInt() o parseFloat() qui se convertissent respectivement en nombres entiers ou en nombres à virgule flottante. La conversion inverse peut être effectuée avec String(), bien que cela ne soit probablement pas nécessaire car la conversion automatique est généralement suffisante. Avec parseFloat()Par exemple, vous pouvez obtenir la valeur d'une propriété de page Web, telle que la largeur ou la hauteur d'un objet, qui inclut des unités ; De cette façon, l'expression parseFloat("50px"); renverra 50, une valeur numérique, en conséquence.
En JavaScript il n'y a pas de distinction entre les guillemets doubles et simples; Le type de données dans les deux cas est string, et chacun d’eux peut inclure l’autre sans avoir besoin de codes d’échappement.
|
1
2
3
4
5
6
7
8
9
10
|
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
|
Dans l'exemple précédent, on peut voir qu'une variable, lorsqu'elle a été déclarée (existe) mais qu'aucune valeur ne lui a été attribuée, contient un type de données non défini (undefined). Un objet non attribué a la valeur null; Autrement dit, l’objet existe, mais sans valeur ; une variable qui y faisait référence n'aurait pas de typeof undefined mais object. Un objet peut également être vide, c’est-à-dire non nul mais ne posséder aucune propriété.
Pour définir un objet dans JavaScript sont entourés d'accolades ({ y }) les propriétés ou méthodes, séparées par le signe deux-points (:) nom de la propriété valeur de la propriété et par virgule (,) les différentes propriétés. Vous pouvez trouver plus d'informations sur cette manière d'exprimer un objet dans l'article sur le Format JSON.
Bien que vous puissiez utiliser une syntaxe qui pourrait vous amener à penser le contraire, en JavaScript Il n'y a pas de classes mais des prototypesAutrement dit, pour qu'un objet hérite des propriétés et des méthodes, un autre objet est créé (le prototype) que les autres (les enfants) utilisent comme référence. La syntaxe la plus proche du style de JavaScript utiliser un prototype est Object.create bien qu'il soit également possible (et parfois utile) d'utiliser new comme dans d'autres langages orientés objet.
|
1
2
3
4
|
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));
|
Pour requête si un objet est une instance d'un autre, si vous l'utilisez comme prototype, si vous héritez de ses propriétés, bref, vous pouvez utiliser instanceof (créé avec new) O isPrototypeOf (créé avec Object.create) qui sera évalué à true lorsque l'objet utilise le prototype et à false dans le cas contraire.
Une fois qu'un objet a été créé en utilisant un autre comme prototype, c'est-à-dire une fois qu'un objet a été instancié, il peut être ajouter de nouvelles propriétés ou remplacer les propriétés du prototype en utilisant la syntaxe par points comme dans gato.peso=2.5.
La tableaux dans JavaScript Ils sont différents de ceux que vous connaissez probablement C. Pour commencer, ils sont déclarés sans qu'il soit nécessaire d'indiquer leur longueur, uniquement avec les signes de crochets ouvrants et fermants ([ y ]), les composants peuvent être hétérogènes (différents types de données dans le même tableau) et de nouveaux éléments peuvent être ajoutés sans être limités à une limite. Les matrices de JavaScript sont en fait des listes (collections) d'éléments auxquels référencé par un index numérique ou par un nom. Un tableau peut contenir simultanément des index numériques et des noms d'éléments, mais il est courant d'utiliser des objets (propriétés) pour exploiter le second type.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
// 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
|
Comme on peut le voir dans l'exemple précédent, pour savoir si une variable correspond à une instance d'un tableau (c'est un objet tableau) on peut utiliser instanceof, comme cela a déjà été utilisé avec des objets génériques ou, dans des versions plus récentes de JavaScript on peut recourir à Array.isArray()
Pour accéder aux éléments du tableau vous pouvez utiliser son index (matriz[7]) ou par le nom de la propriété avec le nom entre crochets (matriz["nombre"]) ou avec la syntaxe de points habituelle pour les objets (matriz.nombre). Puisque le nom est une chaîne de texte, une expression, comprenant des variables, peut être utilisée pour le composer. Pour parcourir un tableau avec des propriétés, une boucle avec le format peut être utilisée for(propiedad in matriz).
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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
*/
|
Il est intéressant pour notre objectif de traiter objet Date, avec lequel représenter et gérer la date et l'heure dans JavaScript. L'objet peut être instancié sans données, il prendra donc la date et l'heure actuelles, ou il peut être créé en indiquant une date comme valeur, soit en millisecondes depuis le 1er janvier 1970 (comme Heure Unix ou heure POSIX mais exprimé en millisecondes au lieu de secondes) ou en précisant des valeurs distinctes d'année, mois, jour, heure...
L'objet comprend une série complète de méthodes pour interroger ou définir la date et l'heure:
-
now()
Renvoie la date et l'heure actuelles exprimées en millisecondes depuis le 1er janvier 1970 -
getTime()|setTime()
Obtient ou modifie, respectivement, la valeur de temps en millisecondes depuis le 1er janvier 1970.valueOf(), qui est une méthode présente dans la plupart des objets, la valeur de l'objet Date correspondant est également obtenue, commegetTime()avec Heure Unix ou heure POSIX exprimé en ms. -
getMilliseconds()|setMilliseconds()
Utilisé pour interroger ou définir la partie fractionnaire en millisecondes de l'objetDatesur lequel il est exécuté. Si elle est consultée, la valeur obtenue est comprise entre 0 et 999 mais des valeurs plus grandes peuvent être attribuées qui s'accumuleront dans la date et l'heure totales donc, comme le reste des méthodes get, elle sert à augmenter la valeur de l'objet.Date(ou diminuez-le si des valeurs négatives sont utilisées). -
getSeconds()|setSeconds()
Renvoie ou modifie, respectivement, la valeur des secondes de l'objetDate. -
getMinutes()|setMinutes()
Permet de consulter ou de régler les minutes de l'objetDate. -
getHours()|setHours()
Permet de consulter ou de modifier les heures (de 0 à 23) de l'objetDate. -
getDay()
Renvoie le jour de la semaine pour la date, exprimé sous la forme d'une valeur comprise entre 0 et 6 (du dimanche au samedi). -
getDate()|setDate()
Renvoie ou modifie le jour du mois de l'objetDatesur lequel il est appliqué. -
getMonth()|setMonth()
Permet de consulter ou modifier le numéro de mois de l'objetDate. -
getFullYear()|setFullYear()
Interroge ou définit la valeur de l'année sur l'objet contenant la date et l'heure.
Les méthodes précédentes de Date inclure une version UTC pouvoir travailler directement avec le temps universel sans avoir à faire de calculs intermédiaires. En ce sens, par exemple, getHours() a une version getUTCHours() o getMilliseconds() une alternative getUTCMilliseconds() de travailler alternativement avec l'heure officielle (légale) ou universelle. Avec getTimezoneOffset() Vous pouvez connaître la différence qui existe entre l’heure universelle et l’heure officielle locale.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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;
|
Fonctions JavaScript
Si vous lisez ceci, vous savez sûrement programmer. microcontrôleurs en C ou une C + + et connaître la notion de fonction. Même si l'idée de base est la même, JavaScript La façon dont ils sont définis et utilisés est un peu différente. Pour commencer, on l'a déjà dit, JavaScript Il n'utilise pas explicitement les types de données, vous n'avez donc pas besoin de l'indiquer lors de la définition de la fonction. À suivre, Il n'est pas obligatoire qu'une fonction ait un nom, elle peut être anonyme. Ils peuvent être associés à une variable pour les invoquer mais cela peut aussi ne pas être nécessaire puisque, parfois, il est utile de les invoquer immédiatement, pour lesquels les parenthèses et les paramètres sont ajoutés après la définition de la fonction.
Pour définir une fonction, préfixez function, le cas échéant, écrivez le nom, les arguments (les paramètres passés à la fonction) entre parenthèses et le code qui sera exécuté lorsque la fonction sera invoquée entre accolades.
|
1
2
3
4
5
|
function doble(numero)
{
var resultado=numero*2;
return resultado;
}
|
Certes, dans l'exemple précédent la variable "result" n'était pas du tout nécessaire, mais c'est une bonne excuse pour rappeler la portée variable, qui fonctionne comme prévu : la variable "result" n'existe qu'au sein de la fonction "double". Dans JavaScript peut également être utilisé let, au lieu de var, pour étendre une variable à un contexte de bloc de code (entouré d'accolades, { y })
Lorsque nous avons parlé des objets dans la section précédente, il manquait quelque chose de fondamental : les propriétés ont été définies mais les méthodes n'ont pas été définies. Comme prévu, les méthodes objets sont des fonctions, ils n'ont pas de nom et sont utilisés (invoqués) à partir du nom (de propriété) attribué par la définition de l'objet.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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”);
}
}
|
Dans l'exemple précédent, il existe déjà une méthode, "view_temperature", qui affiche la valeur de la propriété "current_temperature" via la console. Ce n'est pas très utile, mais cela donne une idée plus complète de ce qu'est la définition d'un objet dans JavaScript.
Pour accéder aux méthodes d'un objet (fonctions) à ses propriétés, utilisez this, comme dans l'exemple précédent de la ligne 11, lors de l'utilisation de la propriété « current_temperature ».
Accédez au modèle objet de document (DOM) avec JavaScript
À partir de JavaScript Vous avez accès au contenu de la page Web sur laquelle il s'exécute, ainsi qu'à certains aspects du navigateur qui affiche cette page, mais pas aux ressources système. La structure de données qui prend en charge les propriétés et les méthodes accessibles depuis JavaScript partie de l'objet fenêtre, plus précisément, le contenu de l'objet (le document HTML) correspond à l'objet document. Bien qu'il soit parfois utilisé par souci de clarté, il n'est pas nécessaire de faire précéder window les méthodes ou propriétés pour y faire référence, il suffit par exemple d'utiliser document, il n'est pas nécessaire d'écrire le nom de l'objet racine comme dans window.document, tant que la fenêtre actuelle est référencée.
La forme la plus utilisée de trouver un objet dans le document HTML C'est par la méthode getElementById(), auquel est passé en argument l'identifiant qui a été indiqué lors de la création du code HTML. D'après ce qui a été expliqué dans les sections précédentes, il est facile de supposer que vous pouvez également accéder aux composants à l'intérieur de l'objet. document en utilisant la syntaxe par points (document.componente) ou des crochets en utilisant à la fois le nom (document["componente"]), les plus utiles, comme l'index numérique, difficile à utiliser et peu pratique pour accéder au contenu d'une page web composée manuellement.
Avec JavaScript peut être récupérer l'élément qui contient un autre élément (élément ou nœud parent) consulter votre propriété parentNode ou votre propriété parentElement, la différence est que l'élément parent (parentElement) du dernier élément de la chaîne DOM C'est nul (null) et le nœud parent (parentNode) est le document lui-même (document).
Pour modifier le contenu d'un élément HTML, par exemple celui d'une étiquette <div>, Ça peut être utilisé innerHTML et pour modifier ses propriétés vous pouvez choisir de lui attribuer une classe différente avec className ou modifier ses propriétés individuellement avec style. Consulter le style affiché par un élément sur la page web n'est pas forcément utile style car cela peut dépendre de plusieurs facteurs ou tout simplement ne pas avoir été explicitement spécifié. Pour vérifier le style d'un élément finalement affiché sur la page web, la méthode getComputedStyle est utilisée.
Vers un élément de document HTML Plusieurs classes peuvent lui être attribuées pour déterminer son apparence et son comportement, gérer la liste des classes d'un objet depuis JavaScript on peut recourir à classList qui propose les méthodes add pour ajouter une nouvelle classe à la liste, remove pour le supprimer, toggle pour le remplacer ou consulter le contenu de la liste de classes d'un élément avec item et contains, qui renvoie la classe qui occupe une certaine position dans la liste et une valeur true o false si une certaine classe est ou non sur la liste.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
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”)
}
|
Dans l'exemple précédent, il est situé à getElementById l'objet que vous souhaitez manipuler (un élément <div> son id), avant de modifier l'apparence, le contenu est supprimé en attribuant avec innerHTML une chaîne de texte vide, une nouvelle classe lui est attribuée avec className et son style est modifié avec style en fonction de la valeur du contenu (température), changer la couleur, le cas échéant, via la propriété color. Une fois l'aspect établi, la valeur est écrite à nouveau en utilisant innerHTML.
Dans la deuxième partie de l'exemple ci-dessus (lignes 9 à 19) on accède à un élément de code HTML en utilisant la syntaxe document[] et la propriété id de l'élément pour modifier sa liste de classes avec la méthode classList.remove() et avec la méthodeclassList.add(), sur la base du résultat de plusieurs requêtes effectuées dans le cadre d'exécutions conditionnelles, qu'ils comparent à l'aide de classList.contains().
Quand est-ce que ça va faire référence à un élément HTML plusieurs domaines. fois tout au long du code JavaScript, c'est un peu plus efficace de l'attribuer à une variable ou utilisez son index au lieu du nom car, sinon, la méthode que vous utiliseriez JavaScript pour l'obtenir à chaque fois, il faudrait rechercher son nom, ce qui prendrait un peu plus de temps que si l'on accédait à une variable.
Pour ajouter de nouveaux objets au document HTML, ils peuvent être créés d'abord avec la méthode createElement de document et ensuite les incorporer au reste des éléments au point de l'arbre qui est nécessaire avec appendChild. Pour créer un objet XML, comme les objets SVG que nous utilisons pour dessiner le graphique des capteurs IoT, vous pouvez utiliser createElementNS (NS pour espace de nom). Comme expliqué en parlant du format SVG, l'espace de noms qui lui correspond (pour la version actuelle) est http://www.w3.org/2000/svg, qui doit être transmis à createElementNS comme argument avec le type d'élément, svg, dans ce cas.
Une alternative à innerHTML pour ajouter du texte comme contenu à un élément de document HTML est la méthode createTextNode() objet document. Avec cette alternative, vous pouvez créer un nouveau texte (qui est accessible ultérieurement s'il est affecté à une variable) qui est incorporé dans l'arborescence des objets avec la méthode appendChild(). Comme alternative à appendChild(), qui ajoute le nouveau contenu à la fin de ce qui existe déjà dans le nœud auquel il est ajouté, vous pouvez utiliser la méthode insertBefore(), qui ajoute un nouvel objet devant un objet existant. Porter insertBefore() au lieu de appendChild() propose une méthode qui sert, par exemple, à trier les nouveaux objets devant ceux existants lorsqu'un élément doit être devant un autre (comme dans une liste) ou recouvrir ou être recouvert d'une structure graphique dans laquelle se trouvent des éléments plus proches du premier plan ou de l'arrière-plan.
Réagissez aux événements avec JavaScript
Quand la manière de utiliser une page Web comme conteneur pour les graphiques de capteurs connectés à l'IoT on l'a utilisé onload Dans l'étiquette <body> pour commencer à dessiner le graphique. Cette propriété, associée aux objets code HTML, se réfère à la événements JavaScript. Comme déjà expliqué, il exécute une fonction lorsque la page est chargée. Bien qu'il ait été associé au code HTML pour mieux le garder à l'esprit, cela aurait pu être écrit dans le code JavaScript comme body.onload=dibujar; siendo dibujar le nom de la fonction qui doit être démarrée lors du chargement de la page Web.
Dans les versions les plus récentes de JavaScript les événements peuvent être associés à des fonctions en utilisant addEventListener avec le format objeto.addEventListener(evento,función); ou en utilisant la syntaxe objeto.evento=función; qui fonctionne également dans les anciennes implémentations. Pour dissocier la fonction associée à l'événement, vous avez removeEventListener qui a le même format que addEventListener.
JavaScript Il est capable de réagir à une multitude d’événements pouvant survenir sur une page web. Par exemple, il peut détecter quand un élément est cliqué HTML avec onmousedown, ou lorsque vous cliquez avec onclick, lorsqu'une touche est enfoncée avec onkeydown, en actionnant la barre de défilement avec onscroll. Pour notre objectif, il nous suffit de détecter le chargement de la page avec onload et son redimensionnement avec onresize. Nous associerons ces événements aux objets body y window de la DOM respectivement. Le premier peut être attribué dans le code HTML, comme on le voit et le second dans le code JavaScript à l'intérieur de la fonction appelée par le premier et au format window.onresize=redimensionar; siendo redimensionar la fonction qui sera appelée à chaque fois que la fenêtre change de taille.
Courir après un intervalle de temps
JavaScript dispose de deux ressources pour exécution différée : setTimeout, qui exécute une fonction après un intervalle de temps et setInterval qui exécutera une fonction à chaque intervalle de temps donné. Les deux méthodes nécessitent comme paramètres (1) la fonction invoquée et (2) l'intervalle de temps exprimé en millisecondes. Pour arrêter leur fonctionnement, vous pouvez affecter le résultat renvoyé par ces fonctions à des variables et les passer en argument à clearTimeout o clearInterval lorsque vous ne souhaitez plus les invoquer (ou lorsque vous ne souhaitez pas qu'ils soient exécutés pour la première fois) setTimeout o setInterval respectivement.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
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
}
|
Dans l'exemple précédent, la méthode est présentée alert qui sert à afficher un panneau d’avertissement. Bien qu’il ait été largement utilisé dans le passé, il est aujourd’hui quasiment banni du code. JavaScript en raison du caractère agressif (intrusif) de couvrir la page Web avec une boîte de dialogue.
Dans un programme écrit pour un microcontrôleur d'une petite série (comme celle de la plaque Arduino Uno), il est courant d'utiliser des variables globales, comme dans l'exemple précédent de JavaScript, puisque le code est bref et pas particulièrement déroutant, parce que souvent les fonctions sont implémentées ad hoc et parce que l'utilisation de variables globales permet de prédire l'utilisation de la mémoire de manière très simple et intuitive, ce qui est critique dans les systèmes avec peu de ressources . En échange, en JavaScript Il est courant de réduire l’utilisation de variables globales au minimum possible. car il n'a pas besoin de précipiter l'utilisation de la mémoire, puisqu'il fonctionne normalement sur un Processeur avec des ressources bien supérieures à celles d'un MCU, car il est susceptible de coexister avec de nombreux codes tiers avec lesquels il doit fonctionner sans interférer et comme il s'agit d'un système ouvert, le contexte d'exécution futur ne peut être prédit (le programme d'un microcontrôleur small détermine complètement son fonctionnement sans ajouter plus de code une fois qu'il est en fonctionnement) et parce que les dimensions des applications pourraient rendre la lecture difficile si le code n'encapsule pas son fonctionnement, rendant les méthodes aussi autonomes que possible.
Opérations mathématiques avec l'objet JavaScript Math
Les opérations mathématiques de calcul mathématique plus compliqué sont regroupées dans l'objet Math. Cet objet s'utilise directement, il n'est pas nécessaire de l'instancier pour utiliser les méthodes ou propriétés (constantes) qu'il intègre.
Math.abs(n)Valeur absolue du paramètre nMath.acos(n)Arccosinus du paramètre n (résultat en radians)Math.asin(n)Arc sinus du paramètre n (résultat en radians)Math.atan(n)Arctangente du paramètre n (résultat en radians)Math.atan2(n,m)Arctangente de n/m (résultat en radians)Math.ceil(n)Arrondissez le paramètre à l'entier supérieur le plus procheMath.cos(α)Cosinus du paramètre α (α en radians)Math.Ee numéro (≃2.718281828459045)Math.exp(n)e élevé au paramètre n : enMath.floor(n)Arrondir le paramètre n à l'entier inférieur le plus procheMath.log(n)Logarithme népérien (base e) du paramètre nMath.LN2Logarithme népérien (base e) de 2 (≃0.6931471805599453)Math.LN10Logarithme népérien (base e) de 10 (≃2.302585092994046)Math.LOG2ELogarithme base 2 de e (≃1.4426950408889634)Math.LOG10ELogarithme base 10 de e (≃0.4342944819032518)Math.max(a,b,c,…)Plus grande valeur de la liste des paramètres passésMath.min(a,b,c,…)Plus petite valeur de la liste des paramètres passésMath.PINombre π (≃3.141592653589793)Math.pow(n,m)Premier paramètre n élevé au deuxième paramètre m : nmMath.random()Nombre (presque) aléatoire entre 0.0 et 1.0Math.round(n)Arrondir le paramètre n à l'entier le plus procheMath.sin(α)Sinus du paramètre α (α en radians)Math.sqrt(n)Racine carrée du paramètre nMath.SQRT1_2Racine carrée de 1/2 (≃0.7071067811865476)Math.SQRT2Racine carrée de 2 (≃1.4142135623730951)Math.tan(α)Tangente du paramètre α (α en radians)
Charger des données depuis le serveur avec AJAX
La méthode suivie pour dessiner les informations stockées dans l'IoT consiste à charger de temps en temps les données du serveur et à redessiner le graphique avec lequel elles sont représentées. Pour lire les données du serveur, la technologie est utilisée AJAX (JavaScript et XML asynchrones) à travers un objet XMLHttpRequest de JavaScript. Le tracé du graphique de données se fait en réutilisant un objet SVG qui est déjà dans le code HTML et qui contient un tracé dont les coordonnées sont modifiées pour les faire correspondre aux nouvelles données chargées.
Dans l'exemple de cette proposition, en plus de mettre à jour le dessin, un texte sur la page Web est également mis à jour, indiquant la date et la valeur des dernières données mesurées pour chaque graphique.
Côté serveur, il existe une base de données qui contient les informations que les capteurs connectés à l’IoT surveillent. Cette base de données est lue par la requête d'objet XMLHttpRequest répondre avec des informations codées dans le Format JSON, bien que le nom de la méthode utilisée suggère une relation avec le format XML.
Dans le premier tutoriel polaridad.es sur le Stockage de données IoT Vous pouvez voir un exemple d'infrastructure pour gérer, côté serveur, les informations fournies par les appareils connectés à l'Internet des objets. Dans cette série d'articles, un serveur est utilisé comme ressource Apache à partir duquel vous pouvez utiliser le langage de programmation PHP accéder à une base de données MySQL o MariaDB. Sur les serveurs utilisés pour prendre en charge l'IoT, il est très courant de trouver des bases de données MongoDB (NoSQL) et le langage de programmation JavaScript sur Node.js comme infrastructure logicielle.
La fonction suivante est chargée de demander les dernières données de l'un des capteurs au serveur. Dans l'appel de fonction, l'objet est utilisé comme argument JavaScript qui prend en charge les données dessinées. Si un même graphique représente plusieurs valeurs, par exemple pour rechercher visuellement une corrélation, une requête peut être faite au serveur pour en renvoyer plusieurs simultanément, méthode plus optimale de par le fonctionnement du serveur. Protocole HTTP.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
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);
}
|
Dans la troisième ligne de l'exemple précédent, on prépare la requête qui sera faite au serveur, dans laquelle sera passé l'argument "zone", dont la valeur sera le nom ou le code du lieu surveillé puisque les informations sur le zone peuvent coexister dans la même base de données différents capteurs (par exemple, des thermomètres qui mesurent la température dans différentes pièces). Le paramètre passé à la fonction précédente, l'objet avec les données du graphique, doit inclure une propriété avec le nom de la pièce ("name_suffix").
Entre les lignes 7 et 14 du code précédent, le objet XMLHttpRequest qui est stocké dans la variable "ajax". Avant de choisir comment créer l'objet, vous recherchez window au cas où XMLHttpRequest n'était pas disponible (quelque chose qui se produisait dans les anciennes versions de l'explorateur de Microsoft et bien qu'il soit loin derrière, cela sert d'exemple d'alternatives pour créer l'objet en utilisant la syntaxe (plus native)) Object.create o new, similaire à celui des autres langages orientés objet.
Afin de pouvoir gérer la réponse immédiatement, le code qui la gère est préparé aux lignes 15 à 26 avant de faire la requête au serveur.
Comment étancher leurs soif ? effectuer la requête HTTP au serveur se compose de ouvrir une connexion avec open indiquant le type et la page (éventuellement nom d'utilisateur et mot de passe), préparer les en-têtes du protocole avec setRequestHeader y envoyer la demande avec send. L'en-tête HTTP Content-length vous aurez besoin de connaître la longueur de la requête (nombre de caractères) qui est calculée à l'aide de length.
Lorsque la demande AJAX est prêt, la fonction associée à l'événement est exécutée onreadystatechange. Au lieu d'attribuer une fonction, dans l'exemple précédent, on définit à la volée une fonction anonyme qui gérera la réception des données arrivant du serveur. Tout d'abord, à la ligne 18, on vérifie que le statut de la requête est "terminé", ce qui correspond à la valeur 4 de la propriété readyState, que l'état est "OK" du Protocole HTTP (code 200) qui peut être obtenu de la propriété status et que les données arrivées sont Format JSON, consultation de la propriété responseType.
Une fois vérifié que le statut de la réponse est comme prévu, à la ligne 20 de l'exemple précédent crée un objet avec le résultat, convertissant le texte JSON. La réponse prévoit qu'une date soit renvoyée, cela nous permet de voir si le résultat envoyé par le serveur avait déjà été représenté précédemment dans le graphique, ce qui est vérifié à la ligne 21. Si la donnée est nouvelle, à la ligne 23 La fonction qui est chargé de redessiner le graphique avec les nouvelles informations.
L'idée en proposant cette méthode de lecture est que les données seront rafraîchies très fréquemment. Si les informations présentées correspondent à un long terme (comme les températures d'une journée ou d'une semaine), une première requête peut être mise en œuvre qui collecte toutes les données disponibles puis une autre, similaire à celle de l'exemple, qui la met à jour dans le correspondant d'époque.
Générer des données aléatoires pour les tests
Lorsque toute l'infrastructure serveur et client sera prête, une fonction comme celle de la section précédente se chargera de lire les données et de dessiner le graphique avec, mais Durant la phase de test, il peut être plus pratique d'utiliser des nombres aléatoires dans une plage contrôlée. pour voir si le code en cours d'écriture est correct. La fonction suivante peut servir d'exemple pour obtenir des données lors de la construction de l'application finale.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
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);
}
|
Au lieu de lire les informations d'une base de données, l'exemple ci-dessus les génère de manière aléatoire et les transmet à la fonction chargée de dessiner le graphique. Les données inventées sont un vecteur formé d'une date exprimée sous forme d'une valeur en millisecondes, du moment d'enregistrement des informations du capteur et des données surveillées, qui se situent entre une valeur maximale et une valeur minimale.
Dans cet exemple, lors de la génération d'une date, celle-ci peut être retardée jusqu'à une seconde (1000 XNUMX millisecondes) par rapport à la date au moment de l'invention. Comme Math.random() génère un nombre compris entre 0.0 et 1.0, le multiplier par 1000 produit un nombre compris entre 0 et 1000 qui est ensuite converti en un nombre entier. De la même manière, la valeur est obtenue en multipliant le nombre aléatoire par la plage (maximum moins minimum) et en ajoutant le minimum.
Dessinez le graphique des capteurs IoT avec un tracé SVG
Puisque nous avons vu comment obtenir les valeurs que l'on veut représenter (la température, dans l'exemple) et leur localisation temporelle, qui peuvent être exprimées ensemble sous forme de coordonnées, l'exemple ci-dessous montre une fonction pour tracer un chemin qui relie ces points et éventuellement une zone colorée délimitée par cette ligne en haut. Le résultat serait comme l'image suivante.
L'axe horizontal (X) du graphique représente le temps et l'axe vertical (Y) les valeurs surveillées par les capteurs connectés à l'IoT. L'intervalle horizontal est de quelques secondes puisque dans cette proposition le graphique est mis à jour très fréquemment (chaque seconde par exemple) pour fournir des informations quasiment en temps réel sur l'état des capteurs.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
|
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
}
|
Dans le code précédent il y a deux aspects intéressants, d'abord le calcul qui permet adapter la plage de valeurs représentées et deuxièmement le construction immobilière d qui indique les coordonnées des points sur le tracé (path).
Pour adapter la plage de valeurs représentées, elles sont déplacées d'un minimum et mises à l'échelle pour que la grandeur visible corresponde à la taille du graphique. Dans le cas de l'heure, le décalage s'obtient en soustrayant la plage que l'on souhaite afficher du temps le plus long (la date et l'heure les plus proches de l'heure actuelle) (20 secondes dans l'exemple). Le déplacement des valeurs de température est celui de la plage inférieure (un degré) moins la valeur la plus basse, de sorte que les données indiquées ci-dessous soient les plus similaires à la valeur la plus basse autorisée mais en laissant une marge qui nous permet d'apprécier ce qui se passe.
Le coefficient qui multiplie les valeurs temporelles pour obtenir les coordonnées horizontales du graphique est obtenu en divisant la largeur totale du graphique (100 unités dans l'exemple) par la plage temporelle représentée (20 secondes dans l'exemple). Pour obtenir le coefficient avec les valeurs scalaires de température, il faut rappeler que la plage représentée va d'une marge inférieure à la valeur minimale à une marge supérieure au maximum, un degré dans les deux cas. De cette manière, le coefficient d'échelle verticale résulte de la division de la hauteur du graphique (100 unités dans l'exemple) par la valeur maximale, moins le minimum plus les marges supérieure et inférieure. Puisque ces valeurs pourraient se développer complètement à des températures négatives, nous utilisons Math.abs() utiliser la valeur absolue de la différence.
Propriété d objet path Il est construit en concaténant les coordonnées des points dans un texte. Chaque paire de coordonnées est précédée d'un code SVG L, qui trace une ligne depuis la position actuelle jusqu'à une valeur absolue indiquée par les coordonnées. Les valeurs X et Y sont séparées par des virgules et chaque opération SVG est séparé par un espace du suivant.
Pour démarrer la mise en page, utilisez le code M (passer à une coordonnée absolue). Dans le cas du tracé fermé et rempli, vous commencez en bas à droite, dans le cas du tracé ouvert qui dessine le profil des données, vous commencez par la dernière valeur représentée (la plus récente). Pour terminer la mise en page fermée, le code est utilisé Z en ajoutant comme dernier point celui qui a la même valeur de coordonnée X que le dernier point de la ligne et comme coordonnée Y la plus petite valeur représentée.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
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
);
}
|
Dans cet exemple, la fonction dibujar_grafico(), qui est l'appel au chargement de la page, récupère les valeurs initiales à tester (pas la dernière valeur en temps réel) et prépare la plage dans laquelle les données seront restituées : 20 secondes (20000 15 ms) horizontalement et 5°C en vertical de -10°C à +XNUMX°C avec une marge supérieure et inférieure d'un degré. Passez deux appels à actualizar_grafico(), au premier passage true comme argument, ce qui indique que le graphique doit être fermé pour représenter une zone remplie, et au deuxième appel il passe false pour tracer la ligne. Dans chaque cas, l'objet path modifié est celui qui a l'apparence correspondante, avec un remplissage et sans bordure dans le premier cas et avec une certaine épaisseur de trait et sans remplissage dans le second.
La fonction actualizar_grafico() travailler sur un objet SVG qui utilise le code suivant comme conteneur HTML. L'object SVG contient deux chemins, un pour tracer la ligne et un autre pour dessiner la zone remplie. Lors du chargement de la page web, depuis l'élément <body> la fonction précédente est automatiquement appelée, dibujar_grafico() grâce à l'événement JavaScript onload.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Temperatura</title>
<script type=“text/javascript” src=“https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/grafico.js”></script>
</head>
<body onload=“dibujar_grafico();” style=“margin:0;”> <!– Cuerpo del documento HTML. Al cargar el contenido llama a la función JavaScript dibujar_grafico() –>
<div id=“temperatura”>
<div id=“bloque_temperatura” style=“width:820px;height:150px”>
<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>
</div>
</body>
</html>
|
À la ligne 10 du code HTML ci-dessus, une largeur (à titre d'exemple) de 820 px et une hauteur de 150 px est établie dans le style (chose que, dans la version finale, il conviendra de faire avec une classe et un document CSS). Il semble étrange que les lignes 13 et 14 définissent la taille de l'objet SVG comme 100 % de largeur et de hauteur (ce qui correspond le mieux aux dimensions de la fenêtre, 100×100). Comme déjà mentionné, la raison en est de toujours travailler avec des dimensions connues et d'y ajuster les valeurs représentées. Les autres alternatives seraient de calculer à chaque fois l'espace du graphique puis de réajuster les valeurs ou de forcer des dimensions fixes pour le graphique, auxquelles le document devra respecter.
Ayant opté pour un graphique dont les dimensions changent selon le code HTML, il faut inclure la propriété vector-effect avec le courage non-scaling-stroke pour éviter que l'épaisseur des lignes ne soit déformée lorsque le graphique ne maintient pas les proportions 1:1 choisies sur la page Web sur laquelle il est affiché, comme cela se produit dans la proposition précédente.
Pour « recadrer » le graphique et afficher uniquement la zone que vous choisissez, utilisez viewBox. Dans ce cas, nous avons choisi de voir la partie du graphique qui commence à 0,0 (coin supérieur gauche) et mesure 100x100 vers le bas et vers la droite. La partie du dessin située en coordonnées avec des valeurs négatives ou supérieures à 100 ne sera pas affichée sur la page web même si elles existent dans l'objet SVG
Ajouter de nouveaux éléments au dessin SVG
Dans l'exemple précédent, la fonction actualizar_grafico() utiliser une mise en page SVG auquel la propriété est changée d, c'est ce qui exprime la chaîne de coordonnées. L'alternative serait de créer l'objet entier à chaque fois qu'il est redessiné. L'avantage de la première option est que l'aspect graphique (comme l'épaisseur ou la couleur) est défini dans le code. HTML, la limitation est que les objets doivent être créés au préalable.
Pour créer des objets SVG, utilisez createElementNS(), ce qui permet d'inclure le espace de noms. Dans l'exemple ci-dessous, un nouvel objet texte est créé (text) et est associé à un élément SVG qui existe déjà dans le code HTML du site Internet. Une fois le nouvel élément créé, ses propriétés sont affectées avec setAttribute() et s'ajoute à SVG avec appendChild().
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
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]);
|
Modifier la proportion des éléments du dessin
Si vous avez essayé d'étiqueter avec la fonction de l'exemple de la section précédente, vous aurez vu que le texte apparaît déformé lorsque la proportion de l'objet sur la page Web (width y height De code HTML) n'est pas égal à celui de la surface représentée (viewBox). Pour adapter la proportion il faut connaître les mesures de l'objet SVG pour lequel vous pouvez consulter le style de l'objet, ou du contenant HTML, si l'objet SVG transférer cette propriété. Attribution de la propriété transform aux objets SVG qui dépendent de la proportion, la déformation peut être corrigée en appliquant une opération de mise à l'échelle scale() dans laquelle le coefficient en X est différent de celui en Y.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
|
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 permet de regrouper plusieurs objets pour former un nouvel élément composite prenant également en charge les propriétés, comme des objets simples. Pour appliquer la même transformation à une série d'objets en une seule fois au lieu de chaque objet séparément, vous pouvez les regrouper selon cette ressource et appliquer une seule propriété transform à eux tous.
Comme expliqué en parlant de format SVG, les éléments d'un groupe sont enfermés dans les étiquettes <g> y </g>. Pour ajouter à partir de JavaScript éléments à un groupe SVG est utilisé, comme vu dans l'exemple précédent, appendChild() une fois le nouvel objet défini.
Pour établir une origine lors de l'application de transformations, la propriété peut être utilisée sur des objets SVG transform-origin, dont la valeur est les coordonnées X et Y du point à partir duquel commence la transformation. Si une valeur pour l'origine de la transformation n'est pas expressément indiquée (dans le navigateur web), le centre des coordonnées est utilisé. Malheureusement, au moment de la rédaction de cet article, spécifier le comportement des transformations utilisant une source autre que celle par défaut n'est pas homogène entre les navigateurs et doit être utilisé avec prudence.
Parallèlement à la transformation d'échelle avec scale Il y en a d'autres, comme la rotation avec rotation et le mouvement avec translate, qui offrent un alternative à la représentation graphique: au lieu d'obtenir de nouvelles coordonnées, vous pouvez les représenter dans leur propre espace et transformer le graphique pour l'adapter au format dans lequel vous souhaitez les représenter.
Ajouter des références au graphique
Maintenant que la partie principale du graphique est résolue en traçant les valeurs avec un profil et une zone remplie, elle peut être complétée par des références qui facilitent sa lecture. A titre d'exemple, commençons par dessiner quelques références horizontales (lignes) qui marquent les valeurs maximales et minimales acceptables ainsi qu'une valeur souhaitée. Comme expliqué, vous pouvez choisir d'ajouter les objets au SVG directement à partir de JavaScript ou incluez-les manuellement dans le code HTML et modifiez-les plus tard avec JavaScript.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
|
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();
|
Il semble logique d’étiqueter ces références horizontales avec un texte qui clarifie la valeur qu’elles représentent. Pour mettre en valeur le texte, vous pouvez utiliser des rectangles qui se démarqueront du fond et du graphique. Comme les textes devront être mis à l'échelle pour compenser la déformation, ils pourront tous être regroupés dans un objet auquel l'échelle sera appliquée ; Le principal avantage de procéder de cette manière est de pouvoir les modifier en une seule opération si le conteneur graphique (la fenêtre du navigateur) est redimensionné et change la proportion que l'échelle corrige.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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();
|
Il y a plusieurs aspects intéressants dans l’exemple de code ci-dessus. Tout d'abord, remarquez que des constantes (variables globales) ont été utilisées pour rendre l'exemple plus lisible pour les utilisateurs issus de la programmation. microcontrôleurs en C ou une C + +. Comme nous le verrons plus loin, la manière optimale de le programmer en JavaScript Il s'agirait d'utiliser des objets qui contiendraient ces valeurs et des méthodes qui géreraient les références dans cet exemple ou le graphique, en général, dans un système de production.
D'autre part, en progressant sur ce que serait le code plus générique, des fonctions distinctes ont été développées qui calculent les différents coefficients qui corrigent la proportion du graphique pour ajuster le texte. proporcion_grafico(), l'échelle des valeurs en fonction de leur étendue escala() et un facteur de correction pour les mesures connues en valeur absolue, telles que les mesures en références medida_grafico().
La lecture de ce code devrait aider à clarifier le contexte dans lequel fonctionne une application comme celle-ci, qui dessine des graphiques en temps réel et doit être flexible pour être présentée dans divers contextes graphiques (au minimum différentes tailles et proportions). Tout d'abord, les objets doivent être générés SVG, soit "manuellement" dans le code HTML, soit via le code JavaScript et de toute façon, il faut obtenir ultérieurement des références à ces objets pour les manipuler depuis JavaScript afin que de nouveaux graphiques puissent être dessinés et que la représentation d'un graphique déjà dessiné puisse être adaptée à un changement du support dans lequel il est présenté.
Une autre référence qui peut aider à interpréter facilement un graphique sont les points qui représentent des valeurs spécifiques (les nœuds de la ligne). Dans cet exemple, où l'on représente une seule grandeur, le choix d'un symbole n'est pas critique, mais si plusieurs valeurs différentes se superposent pour rechercher une corrélation, il est intéressant de distinguer, en plus d'utiliser d'autres ressources comme la couleur , en dessinant différents symboles. Le graphique utilisé pour le nœud de ligne doit être modifié en taille et en proportion, comme cela se produit par exemple avec les textes, pour que ses dimensions soient absolues et pour que ses proportions soient conservées même si celles de la boîte qu'il contient changent le graphique.
Dans l'exemple précédent nous avons déjà vu comment calculer les différents coefficients pour redimensionner et corriger les proportions du dessin ; Concernant la manière de mettre en œuvre la gestion des symboles des nœuds ou sommets du graphe, une solution possible peut être de stocker les objets SVG en vecteur et modifier sa position lorsque le graphe est mis à jour en lisant une nouvelle valeur, ou lorsqu'il est redessiné en redimensionnant le conteneur. Dans le premier cas sa position devrait être modifiée et dans le second sa proportion avec la propriété transform et la valeur de scale. Le code suivant est une modification de la fonction actualizar_grafico() pour inclure le repositionnement des symboles de sommet du graphique.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
|
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)
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)
punto[contador_valor].setAttribute(“cx”,posicion[0]);
punto[contador_valor].setAttribute(“cy”,posicion[1]);
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
}
else // Si se ha rebasado el margen izquierdo…
{
sin_recortar=false; // …abandonar el modo sin recorte (lo que terminará de calcular coordenadas)
}
contador_valor—; // Pasar al siguiente valor
}
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
for(;contador_valor>=0;contador_valor—)
{
punto[contador_valor].setAttribute(“cx”,–10000);
punto[contador_valor].setAttribute(“cy”,0);
}
}
|
Modifications apportées à la fonction actualizar_grafico() pour obtenir la nouvelle fonction actualizar_grafico_puntos() Ce sont ceux mis en évidence dans le code de l’exemple précédent. Tout d'abord, à la ligne 5, nous prenons un vecteur d'objets SVG comme paramètre. Ce vecteur contiendra les symboles qui doivent être repositionnés dans les nouveaux nœuds du graphe.
Aux lignes 39 et 40 sont attribuées les nouvelles coordonnées du centre, cx y cy, à celles des valeurs représentées. Si le symbole n'était pas basé sur le centre, il faudra probablement ajouter un décalage dans cx la moitié de la largeur et dans cy de la moitié de la hauteur pour les repositionner exactement sur le nœud du graphe.
Aux lignes 57 à 61, les points qui correspondent à des coordonnées non dessinées car coupées par le bord gauche sont repositionnés à l'extérieur du graphe. La coordonnée de cy à zéro et celui de cx à n'importe quel nombre négatif (supérieur au point lui-même) afin qu'il ne soit pas affiché lorsqu'il est coupé, comme la partie gauche du graphique, par la fenêtre du SVG.
Gérer le graphique à partir d'un objet avec JavaScript
Toutes les opérations expliquées jusqu'à présent peuvent être intégrées dans un objet pour gérer le graphique avec un style plus typique des nouvelles versions de JavaScript. Cette alternative d'implémentation présente l'avantage supplémentaire de simplifier l'incorporation de plusieurs graphiques, de valeurs différentes, sur la même page web.
Avant de discuter de l'implémentation, passons en revue les manières les plus courantes de créer des objets avec JavaScript et certaines des particularités des fonctions qui affectent la proposition de dessin de graphiques de capteurs IoT.
Nous avons déjà expliqué que la nouvelle façon de créer des objets dans JavaScript (disponible depuis la version 5 de ECMAScript) consiste à utiliser Object.create, qu'il faut s'habituer à utiliser à la place du "classique" new, qui bien sûr fonctionne toujours correctement, même si son objectif est davantage de simuler le style des langages avec des objets basés sur les classes (JavaScript base la création d'objets sur des prototypes) qu'une alternative de travail.
|
1
2
3
4
5
6
7
8
9
10
|
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Crear objetos con new o con Objetct.create</title>
<script type=“text/javascript” src=“https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/crear_objetos.js”></script>
</head>
<body onload=“empezar();”>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
function Objeto_clasico(primero,segundo)
{
this.primero=primero||1;
this.segundo=segundo||2;
this.hacer_algo=function()
{
console.log(“El objeto clásico le saluda (primero=”+this.primero+” y segundo=”+this.segundo+“)”);
}
}
var Objeto_ES5=
{
primero:10,
segundo:20,
hacer_algo:
function()
{
console.log(“El objeto ES5 le saluda (primero=”+this.primero+” y segundo=”+this.segundo+“)”);
}
}
var objeto_clasico=new Objeto_clasico();
var objeto_ES5=Object.create(Objeto_ES5);
function empezar()
{
console.log(“Objeto clásico (“+objeto_clasico.primero+“,”+objeto_clasico.segundo+“)”);
console.log(“Objeto ES5 (“+objeto_ES5.primero+“,”+objeto_ES5.segundo+“)”);
objeto_clasico.hacer_algo();
objeto_ES5.hacer_algo();
}
|
Le code précédent permet de rappeler les différences entre créer les objets avec Object.create ou avec new. Cela sert également à souligner que, même si la fonction avec laquelle l'objet est créé avec new peut être n'importe où dans le code, l'objet doit déjà exister avant de pouvoir être instancié avec Object.create (L'objet ES5_Object n'est pas une fonction).
Aux lignes 3 et 4, pour définir une valeur par défaut aux propriétés de la fonction qui crée l'objet avec new, chaque propriété est affectée à la valeur de l'argument correspondant ou (||), si aucun argument n'a été passé, c'est-à-dire s'ils ne sont pas définis (undefined), car cette circonstance est évaluée comme false, la valeur par défaut est attribuée.
Le contexte dans lequel une fonction est exécutée JavaScript soulève deux questions qu'il est important de garder à l'esprit et qui peuvent également prêter à confusion lorsqu'on utilise ce langage de programmation après avoir travaillé avec d'autres, comme C o C + +, dans notre cas. Le contexte inclut les variables définies dans le périmètre de la fonction (et les variables globales) ce qui soulève d'ailleurs un concept intéressant, les "clôtures" qui établissent tout un style de programmation dans JavaScript. Cela dit, on pourrait s'attendre à ce que this, qui fait référence à l'objet lorsqu'il est utilisé dans le code qui le définit, le contexte d'exécution dans lequel il a été défini est conservé mais celui qu'il utilise est le contexte à partir duquel la fonction est appelée. Ce comportement est transparent dans la plupart des cas, mais il existe deux circonstances dans lesquelles il peut prêter à confusion : une fonction définie à l'intérieur d'une autre fonction et une méthode appelée à partir d'un événement d'objet. window.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
|
var primero=“Primero global”;
var segundo=“Segundo global”;
var Contexto=
{
primero:“Primero en contexto”,
segundo:“Segundo en contexto”,
probar:
function()
{
console.log(“Primero en contexto: “+this.primero);
console.log(“Segundo en contexto: “+this.segundo);
function probar_dentro()
{
console.log(“Primero dentro: “+this.primero);
console.log(“Segundo dentro: “+this.segundo);
}
probar_dentro();
}
}
var probador=Object.create(Contexto);
probador.probar();
/*
Primero en contexto: Primero en contexto
Segundo en contexto: Segundo en contexto
Primero dentro: Primero global
Segundo dentro: Segundo global
*/
|
Lors de l'exécution du code précédent, le texte commenté à la fin est affiché dans la console. Les deux lignes marquées reflètent un comportement qui peut prêter à confusion : le contexte d'exécution de la fonction probar_dentro() pas probar(), comme on pouvait s'y attendre, mais window, qui affiche les variables globales et non les propriétés du même nom. Si vous ne souhaitez pas ce comportement, créez simplement une variable dans la fonction de niveau le plus élevé et affectez-la à this, comme dans le code suivant.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
var primero=“Primero global”;
var segundo=“Segundo global”;
var Contexto=
{
primero:“Primero en contexto”,
segundo:“Segundo en contexto”,
probar:
function()
{
var esto=this;
console.log(“Primero en contexto: “+esto.primero);
console.log(“Segundo en contexto: “+esto.segundo);
function probar_dentro()
{
console.log(“Primero dentro: “+esto.primero);
console.log(“Segundo dentro: “+esto.segundo);
}
probar_dentro();
}
}
var probador=Object.create(Contexto);
probador.probar();
/*
Primero en contexto: Primero en contexto
Segundo en contexto: Segundo en contexto
Primero dentro: Primero en contexto
Segundo dentro: Segundo en contexto
*/
|
Pour contrôler le contexte d'exécution lorsqu'une méthode est appelée depuis un événement window, par exemple en redimensionnant la fenêtre du navigateur, autre particularité de JavaScript: la possibilité de programmer des "usines de fonctions", c'est-à-dire des fonctions qui génèrent d'autres fonctions, en les renvoyant avec return.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
var Contexto=
{
prueba:“objeto”, // La propiedad prueba es de los objetos Contexto
llamar:
function()
{
esto=this;
return function()
{
console.log(“H + “+(Date.now()–hora)+” Contexto: “+esto.prueba);
};
}
}
var prueba=“global”; // Esta variable prueba es global (window.prueba)
var hora=Date.now();
var probador=Object.create(Contexto);
var cosa=probador.llamar();
var pesadez=setInterval(cosa,3000);
setTimeout(function(){clearInterval(pesadez)},30100); // Desactivar la llamada periódica
|
Dans l'exemple de code ci-dessus, la méthode llamar() de los objets Contexto Il ne fait pas le travail mais renvoie une fonction anonyme qui s'en charge. Pour vérifier que tout fonctionne comme prévu, il existe une variable globale portant le même nom que la propriété que la fonction affiche dans la console ; Si le contexte est correct, la valeur de la propriété sera affichée et non celle de la variable globale.
JavaScript Essayez de corriger les signes point-virgule que nous omettons à la fin des phrases. Cela permet un style d’écriture détendu mais constitue une arme à double tranchant qui doit être traitée avec soin. Dans la plupart des cas, pour éviter les effets indésirables que cela produit dans les expressions occupant plusieurs lignes, vous pouvez utiliser des parenthèses ou précéder la manière dont JavaScript interprétera le code ; C'est pourquoi la ligne 8 de l'exemple inclut function derrière return, si j'avais utilisé une autre ligne, le sens serait très différent. À mon avis, la solution la plus lisible est d'utiliser une variable intermédiaire (dispensable) comme dans la version suivante ; Évidemment, une fois le comportement compris, la décision appartient au programmeur.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
var Contexto=
{
prueba:“objeto”, // La propiedad prueba es de los objetos Contexto
llamar:
function()
{
esto=this;
var variable_auxiliar=
function()
{
console.log(“H + “+(Date.now()–hora)+” Contexto: “+esto.prueba);
};
return variable_auxiliar;
}
}
var prueba=“global”; // Esta variable prueba es global (window.prueba)
var hora=Date.now();
var probador=Object.create(Contexto);
var cosa=probador.llamar();
var pesadez=setInterval(cosa,3000);
setTimeout(function(){clearInterval(pesadez)},30100);
|
Dans le même sens d'évaluer une expression en tant que fonction, c'est-à-dire renvoyer une fonction et non la valeur que la fonction renvoie ; à la ligne 21 du dernier exemple (c'était à la ligne 19 du précédent) ça s'arrête avec clearInterval la fonction appelée avec setInterval. Pour qu'il agisse pendant 30 secondes, l'arrêt est différé avec setTimeout, qui à son tour nécessite une fonction comme premier argument ; pour livrer l'exécution en paramètre clearInterval avec la variable qui contient l'appel périodique (et non la fonction clearInterval) est la raison pour laquelle la fonction anonyme de la dernière ligne est créée.
Le choix entre écrire le code intégrant la définition de la fonction, plus compact (comme à la ligne 21) ou utiliser une variable auxiliaire, à mon avis, plus lisible (comme aux lignes 19 et 20) varie peu en performances et dépend davantage du style et de la lisibilité de entretien.
Pour tester le code, avant d'avoir des données sur le serveur, vous pouvez utiliser un générateur de valeurs aléatoires dans la plage souhaitée ou préparer des tableaux avec des valeurs contrôlées qui simulent un fonctionnement dans les conditions souhaitées. L'exemple suivant utilise un simple générateur de données sur toute la plage, c'est pourquoi ils semblent un peu exagérés.
Pour tester, vous pouvez télécharger le code complet de l'exemple formé par une page Web écrite en HTML, le style CSS et le code JavaScript. Ce dernier est le plus pertinent, puisque les autres composants ne sont qu'un support minimal, très simplifié et sont beaucoup plus développés dans les articles des sections correspondantes.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
<!DOCTYPE html>
<html lang=“es”>
<head>
<meta charset=“utf-8”>
<title>Temperatura</title>
<script type=“text/javascript” src=“https://polaridad.es/javascript-grafico-svg-sensor-internet-de-las-cosas-iot/grafico.js”></script>
<link rel=“stylesheet” href=“estilo.css” type=“text/css” media=“all”>
</head>
<body onload=“iniciar_grafico(‘grafico’,’valor’,’fecha’);”>
<div id=“temperatura”>
<div id=“ultimo_valor”>
<div id=“fecha”></div>
<div id=“valor”></div>
</div>
<div id=“grafico”></div>
</div>
</body>
</html>
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
|
body
{
margin:0px 0px 0px 0px;
}
#ultimo_valor
{
box–sizing:border–box;
width:100%;
height:40px;
padding:8px 0px 8px 14px;
font–family:monospaced;
font–size:18px;
color:#205587;
background–color:#86A7D0;
}
#fecha
{
float:left;
margin–right:15px;
}
#valor
{
float:left;
}
#grafico
{
width:100%;
height:200px;
}
|
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
|
var Grafico=
{
contenedor_svg:void(0), // Objeto SVG con el que se dibuja el gráfico. Se inicializa con void(0) para asegurarse de que es === undefined al principio
contenedor_html:void(0), // Objeto HTML que contiene al objeto SVG con el gráfico (seguramente un div). Se inicializa con void(0) para asegurarse de que es === undefined al principio
contenedor_valor:void(0), // Objeto HTML en el que se muestra el último valor cargado del servidor
contenedor_fecha:void(0), // Objeto HTML para mostrar la fecha del último valor
pagina_servidor:“ultimo_valor_sensor.php”, // página en la que se consultan los datos
consulta:“fr1”, // Valor del parámetro con el que se consulta el servidor. La URL sería algo como http://servidoriot.com/ultimo_valor_sensor.php?zona=fr1
NS:“http://www.w3.org/2000/svg”, // Nombre del espacio de nombres (name space NS)
MINIMO:0, // Índice del 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
OPTIMO:1, // Índice del mejor valor del parámetro medido. Valor deseado para el parámetro monitorizado. Sirve para tener una idea rápida de cómo de correcto es el estado del sistema
MAXIMO:2, // Índice del 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
maximo_puntos:0, // Número máximo de vértices representados (pueden dibujarse menos si se recortan por la parte izquierda)
valor:[], // Últimos valores cargados del servidor
trazado:[], // Trazados representados (en principio se trata de representar uno con relleno y otro con línea)
cerrado:true, // Cuando vale true se dibuja el perfil y el área (la línea del gráfico y una zona rellena debajo). Cuando vale false solo se dibuja la línea
simbolo:[], // Objetos SVG utilizados para marcar los vértices de la línea (círculos)
linea_referencia:[], // Líneas horizontales en los valores de referencia
texto_referencia:[], // Objetos texto que rotulan los valores de referencia
fondo_referencia:[], // Rectángulos bajo los textos de los valores de referencia
medida_caja_svg:[100.0,100.0], // Ancho,Ancho del objeto SVG (aunque al dibujarlo con el código HTML tomará otras dimensiones ya que se dimensiona al 100% de su contenedor
correccion_caja_svg:[1.0,1.0], // Coeficientes para calcular la medida en el gráfico de un objeto del que se sabe el valor absoluto (Se usa el píxel como unidad)
tiempo_representado:0, // Milisegundos visibles en el gráfico empezando en el valor mayor (fecha y hora del último valor monitorizado)
valor_referencia:[0,0,0], // Valores de referencia [mínimo,óptimo,máximo]
margen_valor: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
escala_valor:[1.0,1.0], // Coeficientes que multiplican el valor monitorizado (y almacenado en el servidor) para calcular el representado según las dimensiones del gráfico
desplazamiento_valor:[0.0,0.0], // Desplazamiento que se suma al tiempo (X) y al valor (Y) para representarlo en el rango especificado para el gráfico
area_bajo_linea:true, // True para dibujar una zona rellena además del perfil (línea) del gráfico
medida_simbolo:[5,5], // Valor absoluto (en píxeles) del ancho y el alto del dibujo que se hace en los vértices de la línea del gráfico
tipografia:“sans-serif”, // Tipo de letra usado para rotular el gráfico (se usa solamente una tipografía por uniformidad)
altura_texto:10.0, // Altura de los textos en valor absoluto (píxeles). No todos los navegadores soportan todos los valores intermedios, será necesario coordinarlo con los valores que estén relacionados
escala_horizontal_texto:1, // Transformación que se aplica al texto para corregir la que implica la proporción del gráfico
color_fondo:“”, // Color de fondo del contenedor HTML del objeto SVG (Si es una cadena vacía no se cambia)
color_simbolos:“#000000”, // Color de los símbolos que se dibujan en los vértices de la línea del gráfico
color_referencia:[“#000000”,“#000000”,“#000000”], // Color de la referencia que indica el valor [mínimo,óptimo,máximo]
color_tipografia:“#FFFFFF”, // Color del tipo de letra con que se rotulan las referencias
grosor_trazado:4, // Grosor de la línea del gráfico
color_trazado:“#000000”, // Color de la línea del gráfico
color_relleno:“#000000”, // Color del relleno del gráfico
opacidad_relleno:1.0, // Opacidad del relleno del gráfico
grosor_referencia:0.5, // Grosor de la línea que se dibuja como referencia en valor absoluto (píxeles)
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
relleno_fondo_referencia:7.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)
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)
ancho_fondo_referencia:50.0, // Medida horizontal del rectángulo que hace de fondo al texto de la referencia medido en valor absoluto
texto_valor:[“temperatura: “,” °C”], // Prefijo y sufico con los que se rotula el valor monitorizado
texto_hora:[“hora “,“”], // Prefijo y sufijo con los que se rotula la hora (cuando solamente se rotula la hora)
texto_fecha:[“”,“”], // Prefijo y sufijo con los que se rotula la fecha (cuando solamente se rotula la fecha)
texto_fecha_hora:[“el “,” a las “,” | “], // Prefijo con el que se rotula la hora, separador de fecha y hora y sufjo de la hora cuando se rotula la fecha y la hora
HORA:0, // Constante que representa la hora para el modo de la fecha/hora
FECHA:1, // Constante que representa la fehca para el modo de la fecha/hora
FECHA_Y_HORA:2, // Constante que representa rotular la fecha y la hora (para el modo de fecha/hora)
modo_fecha:2, // 0->hora, 1-> fecha 2-> fecha y hora
repetir:null, // Función llamada por setInterval
nueva_proporcion: // Calcular la nueva proporción (al iniciar y al redimensionar el contenedor del gráfico) para transformar el texto
function()
{
if(this.contenedor_svg!==undefined) // Se entiende que si no es undefined se ha asignado un objeto
{
if(this.contenedor_svg.nodeName===“svg”) // Si el objeto asignado es un SVG
{
this.escala_horizontal_texto=parseFloat(getComputedStyle(this.contenedor_svg).height)/parseFloat(getComputedStyle(this.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
}
}
},
nueva_correccion_caja_svg:
function()
{
if(this.contenedor_svg!==undefined) // Se entiende que si no es undefined se ha asignado un objeto
{
if(this.contenedor_svg.nodeName.toLowerCase()===“svg”) // Si el objeto asignado es un SVG
{
this.correccion_caja_svg[0]=this.medida_caja_svg[0]/parseFloat(getComputedStyle(this.contenedor_svg).width);
this.correccion_caja_svg[1]=this.medida_caja_svg[1]/parseFloat(getComputedStyle(this.contenedor_svg).height);
}
}
},
nueva_escala:
function()
{
if(this.tiempo_representado>0) // Antes de inicializar el objeto el tiempo representado es cero
{
this.escala_valor[0]=this.medida_caja_svg[0]/this.tiempo_representado; // Coeficiente que multiplica a los valores horizontales (tiempo) para calcular las coordenadas X
this.escala_valor[1]=this.medida_caja_svg[1]/(Math.abs(this.valor_referencia[this.MAXIMO]–this.valor_referencia[this.MINIMO])+this.margen_valor*2); // Coeficiente que multiplica a los valores (vertical) para calcular las coordenadas Y
}
},
nuevo_desplazamiento:
function()
{
if(this.tiempo_representado>0) // Antes de inicializar el objeto el tiempo representado es cero
{
this.desplazamiento_valor[0]=this.valor[this.valor.length–1][0]–this.tiempo_representado; // Valor desde el que se empieza a contar el tiempo: el valor mayor (último) menos el rango de tiempo representado
this.desplazamiento_valor[1]=this.margen_valor–this.valor_referencia[this.MINIMO]; // Valor menor mostrado (al menor se le añade un margen para visualizar el principio de los valores fuera del rango permitido)
}
},
crear_svg: // Crear el objeto SVG dentro del objeto HTML
function()
{
if(this.contenedor_html!==null&&this.contenedor_html!==undefined) // Ya se ha asignado el objeto HTML
{
if(this.contenedor_html.nodeType===1) // Es un objeto HTML válido
{
// Color de fondo del objeto HTML
if(this.color_fondo!==“”)
{
this.contenedor_html.style.backgroundColor=this.color_fondo;
}
// Contenedor SVG
this.contenedor_svg=document.createElementNS(this.NS,“svg”); // Crear un objeto SVG
this.contenedor_svg.setAttribute(“width”,“100%”); // Ancho del objeto SVG
this.contenedor_svg.setAttribute(“height”,“100%”); // Alto del objeto SVG
this.contenedor_svg.setAttribute(“viewBox”,“0 0 “+this.medida_caja_svg[0]+” “+this.medida_caja_svg[1]); // Zona del SVG que se muestra
this.contenedor_svg.setAttribute(“preserveAspectRatio”,“none”); // No preservar la proporción para ocupar todo el objeto HTML que hace de contenedor
this.contenedor_html.appendChild(this.contenedor_svg); // Añadir al contenedor HTML el objeto SVG (que será el contenedor del gráfico)
// Trazado
this.trazado[0]=document.createElementNS(this.NS,“path”); // Crear el trazado que soporta el relleno
this.trazado[0].style.fill=this.color_relleno;
this.trazado[0].style.fillOpacity=this.opacidad_relleno;
this.trazado[0].style.stroke=“none”;
this.contenedor_svg.appendChild(this.trazado[0]); // Añadir el relleno al SVG
this.trazado[1]=document.createElementNS(this.NS,“path”); // Crear el trazado que soporta el perfil
this.trazado[1].setAttribute(“vector-effect”,“non-scaling-stroke”); // No mantener la proporción en el trazado (no deformarlo)
this.trazado[1].style.fill=“none”;
this.trazado[1].style.stroke=this.color_trazado;
this.trazado[1].style.strokeWidth=this.grosor_trazado;
//this.trazado[1].style.strokeOpacity=1.0; // La opacidad por defecto es 1.0
this.contenedor_svg.appendChild(this.trazado[1]); // Añadir el perfil al SVG
// Símbolos para los vértices
var ahora=Date.now()–30000; // Fecha y hora actual menos 30 segundos
for(var contador_vertices=0;contador_vertices<this.maximo_puntos;contador_vertices++)
{
this.valor[contador_vertices]=[];
this.valor[contador_vertices][0]=ahora; // Inicializar los valores a la fecha y hora actual menos 30 segundos
this.valor[contador_vertices][1]=this.valor_referencia[this.OPTIMO]; // Inicializar los valores al óptimo
this.simbolo[contador_vertices]=document.createElementNS(this.NS,“ellipse”); // Crear una elipse (círculo) para cada vértice
this.simbolo[contador_vertices].style.fill=this.color_simbolos;
this.simbolo[contador_vertices].style.fillOpacity=1.0;
this.simbolo[contador_vertices].style.stroke=“none”;
this.contenedor_svg.appendChild(this.simbolo[contador_vertices]); // Añadir el símbolo al SVG
}
//this.nuevo_desplazamiento(); // Necesario si se asignaran las alturas de las referencias
for(var contador_referencia=0;contador_referencia<this.valor_referencia.length;contador_referencia++)
{
// Línea de referencia
//var posicion_corregida=this.medida_caja_svg[1]-(this.valor_referencia[contador_referencia]+this.desplazamiento_valor[1])*this.escala_valor[1]; // Necesario si se asignaran las alturas de las referencias
this.linea_referencia[contador_referencia]=document.createElementNS(this.NS,“line”); // Crear la línea que representa el valor mínimo
this.linea_referencia[contador_referencia].style.stroke=this.color_referencia[contador_referencia];
this.linea_referencia[contador_referencia].style.strokeWidth=this.grosor_referencia;
this.linea_referencia[contador_referencia].style.strokeOpacity=this.opacidad_referencia;
this.linea_referencia[contador_referencia].setAttribute(“x1”,0.0); // Las líneas de referencia empiezan en el borde izquierdo…
this.linea_referencia[contador_referencia].setAttribute(“x2”,this.medida_caja_svg[0]); // …y terminan en el derecho
//this.linea_referencia[contador_referencia].setAttribute(“y1”,posicion_corregida); // Ambos extremos a la altura correspondiente a la referencia [mínimo,óptimo,máximo]
//this.linea_referencia[contador_referencia].setAttribute(“y2”,posicion_corregida); // Ambos extremos a la altura correspondiente a la referencia [mínimo,óptimo,máximo]
this.contenedor_svg.appendChild(this.linea_referencia[contador_referencia]);
// Rectángulo de fondo del texto que indica el valor de referencia
this.fondo_referencia[contador_referencia]=document.createElementNS(this.NS,‘rect’);
this.fondo_referencia[contador_referencia].style.fill=this.color_referencia[contador_referencia];
this.fondo_referencia[contador_referencia].style.fillOpacity=1.0;
this.fondo_referencia[contador_referencia].style.stroke=“none”;
this.contenedor_svg.appendChild(this.fondo_referencia[contador_referencia]);
// Texto de referencia
this.texto_referencia[contador_referencia]=document.createElementNS(this.NS,“text”); // Crear el texto para rotular la referencia
this.texto_referencia[contador_referencia].setAttribute(“font-family”,this.tipografia); // Asignar el tipo de letra
this.texto_referencia[contador_referencia].setAttribute(“fill”,this.color_tipografia); // Asignar el color
//this.texto_referencia[contador_referencia].textContent=””+(this.valor_referencia[contador_referencia]>=0?”+”:””)+this.valor_referencia[contador_referencia]; // Texto que se rotula (los valores máximo, óptimo y mínimo ya deben estar asignados)
this.contenedor_svg.appendChild(this.texto_referencia[contador_referencia]);
}
}
}
},
ajustar_prporcion:
function()
{
this.nueva_proporcion();
this.nueva_correccion_caja_svg();
var posicion_corregida;
for(var contador_vertices=0;contador_vertices<this.simbolo.length;contador_vertices++)
{
this.simbolo[contador_vertices].setAttribute(“rx”,this.medida_simbolo[0]*this.correccion_caja_svg[0]);
this.simbolo[contador_vertices].setAttribute(“ry”,this.medida_simbolo[1]*this.correccion_caja_svg[1]);
}
for(var contador_referencia=0;contador_referencia<this.valor_referencia.length;contador_referencia++)
{
posicion_corregida=this.medida_caja_svg[1]–(this.valor_referencia[contador_referencia]+this.desplazamiento_valor[1])*this.escala_valor[1];
this.fondo_referencia[contador_referencia].setAttribute(“x”,this.margen_fondo_referencia*this.correccion_caja_svg[0]);
this.fondo_referencia[contador_referencia].setAttribute(“y”,posicion_corregida–(this.altura_texto+this.relleno_fondo_referencia*2.0)*this.correccion_caja_svg[1]/2.0);
this.fondo_referencia[contador_referencia].setAttribute(“width”,this.ancho_fondo_referencia*this.correccion_caja_svg[0]);
this.fondo_referencia[contador_referencia].setAttribute(“height”,(this.altura_texto+this.relleno_fondo_referencia*2.0)*this.correccion_caja_svg[1]);
this.linea_referencia[contador_referencia].setAttribute(“y1”,posicion_corregida);
this.linea_referencia[contador_referencia].setAttribute(“y2”,posicion_corregida);
this.texto_referencia[contador_referencia].setAttribute(“transform”,“scale(“+this.escala_horizontal_texto+“,1.0)”);
this.texto_referencia[contador_referencia].setAttribute(“font-size”,this.altura_texto*this.correccion_caja_svg[1]);
this.texto_referencia[contador_referencia].setAttribute(“x”,(this.margen_fondo_referencia+this.relleno_fondo_referencia)*this.correccion_caja_svg[0]/this.escala_horizontal_texto);
this.texto_referencia[contador_referencia].setAttribute(“y”,posicion_corregida+this.altura_texto/2.0*this.correccion_caja_svg[1]);
this.texto_referencia[contador_referencia].textContent=(this.valor_referencia[contador_referencia]>=0?“+”:“”)+this.valor_referencia[contador_referencia]; // Texto que se rotula
}
},
rotar_valores:
function()
{
for(var contador_valor=0;contador_valor<this.valor.length–1;contador_valor++)
{
this.valor[contador_valor][0]=this.valor[contador_valor+1][0];
this.valor[contador_valor][1]=this.valor[contador_valor+1][1];
}
},
nuevo_valor_aleatorio:
function()
{
this.rotar_valores();
this.valor[this.valor.length–1][0]=this.valor[this.valor.length–2][0]+1000+Math.random()*1000; // El nuevo tiempo es el anterior más un segundo más un valor entre 0 y un segundo
this.valor[this.valor.length–1][1]=Math.random()*Math.abs(this.valor_referencia[this.MAXIMO]–this.valor_referencia[this.MINIMO])+this.valor_referencia[this.MINIMO]; // Un valor aleatorio entre el máximo y el mínimo
this.nuevo_desplazamiento(); // Cada nuevo valor cambia el desplazamiento en horizontal
this.dibujar_nuevo_valor(true);
this.dibujar_nuevo_valor(false);
this.rotular_nuevo_valor();
this.ritular_nueva_fecha();
},
cargar_nuevo_valor:
function()
{
var consulta=‘zona=”+this.consulta;
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])
{
this.rotar_valores();
this.valor[this.valor.length–1][0]=resultado.fecha;
this.valor[this.valor.length–1][1]=resultado.temperatura;
this.nuevo_desplazamiento(); // Cada nuevo valor cambia el desplazamiento en horizontal
this.dibujar_nuevo_valor(true);
this.dibujar_nuevo_valor(false);
this.rotular_nuevo_valor();
this.ritular_nueva_fecha();
}
}
}
ajax.open(“POST”,this.pagina_servidor);
ajax.setRequestHeader(“Method”,“POST “+this.pagina_servidor+” 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);
},
rotular_nuevo_valor:
function()
{
var valor_redondeado=Math.round(this.valor[this.valor.length–1][1]*100.0)/100.0;
this.contenedor_valor.innerHTML=this.texto_valor[0]+valor_redondeado+this.texto_valor[1];
},
ritular_nueva_fecha:
function()
{
var fecha_lectura=new Date(this.valor[this.valor.length–1][0]);
var texto_fecha=this.texto_hora[0];
texto_fecha+=(fecha_lectura.getHours()<10?“0”:“”)+fecha_lectura.getHours();
texto_fecha+=“:”;
texto_fecha+=(fecha_lectura.getMinutes()<10?“0”:“”)+fecha_lectura.getMinutes();
texto_fecha+=“:”;
texto_fecha+=(fecha_lectura.getSeconds()<10?“0”:“”)+fecha_lectura.getSeconds();
texto_fecha+=this.texto_hora[1];
this.contenedor_fecha.innerHTML=texto_fecha;
},
dibujar_nuevo_valor: // Dibujar el gráfico cuando llega un nuevo valor (que estará almacenado en el vector valor
function(cerrado)
{
// Si cerrado es undefined se evalúa a false, que se toma como valor por defecto
var contador_valor=this.valor.length–1; // Variable para recorrer los valores (índice)
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 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
var coordenadas_trazado=“M “; // Cadena de texto que representa la propiedad “d” del trazado SVG
if(cerrado) // Si el trazado que se está dibujando está cerrado (no confundir con this.cerrado que determina si se dibujan los dos trazados, la línea y el relleno)
{
coordenadas_trazado+=this.medida_caja_svg[0]+“,”+this.medida_caja_svg[1]+” 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]=(this.valor[contador_valor][0]–this.desplazamiento_valor[0])*this.escala_valor[0]; // Calcular la X restando al tiempo el desplazamiento y convirtiéndolo a la escala del gráfico con el coeficiente horizontal
posicion[1]=this.medida_caja_svg[1]–(this.valor[contador_valor][1]+this.desplazamiento_valor[1])*this.escala_valor[1]; // Calcular la Y restando del alto de la caja (la Y crece hacia abajo en SVG)
this.simbolo[contador_valor].setAttribute(“cx”,posicion[0]);
this.simbolo[contador_valor].setAttribute(“cy”,posicion[1]);
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 representar, 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]+“,”+this.medida_caja_svg[1]+” Z”; // …se termina por la parte inferior de la caja y se añade Z para cerrarlo en SVG
}
this.trazado[cerrado?0:1].setAttribute(“d”,coordenadas_trazado); // Cambiar las coordenadas del trazado (propiedad “d”) por las que se han calculado
for(;contador_valor>=0;contador_valor—)
{
this.simbolo[contador_valor].setAttribute(“cx”,–10000);
this.simbolo[contador_valor].setAttribute(“cy”,0);
}
}
}
var temperatura_frigorifico;
function iniciar_grafico(nombre_objeto_grafico,nombre_objeto_valor,nombre_objeto_fecha)
{
temperatura_frigorifico=Object.create(Grafico);
temperatura_frigorifico.contenedor_html=document.getElementById(nombre_objeto_grafico);
temperatura_frigorifico.contenedor_valor=document.getElementById(nombre_objeto_valor);
temperatura_frigorifico.contenedor_fecha=document.getElementById(nombre_objeto_fecha);
temperatura_frigorifico.color_fondo=“#A8C3EA”;
temperatura_frigorifico.color_trazado=“#205587”;
temperatura_frigorifico.grosor_trazado=3;
temperatura_frigorifico.color_relleno=“#205587”;
temperatura_frigorifico.opacidad_relleno=0.5;
temperatura_frigorifico.color_simbolos=“#205587”;
temperatura_frigorifico.color_referencia[Grafico.MINIMO]=“#621D87”;
temperatura_frigorifico.color_referencia[Grafico.OPTIMO]=“#1D8762”;
temperatura_frigorifico.color_referencia[Grafico.MAXIMO]=“#871E35”;
temperatura_frigorifico.grosor_referencia=1.5;
temperatura_frigorifico.opacidad_referencia=0.5;
temperatura_frigorifico.tipografia=“monospaced”;
temperatura_frigorifico.color_tipografia=“#A8C3EA”;
temperatura_frigorifico.cerrado=true; // Dibujar una línea y una zona rellena debajo (true por defecto)
temperatura_frigorifico.maximo_puntos=32; // Un espacio de 30 segundos representados con un intervalo mínimo de 1 segundo necesitan como máximo 31 puntos, se añade uno por seguridad (por si algún valor monitorizado estuviera por debajo del segundo)
temperatura_frigorifico.crear_svg();
temperatura_frigorifico.nueva_correccion_caja_svg();
temperatura_frigorifico.tiempo_representado=30000;
temperatura_frigorifico.valor_referencia[Grafico.MINIMO]=–5;
temperatura_frigorifico.valor_referencia[Grafico.OPTIMO]=5;
temperatura_frigorifico.valor_referencia[Grafico.MAXIMO]=10;
temperatura_frigorifico.margen_valor=3;
temperatura_frigorifico.nueva_escala();
temperatura_frigorifico.nuevo_desplazamiento(); // El desplazamiento se (re)calcula cada vez que se añade un valor
temperatura_frigorifico.ajustar_prporcion();
window.addEventListener(“resize”,function(){temperatura_frigorifico.ajustar_prporcion()}); // Versión moderna
temperatura_frigorifico.repetir=setInterval(function(){temperatura_frigorifico.nuevo_valor_aleatorio()},1000);
}
|
Poster un commentaire