>SCADA en un iPad

>Intro

El concepto de “aplicación web” (aquella que los usuarios pueden utilizar accediendo a un servidor web a través de Internet o de una intranet mediante un navegador) está cada vez más de moda. Una de las principales razones para ello, es que los navegadores son cada vez más versátiles y rápidos, y permiten difuminar cada vez más el límite entre aplicación nativa y aplicación web.

En lo relativo a la visualización, las últimas versiones de los navegadores cuentan con dos funcionalidades muy interesantes: “canvas” y SVG. Entre ambas, es posible realizar cosas que antes sólo podían realizarse mediante el uso de “plugins” como Flash.

Al hablar de “canvas“, hablamos de una de las nuevas funcionalidades de HTML5 (la última versión del lenguaje en el que se escriben las páginas web). Puede definirse como una zona en la que pintar (es decir, un “lienzo”), empleando para ello algo de javascript.  Por otro lado, SVG, es un formato de gráficos vectoriales.

De este modo, podemos decir que el nuevo ‘canvas’ y SVG, son tecnologías que permiten crear gráficos dentro de un navegador. Cada una tiene un enfoque distinto:

 - SVG: es un formato gráfico vectorial basado en XML. Su contenido puede ser estático, animado e interactivo, y es bastante sencillo de emplear para dibujar formas complejas. Es independiente de la resolución, como todo formato vectorial. En su contra tiene que puede ser lento para imágenes complejas.

 - Canvas: es un ‘lienzo’ en el que pintar mediante una API Javascript. Se basa en pixels, por lo que no hay nada en la API relativo a la animación. Tiene la ventaja de que puede ser acelerado (si el navegador lo permite) por la GPU del ordenador.

¿Canvas? ¿SVG? 


¿Y qué tiene que ver esto con un Scada o con iPad?

Buena pregunta…

Puestos a desarrollar algo, tiene sentido desarrollarlo con herramientas:
 - Que sean fáciles de usar
 - Que permitan sacar el mayor partido al desarrollo

Las tecnologías web cumplen estos requisitos, y especialmente el segundo, ya que al emplear tecnologías web podremos emplear nuestro desarrollo en plataformas muy diferentes (aquí se plantea un desarrollo para iPad, pero podrá adaptarse con poco esfuerzo a PC).



SCADA

El término “SCADA” proviene de las siglas “Supervisory Control And Data Acquisiton”. Se trata de un sistema que permite supervisar y controlar variables de proceso a distancia.

En uno de nuestros proyectos nos planteamos la posibilidad de realizar una visualización basada en navegador Web.

El esquema aproximado del sistema es el siguiente:

Los datos llegan a un servidor que los recoge y los presenta directamente en un navegador web. En este caso, ¿qué usar? ¿Canvas o SVG?

En nuestro caso, hemos optado por SVG, por su sencillez, el soporte de animaciones y porque permite realizar gráficos vectoriales, lo que hace que no pierdan calidad al ser escalados.

De esta forma, es posible emplear en el navegador gráficos SVG (dibujados mediante la herramienta de código abierto Inkscape, por ejemplo), y hacer que éstos se muevan y sean interactivos. Un ejemplo, sería un termómetro cuya “aguja” se mueve según la temperatura….

Si bien es posible trabajar con los gráficos SVG “a pelo”, lo lógico es emplear alguna librería que nos facilite la vida. En nuestro caso, nos quedamos con la fantástica Raphäel. Permite cargar figuras SVG, o dibujarlas al vuelo de forma sencilla.  Un ejemplo (extraído de su página) a continuación:

// Dentro del javascript de nuestro HTML… 

// Crear una zona de dibujo de 320 × 200 en la posición 10, 50var paper = Raphael(10, 50, 320, 200);
// Crear un objeto “círculo”, en x = 50, y = 40, con radio 10var circle = paper.circle(50, 40, 10);// Cambiar los atributos del círculo, y rellenarlo de rojo (#f00)circle.attr(“fill”, “#f00″);
// Cambiar atributos, y hacer que el trazo sea blancocircle.attr(“stroke”, “#fff”);

En resumen: con Raphäel y algo de SVG, podemos mostrar un dibujo/esquema/sinóptico/control/etc a nuestro gusto, e incluso animarlo.


iPad
Y finalmente llegamos al iPad. 
Todo lo indicado antes, al ser “tecnologías web” funcionan sin problemas en el navegador del iPad. En este punto, el principal inconveniente es el de la interacción con la aplicación. Es decir, por ejemplo: ¿cómo cambiar parámetros de nuestra aplicación? ¿Cómo acceder a la zona de configuración?…

Nuevamente, encontramos herramientas que resuelven el problema. En lo relativo a generar el interface de la aplicación web, hay varias opciones (como Dojo, Sencha o jQuery, entre otras), que actualmente disponen de versiones “mobile”. En otras palabras: empleando estos “framework” es posible generar interfaces que imitan el interface nativo de los dispositivos móviles (iPhone/iPad o Android).

Tras varias pruebas, hemos desechado por el momento Dojo (no está lo suficientemente maduro), Sencha (por razones de licencia) y hemos optado por jQuery Mobile (un framework para generar interfaces móviles, montado sobre jQuery). Se puede ver una demo completa aquí.


Conclusión
¿Y cómo queda todo esto mezclado?
Pues más o menos así:


En la demo, el interface no está conectado a ninguna instalación real, por lo que los valores numéricos están fijos, o se mueven al azar… pero es suficiente para hacerse una idea de cómo queda en la aplicación real (que por supuesto, sólo será accesible mediante el correspondiente usuario/password).

En el caso de que se quiera poder emplear la aplicación fuera del navegador (es decir, ejecutarla como aplicación nativa), podría emplearse PhoneGap, que permite “encapsular” una aplicación web en una aplicación nativa.

Y eso es todo por este post…
¡Un saludo!


Comments are closed.