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 Modificaciones

1.0 01/04/2015 Cynthia Garibo Pérez Primera versión
1.1 10/09/2015 Cynthia Garibo Pérez Añadido: páginas en diferentes idiomas,
modificación de fuente, ajuste de ejes de una
traza.

Centro de Competencia Técnica

M241/M251: Personalización de
páginas web en SoMachine
Índice:
1. Añadir una visualización
> Crear una visualización
> 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

2
 Contenidos

Añadir una visualización

Configurar una visualización

Acceder a una visualización

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 3

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.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 4

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.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 5

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 6

1.2 Añadir una visualización web

● Añadir una visualización web:

Pulsar botón derecho en VisualizationManager
Seleccionar WebVisualization

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 7

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 8

 Contenidos

Añadir una visualización

Configurar una visualización

Acceder a una visualización

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 9

2. Configurar una visualización

● En la caja de herramientas de la visualización podemos encontrar los

siguientes objetos:

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 10

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 11

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 12

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…

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 13

2.1 Insertar objetos
● Insertar un texto:
•Seleccionamos un objeto tipo Rotulación o tipo Campo de texto. La
diferencia entre estos dos objetos es que el Campo de texto tiene la
propiedad de Configuración de entrada.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 14

2.1 Insertar objetos
● Insertar un texto:
•Para modificar las propiedades del texto:

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 15

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 16

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 17

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)

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 18

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 19

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 20

2.1 Insertar objetos
● Visualizar una traza:
•Insertar una traza (elementos especiales de control)

•1. Añadimos la tarea

•2. Añadimos la variable a visualizar
•3. Configuramos la vista en Mostrar…
Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 21
2.1 Insertar objetos
● Visualizar una traza:
•Desde la pestaña Mostrar… configuramos la visualización de los ejes
•Modo de representación:
•- Longitud física, para
marcar longitud
•- Fijo, para marcar
mínimo y máximo de
tiempo
•
•Marcas de división:
•- Por defecto no viene
marcado, pero podemos
establecer la distancia
entre divisiones.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 22

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 23

 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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 24

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 25

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 26

2.3 Paneles
● Cambiar de panel:

● Seleccionamos la acción:
Asignar un panel concreto
Panel anterior
Panel siguiente

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 27

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 28

2.3 Paneles
● Usar un panel emergente:
Creamos un recuadro y definimos las opciones de entrada

•Seleccionamos Abrir o •Seleccionamos el panel

cerrar diálogo según la emergente
función que necesitemos

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 29

2.3 Paneles
● Cambio de idioma de la visualización
Cuando creamos un objeto que contiene texto, automáticamente se añade
una GlobalTextList.
Dentro de la GlobalTextList pulsamos botón derecho y añadimos los
diferentes idiomas

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 30

2.3 Paneles
● Cambio de idioma de la visualización
Insertamos un botón que realice la acción de cambiar idioma (p.e tipo
rectángulo)
•Insertamos una acción al
pulsar, de tipo Cambiar idioma

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 31

2.3 Paneles
● Cambio de idioma de la visualización
Seleccionamos el idioma de entre los que hemos añadido en la GlobalTextList

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 32

 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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 33

 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.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 34

 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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 35

 Contenidos

Añadir una visualización

Configurar una visualización

Acceder a una visualización

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 36

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 37

 Contenidos

Añadir una visualización

Configurar una visualización

Acceder a una visualización

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 38

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.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 39

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.

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 40

4. Consideraciones y compatibilidad

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

Schneider Electric - Centro Competencia Técnica- Cynthia Garibo – Abril ‘15 41

Puede encontrar más información en:
Preguntas técnicas Frecuentes
http://www.schneider-electric.es/faqs
>Respuesta a las Preguntas Técnicas más Frecuentes
>Guías de Diagnóstico e Implementación

Centro de Descargas
http://www.schneider-electric.com/download/es/es/
>Descarga de certificados, manuales, software, dibujos CAD,
documentación técnica…

Video FAQS
http://www.youtube.com
>Video Tutoriales de Respuesta a Preguntas Técnicas
>Video Tutoriales con Ejemplos de Configuración de equipos y software

CCT - Centro de Competencia Técnica

42