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.
¿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
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:Ver código · 4 líneas
<!-- 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"' -->
Cabecera del documento
Ver código · 47 líneas
<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>
- 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.
- 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
Ver código · 2 líneas
<!-- AWP_Enum_Ref Name='"Cronometro"' Enum="listado" -->
:="Cronometro":
Ver código · 1 línea
<h1 id="cronometro" >:="Minutos": : :="Segundos": : :="Milisegundos":</h1>
El cuerpo del documento
Ver código · 38 líneas
<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>
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.
