Introducción

El acrónimo SCADA viene del inglés “Supervisory Control And Data Acquisition” (Supervisión, Control y Adquisición de Datos). Es un concepto que se emplea para realizar un software que permite controlar y supervisar procesos industriales a distancia.

Se ha incluido la funcionalidad para poder crear sinópticos sobre el motor de dashboard.

Con esto se consigue que podamos definir sinópticos y utilizar toda la potencia actual que nos proveen los gadgets que hasta ahora usábamos en el desarrollo de dashboads.

Creación de un Sinóptico

Crearemos un sinóptico de ejemplo, donde se muestra parte de un proceso industrial con dos depósitos:

Para lo cual tendremos que realizar varios pasos en la plataforma. Crearemos:

• Una ontología,

• Un datasource,

• Un cliente digital,

• Una simulación del cliente digital y

• Un sinóptico.

Creación de la Ontología

Para este ejemplo nos basta con una ontología, que contendrá la información que se irá recogiendo del cliente digital y posteriormente se mostrará en el sinóptico.

Seleccionaremos en el menú:

Open

Pulsamos el botón CREATE 

Luego para la creación de la ontología utilizaremos la opción que más nos convenga.

Para el ejemplo hemos creado la ontología “deposits”.

Éste es su esquema:

Creación del DataSource

El siguiente paso será definir un datasource para nuestra ontología.

Para lo cual seleccionamos en el menú

Y pulsamos CREATE

Open

Rellenamos la información del datasource de la siguiente forma para obtener los datos de la ontología como más nos conviene.

Como se ve en la imagen hay que tener en cuenta limitar los valores a 1, poner un tiempo de refresco bajo para que los datos se refresquen más frecuentemente, y al final de la query añadir “order by contextData.timestampMillis desc“, para que nos muestre siempre el último dato insertado en la ontología.

Creación del Digital Client

A continuación, creamos un cliente digital.

Pulsamos el botón CREATE y rellenamos el formulario añadiendo la ontología que hemos creado inicialmente al listado de ontologías, dándole como acceso ALL.

Creación del Simulador

El siguiente paso es crear un simulador para el cliente digital. Este paso, aunque opcional, es conveniente puesto que nos permite simular la entrada de datos desde el cliente a la ontología, que luego visualizaremos en el sinóptico. Posteriormente podemos detener la simulación cuando el cliente obtenga datos reales.

En el menú pulsamos:

Y luego el botón CREATE.

Rellenamos el formulario seleccionando el cliente digital  y la ontología creado previamente.

Luego para cada property, se define como queremos que se generen los datos para nuestro ejemplo:

Creación del Sinóptico

Con todos los elementos previos creados, vamos a crear nuestro primer sinóptico:

Pulsamos en el menú:

Pulsamos el botón:

Rellenamos el formulario, con una identificación y una descripción nos basta pulsamos new.

Se abre la pantalla con el editor de sinópticos. Es similar a la de edición de dashboards aunque tiene nuevos elementos :

Estos elementos son :

• Botón guardar sinóptico, hace un guardado temporal del sinóptico. Si no guardamos el dashboad antes de salir, se perderán los cambios, en versiones posterior a la 1.5.0 no existe este botón.

• Oculta el editor del sinóptico, si no hemos guardado el sinóptico se perderán los cambios que se hagan sobre él.

• Menú sidenav derecho, contiene todas las herramientas pintar y dar funcionalidad al sinóptico. Podemos clicar sobre él o arrastrarlo, para mostrar u ocultarlo.

Si lo desplegamos, tiene cuatro secciones.

• DRAW: son las herramientas de dibujo que nos permiten añadir nuevos elementos como imágenes pre diseñadas, cuadrados, rectángulos, círculos, líneas…

• ELEMENTS: muestra las propiedades del dibujo que podemos modificar para los elementos que tengamos seleccionados, por ejemplo de un rectángulo.

• PROPERTIES: En esta sección damos funcionalidad a los distintos elementos seleccionándolos. Inicialmente hay tres tipos de componentes:

  • Indicator: Es un elemento del sinóptico que cambia de color en función de un valor de corte que asígnemos.

  • Progress bar: Se puede asignar a elementos del tipo cuadrado o rectángulo. Como el indicador, puede cambiar de color en función de un valor de corte. Además crece porcentual mente en función del valor que se asigne y los limites superior e inferior que le indiquemos

  • Label: Si creamos un elemento tipo texto y le asignamos esta clase, podemos hacer como con los dos componentes anteriores y cambiar su color en función del valor de corte, y podemos definir un parámetro del datasource para mostrar su valor.

A estos componentes podemos asignarles cualquiera de los datasources que tengamos disponibles y cualquiera de sus atributos.

En el apartado TOOLS:

Tenemos un menú desplegable para tratar ficheros y las capas del dibujo.

Tras esta breve descripción del editor continuamos con el ejemplo:

Creamos las imágenes del sinóptico en formato svg. Para esto podemos utilizar el editor o cualquier aplicación de escritorio o web que genere imágenes vectoriales, ya que las podemos importar de múltiples maneras. Una de ellas es pulsando en el botón 

Nos aparece una ventana modal con el código de nuestra imagen. Al principio aparece como una imagen svg vacía. Si ya tenemos una imagen, podemos pegar el código svg aquí y pulsar OK.

Al cerrar la modal, veremos nuestra imagen:

En nuestro ejemplo añadiremos dos progress bars, una para el pumping well y otra para el refrigerated water tank.

También añadiremos labels para el flow, temp level …

• Crear un progress bar.

Clicamos sobre el botón . Entonces pintamos la figura dentro del pumping well, con la orientación que se indica para que crezca hacia arriba.

1. Luego en PROPERTIES lo rellenamos de la siguiente manera:

   1. Asignamos la clase progress_bar, seleccionamos el datasource y en progressBar Attributes seleccionamos el parámetro deposits.level1 y asignamos un min y un max y el tipo de crecimiento vertical para que crezca hacia arriba.

• Crear un label:

Pulsamos el botón 

1. Escribimos por ejemplo *** para que se vea como valor inicial.

3. Luego vamos al apartado PROPERTIES.

4. Marcamos la clase label.

5. Seleccionamos el datasource un color attributes y un textAttributes que será el valor que se muestre.

Aplicamos esto para cada elemento label o progressbar.

Guardamos el sinóptico y pulsamos sobre hide editor. Pulsamos en guardar dashboard para no perder los cambios si salimos del dashboard.

Tras pulsar en hide editor ya vemos cómo se van cargando los valores en nuestro sinóptico.

Además, hemos creado un par de gadgets que muestran en tiempo real las últimas 50 temperaturas y niveles registrados.