Cómo crear páginas de usuario para un S7-1200: Configurando el entorno

Segunda entrega para configurar y programar tus páginas de usuario para un S7-1200.

Cómo configurar desde TIA Portal el programa del PLC S7-1200 para que se pueda ejecutar las paginas de usuario.

Páginas de usuario para un S7-1200

Hemos visto hasta ahora dos entradas:

• Configuración del webserver
• Herramientas y conocimientos previos necesarios.

Con el primer post, configuraremos y activaremos el servidor web del S7-1200 ya que sin este paso previo, no funcionará absolutamente nada de lo que hagamos.

Además, tendremos que configurar la parte de las páginas de usuario como veremos más tarde.

Los conocimientos de programación serán necesarios para poder realizar las páginas web que queramos realizar.

Pero solamente con esto es suficiente, ya que tendremos que dar una serie de pasos adicionales para que la pelota empiece a rodar.

Deberás crear los archivos HTML, CSS.. además de añadir las imágenes que quieras añadir (jpg, png, etc).

La parte importante de este punto es que se deben añadir en los HTML las variables sobre las que quieras leer o  escribir en el PLC.

Mostrar datos del PLC en las páginas de usuario

La forma de mostrar el valor elegido en la web, es el siguiente:

:="Nombre_Variable":

Y claro, insertado entre tags del HTML como un párrafo sería:

<p>:="Velocidad_Transportador":</p>

¿Y ya está?

Pues básicamente sí. Así es como se representa.

Ni que decir tiene que Nombre_Variable tiene que ser la etiqueta de la variable simbólica en el PLC.

Tiene que estar definida en el PLC por tanto, y luego ya puede ser usada en la web.

Escribir en variables del PLC

Para escribir en el PLC, vamos a necesitar poner en la cabecera de los archivos HML una sintaxis como la siguiente:

<!--AWP_In_Variable  Name ='"Nombre_Variable_Definida_PLC"' -->

Al igual que en el caso de la lectura, la etiqueta tiene que estar definida en el PLC para poder usarse.

Posteriormente, ya podrás integrarla en formularios donde se le de valor.

Enlazar textos a valores de una variable

Puede que en algunos casos, el valor de la variable para un desconocido del programa tan chulo que has realizado le suene a chino.

Por poner un ejemplo, puede que tengas una variable que valga desde 0 a 2 con el estado de la máquina (Manual, Automático, Paro, Emergencia…).

Bueno, pues para asociar una variable llamada digamos «Modo» que toma valores enteros, y que en la web se vea el texto que quiere representar el valor numérico, se hace algo de este estilo:

<!-- AWP_Enum_Def Name="Listado_Modos" Values='0:"Stop", 1:"Auto",.., x:"Alarma"' -->

Es decir, listaremos los diferentes valores que puede tomar la variable con los textos asociado que queramos asignarle.

Como ves, es un listado de textos asociado a una variable (Listado_Modos) que no existe en el PLC. Es digamos una variable en el webserver.

Luego,  para enlazar la variable con el listado de textos,  debemos referenciar este enlace cuando lo queramos usar:

<!-- AWP_Enum_Ref Name='"Modo"' Enum="Listado_Modos" --> 
:="Modo":

Como ves, hay que hacerlo en dos pasos, pero tampoco parece que esto vaya a ser un reto para nosotros¿verdad?

Pero aunque podría parecer que ya está todo preparado, aún no lo está.

Configurar y programar el PLC para que funcionen las páginas de usuario

Aunque hayamos creado las páginas web, por un lado tendremos que cargar estas páginas en el PLC y arrancar el servidor web que hace que los datos fluyan entre las páginas de usuario para un S7-1200 y el propio autómata de Siemens.

Configurar el web server para cargar las páginas de usuario.

Este paso es muy sencillo. Tan solo tendrás que indicar una serie de datos como son directorio, página de inicio y unos DB.

Como puede intuir tras ver la imagen los pasos como digo son::

• Seleccionas el directorio HTML donde estan los archivos
• Indicas la página de inicio
• Pulsas generar bloques

Lo normal es que la página de inicio de tu web se llame index.html, index.htm, start.htm o similar.

Al generar los bloques, generará unos bloques necesarios para realizar el intercambio de datos.

Estos bloques son configurables en el apartado Avanzado, pero si no tocas nada, por defecto tomará los bloques 333 para el número de DB web  y 334 el número de inicio de DB de fragmento.

Mi recomendación es que no te compliques, y lo dejes tal y como está.

Son DB que son necesarios para la web, y tampoco sinceramente necesitamos saber mucho más.

Vaaale, que eres más curioso que mi gato y quieres saber un poco más de estos DB. Lo capto.

El DB de control (el 333) contiene la siguiente información:

• Variables de control y estado de la página web
• Estado de la comunicación
• Información de errores

Además, existen los DB de fragmento que comienzan en el 334 si no lo cambias. 

Ojo, que comienza en el 334 pero pueden ser varios de forma consecutiva. Es decir, 334, 335 etc.

Estos DB contienen el código de las páginas web y los ficheros multimedia (las fotos y esas cosas).

Estos DB los puedes encontrar en el directorio de Bloques de Sistema, en la subcarpeta Servidor Web como puedes apreciar en la imagen.

Después de todo esto, a lo importante: solo quédate que el número de DB web es el 333 en este caso.

Realizar la llamada desde el PLC a las páginas de usuario

Finalmente, tenemos que arrancar el servidor web para que todo funcione.

Para ello, realizaremos la llamada mágica al bloque SFC99 denominado WWW donde nos pedirá que le indiquemos:

• CTRL_DB: es el número del DB. Si no tocas nada, es nuestro 333.
• RET_VAL: aquí meterás una variable entera que nos devolverá el estado del bloque

Refresco de los datos de las páginas de usuario

Hemos dicho en capítulos anteriores que cuando se realiza la llamada, el servidor manda el código HTML al navegador y este lo representa.

Pero ahí falla algo. Si tenemos datos que van variando en el tiempo ¿quién es el que los va a actualizar?

La forma más básica de actualizar los datos es refrescar la web manualmente pulsando F5.

Esto tiene un pequeño problema, ya que puedes coger tendinitis en los dedos y acabar quitando hasta el dibujo a la tecla de tanto darle.

No parece una solución aceptable para tios como tú y yo.

Para este tipo de situaciones, puedes hacerlo de dos maneras:

• Mediante código HTML
• Mediante programación en JAVASCRIPT

La primera forma, en HTML, tan solo tienes que añadir esta sentencia en la cabecera:

<meta http-equiv="refresh" content="5; URL=index.htm">

Lo que hace básicamente es que una vez transcurridos 5 segundos desde que se cargó la página, se llame a la página index.htm.

Pero claro, si la página que has cargado es index.htm y llamas a ella misma ¿qué logras?

Exacto. Actualizar los valores que puedan haber cambiado dentro de la web.

Si quieres ser aún más chulo, puedes hacerlo con Javascript.

Para ello, usa este código:

<script type="text/javascript">
setInterval("document.location.reload()",5000);
</script>

En este caso, el intervalo de refresco será en milisegundos pero con el mismo resultado

¿Y ahora qué?

Pues ahora, querido padawan, comienza a realizar tus pinitos.

No, no voy a realizar un ejemplo esta semana.

Lo reservo para cerrar esta trilogía, que después de la de El Padrino, no se ha visto cosa igual.

Para la semana que viene, te propongo el siguiente ejercicio:

• Insertar una imagen
• Crear un cronómetro con START/STOP/RESET
• Que haya un texto indicando el estado del cronómetro
• Se actualicen los valores de forma automática

Por tanto, ya tienes deberes para esta semana.

Yo ya tengo realizado el ejemplo de forma muy sencilla, usando estilos pero de una forma casi grotesca en cuanto a colores y formas.

Pero de lo que se trata es de que se vea lo más claro posible. No buscamos en estos momentos el jogo bonito.

La explicación, la semana que viene.

No te lo pierdas porque te voy a contar alguna cosilla chula para darle un estilo más profesional.

Espero tus comentarios y cuéntanos cómo llevas el ejercicio,  y si  te funciona.

Iñigo Gútiez

Enseño a programar PLC de Siemens a través de mis cursos.
Más información sobre mi aquí

Puedes seguirme en cualquiera de las siguientes redes sociales.