Web Server del Siemens S7-1200, Pruebas

Hace algún tiempo realice algunas pruebas con el Web Server integrado en los Siemens S7-1200, en donde intente probar las capacidades del servidor y que posibilidades tenía de utilizar otras tecnologías para darle funcionalidad y aspecto profesional, como si de un sistema SCADA avanzado se tratara.

He visto algunos proyectos de autómatas expuestos a la RED, y de verdad que hay verdaderas joyas. Como también hay verdaderos desastres desde el punto de vista estético. Si bien esta funcionalidad del S7-1200 es para crear una pequeña interface del estado de nuestro autómata, podemos realizar escritura y lectura de variables directamente en el autómata. La configuración es sumamente sencilla en la parte del autómata. Basta con realizar las siguientes configuraciones:

Configuración del Autómata:

  • Crear un proyecto en TIAportal.
  • Activar en las propiedades de nuestro S7-1200 el uso del Web Server.
  • Configurar el directorio donde se almacenaran los archivos .html, .css y .js de nuestra aplicación web.
  • Configurar la página de inicio de nuestra aplicación, en este caso he usado “index.htm”.
  • Luego configuramos el nombre de nuestra aplicación dentro del autómata, en mi caso lo nombre “Web”.
  • Creamos un DB donde se almacenaran las variables que vamos a usar. Este debe ser configurado con acceso optimizado, esto se hace en las propiedades del mismo.
  • Por ultimo configuramos el DB que vamos a guardar los datos y demás archivos de nuestra aplicación, yo le coloque “DB 333”.
Configuración de webserver del S7-1200

Configuración de webserver del S7-1200

En nuestro bloque OB1 debemos agregar un bloque especifico que se llama “WWW”, el cual le pasaremos el nombre del DB donde se almacena la aplicación, en mi caso como podemos observar use el “DB 333”. También debemos asignar una palabra para el control de errores que nos pueda arrojar el bloque de programa “WWW”.

Bloque WWW Siemens S7-1200

Bloque WWW Siemens S7-1200

En principio desde el lado del autómata esto sería suficiente para terminar la configuración. Sin embargo lo que queremos es como mínimo realizar lecturas de nuestras variables en el autómata. Yo realice un programa de ejemplo con contadores, variables estáticas y obviamente variables booleanas para poder activar o desactivar nuestras salidas. Este pequeño programa de ejemplo estará adjunto al final del post para su libre descarga.

Ahora viene la parte que para nosotros puede ser más confusa ya que no estamos acostumbrados a programar en HTML ni en JavaScript. Según la valía y nuestra pericia para apañarnos con nuevos lenguajes crearemos una aplicación de interface con nuestro autómata.

En mi caso utilice las siguientes tecnologias:

  • Librería BOOTSTRAP para CSS.
  • Librería JustGauge.js de JavaScript para los manómetros.
  • JQuery para actualizar los datos en la página sin tener que recargarla.
  • Scripts en JavaScript para control y envió de información entre el autómata y el navegador.

Hay muchos tutoriales en internet donde en menos de 1 hora pueden aprender lo básico para realizar un proyecto básico y usarlo en nuestro autómata, yo particularmente recomiendo Sololearn.com, que es una web para aprender lenguajes de programación de última moda.

La estructura del proyecto la dividí en tres partes, lectura escritura y visualización de variables en tiempo real desde el autómata con gráficas. Ya que solo es una simple prueba demostrativa.

Lectura de variables:

Como pueden apreciar en el video anterior muestro la lectura en tiempo real de las variables del autómata. Simplemente programe en el autómata unos contadores que son controlados por una marca de ciclo, en la parte del web server edite un archivo HMTL básico en donde en ciertos campos les di un ID para poder modificarlos en JQuery. También use un pequeño script en JavaScript para obtener los datos desde el autómata.

El script que utilice es el siguiente:

$(document).ready(function() {
            $.ajaxSetup({cache: false});
            setInterval(function() {
                $.get(“IOCounter.htm”, function(result) {
                    var cadena = result.split(“,”);
                    $(‘#NAentero’).text(cadena[0]);
                    $(‘#NAdobleentero’).text(cadena[1]);
                    $(‘#NAreal’).text(cadena[2]);
                });
            }, 1000);
        });

A groso modo lo que hace este script es mediante una función setInterval generar un evento que se ejecuta cada cierto periodo de tiempo, ejecutando todo lo que este dentro de esta función. Dentro de setInterval hago un llamado tipo GET a otro archivo (IOCounter.htm) dentro del web Server donde tomo los valores devueltos y con los selectores propios de JQquery modifico en vivo y sin recargar la página los valores deseados.

En el documento “IOCounter.htm” programa lo siguiente:

:=”Webserver”.entero:,:=”Webserver”.dobleentero:,:=”Webserver”.real:

Si se fijan lo que coloco aquí es el símbolo de igualdad que se usa en SCL y luego el nombre del DB donde tengo las variables a ser leídas, seguido por el nombre propio de la variable que deseo leer. Justo en esta página del web server lee tres variables distintas y por esto las separo con “,” para que al momento de ser devueltas al script de JavaScript que hace la lectura me las devuelve como un array separado por comas. Devolvería algo como esto:

(243,45769,20.6)

Al obtener estos valores la librería de JQuery hace su trabajo y actualiza estos valores en la página sin que recarguemos. Al principio puede ser un poco difícil y abstracto de entender pero una vez lo veas algunas veces seguro se les hace súper fácil de entender.

Escritura de variables:

En la parte de escritura hay que tener en cuenta que por seguridad debes estar logueado como admin en el autómata desde al navegador, en caso contrario no los dejara realizar las modificaciones. Para escribir variables tome algunas salidas digitales y dos variables numéricas. Lo más importante que deben hacer es colocar en la cabecera del archivo HTML es declarar que variables van a utilizar, de esta manera:

<!– AWP_In_Variable Name='”Webserver”.salida1′ –>

<!– AWP_In_Variable Name='”Webserver”.salida2′ –>

<!– AWP_In_Variable Name='”Webserver”.salida3′ –>

<!– AWP_In_Variable Name='”Webserver”.salida4′ –>

<!– AWP_In_Variable Name='”Webserver”.escrituraentero’ –>

<!– AWP_In_Variable Name='”Webserver”.escritura_real’ –>

Al declararlas de esta manera el autómata cuando genera los bloques del servicio web analiza el código HTML e interpreta que en ese archivo existe la posibilidad de que estas variables sean escritas en vez de leídas. Esto a mí me dio muchos problemas, por que no veía necesario la declaración y cuando lo coloque no estaba logueado en el autómata desde el navegador. Pase las de Caín hasta que me di cuenta para solventar estos detalles.

$(document).ready(function(){
             $.ajaxSetup({ cache: false });
             setInterval(function() {
                $.get(“OIsalidastotal.htm”, function(result){
                               var cadena = result.split(“,”);
                               for (var i = cadena.length – 1; i >= 0; i–) {
                                               var a=i+1;
                                               if (cadena[i]==1) {
                                                               $(‘#salida’+a).text(“Salida “+a+”: ON”);
                                               } else {
                                                               $(‘#salida’+a).text(“Salida “+a+”: OFF”);
                                               }
                               }
                              $(‘#escritura_entero’).text(cadena[4]);
                               $(‘#escritura_real’).text(cadena[5]);
                 });
             },2000);
         });

Con el script anterior realizo algo muy parecido al script de lectura pero en este caso verifico el estado de las variables que se encuentran en “OIsalidastotal.htm” y las modifico en el navegador con la ayuda de JQuery, sin embargo si deseo hacer la escritura en el autómata uso la siguiente función:

url=”OIsalidasentero.htm”;
                name='”Webserver”.escrituraentero’;
                val=$(‘input[id=textentero]’).val();
                console.log(val);
                sdata=escape(name)+’=’+val;
                console.log(sdata);
                $.post(url,sdata,function(result){});

Existe un campo de texto donde escribo el valor que deseo escribir en el autómata, cuando presiono el botón de “Actualizar” recabo todos los valores que me interesan actualizar y hago una petición tipo “POST” para escribir el archivo “OIsalidasentero.htm” y es aquí donde el autómata toma el valor n el siguiente ciclo de scan y lo actualiza en el DB correspondiente. El archivo “OIsalidasentero.htm” debe tener el siguiente contenido:

<!– AWP_In_Variable Name='”Webserver”.escrituraentero’ –>:=”Webserver”.escrituraentero:

Como pueden ver tiene comentado en HTML el nombre de la variable que nos interesa escribir seguido de la declaración de la misma.

Por ultimo a este proyecto le agregue unos manómetros que se van actualizando según el valor de las variables leídas en el autómata. A continuación les muestro el resultado:

Para el uso de estos manómetros use una librería de JavaScript llamada “JustGauge”. Este bastante bien para mostrar gráficamente el valor de variables. Para actualizar los valores use los mismo principios explicados anteriormente solo que con un poco más de código. Toda la información la pueden encontrar al final del post en los link de descarga.

A decir verdad esta funcionalidad del autómata S7-1200 está bastante bien me parece bastante útil, pero tiene algunas limitaciones:

  • Espacio de memoria en el autómata.
  • El ancho de banda de la conexión con el autómata.
  • Dependes del uso de JavaScript para el procesamiento de variables.
  • Es posible que cualquiera que conozca la URL pueda acceder a la web, si no conoce la clave de administrador solo podrá observar.

Para aplicaciones pequeñas de tele servicio y diagnostico está más que bien. Creo que tiene muchísimo potencial por explotarse y seguro que se pueden realizar cosas muchísimo más complejas que las que describo aquí pero por algo se empieza.

Links de descarga del proyecto:

Version del TIAPortal

Archivos del Web Server.


 

Leave a Reply