Gua de Implementacin

Personalizacin de pginas web en SoMachine

Producto y Versin:
M241/M251
SoMachine V4.1

Revisin Fecha Autor Modificaciones

1.0 01/04/2015 Cynthia Garibo Prez Primera versin

Centro de Competencia Tcnica

M241/M251: Personalizacin de
pginas web en SoMachine
ndice:
1. Aadir una visualizacin
> Crear una visualizacin
> Aadir una visualizacin web
2. Configurar una visualizacin
> Insertar objetos
> Modificacin de variables
> Paneles
> Gestin de usuarios
3. Acceder a una visualizacin
4. Consideraciones y
compatibilidad

2
 Contenidos

Aadir una visualizacin

Configurar una visualizacin

Acceder a una visualizacin

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 3

1. Aadir una visualizacin

Visualizacin web:
La visualizacin web de CODESYS es un cliente basado en los
cdigos HTML5 y javascript que se comunica con el servidor web
integrado en el controlador y muestra la visualizacin en cualquier
sistema de visualizacin.
Se puede utilizar si existe un objeto de visualizacin web insertado
bajo el gestor de visualizacin de la aplicacin.

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 4

1.1 Crear una visualizacin

Aadir una visualizacin:

Aadir un objeto a la
aplicacin, del tipo
Visualizacin. De
esta manera
aadimos tambin el
Gestor de
Visualizaciones
automticamente.

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 5

1.1 Crear una visualizacin

Aadir una visualizacin:

En la pestaa Herramientas podemos ver la visualizacin y el
Gestor de visualizaciones

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 6

1.2 Aadir una visualizacin web

Aadir una visualizacin web:

Pulsar botn derecho en VisualizationManager
Seleccionar WebVisualization

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 7

1.2 Aadir una visualizacin web

Parmetros de la visualizacin web:

- Visualizacin inicial
- Nombre del archivo .htm
de la visualizacin

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 8

 Contenidos

Aadir una visualizacin

Configurar una visualizacin

Acceder a una visualizacin

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 9

2. Configurar una visualizacin

En la caja de herramientas de la visualizacin podemos encontrar los

siguientes objetos:

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 10

2.1 Insertar objetos
Insertar una lmpara: seleccionar la lmpara 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 Tcnica- 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 Tcnica- 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 Tcnica- Cynthia Garibo Abril 15 13

2.1 Insertar objetos
Insertar una imagen propia:
Seleccionar y arrastrar a la zona de visualizacin la herramienta
imagen
Cerrar la ventana que aparece para seleccionar la imagen entre las
precargadas.
Botn dcho Crear la coleccin global de imgenes

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 14

2.1 Insertar objetos
Insertar una imagen propia:
Abrir la coleccin global de imgenes
(pestaa aplicaciones--> carpeta Global--> Global Image Poo)
Aadir nuestras imgenes

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 15

2.1 Insertar objetos
Insertar una imagen propia:
Volvemos al recuadro vaco de la imagen
En el campo ID esttico seleccionamos la imagen insertada (en
categorias habr aparecido GlobalImagePool)

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 16

2.1 Insertar objetos
Visualizar un valor numrico:
Insertar un elemento base como un Rectngulo
Texto: las variables se escriben segn el
tipo.
%d= nmero decimal

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 17

2.1 Insertar objetos
Visualizar un valor numrico:
Insertar un elemento base como un Rectngulo

Text Variable: click en el recuadro que

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

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 18

2.2 Modificacin de variables
Modificar una variable: realizar las operaciones para insertar y configurar
un recuadro, siguiendo los pasos de las diapositivas anteriores

Configuracin de entrada: configurar

OnMouseDown para realizar una
accin al pulsar en el recuadro

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 19

 2.2 Modificacin de variables
Modificar una variable: configurar la accin que se realizar cuando
pulsemos en el recuadro.

Editar tipo: elegir como modificamos el valor:

- Mediante el teclado
- Con un teclado numrico emergente
- Con un teclado alfanumrico emergente

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 20

2.2 Modificacin de variables
Modificar una variable: configurar la accin 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 Tcnica- Cynthia Garibo Abril 15 21

2.3 Paneles
Cambiar de panel: configurar la accin 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
Configuracin de entrada OnMouse Down

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 22

2.3 Paneles
Cambiar de panel:

Seleccionamos la accin:
Asignar un panel concreto
Panel anterior
Panel siguiente

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 23

2.3 Paneles
Crear un panel emergente: creamos una visualizacin nueva y la
diseamos
Definimos que es un panel emergente en lugar de una visualizacin:
Abrimos propiedades de la
visualizacin
Pestaa visualizacin
Usar visualizacin como: dilogo

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 24

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

Seleccionamos Abrir o Seleccionamos el panel

cerrar dilogo segn la emergente
funcin que necesitemos

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 25

 2.4 Gestin de usuarios
Abrimos Gestor de visualizacin
Pestaa Administracin de usuarios
Crear una gestin de usuarios vaca
Crear una gestin de usuarios prediseada

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 26

 2.4 Gestin de usuarios
Gestin de usuarios: definimos los parmetros

Definimos los
grupos de
usuarios y los
permisos.

Definimos los usuarios, a que grupo

pertenecen y sus contraseas.

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 27

 2.4 Gestin de usuarios
En este caso vamos a habilitar el acceso al panel 3 para cualquier usuario
registrado. Sin registro no podremos ver el botn de panel 3.

Realizamos el botn de cambio de panel y le aadimos derechos de

acceso: operable, solo visible o invisible

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 28

 Contenidos

Aadir una visualizacin

Configurar una visualizacin

Acceder a una visualizacin

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 29

3. Acceder a una visualizacin
Tras cargar el programa, podemos acceder a la visualizacin a travs
de un navegador:
Introducir en el navegador la siguiente direccin:
[IP]:8080/[nombre archivo htm].htm
Por ejemplo:
192.168.2.20:8080/webvisu.htm

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 30

 Contenidos

Aadir una visualizacin

Configurar una visualizacin

Acceder a una visualizacin

Consideraciones y compatibilidad

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 31

4. Consideraciones y compatibilidad

Protocolo Webvisualisation:
Para poder acceder remtamente a las
visualizaciones publicadas, es
necesario que el protocolo
Webvisualisation del puerto Ethernet
est activado.

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 32

4. Consideraciones y compatibilidad

Navegador web:
La visualizacin 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 visualizacin,

limpie la cach del mismo.

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 33

4. Consideraciones y compatibilidad

Controladores compatibles:
Solo los controladores M241, M251, M258, LMC058 y LMC078 son
compatibles con esta funcin

Schneider Electric - Centro Competencia Tcnica- Cynthia Garibo Abril 15 34

Puede encontrar ms informacin en:
Preguntas tcnicas Frecuentes
http://www.schneider-electric.es/faqs
>Respuesta a las Preguntas Tcnicas ms Frecuentes
>Guas de Diagnstico e Implementacin

Centro de Descargas
http://www.schneider-electric.com/download/es/es/
>Descarga de certificados, manuales, software, dibujos CAD,
documentacin tcnica

Video FAQS
http://www.youtube.com
>Video Tutoriales de Respuesta a Preguntas Tcnicas
>Video Tutoriales con Ejemplos de Configuracin de equipos y software

CCT - Centro de Competencia Tcnica

35