Cómo construir una funcionalidad básica de visualización tipo SCADA sobre SVG con Sofia2

A continuación os mostraremos un ejemplo de cómo con Sofia2 se puede construir una funcionalidad básica de visualización tipo SCADA.

Para el ejemplo utilizaremos:

· SVG como Representación vectorial de nuestros elementos gráficos. SVG es un formato vectorial que entre otras ventajas funciona en HTML5. (Qué es SVG). Los SVG se pueden construir visualmente con herramientas gratuitas como inkscape o incluso con editores web como svg-edit.

· API Javascript que nos permite suscribirnos a inserciones de ontologías MoteSensor (temperatura, húmedad,…)

· UIs en HTML para producir datos y para representar el SVG y cambiar la representación de los elementos en esto en base a los cambios en la ontología MoteSensor.

Veamos el ejemplo:

Tenemos primero el producto de información:

http://sofia2.com/demos/svg_widget_demo/productor.html

que lo que hace es enviar instancias de la ontología MoteSensor con los valores de temperatura, humdad y batería indicados en el HTML:

Primero debemos pulsar el botón Conectar SIB y luego Enviar.

Por otro lado tenemos el consumidor de información:

http://sofia2.com/demos/svg_widget_demo/index.html

En este HTML podemos cargar diferentes SVGs, por defecto el sensors.svg (http://sofia2.com/demos/svg_widget_demo/resources/sensors.svg)

También tenemos disponibles:

· resources/battery.svg

· resources/temperature.svg

· resources/sensors.svg

En el UI HTML podemos vincular los diferentes elementos del SVG con uno o varios atributos de una ontología, y definir condiciones para esos atributos que modifiquen las propiedades de los elementos del SVG.

Algo como:

En el ejemplo usamos la ontología MoteSensor que tiene como atributos humidity, temperature y battery, y tres svg disponibles para el ejemplo.

Se pueden cambiar propiedades como el color, linea, visibilidad etc, o vincular un texto al valor del atributo.

1. Existen diferentes elementos dentro de un svg como pueden ser path, ellipse, circle, image, text, etc…

Mas info en https://developer.mozilla.org/en-US/docs/Web/SVG/Element#Basic_shapes

Dependiendo del elemento svg tendrá unas propiedades u otras. (fill, stroke, stroke-width, visibility, etc)

*setText solo funcionará en elementos tipo Text y no hace falta establecer condición(si queremos que se cumpla siempre) ni acción.

Ejemplos de acciones:Ejemplo

Por ejemplo si establezco esta regla y conecto:

Cuando desde el productor pulsemos enviar datos (con Temperatura mayor que 30) nuestro elemento cambiará de color.

Podemos poner más reglas para establecer una operativa más compleja:

Y obtener un SVG completamente animado:

Cómo construir una funcionalidad básica de visualización tipo SCADA sobre SVG con Sofia2

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s