Mejoras en sinópticos: Edición de eventos javascript.

sinoptico_tabla_etilos

 

Otra de las novedades introducidas en los sinópticos de Sofia2 es la inclusión de código javascript que nos permite editar varios de los eventos de los elementos que componen el sinóptico como por ejemplo onClick o onMouseOver y onMouseOut.

 

sinoptico_onClick

 

Como se puede ver en el ejemplo, podemos asignar clases a los elementos o cambiar sus atributos mediante javascript y jQuery.

sinoptico_tabla_etilos

 

Desde el menú “propiedades del sinóptico” en el editor, también podremos insertar código en javascript que se ejecute al cargar la página web (onLoad) o al recibir una instancia de Sofia2 (onData), en este caso recibimos como parámetro el dato que nos ha llegado.

 

Mejoras en sinópticos: Edición de eventos javascript.

Mejoras en Sinópticos: Internacionalización

sinoptico_i18n

Una de las mejoras realizadas en el módulo de sinópticos de Sofia2 es la internacionalización de los sinópticos.

 

Esto nos permite mostrar los sinópticos en diferentes lenguajes a través de la propia configuración de idioma de la consola o recibiendo en el parámetro lang en la url el lenguaje a mostrar.

 

En el editor de sinópticos, definiremos los textos empleando la notacion #{ } para que éstos sean internacionalizados.

sinoptico_i18n

Seguir leyendo “Mejoras en Sinópticos: Internacionalización”

Mejoras en Sinópticos: Internacionalización

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

sinoptico_tabla_estilo

 

Otra de las mejoras realizadas en el módulo de sinópticos de la plataforma es la inclusión de estilos externos 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.

sinopticos_css

De esta forma podemos personalizar aún más el aspecto de nuestro sinóptico, 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 de sinópticos 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 seleccionarlo podemos dibujar la región sobre la que vamos a 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