Generar y modificar con JavaScript los gráficos SVG de datos de sensores conectados a la IoT

En esta última parte de la serie de artículos sobre el dibujo de gráficos con datos de sensores conectados a Internet de las cosas, toca hablar sobre cómo generar o modificar con JavaScript los dibujos en formato SVG y algunos de los elementos HTML que sirven de contenedor o que presentan información complementaria a los gráficos.

A los usuarios destino de este tutorial se les supone formando un perfil de electrónica y programación de microcontroladores, es posible que no estén familiarizados con HTML, CSS o SVG; por eso, en las anteriores entregas se hacía una pequeña introducción al lenguaje o a la tecnología correspondiente. En esta última parte el enfoque es un poco diferente, ya que seguramente los lectores saben programar, es posible que usando el lenguaje C++ que, como JavaScript, comparte sintaxis básica con C y podrá tomarse como referencia para omitir la mayoría de los conceptos básicos de programación y así centrarnos en las diferencias y en el uso concreto que nos interesa para realizar los gráficos de sensores en la IoT.

De la primera diferencia da una pista el nombre: JavaScript es un lenguaje de programación de script (guión) y como tal, es interpretado, no es necesario compilarlo; el contexto en el que funcione el script (un navegador web, por ejemplo) irá leyendo, traduciendo y ejecutando las órdenes. Para ser precisos, en la mayoría de los casos se produce una compilación en tiempo de ejecución (JIT), pero para el proceso de escritura de código JavaScript no nos afecta, simplemente escribimos el código y ya puede funcionar.

El nombre contiene también la primera confusión: JavaScript no tiene la menor relación con Java. Inicialmente, cuando lo desarrolló Netscape para su navegador, se llamaba primero Mocha y luego LiveScript, menos confuso. Después de su éxito de implantación en los navegadores, y de trascenderlos, se estandarizó como ECMAScript (la ECMA-262, versión 6 en el momento de escribir este texto) para hacerse neutral con respecto a los navegadores que lo implementan. Actualmente también existe un estándar ISO de la versión 5, de 2011 (ISO/IEC 16262:2011 en el momento de escribir el artículo)

Variables, tipos de datos básicos y objetos en JavaScript

A diferencia de lo que ocurre, por ejemplo, en C++, en JavaScript no se incluye el tipo de datos al declarar una variable y además el tipo asociado a una variable no es fijo, es posible asignar un valor de un tipo diferente a lo largo de la ejecución del programa.

En el ejemplo anterior se ha declarado la variable «cosa» (sin indicar el tipo de dato) luego se asignan datos de diferente tipo y se consulta con typeof el tipo que JavaScript que ha interpretado. Para depurar el código se puede escribir en la consola del inspector del navegador web (lo que no afectará a la presentación de la web) con console.log().

Para forzar la conversión de un dato a un tipo concreto, especialmente los de texto a numéricos, se pueden utilizar funciones como parseInt() o parseFloat() que convierten a enteros o a números en coma flotante respectivamente. La conversión contraria puede realizarse con String(), aunque es improbable que sea necesario utilizarla ya que la conversión automática suele ser suficiente. Con parseFloat(), por ejemplo, puede obtenerse el valor de una propiedad de la página web, por ejemplo el ancho o el alto de un objeto, que incluya unidades; de esta forma, la expresión parseFloat("50px"); devolverá 50, un valor numérico, como resultado.

En JavaScript no hay distinción entre comillas dobles y simples; el tipo de dato en ambos casos es string, y cada una de ellas puede incluir a la otra sin necesidad de códigos de escape.

En el ejemplo anterior puede verse que una variable, cuando ha sido declarada (existe) pero no se le ha asignado ningún valor, contiene un tipo de dato indefinido (undefined). Un objeto sin asignar tiene el valor null; es decir, el objeto existe, pero sin valor; una variable que hiciera referencia a él no tendría un typeof undefined sino object. Un objeto también puede estar vacío, es decir, no ser nulo pero no tener ninguna propiedad.

Para definir un objeto en JavaScript se encierran entre llaves ({ y }) las propiedades o métodos, separando por el signo de dos puntos (:) nombre de propiedad de valor de propiedad y por coma (,) las diferentes propiedades. Puedes encontrar más información sobre esta manera de expresar un objeto en el artículo sobre el formato JSON.

Aunque se puede utilizar una sintaxis que pueda llegar a hacer pensar lo contrario, en JavaScript no existen clases sino prototipos, es decir, para que un objeto herede propiedades y métodos se crea otro (el prototipo) que usan los demás (los hijos) como referencia. La sintaxis más cercana al estilo de JavaScript para usar un prototipo es Object.create aunque también es posible (y útil a veces) usar new como en otros lenguajes orientados a objetos.

Para consultar si un objeto es una instancia de otro, si lo usa como prototipo, si se hereda sus propiedades, en definitiva, se puede utilizar instanceof (creado con new) o isPrototypeOf (creado con Object.create) que se evaluará a verdadero cuando el objeto use el prototipo y a falso cuando no.

Una vez creado un objeto utilizando otro como prototipo, es decir, una vez instanciado un objeto, se pueden añadir propiedades nuevas o sobrescribir propiedades del prototipo usando la sintaxis de punto como en gato.peso=2.5.

La matrices (arrays) en JavaScript son diferentes de las que seguramente conozcas en C. Para empezar, se declaran sin necesidad de indicar su longitud, sólo con los signos de abrir y cerrar corchetes ([ y ]), los componentes pueden ser heterogéneos (diferentes tipos de datos en la misma matriz) y se pueden añadir nuevos elementos sin restringirse a un límite. Las matrices de JavaScript son en realidad listas (colecciones) de elementos a los que se hace referencia por un índice numérico o por un nombre. Una matriz puede contener simultáneamente índices numéricos y nombres de elementos pero lo habitual es usar objetos (propiedades) para explotar el segundo tipo.

Como puede verse en el ejemplo anterior, para saber si una variable corresponde con una instancia de una matriz (es un objeto matriz) se puede utilizar instanceof, como ya se ha usado con objetos genéricos o, en versiones más recientes de JavaScript se puede recurrir a Array.isArray()

Para acceder a los elementos de la matriz se puede utilizar su índice (matriz[7]) o por el nombre de la propiedad con el nombre entre corchetes (matriz["nombre"]) o con la sintaxis de punto habitual de los objetos (matriz.nombre). Como el nombre es una cadena de texto, se puede utilizar una expresión, incluyendo variables, para componerlo. Para recorrer una matriz con propiedades puede utilizarse un bucle con el formato for(propiedad in matriz).

Es interesante para nuestro objetivo tratar el objeto Date, con el que representar y gestionar fecha y hora en JavaScript. El objeto se puede instanciar sin datos, de manera que tomará la fecha y hora actual, o se puede crear indicando una fecha como un valor, ya sea en milisegundos desde el 1 de enero de 1970 (como el tiempo Unix o tiempo POSIX pero expresado en milisegundos en lugar de en segundos) o especificando los valores separados de año, mes, día, hora…

El objeto incluye una completa serie de métodos para consultar o establecer la fecha y la hora:

• now()
  Devuelve la fecha y hora actual expresada en milisegundos desde el 1 de enero de 1970

• getTime() | setTime()
  Obtiene o cambia, respectivamente, el valor de la hora en milisegundos desde el 1 de enero de 1970. Usando valueOf(), que es un método presente en la mayoría de objetos, también se obtiene el valor del objeto Date que corresponde, como getTime() con tiempo Unix o tiempo POSIX expresado en ms.

• getMilliseconds() | setMilliseconds()
  Sirve para consultar o para establecer la parte fracción de milisegundos del objeto Date sobre el que se ejecute. Si se consulta, el valor obtenido está comprendido entre 0 y 999 pero se pueden asignar valores mayores que se acumularán en la fecha y hora total por lo que, como el resto de métodos get-, sirve para incrementar el valor del objeto Date (o decrementarlo, si se usan valores negativos).

• getSeconds() | setSeconds()
  Devuelve o cambia, respectivamente, el valor de los segundos del objeto Date.

• getMinutes() | setMinutes()
  Sirve para consultar o establecer los minutos del objeto Date.

• getHours() | setHours()
  Permite consultar o modificar las horas (de 0 a 23) del objeto Date.

• getDay()
  Devuelve el día de la semana de la fecha, expresado como un valor de 0 a 6 (de domingo a sábado).

• getDate() | setDate()
  Devuelve o cambia el día del mes del objeto Date sobre el que se aplique.

• getMonth() | setMonth()
  Sirve para consultar o modificar el número del mes del objeto Date.

• getFullYear() | setFullYear()
  Consulta o establece el valor del año en el objeto que contiene fecha y hora.

Los anteriores métodos de Date incluyen una versión UTC para poder trabajar directamente con la hora universal sin tener que hacer cálculos intermedios. En ese sentido, por ejemplo, getHours() tiene una versión getUTCHours() o getMilliseconds() una alternativa getUTCMilliseconds() para trabajar alternativamente con la hora oficial (legal) o la universal. Con getTimezoneOffset() se puede saber la diferencia que existe entre la hora universal y la oficial local.

Funciones JavaScript

Si estás leyendo esto seguramente sabes programar microcontroladores en C o en C++ y conozcas el concepto de función. Aunque la idea base es la misma, en JavaScript la forma de definirlas y usarlas es un poco distinta. Para empezar, ya se ha dicho, JavaScript no usa explícitamente tipos de datos así que no hay que indicarlo al definir la función. Para seguir, no es obligatorio que una función tenga nombre, pueden ser anónimas. Pueden asociarse a una variable para invocarlas pero también puede que no sea necesario ya que, a veces, es útil invocarlas inmediatamente, para lo cual se añaden los paréntesis y los parámetros después de la definición de la función.

Para definir una función se antepone function, si procede se escribe el nombre, entre paréntesis los argumentos (los parámetros que se pasan a la función) y entre llaves el código que se ejecutará cuando se invoque a la función.

Ciertamente, en el ejemplo anterior no hacía falta para nada la variable «resultado», pero es una buena excusa para recordar el ámbito de las variables, que funciona como esperas: la variable «resultado» sólo existe dentro de la función «doble». En JavaScript también puede usarse let, en lugar de var, para definir el ámbito de una variable a un contexto de bloque de código (encerrada entre llaves, { y })

Al hablar de objetos en el anterior apartado faltaba algo fundamental: se han definido propiedades pero no se han definido métodos. Como cabe esperar, los métodos de los objetos son funciones, no tienen nombre y se utilizan (se invocan) desde el nombre (de propiedad) que le asigna la definición del objeto.

En el anterior ejemplo, ya existe un método, «ver_temperatura», que muestra por la consola el valor de la propiedad «temperatura_actual». No es muy útil, pero da una idea más completa de cómo es la definición de un objeto en JavaScript.

Para acceder desde los métodos de un objeto (funciones) a sus propiedades se utiliza this, como en el ejemplo anterior en la línea 11, al utilizar la propiedad «temperatura_actual».

Acceder al modelo de objetos del documento (DOM) con JavaScript

Desde JavaScript se tiene acceso al contenido de la página web en la que se ejecuta, así como a algunos aspectos del navegador que muestra esa página, aunque no a los recursos del sistema. La estructura de datos que soporta las propiedades y los métodos a los que se tiene acceso desde JavaScript parte del objeto window, en concreto, el contenido del objeto (el documento HTML) corresponde con el objeto document. Aunque se utiliza a veces por claridad, no es necesario preceder de window a los métodos o propiedades para referirse a ellos, basta, por ejemplo, con usar document, no es necesario escribir el nombre del objeto raíz como en window.document, siempre que se haga referencia a la ventana actual.

La forma más usada de encontrar un objeto dentro del documento HTML es por medio del método getElementById(), al que se le pasa como argumento el id que se indicó al crear el código HTML. Por lo explicado en apartados anteriores, es fácil suponer que también se puede acceder a los componentes que hay dentro del objeto document usando la sintaxis de punto (document.componente) o de corchetes usando tanto el nombre (document["componente"]), lo más útil, como el índice numérico, difícil de usar y poco práctico cuando se accede al contenido de una página web compuesta manualmente.

Con JavaScript se puede obtener el elemento que contiene a otro elemento (elemento o nodo padre) consultando su propiedad parentNode o bien su propiedad parentElement, la diferencia es que el elemento padre (parentElement) del elemento final de la cadena del DOM es nulo (null) y el nodo padre (parentNode) es el propio documento (document).

Para modificar el contenido de un elemento HTML, por ejemplo el de una etiqueta <div>, se puede utilizar innerHTML y para cambiar sus propiedades se puede optar por asignarle una clase diferente con className o alterar sus propiedades individualmente con style. Para consultar el estilo mostrado por un elemento en la página web no necesariamente sirve style ya que es posible que dependa de varios factores o simplemente no se haya especificado explícitamente. Para consultar el estilo de un elemento mostrado finalmente en la página web se utiliza el método getComputedStyle.

A un elemento del documento HTML se le pueden asignar varias clases con las que determinar su aspecto y su comportamiento, para gestionar la lista de clases de un objeto desde JavaScript se puede recurrir a classList que ofrece los métodos add para añadir una nueva clase a la lista, remove para eliminarla, toggle para sustituirla o consultar el contenido de la lista de clases de un elemento con item y con contains, que devuelve la clase que ocupa cierta posición en la lista y un valor true o false si cierta clase está o no en la lista.

En el ejemplo anterior se localiza con getElementById el objeto que se quiere manipular (un elemento <div> por su id), antes de cambiar el aspecto, se borra el contenido asignando con innerHTML una cadena de texto vacía, se le asigna una nueva clase con className y se modifica su estilo con style según el valor del contenido (la temperatura), cambiando el color, si procede, por medio de la propiedad color. Una vez establecido el aspecto, se escribe el valor usando otra vez innerHTML.

En la segunda parte del ejemplo de arriba (líneas 9 a 19) se accede a un elemento del código HTML utilizando la sintaxis document[] y la propiedad id del elemento para alterar su lista de clases con el método classList.remove() y con el métodoclassList.add(), en función del resultado de varias consultas que se realizan en ejecuciones condicionales, que comparan usando classList.contains().

Cuando se va a hacer referencia a un elemento HTML varias veces a lo largo del código JavaScript, es un poco más eficiente asignarlo a una variable o usar su índice en lugar del nombre ya que, en caso contrario, el método que usaría JavaScript para obtenerlo cada vez requeriría buscar su nombre, consumiendo algo más de tiempo que si se accediera a una variable.

Para añadir nuevos objetos al documento HTML, se pueden crear primero con el método createElement de document y posteriormente incorporarlos al resto de los elementos en el punto del árbol que sea necesario con appendChild. Para crear un objeto XML, como los objetos SVG que usamos para dibujar la gráfica de los sensores IoT, se puede utilizar createElementNS (NS por name space, espacio de nombres). Como se explicó al hablar del formato SVG, el espacio de nombres que le corresponde (por la versión actual) es http://www.w3.org/2000/svg, que debe pasarse a createElementNS como argumento junto con el tipo de elemento, svg, en este caso.

Una alternativa a innerHTML para añadir un texto como contenido de un elemento del documento HTML es el método createTextNode() del objeto document. Con esta alternativa se puede crear un texto nuevo (al que se tiene posterior acceso si se asigna a una variable) que se incorpora al árbol del objeto con el método appendChild(). Como alternativa a appendChild(), que añade el nuevo contenido al final del que ya exista en el nodo al que se incorpora, se puede utilizar el método insertBefore(), que añade un nuevo objeto delante de otro que ya exista. Usar insertBefore() en lugar de appendChild() aporta un método que sirve, por ejemplo, para ordenar nuevos objetos frente a los existentes cuando un elemento deba estar delante de otro (como en una lista) o bien tapar o ser tapado en una estructura gráfica en la que existan elementos más cerca del primer plano o del fondo.

Reaccionar a los eventos con JavaScript

Cuando se explicó la forma de usar una página web como contenedor para los gráficos de sensores conectados a la IoT se utilizó onload en la etiqueta <body> para iniciar el dibujo del gráfico. Esta propiedad, asociada los objetos del código HTML, hace referencia a los eventos JavaScript. Como ya se ha explicado, ejecuta una función cuando la página se ha cargado. Aunque se ha asociado al código HTML para tenerla más presente, se podría haber escrito en el código JavaScript como body.onload=dibujar; siendo dibujar el nombre de la función que se debe iniciar al cargar la página web.

En las versiones más recientes de JavaScript se pueden asociar eventos a funciones usando addEventListener con el formato objeto.addEventListener(evento,función); o utilizando la sintaxis objeto.evento=función; que funciona también en las implementaciones más antiguas. Para desligar la función asociada al evento se dispone de removeEventListener que tiene el mismo formato que addEventListener.

JavaScript es capaz de reaccionar a multitud de eventos que se pueden producir en una página web. Por ejemplo, puede detectar cuando se pulsa sobre un elemento HTML con onmousedown, o cuando se hace clic sobre él con onclick, cuando se presiona una tecla con onkeydown, al accionar la barra de desplazamiento con onscroll. Para nuestro propósito nos basta con detectar la carga de la página con onload y su redimensionado con onresize. Asociaremos estos eventos a los objetos body y window del DOM respectivamente. El primero puede asignarse en el código HTML, como se ha visto y el segundo dentro del código JavaScript dentro de la función llamada por el primero y con el formato window.onresize=redimensionar; siendo redimensionar la función que se invocará cada vez que la ventana cambie de tamaño.

Ejecutar después de un intervalo de tiempo

JavaScript dispone de dos recursos para la ejecución diferida: setTimeout, que ejecuta una función pasado un intervalo de tiempo y setInterval que ejecutará una función cada cierto intervalo de tiempo. Ambos métodos necesitan como parámetros (1) la función invocada y (2) el intervalo de tiempo expresado en milisegundos. Para detener su funcionamiento, se puede asignar el resultado devuelto por estas funciones a variables y pasarlas como argumento a clearTimeout o a clearInterval cuando no se desee volver a invocar (o cuando no se desee que se lleguen a ejecutar por primera vez) setTimeout o setInterval respectivamente.

En el ejemplo anterior se introduce el método alert que sirve para mostrar un letrero de aviso. Aunque se utilizó bastante en el pasado, actualmente está casi proscrito del código JavaScript por lo agresivo (intrusivo) que resulta tapar con un cuadro de diálogo la página web.

En un programa escrito para un microcontrolador de una serie pequeña (como el de la placa Arduino Uno) es habitual utilizar variables globales, como pasa en el ejemplo anterior en JavaScript, ya que el código es breve y no resulta especialmente confuso, porque muchas veces las funciones se implementan ad hoc y porque el uso de variables globales permite predecir de manera muy sencilla e intuitiva el uso de memoria, lo cual es crítico en sistemas con pocos recursos. En cambio, en JavaScript es habitual reducir al mínimo posible el uso de variables globales porque no necesita apurar el uso de memoria, ya que se ejecuta normalmente en una CPU con recursos muy superiores a los de un MCU, porque es probable que coexista con mucho código de terceros con el que debe funcionar sin interferir y al ser un sistema abierto no se puede predecir el contexto de ejecución futuro (el programa de un microcontrolador pequeño determina por completo su funcionamiento sin que se añada más código una vez que se encuentra en explotación) y porque las dimensiones de las aplicaciones podrían dificultar la lectura si el código no encapsula su funcionamiento haciendo los métodos lo más auto-contenidos que sea posible.

Operaciones matemáticas con el objeto Math de JavaScript

Las operaciones matemáticas de cálculo matemático más complicado se agrupan en el objeto Math. Este objeto se usa directamente, no es necesario instanciarlo para usar los métodos o las propiedades (constantes) que incorpora.

• Math.abs(n) Valor absoluto del parámetro n
• Math.acos(n) Arcocoseno del parámetro n (resultado en radianes)
• Math.asin(n) Arcoseno del parámetro n (resultado en radianes)
• Math.atan(n) Arcotangente del parámetro n (resultado en radianes)
• Math.atan2(n,m) Arcotangente de n/m (resultado en radianes)
• Math.ceil(n) Redondea el parámetro al entero más cercano hacia arriba
• Math.cos(α) Coseno del parámetro α (α en radianes)
• Math.E Número e (≃2.718281828459045)
• Math.exp(n) e elevado al parámetro n: eⁿ
• Math.floor(n) Redondea el parámetro n al entero más cercano hacia abajo
• Math.log(n) Logaritmo natural (base e) del parámetro n
• Math.LN2 Logaritmo natural (base e) de 2 (≃0.6931471805599453)
• Math.LN10 Logaritmo natural (base e) de 10 (≃2.302585092994046)
• Math.LOG2E Logaritmo con base 2 de e (≃1.4426950408889634)
• Math.LOG10E Logaritmo con base 10 de e (≃0.4342944819032518)
• Math.max(a,b,c,…) Mayor valor de la lista de parámetros que se pasen
• Math.min(a,b,c,…) Menor valor de la lista de parámetros que se pasen
• Math.PI Número π (≃3.141592653589793)
• Math.pow(n,m) Primer parámetro n elevado al segundo parámetro m: n^m
• Math.random() Número (casi) aleatorio comprendido entre 0.0 y 1.0
• Math.round(n) Redondea el parámetro n al entero más cercano
• Math.sin(α) Seno del parámetro α (α en radianes)
• Math.sqrt(n) Raíz cuadrada del parámetro n
• Math.SQRT1_2 Raíz cuadrada de 1/2 (≃0.7071067811865476)
• Math.SQRT2 Raíz cuadrada de 2 (≃1.4142135623730951)
• Math.tan(α) Tangente del parámetro α (α en radianes)

Cargar datos del servidor con AJAX

El método que se sigue para dibujar la información almacenada en la IoT consiste en cargar los datos del servidor cada cierto tiempo y redibujar con ellos la gráfica con la que se representan. Para leer los datos del servidor se utiliza la tecnología AJAX (Asynchronous JavaScript And XML) por medio de un objeto XMLHttpRequest de JavaScript. El trazado de la gráfica de los datos se hace reutilizando un objeto SVG que ya está en el código HTML y que contiene un trazado cuyas coordenadas se modifican para hacerlas corresponder con los nuevos datos cargados.

En el ejemplo de esta propuesta, además de actualizar el dibujo, también se actualiza un texto en la página web que muestra la fecha y el valor del último dato medido para cada gráfica.

Del lado del servidor hay una base de datos que contiene la información que los sensores conectados a la IoT han ido monitorizando. Esta base de datos se lee por la petición del objeto XMLHttpRequest respondiendo con información codificada en el formato JSON, pese a que el nombre del método utilizado sugiere relación con el formato XML.

En el primer tutorial de polaridad.es sobre el almacenamiento de datos IoT se puede ver un ejemplo de una infraestructura para gestionar desde el lado del servidor la información aportada por los dispositivos conectados a la Internet de las cosas. En esa serie de artículos se utiliza como recurso un servidor Apache desde el que se puede usar el lenguaje de programación PHP para acceder a una base de datos MySQL o MariaDB. En servidores utilizados para dar soporte a IoT es muy común encontrar bases de datos MongoDB (NoSQL) y el lenguaje de programación JavaScript sobre Node.js como infraestructura software.

La siguiente función es la que se encarga de solicitar al servidor los últimos datos de uno de los sensores. En la llamada a la función se utiliza como argumento el objeto JavaScript que soporta los datos que se dibujan. Si el mismo gráfico representa varios valores, por ejemplo para buscar visualmente una correlación, se puede hacer una petición al servidor para que devuelva varios simultáneamente, un método más óptimo por la forma de trabajar del protocolo HTTP.

En la tercera línea del anterior ejemplo se prepara la consulta que se hará al servidor, en la que se pasará el argumento «zona» cuyo valor será el del nombre o código del lugar monitorizado ya que en la misma base de datos puede coexistir información de diferentes sensores (por ejemplo, termómetros que miden la temperatura en diferentes estancias). Se espera que el parámetro que se pasa a la función anterior, el objeto con los datos del gráfico, incluya una propiedad con el nombre de la estancia («sufijo_nombre»).

Entre las líneas 7 y 14 del anterior código se crea el objeto XMLHttpRequest que se almacena en la variable «ajax». Antes de elegir la forma de crear el objeto, se busca en window por si XMLHttpRequest no estuviera disponible (cosa que ocurría en versiones antiguas del explorador de Microsoft y aunque queda muy atrás, sirve como ejemplo de alternativas para crear el objeto usando la sintaxis (más nativa) Object.create o new, similar a la de otros lenguajes orientados a objetos.

Para poder gestionar la respuesta inmediatamente, en las líneas 15 a 26 se prepara el código que la atiende antes de realizar la petición al servidor.

La forma de realizar la consulta HTTP al servidor consiste en abrir una conexión con open indicando tipo y página (opcionalmente usuario y clave), preparar las cabeceras del protocolo con setRequestHeader y enviar la petición con send. La cabecera HTTP Content-length necesitará saber la longitud de la consulta (número de caracteres) que se calcula usando length.

Cuando la petición AJAX está lista se ejecuta la función asociada al evento onreadystatechange. En lugar de asignar una función, en el ejemplo anterior se define sobre la marcha una función anónima que gestionará la recepción de los datos que lleguen del servidor. En primer lugar, en la línea 18, se verifica que el estado de la petición es «terminada», lo que corresponde con el valor 4 de la propiedad readyState, que el estado sea el «OK» del protocolo HTTP (código 200) que se puede obtener de la propiedad status y que los datos que han llegado están el formato JSON, consultando la propiedad responseType.

Una vez verificado que el estado de la respuesta es el esperado, en la línea 20 del ejemplo anterior se crea un objeto con el resultado, convirtiendo el texto JSON. En la respuesta se ha previsto que se devuelva una fecha, esto permite ver si el resultado que el servidor envía ya se había representado anteriormente en la gráfica, lo que se verifica en la línea 21. Si el dato es nuevo, en la línea 23 se llama a la función que se encarga de redibujar el gráfico con la nueva información.

La idea al plantear este método de lectura es que se van a refrescar los datos con mucha frecuencia. Si la información que se presenta corresponde a un plazo largo (como las temperaturas de un día o de una semana) puede implementarse una petición inicial que recoja todos los datos disponibles y luego una, similar a la del ejemplo, que los actualice en el plazo correspondiente.

Generar datos aleatorios para las pruebas

Cuando toda la infraestructura del servidor y del cliente esté lista, una función como la del apartado anterior se encargará de leer los datos y dibujar con ellos el gráfico pero en la fase de pruebas puede ser más práctico utilizar números aleatorios dentro de un rango controlado para ver si el código que se va escribiendo es correcto. La siguiente función puede servir como ejemplo para obtener datos mientras se construye la aplicación definitiva.

En lugar de leer la información de una base de datos, el ejemplo de arriba los genera aleatoriamente y los pasa a la función encargada de dibujar el gráfico. El dato inventado es un vector formado por una fecha expresada como un valor en milisegundos, el momento de grabar la información del sensor, y el dato monitorizado, que se encuentra entre un valor máximo y un valor mínimo.

En este ejemplo, al generar una fecha se puede retrasar hasta un segundo (1000 milisegundos) con respecto a al fecha del momento de inventarla. Como Math.random() genera un número entre 0.0 y 1.0, multiplicándolo por 1000 se obtiene un número entre 0 y 1000 que se convierte después en entero. De la misma forma, el valor se obtiene multiplicando el número aleatorio por el rango (máximo menos mínimo) y añadiéndole el mínimo.

Dibujar el gráfico de los sensores IoT con un trazado SVG

Ya que se ha visto cómo se pueden obtener los valores que se desean representar (temperatura, en el ejemplo) y su localización temporal, que se pueden expresar conjuntamente en forma de coordenadas, en el ejemplo de más abajo se muestra una función para dibujar un trazado que une esos puntos y opcionalmente una zona coloreada delimitada por esa línea en la parte superior. El resultado sería como el de la siguiente imagen.

El eje horizontal (X) del gráfico representa el tiempo y el vertical (Y) los valores que los sensores conectados a la IoT han ido monitorizando. El intervalo horizontal es de unos pocos segundos ya que en esta propuesta el gráfico se actualiza con mucha frecuencia (cada segundo, por ejemplo) para dar información casi en tiempo real del estado de los sensores.

En el código anterior hay dos aspectos interesantes, en primer lugar el cálculo que permite adaptar el rango de valores que se representan y en segundo lugar la construcción de la propiedad d que indica las coordenadas de los puntos del trazado (path).

Para adaptar el rango de valores representados se desplazan desde un mínimo y se escalan para que la magnitud visible corresponda con el tamaño del gráfico. En el caso del tiempo, el desplazamiento se obtiene al restar al tiempo mayor (la fecha y la hora más cercana a la actual) el rango que se quiere mostrar (20 segundos en el ejemplo). El desplazamiento de los valores de la temperatura es el del margen inferior (un grado) menos el valor menor, de manera que los datos que se muestran más abajo son los más parecidos al valor menor permitido pero dejando un margen que permite apreciar los que lo rebasen.

El coeficiente que multiplica a los valores de tiempo para obtener las coordenadas horizontales del gráfico se obtiene dividiendo el ancho total del gráfico (100 unidades en el ejemplo) entre el rango de tiempo representado (20 segundos en el ejemplo). Para obtener el coeficiente con el escalar los valores de temperatura hay que recordar que el rango representado va desde un margen por debajo del valor mínimo hasta un margen por encima del máximo, un grado en ambos casos. De esta forma, el coeficiente de escala vertical resulta de dividir el alto del gráfico (100 unidades en el ejemplo), entre el valor máximo, menos el mínimo más el margen superior e inferior. Como estos valores podrían desarrollarse por completo en temperaturas negativas, se utiliza Math.abs() para usar el valor absoluto de la diferencia.

La propiedad d del objeto path se construye concatenando las coordenadas de los puntos en un texto. Cada par de coordenadas va precedida por un código SVG L, que dibuja una linea desde la posición actual hasta un valor absoluto que es el indicado por las coordenadas. Los valores de X e Y se separan por comas y cada operación SVG se separa por un espacio de la siguiente.

Para empezar el trazado se utiliza el código M (mover hasta una coordenada absoluta). En el caso del trazado cerrado y relleno se empieza por la parte inferior derecha, en el caso del trazado abierto que dibuja el perfil de los datos se empieza por el último valor representado (el más reciente). Para terminar el trazado cerrado se utiliza el código Z añadiendo como último punto el que tiene el mismo valor de coordenada X que el último punto de la línea y como coordenada Y el valor menor representado.

En este ejemplo, la función dibujar_grafico(), que es la llamada al cargar la página, obtiene los valores iniciales para probar (no el último valor en tiempo real) y prepara el rango en el que se representarán los datos: 20 segundos (20000 ms) en horizontal y 15 °C en vertical desde -5 °C hasta +10 °C con un grado de margen superior e inferior. Realiza dos llamadas a actualizar_grafico(), en la primera pasa true como argumento, que indica que el gráfico debe cerrarse para representar una zona rellena, y en la segunda llamada pasa false para dibujar la línea. En cada caso, el objeto path modificado es el que tiene el aspecto correspondiente, con relleno y sin borde en el primer caso y con cierto grosor de línea y sin relleno en el segundo.

La función actualizar_grafico() trabaja sobre un objeto SVG que utiliza como contenedor el siguiente código HTML. El objeto SVG contiene dos trazados, uno para dibujar la línea y otro para dibujar la zona rellena. Al cargar la página web, desde el elemento <body> se llama automáticamente a la función anterior, dibujar_grafico() gracias al evento JavaScript onload.

En la línea 10 del código HTML de arriba se establece un ancho (de ejemplo) de 820 px y un alto de 150 px en el estilo (algo que, en la versión definitiva convendrá hacer con una clase y un documento CSS). Parece raro que en las líneas 13 y 14 se defina el tamaño del objeto SVG como el 100 % de ancho y de alto (lo que casa mejor con las dimensiones de la ventana, 100×100). Como ya se ha mencionado, la razón de hacerlo así es trabajar siempre con unas dimensiones conocidas y ajustar a ella los valores representados. Las otras alternativas serían, calcular el espacio del gráfico cada vez y reajustar después los valores o forzar unas dimensiones fijas para el gráfico, a las que el documento tendrá que ceñirse.

Al haber optado por un gráfico cuyas dimensiones cambian según el código HTML, es necesario incluir la propiedad vector-effect con el valor non-scaling-stroke para evitar que los grosores de líneas se deformen cuando el gráfico no mantenga las proporciones elegidas 1:1 en la página web en la que se muestra, como ocurre en la propuesta anterior.

Para «recortar» el gráfico y mostrar solamente la zona que se elija, se utiliza viewBox. En este caso se ha elegido ver la parte del gráfico que empieza en 0,0 (esquina superior izquierda) y mide 100×100 hacia abajo y hacia la derecha. La parte del dibujo situada en coordenadas con valores negativos o mayores que 100 no se mostrarán en la página web aunque existan en el objeto SVG

Añadir nuevos elementos al dibujo SVG

En el anterior ejemplo, la función actualizar_grafico() utiliza un trazado SVG al que se le cambia la propiedad d, que es la que expresa la cadena de coordenadas. La alternativa sería crear el objeto completo cada vez que se redibuja. La ventaja de la primera opción es que el aspecto gráfico (como el grosor o el color) está definido en el código HTML, la limitación es que los objetos deben estar previamente creados.

Para crear los objetos SVG se utiliza createElementNS(), que permite incluir el espacio de nombres. En el ejemplo de abajo se crea un nuevo objeto texto (text) y se asocia a un elemento SVG que ya existe en el código HTML de la página web. Una vez creado el nuevo elemento, se asignan sus propiedades con setAttribute() y se añade al SVG con appendChild().

Modificar la proporción de los elementos del dibujo

Si has probado a rotular con la función del ejemplo del apartado anterior, habrás visto que el texto aparece deformado cuando la proporción del objeto en la página web (width y height del código HTML) no es igual a la de la zona representada (viewBox). Para adaptar la proporción es necesario conocer las medidas del objeto SVG para lo que se puede consultar el estilo del objeto, o del contenedor HTML, si el objeto SVG cede esta propiedad. Asignando la propiedad transform a los objetos SVG que dependan de la proporción se puede corregir la deformación aplicando una operación de escala scale() en la que el coeficiente en X es diferente al de Y.

SVG permite agrupar varios objetos formando un nuevo elemento compuesto que también soporta propiedades, como los objetos simples. Para aplicar la misma transformación a una serie de objetos a la vez en lugar de a cada objeto por separado se pueden agrupar según este recurso y aplicar una única propiedad transform a todos ellos.

Como se explicó al hablar del formato SVG, los elementos de un grupo se encierran entre las etiquetas <g> y </g>. Para añadir desde JavaScript elementos a un grupo SVG se utiliza, como se ha visto en el ejemplo anterior, appendChild() una vez definido el nuevo objeto.

Para establecer un origen al aplicar las transformaciones puede utilizarse en los objetos la propiedad SVG transform-origin, cuyo valor son las coordenadas X e Y del punto desde el que empieza la transformación. Si no se indica expresamente un valor para el origen de la transformación (en el navegador web) se utiliza el centro de coordenadas. Desafortunadamente, en el momento de escribir este texto, la especificación del comportamiento de las transformaciones usando un origen diferente de el usado por defecto no es homogénea en todos los navegadores y debe usarse con cautela.

Junto con la transformación de escala con scale existen otras, como la rotación con rotation y el desplazamiento con translate, que ofrecen una alternativa a la representación del gráfico: en lugar de obtener nuevas coordenadas se pueden representar en su propio espacio y transformar el gráfico para que encajen con el formato en el que se quiere representar.

Añadir referencias al gráfico

Ahora que la parte principal del gráfico está resuelta trazando los valores con un perfil y una zona rellena, se puede completar con referencias que ayuden a su lectura. Como ejemplo, empecemos por dibujar unas referencias horizontales (líneas) que marquen los valores máximos y mínimos aceptables así como un valor deseado. Como se ha explicado, se puede optar por añadir los objetos al SVG directamente desde JavaScript o incluirlos manualmente en el código HTML y modificarlos después con JavaScript.

Parece lógico rotular estas referencias horizontales con un texto que aclare el valor que representan. Para resaltar el texto, se pueden utilizar rectángulos que lo destacarán del fondo y del gráfico. Como a los textos habrá que aplicarles una transformación de escala par compensar la deformación, se pueden agrupar todos en un objeto al que se le aplique la escala; la ventaja principal de hacerlo así es poder modificarlos en una única operación si el contenedor del gráfico (la ventana del navegador) se redimensiona y cambia esa proporción que la escala corrige.

Hay varios aspectos interesantes en el anterior código de ejemplo. En primer lugar, comentar que se han usado constantes (variables globales) para que el ejemplo sea más legible a usuarios que llegan desde la programación de microcontroladores en C o en C++. Como se verá más adelante, la forma óptima de programarlo en JavaScript sería usando objetos que contendrían estos valores y los métodos que gestionarían las referencias en este ejemplo o el gráfico, en general, en un sistema en producción.

Por otra parte, avanzando cómo sería el código más genérico, se han desarrollado funciones separadas que calculan los diferentes coeficientes que corrigen la proporción del gráfico para ajustar el texto proporcion_grafico(), la escala de los valores en función de su rango escala() y un factor de corrección de las medidas que se conocen en valor absoluto, como las medidas de las referencias medida_grafico().

La lectura de este código debería ayudar a aclarar cómo es el contexto en el que funciona una aplicación como esta, que dibuja gráficos en tiempo real y que debe ser flexible para presentarse en varios contextos gráficos (varios tamaños y proporciones, cuando menos). En primer lugar deben generarse los objetos SVG, ya sea «manualmente» en el código HTML, ya sea por medio de código JavaScript y en cualquier caso, posteriormente han de obtenerse referencias a estos objetos para manipularlos desde JavaScript de manera que se puedan dibujar nuevos gráficos y adaptar la representación de un gráfico ya dibujado a un cambio en el medio en el que se presenta.

Otra de las referencias que pueden ayudar interpretar un gráfico fácilmente son los puntos que representan valores concretos (los nodos de la línea). En este ejemplo, en el que representamos una única magnitud, no es crítica la elección de un símbolo pero si se superponen varios valores diferentes para buscar correlación, es interesante distinguir, además de usando otros recursos como el color, dibujando símbolos diferentes. El grafismo que se use para el nodo de la línea deberá modificarse en tamaño y en proporción, como ocurre, por ejemplo, con los textos, para que sus dimensiones sean absolutas y para que su proporciones se mantengan aunque cambien las de la caja que contiene el gráfico.

En el ejemplo anterior ya se vio cómo calcular los diferentes coeficientes para rescalar y corregir la proporción del dibujo; con respecto a cómo implementar la gestión de los símbolos de los nodos o vértices del gráfico, una posible solución puede ser almacenar los objetos SVG en un vector y modificar su posición cuando se actualice el gráfico con la lectura de un nuevo valor, o cuando se redibuje al redimensionar el contenedor. En el primer caso habría que modificar su posición y en el segundo su proporción con la propiedad transform y el valor de scale. El siguiente código es una modificación de la función actualizar_grafico() para incluir el reposicionado de los símbolos de los vértices del gráfico.

Las modificaciones realizadas a la función actualizar_grafico() para obtener la nueva función actualizar_grafico_puntos() son las que se encuentran resaltadas en el código del ejemplo anterior. En primer lugar, en la línea 5, se toma un vector de objetos SVG como parámetro. Este vector contendrá los símbolos que hay que reposicionar en los nuevos nodos del gráfico.

En las líneas 39 y 40 se asignan las nuevas coordenadas del centro, cx y cy, a las de los valores que se están representando. Si el símbolo no estuviera basado en el centro seguramente será necesario añadir un desplazamiento en cx de la mitad del ancho y en cy de la mitad del alto para reposicionarlas exactamente en el nodo del gráfico.

En las líneas 57 a 61 se reposicionan fuera del gráfico los puntos que corresponden a coordenadas que no se dibujan por recortarse con el borde izquierdo. Se ha asignado la coordenada de cy a cero y la de cx a un número negativo cualquiera (mayor que el propio punto) para que no se muestre al ser recortado, como la parte izquierda del gráfico, por la ventana del SVG.

Gestionar el gráfico desde un objeto con JavaScript

Todas las operaciones que se han explicado hasta ahora pueden integrarse en un objeto para hacer una gestión del gráfico con un estilo más propio de las nuevas versiones de JavaScript. Esta alternativa de implementación tiene la ventaja añadida de simplificar la incorporación de varios gráficos, de diferentes valores, en la misma página web.

Antes de comentar la implementación, revisemos las formas más habituales de crear objetos con JavaScript y alguna de las peculiaridades de las funciones que afectan a la propuesta de dibujo de gráficos de sensores IoT.

Ya se explicó que la nueva forma de crear objetos en JavaScript (disponible desde la versión 5 de ECMAScript) consiste en usar Object.create, que conviene acostumbrarse a usar en lugar de la «clásica» new, que por supuesto sigue funcionando correctamente, aunque su finalidad es más simular el estilo de los lenguajes con objetos basados en clases (JavaScript basa la creación de objetos en prototipos) que una alternativa de trabajo.

El código anterior permite recordar las diferencias entre crear los objetos con Object.create o con new. También sirve para subrayar que, mientras que la función con la que se crea el objeto con new puede estar en cualquier parte del código, el objeto ya debe existir antes de poder crear una instancia con Object.create (objeto Objeto_ES5 no es una función).

En las líneas 3 y 4, para establecer un valor por defecto a las propiedades en la función que crea el objeto con new, se asigna cada propiedad al valor del argumento correspondiente o (||), si no se han pasado argumentos, es decir, si están sin definir (undefined), como esa circunstancia se evalúa como false, se asigna el valor previsto por omisión.

El contexto en el que se ejecuta una función en JavaScript plantea dos cuestiones que es importante tener presentes y que también pueden resultar confusas cuando se usa este lenguaje de programación después de haber trabajado con otros, como C o C++, en nuestro caso. El contexto incluye las variables definidas en el ámbito de la función (y las globales) lo que, por cierto, plantea un interesante concepto, las «closures» que establece todo un estilo de programación en JavaScript. Dicho lo anterior, podría esperarse que this, que hace referencia al objeto cuando se usa dentro del código que lo define, se mantuviera el contexto de ejecución en el que se ha definido pero el que utiliza es el contexto desde el cual que se llama a la función. Este comportamiento es transparente en la mayoría de los casos pero hay dos circunstancias en las que puede confundir: una función definida dentro de otra y un método llamado desde un evento del objeto window.

Al ejecutar el código anterior se muestra en la consola el texto comentado al final. Las dos líneas marcadas reflejan el comportamiento que puede ser confuso: el contexto de ejecución de la función probar_dentro() no es probar(), como podría esperarse, sino window, con lo que se muestran las variables globales y no las propiedades de igual nombre. Si no se desea ese comportamiento basta con crear una variable en la función del nivel más alto y se asigna a this, como en el siguiente código.

Para controlar el contexto de ejecución cuando se llama un método desde un evento de window, por ejemplo al redimensionar la ventana del navegador, se puede explotar otra peculiaridad de JavaScript: la posibilidad de programar «fábricas de funciones», es decir, funciones que generan otras funciones, devolviéndolas con return.

En el código del ejemplo anterior, el método llamar() de los objetos Contexto no realiza el trabajo sino que devuelve una función anónima que se encarga de hacerlo. Para verificar que todo funciona como se espera, hay una variable global de igual nombre que la propiedad que la función muestra en la consola; si el contexto es el correcto se mostrará el valor de la propiedad y no el de la variable global.

JavaScript intenta corregir los signos de punto y coma que omitamos al final de las sentencias. Esto permite un estilo de escritura relajado pero es un arma de doble filo que hay que tratar con cuidado. En la mayoría de los casos, para evitar los efectos indeseables que esto produce en expresiones que ocupan varias líneas se pueden usar paréntesis o adelantarse a la forma en que JavaScript interpretará el código; esa es la razón por la que la línea 8 del ejemplo incluye function detrás de return, si hubiera usado otra línea el significado sería muy distinto. A mi criterio, la solución más legible es usar una variable intermedia (prescindible) como en la siguiente versión; obviamente, una vez entendido el comportamiento, la decisión corresponde al programador.

En el mismo sentido de evaluar una expresión como una función, es decir, devolver una función y no el valor que la función devuelve; en la línea 21 del último ejemplo (quedó en la 19 del anterior) se detiene con clearInterval la función llamada con setInterval. Para que actúe durante 30 segundos se difiere la detención con setTimeout, que a su vez necesita una función como primer argumento; para entregar como parámetro la ejecución clearInterval con la variable que contiene a la llamada periódica (y no la función clearInterval) es para lo que se crea la función anónima de la última línea.

La elección entre escribir el código integrando la definición de la función, más compacto (como en la línea 21) o usar una variable auxiliar, a mi juicio, más legible (como en las líneas 19 y 20) varía poco en el rendimiento y depende más de estilo y de legibilidad para su mantenimiento.

Para hacer pruebas con el código, antes de tener datos en el servidor, puede usarse un generador de valores aleatorios en el rango buscado o preparar tablas con valores controlados que se simulen el funcionamiento en las condiciones buscada. En el siguiente ejemplo se usa un sencillo generador de datos en todo el rango, por eso aparecen un poco exagerados.

Para hacer pruebas, puedes descargar el código completo del ejemplo formado por una página web escrita en HTML, el estilo CSS y el código JavaScript. Esto último es lo más relevante, ya que los otros componentes son sólo un soporte mínimo, muy simplificado y se encuentra mucho más desarrollado en los artículos de los apartados correspondientes.