Guia Implementación SoMachine V4.1 WebVisu

Guía de Implementación Personalización de páginas web en SoMachine

Producto y Versión: M241/M251 SoMachine V4.1 Revisión

Fecha

Autor

1.0

01/04/2015

Cynthia Garibo Pérez

Centro de Competencia Técnica

Modificaciones

Primera versión

M241/M251: Personalización de páginas web en SoMachine Índice:

1. Añadir una visualización > Crear una visualización > Añadir Añadir una visualización web

2. Configurar una visualización > Insertar objetos > Modificación de variables > Paneles > Gestión de usuarios

3. Acceder a una visualización 4. Consideraciones y compatibilidad

M241/M251: Personalización de páginas web en SoMachine Índice:

1. Añadir una visualización > Crear una visualización > Añadir Añadir una visualización web

2. Configurar una visualización > Insertar objetos > Modificación de variables > Paneles > Gestión de usuarios

3. Acceder a una visualización 4. Consideraciones y compatibilidad

Contenidos  Añadir una visualización Configurar una visualización  Acceder a una visualización Consideraciones y compatibilidad

1. Añadir una visualización ● Visualización web:

La visualización web de CODESYS es un cliente basado en los códigos HTML5 y javascript que se comunica con el servidor web integrado en el controlador y muestra la visualización en cualquier sistema de visualización. Se puede utilizar si existe un objeto de visualización web insertado bajo el gestor de visualización de la aplicación.

1.1 Crear una visualización ● Añadir una visualización:

 Añadir un objeto a la aplicación, del tipo Visualización. De esta manera añadimos también el Gestor de Visualizaciones automáticamente.

1.1 Crear una visualización ● Añadir una visualización:

En la pestaña Herramientas podemos ver la visualización y el Gestor de visualizaciones

1.2 Añadir una visualización web ● Añadir una visualización web:

Pulsar botón derecho en VisualizationManager Seleccionar WebVisualization

1.2 Añadir una visualización web ● Parámetros de la visualización web:

- Visualización inicial - Nombre del archivo .htm de la visualización

Contenidos  Añadir una visualización Configurar una visualización  Acceder a una visualización Consideraciones y compatibilidad

2. Configurar una visualización ● En la caja de herramientas de la visualización podemos encontrar los

siguientes objetos:

2.1 Insertar objetos ● Insertar una lámpara: seleccionar la lámpara y cambiar a la ventana

Propiedades ● Variable:

seleccionar la variable

● Color: abrimos el desplegable y

elegimos entre las opciones que tenemos

2.1 Insertar objetos ● Insertar un interruptor: seleccionar el interruptor y cambiar a la ventana

Propiedades ● Variable:

seleccionar la variable

● Color: abrimos el desplegable y

elegimos entre las opciones que tenemos

2.1 Insertar objetos ● Insertar un medidor: seleccionar un medidor y cambiar a propiedades ● Valor:

seleccionar la variable

● Color: abrimos el desplegable y

elegimos entre las opciones que tenemos ● Escala: definimos el rango de valores, las subdivisiones de la escala…

2.1 Insertar objetos ● Insertar una imagen propia:

Seleccionar y arrastrar a la zona de visualización la herramienta imagen Cerrar la ventana que aparece para seleccionar la imagen entre las precargadas. Botón dcho  Crear la colección global de imágenes •

•

•

2.1 Insertar objetos ● Insertar una imagen propia:

 Abrir la colección global de imágenes (pestaña aplicaciones--> carpeta Global--> Global Image Poo)  Añadir nuestras imágenes

•

•

2.1 Insertar objetos ● Insertar una imagen propia:

Volvemos al recuadro vacío de la imagen En el campo ID estático seleccionamos la imagen insertada (en categorias habrá aparecido GlobalImagePool) • •

2.1 Insertar objetos ● Visualizar un valor numérico:

Insertar un elemento base como un Rectángulo Texto: las variables se escriben según el tipo. %d= número decimal

•

2.1 Insertar objetos ● Visualizar un valor numérico:

Insertar un elemento base como un Rectángulo

•

● Text Variable: click en el recuadro que

aparece a la derecha y seleccionar la variable que queremos ver en Text

2.2 Modificación de variables ● Modificar una variable: realizar las operaciones para insertar y configurar

un recuadro, siguiendo los pasos de las diapositivas anteriores

● Configuración de entrada: configurar

OnMouseDown para realizar una acción al pulsar en el recuadro

2.2 Modificación de variables ● Modificar una variable: configurar la acción que se realizará cuando

pulsemos en el recuadro.

● Editar tipo: elegir como modificamos el valor:

- Mediante el teclado - Con un teclado numérico emergente - Con un teclado alfanumérico emergente

2.2 Modificación de variables ● Modificar una variable: configurar la acción que se realizará cuando

pulsemos en el recuadro.

● Elegir la variable a editar  ● Determinar el rango de

valores de la variable

2.3 Paneles ● Cambiar de panel: configurar la acción que se realizará cuando pulsemos

en el recuadro. ● Insertamos un recuadro ● Configuramos las propiedades:

Text: escribimos lo que debe mostrar el recuadro. P.E: Siguiente, Panel 2…

Configuración de entrada  OnMouse Down

2.3 Paneles ● Cambiar de panel:

● Seleccionamos la acción:

 Asignar un panel concreto Panel anterior Panel siguiente

2.3 Paneles ● Crear un panel emergente: creamos una visualización nueva y la

diseñamos ● Definimos que es un panel emergente en lugar de una visualización: » Abrimos propiedades de la visualización » Pestaña visualización » Usar visualización como: diálogo

2.3 Paneles ● Usar un panel emergente:

Creamos un recuadro y definimos las opciones de entrada Seleccionamos Abrir o cerrar diálogo según la función que necesitemos •

Seleccionamos el panel emergente •

2.4 Gestión de usuarios ●  Abrimos Gestor de visualización ●  Pestaña Administración de usuarios ● Crear una gestión de usuarios vacía ● Crear una gestión de usuarios prediseñada

2.4 Gestión de usuarios ●  Gestión de usuarios: definimos los parámetros

Definimos los grupos de usuarios y los permisos.

•

Definimos los usuarios, a que grupo pertenecen y sus contraseñas.

•

2.4 Gestión de usuarios En este caso vamos a habilitar el acceso al panel 3 para cualquier usuario registrado. Sin registro no podremos ver el botón de panel 3. •

Realizamos el botón de cambio de panel y le añadimos derechos de acceso: operable, solo visible o invisible •

Contenidos  Añadir una visualización Configurar una visualización  Acceder a una visualización Consideraciones y compatibilidad

3. Acceder a una visualización ● Tras cargar el programa, podemos acceder a la visualización a través

de un navegador: ● Introducir en el navegador la siguiente dirección: ●[IP]:8080/[nombre archivo htm].htm ●Por ejemplo:

 – 192.168.2.20:8080/webvisu.htm

Contenidos  Añadir una visualización Configurar una visualización  Acceder a una visualización Consideraciones y compatibilidad

4. Consideraciones y compatibilidad ● Protocolo Webvisualisation:

Para poder acceder remótamente a las visualizaciones publicadas, es necesario que el protocolo Webvisualisation del puerto Ethernet esté activado.

4. Consideraciones y compatibilidad ● Navegador web:

La visualización web es compatible con cualquier navegador que admita javascript y HTML5 (Firefox, Chrome …). En los PC con Windows pueden producirse algunos problemas en Internet Explorer y HTML Canvas 5. Mozilla Firefox o Google Chrome funcionan correctamente en este entorno En sistemas Android se recomienda el navegador Chrome. Si el navegador web tiene problemas para mostrar la visualización, limpie la caché del mismo.

4. Consideraciones y compatibilidad ● Controladores compatibles:

Solo los controladores M241, M251, M258, LMC058 y LMC078 son compatibles con esta función