Internacionalización en Dashboard Sofia2

image1

 

En la nueva versión de Sofia2 se han incluido capacidades de internacionalización dentro de los dashboards. Esta característica es configurable desde el menú de edición del propio dashboard.

 

Mediante etiquetas, se pueden internacionalizar los diferentes elementos de texto del dashboard y visualizarlo a través de la configuración de idioma de la propia consola, o bien, a través del parámetro lang de la query, indicando el lenguaje requerido, que debe estar reflejado en el JSON de internacionalización mediante su referencia abreviada (en, es, pt…).

 

image2

image3

 

Este JSON de internacionalización tiene la siguiente estructura


{

"label1": {

"es": "Spanish text 1",

"en": "English text 1",

"pt": "Portuguese text 1"

},

"label1": {

"es": " Spanish text 2",

"en": " English text 2",

"pt": "Portuguese text 2"

},

"label3": {

"es": " Spanish text 3",

"en": " English text 3".

"pt": "Portuguese text 3"

},

….

}

 

Pudiendo tener cualquier número de etiquetas o idiomas reflejados en el mismo. Estas etiquetas habrá que incluirlas dentro de los diferentes elementos de texto con la siguiente sintaxis: #{label1} que será sustituida por el correspondiente valor internacionalizado.

Internacionalización en Dashboard Sofia2

Ejecución de código personalizado en Dashboards

image1

 

Siguiendo con las nuevas capacidades de los Dashboards de Sofia2, otra nueva posibilidad que se nos brinda, es la de ejecutar código javascript propio, para tener un acceso a más bajo nivel en nuestros dashboards, así como incluir nuevas interacciones, como por ejemplo botones que realicen ciertas tareas sobre el mismo o realizar cambios de estilado o la inclusión y eliminación de ciertos elementos.

 

Todo esto se puede programar en la nueva opción habilitada para ello, dentro del menú de dashboard, denominada Custom JS.

image2

 

Como se puede ver, este código tiene la posibilidad de usar jQuery, con lo que podremos acceder a diferentes elementos del dashboard o gadgets gracias a su sencilla sintaxis de selección. También, al igual que el estilado personalizado, este javascript se compartirá entre todas las páginas, por lo que habrá que tener esto en cuenta a la hora de usar esta funcionalidad.

 

A parte de ejecutar cierto código propio, un uso muy interesante es la combinación con el gadget markdown actual. Con este gadget, podemos crear contenido HTML como botones, selectores, checkboxs… combinado con la agilidad de usar bootstrap para ello y referenciar funciones que tengamos definidas en nuestro propio código javascript.

image3

Ejecución de código personalizado en Dashboards

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

Inyección de parámetros en Dashboards

image339

 

En la última release de Sofia2 se han mejorado las capacidades de integración de dashboards y gadgets en aplicaciones o webs. Uno de estos cambios, ha sido la posibilidad de pasar parámetros a los gadgets y dashboards de manera dinámica. Esta integración se apoya en los gadgets paramétricos que ya existían en Sofia2.

 

image1

 

Con esta nueva funcionalidad, se pueden integrar tanto gadgets como dashboards desde su url en sitios externos y, desde estos, refrescar el contenido de los mismos mediante parámetros de url.

 

image2

 

Existen dos formas de incluir estos parámetros a los gadgets:

  • Formato directo: sigue el siguiente formato y sustituye tanto en gadgets como dashboards todos los parámetros por nombre indistintamente.

          urlDashboard/Gadget?param1=value1&param2=value2

 

Gadgets:

image3

 

Dashboards:

  • Formato específico: sólo para dashboard. Con este formato podemos elegir que gadgets reciben un determinado parámetro dentro de un dashboard, con lo que podemos tener, por ejemplo, varias instancias del mismo gadget paramétrico y que cada una reciba un parámetro diferente. En este caso, se tiene que enviar una estructura más compleja en formato JSON sobre el parámetro “params” para indicar que gadget recibe un determinado parámetro o parámetros comunes a todos los gadgets. El formato es el siguiente:

image4

          urlDashboard/Gadget?params={‘idGadget1’:[{‘param1’:value1},{‘param2′: value2}],’all’:[{‘comun1’:value3},{‘param1’: value2}]}

 

Con la palabra reservada ‘all’ indicaremos que todos los gadgets recibirán un determinado parámetro. Si este parámetro ya lo tiene el propio gadget entonces tendrá preferencia el del propio gadget. En el caso anterior, si tenemos dos gadgets con IDs idGadget1 y idGadget2, el primero recibirá los parámetros:

  • param1: value1
  • param2: value2
  • comun1: value3

 

El segundo recibirá:

  • comun1:value3
  • param1:value2

image5

 

Los identificadores de Gadgets pueden obtenerse pulsando, en el modo edición del dashboard, las opciones del gadget.

image6

 

Si un gadget tiene más parámetros que los que recibe, entonces se pintará un formulario en su área de dibujado con los parámetros restantes para poder completar la lista.

Inyección de parámetros en Dashboards

Visual development in Sofia2 with Raspberry, Node-RED and Dashboards

6

We have already spoken in previous publications about Node-RED, a tool for visual editing and execution of flows.

In this post will be presented a set of nodes designed to interact with Sofia2 IoT Platform and will present a small demo using those nodes deployed on a Raspberry with a SenseHat sensor.

We will start presenting this set of nodes:

nodos1

We have a configuration node that has a global reach, that is, its state will be shared between flows. This node represents a shared connection with a remote system, in this case the configuration node is responsible for creating the connection (REST or MQTT) and make it available to the other nodes.

As for the other nodes are the performers of the operations of insertion, update, deletion, queries and release of the connection.

The nodes are available in Sofia2’s Github, in the npm repository and in the official Node-RED page.

Next we will develop two flows using the Node-RED tool, one of them will be deployed in a Raspberry Pi and another in Sofia2 IoT Platform:

nodos2

The flow of the Raspberry Pi will trigger the process:

nodos3

  • A node controls the SenseHat sensor data that we have integrated with our Raspberry Pi, and triggers the flow every second with temperature, pressure and humidity data.
  • A function node performs a data processing to generate a JSON instance that matches the ontology that is registered in Sofia2.
  • One of the nodes previously presented, will be responsible for sending a message to Sofia2 IoT Platform with the data obtained from SenseHat to the ontology and will be stored in the Real Time Database, which will feed us later the Dashboard.

The flow in Sofia2 IoT Platform

flujoNodeRed

We have a flow that consists of two parts:

  • On the one hand we have a node that retrieves from an Internet service the temperature of Madrid. This data is stored in the context at the flow level.
  • On the other hand we have a node listening the events received from the Raspberry to the ontology in which the data obtained from the SenseHat board are being inserted. In this flow a simple calculation will be made to obtain the difference of temperatures, in addition a rule will be created in which if that difference exceeds a certain threshold a tweet will be sent. Note that the temperature variation data will also be stored in another ontology in Sofia2, so that you can then feed the Dashboard.

Once the demo is in progress, we create a Dashboard on the Platform, which represents the data of temperature, pressure and humidity, collected from the SenseHat sensor, and also the data of the calculated temperature variation.

nodos5

This Demo is available in a guide format at the following link:

https://github.com/Sofia2/meetups/tree/master/Taller-IoT-NodeRED

Visual development in Sofia2 with Raspberry, Node-RED and Dashboards