Creación de páginas web de usuario.

Nuestros sistemas SlimLine e Netsyst Tienen un servidor web integrado, es posible transferir páginas de usuario visibles desde el navegador al sistema. Las páginas deben crearse con su propio editor HTML y transferirse al sistema de archivos del sistema. En sistemas ARM 7 se pueden transferir a carpetas Storage ed SDCard, en los sistemas CortexM7 se pueden transferir a la carpeta C:/Web creando sus propias subcarpetas. Se podrá acceder directamente a las páginas cargadas desde el navegador simplemente escribiendo la IP del dispositivo y la ruta de la página. Para aplicaciones web más complejas, FB está disponible HTTPServer que le permite ejecutar el programa PLC para compilar el contenido y devolverlo al navegador. Se proporciona para el descargar un programa, en las carpetas del programa encontrado.

• LogicLab, Programa de gestión de páginas que se transferirá al sistema. SlimLine.
• Web, Carpeta WPages con páginas web para transferir a la carpeta C:/Web en el sistema SlimLine.

Al escribir la dirección IP del sistema desde el navegador seguido de la ruta a la página de índice (Ejemplo http://xxx.xxx.xxx.xxx/WPages/Index.html) puede navegar entre los distintos ejemplos. Todos los ejemplos se pueden editar usando un editor de texto simple (Ejemplo Notepad++).

Simplemente página

En el ejemplo al lado de la página SPage.html, una página simple que muestra un mensaje de presentación. Para los que no tienen conocimientos de HTML recomiendo probar editando el archivo con un editor de texto o editor de HTML SPage.html. Al guardar el archivo modificado y actualizar la página en el navegador veremos los cambios realizados. Entonces será posible insertar los diversos elementos HTML y ver cómo funcionan.

Gestión de páginas dinámicas, TAG y ARG

En el ejemplo al lado de la página DPage.htm muestra el valor de la variable del PLC VView de tipo UINT asignado a la dirección DB100.10 y permite configurar el valor de la variable PLC VSet de tipo REAL asignado a la dirección DB100.12. El ejemplo destaca la característica más importante del servidor web, la capacidad de administrar páginas cuyo contenido modifica el servidor. El ejemplo demuestra cómo es posible gestionar una interactividad con el usuario que, a través de TAG insertados en la página, puede visualizar variables del PLC y modificar su valor con ARG. TAGs ed ARGs se refieren a las variables asignadas en el DB100 del PLC y debe insertarse en páginas con extensión htm.

TAGs: Para ver el valor de las variables del PLC en la página web puede ingresar TAGs que indican el formato de visualización, el tipo y la dirección de la variable a visualizar (Ejemplo <!–[‘%d’, UINT, 10]->, mostrar variable UINT asignado a DB100.10). Las ETIQUETAS serán reemplazadas por el servidor con el valor de la variable al enviar el contenido de la página al navegador.

ARGs: Para permitir la configuración de las variables del PLC desde la página web, es posible enviar al servidor en POST de ARGs indicando el tipo y dirección de la variable seguido del valor a configurar (Ejemplo UINT 12=100, establezca el valor 100 en la variable UINT asignado a DB100.12). Se pueden agregar múltiples definiciones usando el símbolo & (Ejemplo UINT 12=100&REAL 14=1.3). Para configurar las variables del PLC desde la página web, el método más simple es usar módulos, todos los objetos contenidos entre <form> e </form>cuando se envía el formulario, automáticamente se ponen en cola y se envían al sistema que actualiza las variables.

<!--["%d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di cifre intere variabili in base al valore.
<!--["%04d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di 4 cifre.
<!--["%3.0f", REAL, 32]--> Visualizza variabile REAL allocata a DB 100.32 con numero di 3 cifre intere senza decimali.
<!--["%4.2f", REAL, 50]--> Visualizza variabile REAL allocata a DB 100.50 con numero di 1 cifra intera ed 2 decimali.
<!--["%s", STRING, 128]--> Visualizza variabile STRING allocata a DB 100.128.

UINT 12=10 Imposta variabile UINT allocata a DB 100.12 al valore 10.
REAL 128=185.5 Imposta variabile REAL allocata a DB 100.128 al valore 185.5.
STRING 1000 16="Hello!" Imposta variabile STRING allocata a DB 100.1000 con "Hello!". Lunghezza testo limitata a 16 caratteri.

Actualizar páginas con AJAX

AJAX, acrónimo de Asynchronous JavaScript and XML, es una técnica de desarrollo para crear aplicaciones web interactivas. El desarrollo de aplicaciones HTML con AJAX se basa en un intercambio de datos en segundo plano entre el navegador web y el servidor, lo que permite la actualización dinámica de una página web sin recarga explícita por parte del usuario. Esta técnica permite una actualización automática de los datos en una página web sin tener que recargar la página, permitiendo que las variables del PLC se muestren automáticamente. Las solicitudes AJAX se procesan usando le API fetch.

En el ejemplo al lado de la página DPAjax.html que muestra el valor de la variable IValue del tipo UDINT DB100.20 al que se suma el valor de la variable cada segundo IFactor de tipo USINT DB100.24. Todos los valores se actualizan automáticamente en AJAX cada segundo. También se muestra el ejemplo de cómo ingresar una variable de cadena asignada a DB100.52. Las funciones de gestión de API de recuperación están en el archivo Scripts.js Hay una función de actualización de campo en la página:

• GetPage(Page, RFlag), Realiza la API Fetch recordando en GET la página indicada en Page (En el ejemplo DPAjax.htm) y a la devolución de los datos ejecuta la función SetupValues que actualiza los campos de la página.
• SubmitData(Page), Ejecuta el API Fetch enviando en POST en la página indicada en Page (En el ejemplo DPAjax.htm) el conjunto de variables de datos y al devolver los datos ejecuta la función SetupValues que actualiza los campos de la página.
• LoadPage(Page), Se ejecuta cuando se carga la página ejecuta la función GetPage para actualizar inmediatamente todos los campos de la página y luego activar la ejecución temporizada de la función GetPage para actualizar los campos automáticamente.
• SetupValues(RData,RFlag), Valora los objetos de la página con los valores recibidos en RData. RFlag si está activo, habilita la actualización de los objetos en atributo. De esta forma es posible deshabilitarlo permitiendo escribir el valor desde el navegador sin que sea reescrito por la actualización automática en AJAX.

Cuando se carga la página, se ejecuta la función <body onLoad=”LoadPage(‘DPAjax.htm’)”> señalando la página DPAjax.htm, esta página contiene los TAG que, al cargar, se reemplazarán con el valor de la variable relativa. La página está escrita de tal manera que devuelve una cadena JSON con la indicación de la identificación del objeto y el valor en el que establecerlo.

{
    "IValue":<!--['%d', UDINT, 20]-->,
    "IFactor":<!--['%d', USINT, 24]-->,
    "VStr":"<!--['%s', STRING, 52]-->"
}

De esta manera en la función SetupValues bastará con analizar la devolución para poder realzar los objetos. Tenga en cuenta que al cargar la página RFlag está activo de esta manera el campo de entrada también será evaluado IFactor. Mientras corría en intervalo RFlag no está activo bloqueando la actualización.

Uso de objetos HTML

En el ejemplo al lado de la página WObjects.html muestra una serie de objetos puestos a disposición por el lenguaje HTML con los que se pueden crear páginas con un agradable impacto gráfico. La gestión de objetos se lleva a cabo en Ajax utilizando las funciones comentadas anteriormente.

Para crear páginas web con gráficos, indicadores, histogramas y mucho más, puede insertar objetos de Google Chart (ver la galería). En este artículo Se utilizaron medidores para mostrar los valores de temperatura, humedad y presión en un dispositivo Amazon Echo Show.

• Check box: Al ejecutar el tick se activa una variable BOOL, el estado de los primeros 2 también se transfiere a las salidas lógicas del módulo de la CPU.
• Radio button (A): Estos botones de opción informan el estado de las entradas del módulo de la CPU. Como puede ver, tienen diferentes atributos de nombre, de esta manera son objetos únicos y no relacionados. Dado que solo se muestran, se han deshabilitado para no poder editarse desde una página web.
• Radio button (B): Estos botones de opción tienen el mismo atributo de nombre, por lo que actuar sobre uno desactiva el otro. Actúan sobre una variable USINT, que se evalúa de acuerdo con la selección.
• Input field: Al definir el valor, se evalúa una variable UINT con el valor definido.
• Progress bar: Se muestra una barra de progreso con el valor establecido en el campo Entrada.
• Select: Al elegir una de las opciones, se evalúa una variable USINT.

páginas responsivas

Hoy en día es fundamental que las páginas web sean accesibles desde una gran variedad de terminales, no sólo el PC sino también tabletas y teléfonos inteligentes, por lo que es necesario desarrollar páginas responsivas para que se adapten automáticamente a los distintos dispositivos.

la aplicación eDoorkeeper con su código fuente (Download) ilustra cómo utilizando adecuadamente los estilos CSS es posible desarrollar páginas responsivas simples para la gestión del control de acceso con identificación vía RFiD TAG.

Página home.htm muestra el estado de funcionamiento, E/S digitales, el valor del TAG adquirido y posibles errores, la página se actualiza en AJAX. Página Etiquetas.htm permite definir hasta 16 TAG con el código correspondiente y el usuario asociado al mismo.