Con este ejemplo de páginas de usuario para S7-1200 vamos a repasar todo lo necesario para crear una web en tu autómata Siemens paso a paso.
Tras los dos post anteriores en los que veíamos los conceptos fundamentales de creación de webs y la teoría de creación de páginas web con los PLC de Siemens, toca ahora realizar un ejemplo que aune todos estos conceptos en algo tangible.
Contenido
Ejemplo de páginas de usuario para S7-1200
El ejemplo que te propongo es un ejemplo sencillo que nos permita usar los diferentes aspectos vistos en los post anteriores:
- Leer valores del PLC
- Escribir en variables del PLC
- Representar valores de una lista
- Uso de HTML y Javascript
- Uso de jQuery.
El uso de jQuery es algo nuevo que he añadido como extra para este ejemplo para realizar la actualización de los valores de una forma más profesional que usando HTML o Javascript que es lo que propone la documentación de Siemens.
Por tanto, tendrás una alternativa más a cómo refrescar los datos leidos del PLC.
A mi juicio esta es la más compleja, pero también es la más profesional.
La ventaja fundamental que vamos a ver es que la página no se va a refrescar y recargar como usando el meta de HTML o Javascript, sino que refrescaremos exclusivamente las partes que nos interesen.
¿Qué es jQuery?
Antes de continuar, tan solo comentar un poco qué es jQuery. Según Wikipedia:
jQuery es una biblioteca multiplataforma de JavaScript, creada inicialmente por John Resig, que permite simplificar la manera de interactuar con los documentos HTML, manipular el árbol DOM, manejar eventos, desarrollar animaciones y agregar interacción con la técnica AJAX a páginas web.
Vamos, que nos va a permitir manejar casi a nuestro antojo todo lo que es la web.
¿Y que hay de Ajax?
Como ves, es un no parar, porque también aparece AJAX, que según la wikipedia:
AJAX, acrónimo de Asynchronous JavaScript And XML (JavaScript asíncrono y XML), es una técnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los usuarios mientras se mantiene la comunicación asíncrona con el servidor en segundo plano. De esta forma es posible realizar cambios sobre las páginas sin necesidad de recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Luego verás para qué he usado Ajax.
Enunciado del ejemplo de de páginas de usuario para S7-1200
Como te propuse en la entrada anterior, se trata de hacer un sencillo ejemplo que tuviera las siguientes características:
- 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
El resultado tiene esta pinta:
Como ves, no me he complicado en el aspecto gráfico, ni era mi intención porque quiero que el ejemplo sea lo más didáctico posible, y para ello, el código cuanto menos recargado, mejor.
Desglose del código de la página de usuario
Enlace con el PLC
Para la escritura en las booleanas de los botones, realizamos la conexión con el PLC como ya vimos en el post anterior:
<!-- AWP_In_Variable Name='"Start"' --> <!-- AWP_In_Variable Name='"Stop"' --> <!-- AWP_In_Variable Name='"Reset"' --> <!-- AWP_Enum_Def Name="listado" Values='0:"PARADO", 1:"CRONOMETRANDO", 2:"PUESTA A CERO"' -->
Como ves, hemos definido simplemente las tres variables que usamos en el programa del PLC: start, stop y reset.
Además, incluimos un listado de estados del cronómetro para que se muestre en pantalla simplemente si el cronómetro está contando, está parado o si se ha hecho una puesta a cero.
Cabecera del documento
<head>
<meta http-equiv="Content-Language" content="es" >
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta http-equiv="Content-Script-Type" content="text/javascript" >
<link rel="stylesheet" type="text/css" href="estilos/estilos.css"/>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
//Actualizamos el contador a tiempos fijos
setInterval(actualizar,500);
// Enviar la información de los botones sin recargar la página.
$().ajaxStart(function() {
$('#loading').show();
$('#result').hide();o
}).ajaxStop(function() {
$('#loading').hide();
$('#result').fadeIn('fast');
});
$('#arranca, #para, #reinicia').submit(function() {
$.ajax({
type: 'POST',
url: $(this).attr('action'),
data: $(this).serialize(),
success: function(data) {
$('#result').html(data);
}
})
return false;
});
})
function actualizar(){
$("#tiempos").load("tiempos.htm");
$("#textos").load("texto.htm");
}
</script>
</head>
No vamos a entrar en mucho detalle por el momento en este código ya que lo veremos un poco más en detalle en el vídeo más adelante.
Tan solo comentar que he incluido los típicos META de las páginas web además de incluir el link de:
- Estilos (estilos.css)
- El archivo de jQuery (jquery.min.js) que me lo he descargado de internet y lo he adjuntado para no depender de una conexión externa.
Las funciones de javascript para lo que valen es básicamente:
- Actualizar los valores de minutos, segundos y milisegundos
- Actualizar el texto del listado ya comentado
- Mandar la información de los formularios que tienen los botones sin tener que recargar la página
Para actualizar los valores, nos apoyaremos en las etiquetas DIV y en dos archivos llamados tiempos.htm (para actualizar el crono) y texto.htm para actualizar el texto del listado.
Como verás luego en el vídeo son archivos sencillos de usar:
El código de texto.htm será:
<!-- AWP_Enum_Ref Name='"Cronometro"' Enum="listado" --> :="Cronometro":
El código de tiempos.htm:
<h1 id="cronometro" >:="Minutos": : :="Segundos": : :="Milisegundos":</h1>
En el primer caso, enlazamos la variable Cronómetro con el listado definido en la cabecera para posteriormente recuperar su valor según la sintáxis que demanda Siemens
En el caso de tiempos.htm, como ves solo lo he puesto entre un meta H1 y he recuperado el valor de las tres variables.
El cuerpo del documento
<title>Cronometro</title>
<body>
<div id="ps"><img src="imagenes/ps.png"></img></div>
<div id="textos"></div>
<div id="tiempos"></div>
<div id="botones">
<table border="0" >
<tr>
<td>
<form method="post" action="" id="arranca" name="arranca">
<input type="submit" value="Start" id="boton">
<input type="hidden" name='"Start"' value="1">
<input type="hidden" name='"Stop"' value="0">
</form>
</td>
<td>
<form method="post" action="" id="para" name="para">
<input type="submit" value="Stop" id="boton">
<input type="hidden" name='"Stop"' value="1">
<input type="hidden" name='"Start"' value="0">
</form>
</td>
<td>
<form method="post" action="" id="reinicia" name="reinicia">
<input type="submit" value="Reset" id="boton">
<input type="hidden" name='"Reset"' value="1">
</form>
</td>
</tr>
</table>
</div>
</body>
</body>
Como ves el código del documento es sencillo con los 3 botones y los DIV que luego veremos cómo usarlos.
Para dar valor a las variables booleanas simplemente usamos unos input de tipo hidden para que no se vea nada, y lo que hacemos es dar valor a las variables.
Chupado. ¿o no?
El vídeo
Para ver funcionar el ejemplo de páginas de usuario para S7-1200 qué mejor que un vídeo donde repase contigo todo lo que te he enseñado hasta ahora.
¿Qué te ha parecido?
Espero que con este ejemplo de páginas de usuario para S7-1200 te animes a programar tus propios proyectos dando rienda suelta a tu imaginación.
Como ves, usando las bibliotecas de JavaScript se pueden hacer cosas muy curiosas y de aspecto más profesional.
Para que veas que se pueden hacer cosas muy chulas, échale un vistazo a http://justgage.com/ donde puedes encontrar una biblioteca javascript con la que realizar indicadores analógicos muy chulos.
Para dar una apariencia más sofisticada a la web puedes usar herramientas como Bootstrap http://getbootstrap.com/
Si quieres ver un ejemplo de estas dos herramientas, puedes pasarte por el blog de Enrique, uno de los suscriptores del blog que ha realizado un ejemplo muy chulo.
Descarga el ejemplo de páginas de usuario
Te dejo el enlace con el ejemplo de TIA Portal y los archivos HTML para que puedas juguetear con ello.
Recuerda que puedes apuntarte en Guorker.com donde por una cuota mensual, tendrás tarifa plana en todos los cursos disponibles en la plataforma.
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.
18 Comentarios
Muy buena tu pagina…
Solo tengo una duda ya que no me funcionan los botones en la pagina WEB pero si se actualizan los datos en la pantalla cuando fuerzo la partida, parada o reset en la Página, es decir, los valores funcionan desde el PLC hacia pagina Web pero no desde Página WEB hacia PLC
Asegúrate de tener todos los permisos necesarios para lectura y escritura en la configuración del webserver.
Para poder modificar valores dentro de la memoria del S7 1200 debes estar logueado como administrador en la web interna del PLC (la que aparece cuando metes en el navegador la ip del Autómata) una forma de hacerlo dentro de tu página definida por ti dentro del servicio web server es poner en la cabecera del script de JavaScript el siguiente trozo de código:
//Auto login
var spost = ‘Login=admin&Password=’;
$.post(«/FormLogin»,spost,function(result){});
Yo no lo recomiendo por que una persona que tenga acceso desde fuera al autómata y lee el HTML de la página averiguara la clave y el usuario del autómata y podrá accede a otras partes de la configuración del autómata.
Fantástico Iñigo! Es muy emocionante que en los PLCs se puedan correr estos HMIs basados en tecnologías web… el tema es qué limitación puede tener un 1200 en cuanto a espacio para cargar imágenes o ir agregando «chiches» para ofrecer un HMI que podría ser una webapp. Gracias totales y abrazo desde Córdoba Argentina.
excelente, material , Iñigo, un genio como siempre, quería hacerte una consulta, tengo entendido el web server eta disponible, para S7-1200 Y S7-1500, la pregunta es puedo simular mi pagina web con un S7-1500 sin poseer Plc Físico, Trabajando con TIA PORTA V13.
Es posible?
si podrías aclarar esa duda,
gracias.
saludos.
Pues sinceramente no lo he probado. Lo mejor, es que simplemente lo pruebes y nos cuentas.
Excelente ejercicio par a interactuar en tiempo real con los autómatas,
gracias IÑIGO, por tener la gentileza de compartir tu gran experiencia y conocimientos técnicos
mis mejores deseos que tu plataforma educativa siga creciendo
un saludo
Muchas gracias David 😉
Hola Íñigo, estoy iniciándome en la creación de webs para el S7-1200 y he llegado a esta página.
El segundo link que aparece en la página enlazando a un post anterior «la teoría de creación de páginas web con los PLC de Siemens,» me lleva otra vez a esta misma página.
¿Es correcto?
Saludos , buenas Tardes Inigo Gusto en saludarte quería preguntarte algo , tengo instalado un sistema de control siemens , Le coloque una CP 6GK7 343-1CX10-0XE0 Siemens NET, CP 343-1, Para tener salida Ethernet , para hacer un scada con Wincc Explorer V7.3 hasta alli toda va bien ya tengo la adquisición de mis datos en tiempo en real y eso, quiero preguntarte, como haría para hacer una pagina Web Y poder visualizar todos esos datos de FORMA REMOTA , el PLC Maestro es Un CPU 315-2DP .
deseo hacer una pagina web y poder monitorear los valores de las variables en tiempo real de forma remota.
estuve leyendo y me encontre con esto
Pagina Web Step 7
https://support.industry.siemens.com/cs/document/51434100/%C2%BFc%C3%B3mo-se-puede-colocar-en-internet-una-p%C3%A1gina-web-definida-por-el-usuario-con-ayuda-del-step-7-v5-5-?dti=0&lc=es-BO
Creos que puedes ayudarme con tus sugerencias que eres el experto en el tema . Por favor
como ver los datos de forma remota y se actualizen en tiempo real o cada cierto tiempo , escucho tus comentarios y/o sugerencias.
Gracias.
Saludos
Valora el instalar un iot estilo iot2040 de Siemens o similar como vemos en el curso de iot e industria 4.0 con el que hacer una web o Dashboard con el que ver los datos que quieras hacer
Es la opción más sencilla y potente
Hola Inigo es uun gusto saludarte, Gracias por la informacion, Muchos nos interesaria que subieses un video o informacion de como poner en marcha el servidor web de la CP Advance CP 6GK7 343-1CX10-0XE0 Siemens NET, CP 343-1, seria de gran ayuda, ya que hay mucha informacion pero de 1200 y poca referente a las CPs para desarrollar sus paginas web y controlar o monitorear procesos.
quedamos atentos a tus comentarios y/o suggerencias
gracias por el apoyo
saludos
No he creado ninguna web con esas CP, lo siento, ni creo que lo haga. Son equipos obsoletos para estas coasas, y hay métodos mucho más sencillos que estar jugando con esas CP para crear una web o un dashboard como vemos en el curso de IOT e Industria 4.0.
Ojo, que es mi opinión. Lógicamente se pueden hacer cosas, pero no tengo experiencia.
Fantástico trabajo Iñigo:
es una aplicación más para las comunicaciones con tia portal.
Gracias
Gracias Pere 🙂
excelente blog, me has ayudado a solucionar aquellas dudas que tenia en la integración.
no te permite descargar el proyecto
Lo siento, pero a mi me funciona correctamente, y en cualquier caso, tienes el código fuente básico en el propio post.