Concepto Plantillas Gadget

MuestraGrafoEs.JPG

En esta release se ha incorporado una nueva funcionalidad que permite disponibilizar cualquier gadget de tipo HTML5 como una plantilla. Es decir, ya no es necesario que un usuario que quiera crear un gadget HTML5 tenga conocimientos sobre HTML ni JavaScript al poder partir de un código guía ya estructurado por un usuario experimentado. A modo de muestra, un usuario sin conocimientos previos es capaz de generar este gadget a partir de una plantilla:

MuestraGrafoEs.JPG

Seguir leyendo “Concepto Plantillas Gadget”

Concepto Plantillas Gadget

Adquisición, transformación y consumo de datos GSMA/FIWARE Data Model

flujoDeconexion

En el post Cómo trabajar con Data Model FIWARE/GSMA en Sofia2 vimos cómo la plataforma Sofia2 soporta los Data Models GSMA y FIWARE. Aprendimos cómo crear Ontologías conforme a estos modelos y cómo insertar datos y consultarlos mediante la herramienta disponible en la plataforma Consola BDTR y BDH. También vimos cómo publicar esta Ontología como un API RESTFul y cómo consumir el API.

 

Además, disponemos del documento Uso de FIWARE Data Model y publicación API NGSI9donde se explica cómo consumir APIS modeladas conforme semántica FIWARE Data Model y publicadas en la Plataforma siguiendo el protocolo NGSI-9.

 

Para el ejemplo se utilizan las Ontologías:

  • GSMA_OffStreetParking_Destino
  • GSMA_PointOfInterest_Beach
  • GSMA_PointOfInterest_Museum

 

Paso a paso se explica cómo suscribirnos a éstas Ontologías, cómo consultar sus Datos mediante la Consola BDTR y BDH, cómo suscribirse a APIs NGSI-9 y consumirlas mediante el portal del desarrollador del API Manager y cómo acceder a estas APIs vía Curl.

 

consumoDatos

 

Con toda esta información, y conociendo que Sofia2 permite crear Reglas Scripts (se aconseja leer el documento Guía de Uso Motor Scripting Sofia2) que se ejecutarán ante la llegada de instancias de Ontologías o cada cierto tiempo, es fácil entender cómo podemos recibir datos con una estructura determinada y transformarlos para cumplir con estos Data Models. 

 

Lo comprobaremos mediante el siguiente flujo:

flujoDeconexion

 

En este ejemplo, se recogen datos de parkings de Smart Coruña, se ingestan en la plataforma Sofia2 a una Ontología, cada vez que se recibe una instancia de esta ontología se lanza un Script que transforma estos datos adaptándolos a los Data Model y consultándolos, vemos como efectivamente, se cumple con los Data Models GSMA y FIWARE.

 

ejemploparking

Adquisición, transformación y consumo de datos GSMA/FIWARE Data Model

Mejoras en sinópticos: Inclusión de estilos css.

sinoptico_tabla_estilo

 

Otra de las mejoras realizadas en el módulo SCADA de sofia2 es la inclusión de estilos mediante css.
sinoptico_tabla_estilo

Desde el menú “propiedades del sinóptico” en el editor, podemos introducir nuestra hoja de estilos para definir clases, colores, tipografía, animaciones o transparencias que aplicar a los elementos del sinóptico.

 

De esta forma podemos personalizar aún más el aspecto de nuestro SCADA, por ejemplo,  dándo estilos a las tablas insertadas con el nuevo tag.

 

 

Mejoras en sinópticos: Inclusión de estilos css.

Mejoras en sinópticos: Soporte a tablas

sinoptico_tabla

 

En las últimas releases se han ido incorporando una serie de mejoras en el módulo scada de la plataforma sofia2. Una de ellas es el soporte a tags de tipo tabla.

 

En el editor de sinópticos, se ha incluido un nuevo componente tabla. Al seleccinarlo podemos dibujar la región sobre la que vamos incluir nuestra tabla y asignarle el tag.

sinoptico_editor_tabla

A través de los tags relacionamos los elementos del sinóptico con los datos insertados en nuestra ontología. En la instancia insertada se indica el tag y la medida y ésta se actualiza en nuestro HMI.

Con el soporte a tablas, se permite que se envíen para un único tag un array de medidas que se mostrarán en formato tabla.

 

Como ejemplo, insertaremos los datos a representar en la tabla de la siguente manera:

  {
    "Feed": {
      "tagId": "tabla", 
      "timestamp": {
        "$date": "2017-06-04T12:14:28.117Z"
      }, 
      "measure": {
        "measure": [
          ["", "Temperatura", "Nivel"], 
          ["Deposito Agua", "38,01", "83,45"], 
          ["Pozo Bombeo", "95,34", "47,47"],
          ["Cocción", "81,54", "81,55"]
        ] 
      } 
   } 
}

Dándonos como resultado la siguente tabla:

sinoptico_tabla

En siguientes post veremos como aplicar estilos a la tabla y al sinóptico.

Mejoras en sinópticos: Soporte a tablas

Tutorial desarrollo de un mapa 3D interactivo con Sofia2

image1

En el siguiente tutorial vamos a ver cómo realizar un mapa 3d interactivo en Sofia2. Para ello, vamos a utilizar la potente tecnología de visualización en nodejs CesiumJS.

image2

Usaremos el API JavaScript de Sofia2 para acceder a varias ontologías que representan 3 tipos de puntos en el mapa sobre la geografía de España, con sus datos asociados:

  • Playas: GSMA_PointOfInterest_Beach
  • Museos: GSMA_PointOfInterest_Museum
  • Parkings: GSMA_OffStreetParking_Destino

Las instancias de estas ontologías estarán georreferenciadas por lo que tendrán un atributo de tipo geometry que representará la posición.

El primer paso, será descargarnos e instalarnos NodeJS y CesiumJS que servirá como base para poder empezar a trabajar. Desde los siguientes enlaces, podemos descargarnos ambas herramientas:

Una vez que tenemos el CesiumJS instalado correctamente, podemos arrancarlo con el siguiente comando:


node server.js

Dentro de la carpeta Apps se podrán ver todas las aplicaciones y ejemplos que vienen con CesiumJS. Podremos navegar por las mismas con el servidor arrancado desde nuestro navegador, con lo que podremos acceder a través de la url y el puerto por defecto que tiene: localhost:8080

image3

image4

Con todo lo anterior hecho, vamos a crear un nuevo HTML que alojará el visor 3D DGSMA.html y un subdirectorio para los archivos necesarios “datosGSMA” del mismo. Quedará la siguiente estructura:

image5

Dentro de la carpeta de datosGSMA tendremos varios subdirectorios:

image6

  • Conexión: script en lenguaje javascript para la conexión con Sofia2, donde se alojan los datos de conexión, así como las diferentes queries que se lanzarán a la plataforma para recuperar los datos necesarios del ejemplo.
  • Css: hoja de estilos para el ejemplo
  • Imágenes: archivos de imagen tanto para los iconos como para el fondo

Todo el código e imágenes, lo podéis descargar desde el github de la plataforma https://github.com/Sofia2/Sofia2-3DViewer

Dentro del archivo HTML principal tendremos varias partes interesantes que vamos a explicar a continuación:

image7

Cómo se ve en la imagen, tendremos un contenedor completo que alojará el mapa en el fondo con un identificador “cesiumContainer”. Este elemento, englobará al mapa que estará en el fondo de la página.

También, tenemos otras partes de estructura interesantes, como los paneles lateral e inferior donde alojaremos los gráficos de los parkings, así como un panel overlay que se nos mostrará durante la carga del visor 3D. Como se puede ver en las importaciones de librerías en la parte de la cabecera, los gráficos están construidos en SVG sobre D3 a través de la librería NVD3 http://nvd3.org/.

Otras partes a destacar son la propia carga del visor de CesiumJS:

image8

La función startup se llamará al inicio de la carga del visor con todas las opciones necesarias para el mismo, que se dibujarán en el div completo de fondo con todos los elementos visuales e interactivos que dispone la demo. A la vez que se cargan estos datos se realizará la conexión contra Sofia2, la cual se realiza desde el js de la carpeta conexión conexionAdministrador.js

En este archivo se puede ver la conexión “Join” con la plataforma sofia2

image9

Así como las diferentes queries que se lanzan para recuperar los datos necesarios que se dibujan en el mapa.

image10

Volviendo al código principal, para combinar los datos de Sofia2 con los de CesiumJS tendremos que construir las entidades de visualización de CesiumJS. Estas entidades, son las estructuras que usa CesiumJS para dibujar diferentes elementos tanto interactivos como no en el mapa. Por cada tipo de datos a mostrar (playas, parkings y museos) se rellenarán los datos necesarios desde las instancias recuperadas por el API JS incluida la posición de los mismos en el mapa. En esta parte también se incluran las referencias correspondientes a las imágenes de los marcadores.

image11

Una vez creadas y dadas de alta esas entidades en CesiumJS, el propio motor se encargará de colocar estos elementos en el mapa, así como actuar mostrando un overlay con los datos al hacer clic en cualquiera de los marcadores.

Para poder mostrar y ocultar estos marcadores, poseemos el panel lateral, donde al hacer clic en una capa de datos podremos ponerlos o quitarlos del mapa.

image12

A parte de las interacciones con las diferentes capas (las cuales se actualizarán creando o destruyendo las diferentes entidades en el motor), se realizará un “vuelo” en el mapa a las nuevas localizaciones incluidas o al mapa general (al desmarcar). La clave de esto es la función flyTo de la cámara del viewer que realizará un suave vuelo a la posición pasada por parámetro.

image13

Por último, en la parte de gráficos, como ya hemos comentado se ha usado nvd3 (librería sobre D3) por lo que una vez recuperados los datos necesarios de Sofia2, podremos hacer la llamada a la librería de nvd3 que se encargará de pintar tanto el gráfico de tipo Pie como el gráfico de tipo barra con los datos de los diferentes parkings.

image14

image15

Tutorial desarrollo de un mapa 3D interactivo con Sofia2

Ejemplo APIS NGSI v2 en Sofia2

ngsi8Una de las capacidades del API Manager de Sofia2 es permitir exponer ontologías como entidades para ser consultadas mediante el protocolo NGSI v2.

En este post vamos a mostrar como crear una pequeña aplicación que realiza consultas a Sofia2 mediante el protocolo NGSI v2.

Una entidad NGSI tiene siempre dos atributos obligatorios:

  • id: identificador único de la entidad.
  • type: define el tipo de entidad.

De manera que para exponer con el API Manager de Sofia2 una ontologia como API NGSI v2 es necesario que disponga al menos de dichos atributos.

Seguir leyendo “Ejemplo APIS NGSI v2 en Sofia2”

Ejemplo APIS NGSI v2 en Sofia2

Estilado personalizado en Dashboards Sofia2

image3

Una de las nuevas capacidades más importantes de los Dashboards de Sofia2 es la posibilidad de incluir y editar código de la hoja de estilos (css) en los mismos. Con esta característica, podemos estilar los dashboards de manera profesional, incluyendo cambios de imagen, transparencias, colores, animaciones, eliminar u ocultar elementos que no nos interesen… con toda la potencia que nos brinda este lenguaje de marcado.

 

Todo esto, se ha posibilitado gracias al remodelado del menú de edición de estilos, donde ahora, al pulsar en uno de los estilos predeterminados, podemos ver y editar en vivo el css que contiene. Este css será posteriormente inyectado al dashboard con todo nuestro estilado personalizado.

image1image2

Adicionalmente a esto, también es posible incluir uno o varios estilos externos por url. Mediante el nuevo parámetro de query styles se pueden incluir las referencias a archivos css externos separados por comas que se irán incluyendo en orden en el dashboard. Estos estilos sustituirán a los estilos base del dashboard. Hay que tener en cuenta que los propios elementos del dashboard tienen estilados de posiciones o tamaños por lo que es recomendable partir de un css de los dashboards actuales y a partir de ahí mantenerlo como estilo base.

urlDashboard?styles=url1.css,url2.css

Estilado personalizado en Dashboards Sofia2