Todos los atributos de una vista gráfica y sus puntos asociados pueden ser editados en la página de edición de la vista gráfica. Las vistas contienen una biblioteca de componentes de ver, que pueden ser estáticos o dinámicos basados en uno o más puntos.
Todas las vistas están referidas por un nombre que aparece en la lista desplegable. Este nombre debe ser único, aunque no es obligatorio. Una vista puede tener una Imagen de fondo en la que se superpongan sus componentes. Se puede utilizar cualquier tipo de imagen como imagen de fondo, incluyendo los formatos GIF, JPEG y PNG. La opción Acceso anónimo permite a los usuarios no identificados acceder a la vista. La opción Set significa que los usuarios anónimos pueden establecer valores ajustables para los puntos de vista. Lectura significa que los usuarios anónimos pueden acceder a la vista pero no cambiar los valores. Ningun niega el acceso a los usuarios anónimos.
Los componentes pueden ser añadidos a la vista, seleccione un componente de la lista y haga clic en el icono . Por defecto, los nuevos componentes se colocan en el centro de la vista, pero pueden ser movidos por arrastrar y soltar en cualquier lugar dentro de los límites del fondo. Tenga en cuenta que los puntos añadidos pueden superponerse. Al editar la vista, los componentes se escriben en el orden en que se definen. Si los componentes se superponen, el comportamiento de estas superposiciones puede verse afectado.
Seleccione el componente HTML para añadir contenido estático. Por defecto, el icono representa el contenido. Estos componentes son independientes de los valores de los puntos, aparecen cuando la página se carga y no cambian más. Arrastre el elemento al lugar deseado. Para editarlo, coloque el cursor en el elemento y muestre los controles de edición. Para editarlo, haga clic en el icono
) e introduzca un código html válido. El contenido se incluirá completamente en la vista, así que cualquier código HTML válido (incluyendo el código Javascript) puede ser usado. Puedes definir los estilos directamente o utilizar las clases de estilo CSS de los archivos referenciados. Por ejemplo, para añadir una etiqueta, se pueden utilizar los siguientes elementos:
<span style="background-color:yellow;font-size:25px;font-weight:bold;border:2px solid orange;">Mi etiqueta</span>
Esto mostrará : Mi etiqueta
El contenido estático también puede referirse a otros servidores. Por ejemplo, puede colocar una imagen externa en sus vistas:
<img src="http://bluebrain.epfl.ch/webdav/site/bluebrain/shared/21june_06_singleNeuron_200.jpg"/>
Esto se mostrará:
La visualización de todos los demás componentes de la lista depende de uno o más puntos. Una vez que se añade el componente en la vista, se representa por defecto con el icono genérico ()hasta que el componente tiene suficiente información para ser mostrado correctamente. Esta información depende del tipo de componente. En el modo de edición, la pantalla de visualización es la misma que en el modo de uso. Durante su creación se muestra y actualiza un punto para que el usuario sepa exactamente cómo aparecerá el punto en la vista.
Puedes cambiar la visualización de un componente pasando el ratón sobre el componente, esto mostrará los comandos de edición. En el modo de edición, los controles visualizados son diferentes de los de la página visualizada, excepto el control de información (), que muestra el valor puntual actual y el tiempo de actualización.
Los atributos de un punto de vista se pueden establecer haciendo clic en el icono (). Aparece un panel de edición que permite reemplazar los atributos del punto de vista. Por ejemplo, puede cambiar un punto ajustable a un punto no ajustable en la vista (lo contrario no es cierto, un punto no ajustable no puede ser ajustable). También es en este panel donde definiremos el punto o los puntos a mostrar. Los puntos propuestos en la lista desplegable dependen del tipo de componente elegido.
La visualización de un punto se puede cambiar haciendo clic en el icono (). Aparece un panel que permite cambiar la visualización del punto. Por ejemplo, el componente GIF analógico puede ser usado para mostrar el valor numérico de un punto. Rellena los valores Min y Max, las imágenes se distribuirán uniformemente en el rango digital y se mostrarán correctamente. Un GIF binario sólo está disponible para los puntos binarios, y mostrará una de las dos imágenes disponibles dependiendo del valor actual del punto. Los gifs animados también son aplicables para representar el estado de funcionamiento de un dispositivo (cuando está funcionando o no). Se puede añadir un texto a la representación de un punto marcando la opción Mostrar texto. Simple punto Muestra sólo el texto del punto.
El componente GIF Dinámico es similar al GIF analógico en el sentido de que puede mostrar el valor digital de un punto, pero en lugar de elegir un conjunto de imágenes dibuja dinámicamente el indicador del valor. Por ejemplo, el puntero puede ser dibujado en la imagen única de un reloj. Para añadir un elemento dinámico, añada una subcarpeta en la carpeta "gráficos", en esta nueva carpeta coloque sus propias imágenes y un archivo info.txt asociado. Luego agregue una función en el archivo "resources/view.js". El nombre de la función debe ser el nombre de la carpeta creada anteriormente. Ver por ejemplo el GIF Dial.
Server script se utiliza para definir su propia lógica de visualización. El lenguaje de scripts utilizado es JavaScript, también conocido como ECMAScript. (La especificación completa del ECMAScript está disponible aquí aquí.) Sin embargo, no hay objetos de "ventana" o "documento" disponibles ya que el script se interpreta en el lado del servidor y no en el navegador. En cambio, el valor actual del punto está disponible a través de la variable valor , y la marca de tiempo de la muestra a través de la variable tiempo. Además, las variables puntoComponente y punto también están definidas, con valores similares a "htmlTexto" y "renderizadoTexto". Por último, en "eventos" se enumeran los eventos actualmente activos y "hasUnacknowledgdEvent" es un valor booleano que indica si no se reconoce al menos uno de los eventos activos.
Cualquier valor puede ser devuelto por el guión y mostrado de forma sencilla, pero es más interesante insertar código HTML en el guión. Por ejemplo, el siguiente guión mostrará un mensaje parpadeante cuando el valor del punto sea "1" (interpretado por "true" por el guión):
if (value) return '<blink><span style="background-color:orange;font-size:15px;font-weight:bold;">Advertencia: el punto está encendido</span></blink>'; return "";
Tengan en cuenta que en la página de edición, si el guión no devuelve nada, se mostrará el icono para acceder al control de los puntos (el ratón sobre el icono).
La marca de tiempo de la muestra se da en milisegundos con el 1 de enero de 1970 como origen. Se puede convertir en un objeto de fecha ECMA con el siguiente código:
var d = new Date(); d.setTime(time);
El objeto de fecha "d" puede ser usado si es necesario en la continuación del guión:
Los puntos de vista pueden ser eliminados haciendo clic en el icono (), pasando por encima del punto con el ratón.
Todos los cambios de una vista se guardan sólo con el botón Save. En caso de cambios erróneos en la vista, haga clic en el botón Cancel. Para borrar una vista, haga clic en el botón Borrar.