Web Server- Actualización de datos en cliente

  • 5 Respuestas
  • 969 Vistas

Teraclima

  • Novato
  • *
  • Mensajes: 9
Web Server- Actualización de datos en cliente
« : mayo 11, 2016, 20:42:47 pm »
Hola, tengo que mostrar en pantalla ( cliente web) como varia una temperatura que mido mediante el plc. El problema es que no puedo actualizar continuamente toda la pagina porque sería muy pesado, sólo quiero actualizar un campo de texto y dejar el resto de la página como esta. Tenía pensado hacer la actualización temporizada en javascript. Como puedo hacer para pedir desde el cliente un dato específico al PLC? Gracias!

Soporte

  • Global Moderator
  • Experto
  • *****
  • Mensajes: 1707
  • Soporte Técnico
Re:Web Server- Actualización de datos en cliente
« Respuesta #1 : mayo 12, 2016, 08:17:03 am »
Buenos días,

Es decir, actualizar un campo o texto determinado sin cargar la página completa?.

Dejame qué investigue si es posible hacerlo combinando javascript+html (puede tardar unos días ya que hay que hacer pruebas) y te aviso por este medio.

Quedo a disposición.

Saludos

Enviado desde un dispositivo móvil usando Taptalk.
SOPORTE TÉCNICO

Slicetex Electronics
www.slicetex.com

Soporte

  • Global Moderator
  • Experto
  • *****
  • Mensajes: 1707
  • Soporte Técnico
Re:Web Server- Actualización de datos en cliente
« Respuesta #2 : mayo 13, 2016, 21:52:05 pm »
Buenas noches.

Te comento que es posible actualizar un fragmento en particular con valores del PLC automáticamente, ya estuve haciendo pruebas.

Luego te voy a pasar un ejemplo y la descripción.

Saludos
SOPORTE TÉCNICO

Slicetex Electronics
www.slicetex.com

Soporte

  • Global Moderator
  • Experto
  • *****
  • Mensajes: 1707
  • Soporte Técnico
Re:Web Server- Actualización de datos en cliente
« Respuesta #3 : mayo 16, 2016, 21:00:55 pm »
Buenas tardes,

Hoy liberamos la versión StxLadder 1.7.5 y la versión 200 del firmware para STX8091, que permite crear paginas dinámicas que se actualizan de "a fragmentos" automáticamente
sin necesidad de refrescar toda la página web del servidor.

Esta versión te va a permitir usar peticiones Javascript con jQuery y leer archivos JSON, de tal forma de crear paginas que se actualicen dinámicamente en puntos específicos.

En el transcurso de mañana/pasado voy a publicarte ejemplos para que puedas usarla y hacer lo que deseas de forma simple, pero mientras tanto te recomiendo actualizar firmware y software.

Saludos
« Última Modificación: mayo 16, 2016, 21:05:06 pm por Soporte »
SOPORTE TÉCNICO

Slicetex Electronics
www.slicetex.com

Soporte

  • Global Moderator
  • Experto
  • *****
  • Mensajes: 1707
  • Soporte Técnico
Re:Web Server- Actualización de datos en cliente
« Respuesta #4 : mayo 17, 2016, 21:00:47 pm »
Buenas tardes,

Te paso los ejemplos prometidos para actualizar fragmentos de la pagina Web:

http://www.slicetex.com/docs/an/an030/files/WebServerPawn3.zip

http://www.slicetex.com/docs/an/an030/files/WebServerPawn4.zip

Para usarlos, debes conocer un poco de HTML y JavaScript.

Para el intercambio de datos con el servidor se utiliza la librería jQuery de JavaScript, que simplifica las operaciones para enviar y recibir datos entre el cliente y el servidor web. Este método se conoce como AJAX.

Vas a ver archivos .JSON, los mismos son archivos que permiten poner datos en campos, por ejemplo DinValue:1, luego
cuando cargas el archivo desde JavaScript, podes acceder a esos valores como json.DinValue.

Para información sobre las tecnologías usadas, podes ver los siguientes links:


Te recomiendo ver los ejemplos, estan bien documentados.
Proba el ejemplo WebServerPawn3.zip, el mismo actualiza contadores en la pagina principal.
El ejemplo WebServerPawn4.zip, actualiza fecha/hora en la pagina principal.

Ademas, en ambos ejemplos se tiene en cuenta errores de desconexion en caso que no se puedan
actualizar indicadores (esto lo probas apagando el PLC), también el control de salidas fue mejorado,
ahora con un solo click cambias el estado de cualquier salida.

Introduccion:

Este ejemplo permite actualizar partes o fragmentos de la pagina web sin recargar la pagina
web completamente, para ello utiliza la libreria jQuery de JavaScript para intercambiar datos
con el servidor Web del PLC (metodo comunmente conocido como AJAX).

Tambien se utilizan archivos con formato JSON que contienen informacion dinamica provista
por el servidor web y que luego puede ser utilizada por la libreria jQuery para leer
datos y así actualizar de forma eficiente partes de la pagina web dinamicamente.

Los archivos JSON son auto-descriptivos de tipo texto, permitiendo definir valores en
formato "campo:valor" que luego pueden ser cargados y procesados fácilmente por una
funcion JavaScript. El archivo JSON se solicita a traves de una conexion HTTP desde
el lado cliente (navegador web) mediante una funcion JavaScript (en este ejemplo se
utilizan las provistas por la libreria jQuery), el servidor entrega el archivo JSON
con valores actualizados y la funcion jQuery lo procesa, y finalmente actualiza las
partes especificas de la pagina web. Un ejemplo de este proceso puede ser actualizar
la visualizacion de un contador o entrada discreta en la pagina web con datos provenientes
del PLC.

Tambien se utilizan funciones jQuery para enviar datos mediante metodo POST al
servidor web, en este caso, por ejemplo podemos controlar una salida del PLC o simplemente
enviar informacion como valores, numeros, texto, etc. La ventaja es que al utilizar
JavaScript podemos mejorar la interaccion del cliente con el servidor, creando
interfaces web mas intuitivas y simples de utilizar.

Por ejemplo, se puede crear una imagen que al hacerle "click" se envie un valor
al servidor Web para activar/desactivar una salida del PLC, e inmediatamente
cambiar la forma de la imagen para señalar que la salida esta activada o desactivada.

Puntos a tener en cuenta para entender los ejemplos:

Partimos del ejemplo WebServerPawn3.zip que es el mas simple.

En el archivo header.html debemos incluir la libreria jQuery de la siguiente forma:

Código: (HTML) [Seleccionar]
<!-- Cargar libreria jQuery desde Google -->
<script type="text/JavaScript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>

Es posible cargarla localmente, almacenandola en el PLC, pero esto ocupa memoria y ademas solo se aconseja si
el cliente web no tiene internet. De otra forma, es mas eficiente pedirla desde google ya que aumenta paralelismo,
velocidad, y es muy probable que cualquier navegador la tenga en cache si ya visito google.

En index.shtml debemos agregar selectores a los elementos HTML para luego accederlos desde JavaScript.

Por ejemplo:

Código: (HTML) [Seleccionar]
<p id="Counter1">Contador 1 = espere por favor...</p>
En el código anterior, el selector es "Counter1". Entonces, podremos acceder desde jQuery al elemento "p" de HTML usando el selector "Counter1" definido en el campo "id". Se debe anteponer el carácter #.

Es decir, desde jQuery podremos hacer $("#Counter1").text("Contador1 = 0") para cambiar el texto del elemento HTML

Luego, para definir código JavaScript debemos encerrarlo con los tags: <script> ... </script> en el cuerpo del documento (dentro de <body> ... <(body>) o tambien en los headers ( dentro de <head>...</head>).

En index.shhtml tenemos el siguiente código JavaScript:

Código: (JavaScript) [Seleccionar]
<script type="text/JavaScript">

// Esperar que pagina sea cargada completamente y llamar a DocumentReady()
$(document).ready(DocumentReady);

//
// DocumentReady(): Funcion llamada cuando la pagina se cargo completamente.
//

function DocumentReady()
{
// Actualizar valor de contadores..
UpdateCounter();
}

//
// UpdateCounter(): Actualiza valores de contadores en pagina.
//

function UpdateCounter()
{
// Obtener contenido dinamico de archivo con formato JSON.
// Llamar a funcion CounterDataReady() cuando los datos esten disponibles.
var JsonRequest = $.getJSON("counters.json", CounterDataReady);

// Asignar una funcion en caso de error al recibir datos.
JsonRequest.fail(CounterDataFail);

// Crear un timeout y llamar a esta funcion cada 1000 mS.
setTimeout(UpdateCounter, 1000);
}

//
// CounterDataReady(): Cuando los datos JSON de los contadores son recibidos, actualizar valores.
//

function CounterDataReady(json)
{
// Datos JSON recibidos en argumento, mostrar valor de contadores en pagina.
$("#Counter1").text("Contador 1 = " + json.Counter1);
$("#Counter2").text("Contador 2 = " + json.Counter2);
}

//
// CounterDataFail(): Cuando los datos JSON no son recibidos por error, mostrar mensaje.
//

function CounterDataFail()
{
// Error al recibir datos JSON, mostrar mensaje.
$("#Counter1").text("Contador 1 = error, datos no actualizados");
$("#Counter2").text("Contador 1 = error, datos no actualizados");
}

</script>

Como podemos ver:

$(document).ready(DocumentReady);

Llama a la funcion DocumentReady() cuando la pagina se terminó de cargar completamente.

function DocumentReady()
{
   // Actualizar valor de contadores..
   UpdateCounter();
}



En DocumentReady() se llama a la función UpdateCounter().

function UpdateCounter()
{
   // Obtener contenido dinamico de archivo con formato JSON.
   // Llamar a funcion CounterDataReady() cuando los datos esten disponibles.
   var JsonRequest = $.getJSON("counters.json", CounterDataReady);
   
   // Asignar una funcion en caso de error al recibir datos.
   JsonRequest.fail(CounterDataFail);
   
   // Crear un timeout y llamar a esta funcion cada 1000 mS.
   setTimeout(UpdateCounter, 1000);
}


En UpdateCounter() llamamos a la funcion $.getJSON("counters.json", CounterDataReady) la cual intercambia datos con el servidor, es decir, se conecta con el servidor web del PLC, pide el archivo counters.json y cuando el mismo se recibe, se llama a la funcion CounterDataReady() que es un call-back (una función que se llama luego cuando una operacion termina).

Tambien definimos un call-back por si las cosas salen mal (no hay conexion) y llamamos a CounterDataFail() con:

JsonRequest.fail(CounterDataFail);

Finalmente, creamos un timeout en 1000 mS para llamar nuevamente a la funcion UpdateCounter() para actualizar los datos en la pagina.

Como mencionamos, cuando los datos llegan se llama a:

function CounterDataReady(json)
{
   // Datos JSON recibidos en argumento, mostrar valor de contadores en pagina.
   $("#Counter1").text("Contador 1 = " + json.Counter1);
   $("#Counter2").text("Contador 2 = " + json.Counter2);
}


La cual obtiene los datos "parseados" o procesados del archivo "counters.json" y nos permite acceder a los valores de los contadores con  json.Counter1 y  json.Counter2.

   $("#Counter1").text("Contador 1 = " + json.Counter1);
   $("#Counter2").text("Contador 2 = " + json.Counter2);


Notar como usamos los selectores #Counter1 y #Counter2 para solo actualizar los elementos HTML necesarios (no toda la pagina Web).

También se llama a:

function CounterDataFail()
{
   // Error al recibir datos JSON, mostrar mensaje.
   $("#Counter1").text("Contador 1 = error, datos no actualizados");
   $("#Counter2").text("Contador 2 = error, datos no actualizados");
}


Solo para indicar falla en caso que los datos no se refresquen.

Si abrimos el archivo counters.json podremos ver sl siguiente formato:

Código: (JSON) [Seleccionar]
{
"Counter1": "$! PrintStr 31 $",
"Counter2": "$! PrintStr 32 $"
}

Observar como están formateado de a pares CAMPO:VALOR.

Las cadenas $! PrintStr 31 $ y $! PrintStr 32 $ son comandos CGI del servidor del PLC, que se procesan como eventos en "OnPrintEvent.p" como indica la nota de aplicación AN030 y se muestra a continuación:

Código: (Pawn) [Seleccionar]
      //
      // Procesar cadenas relacionadas a counter.json
      //

      case 31:
         WebServerPrintStr("%d", Counter1)
      case 32:
         WebServerPrintStr("%d", Counter2)

Si accedemos al archivo JSON desde el navegador (ejemplo: http://192.168.1.81/counters.json) podremos ver como los comandos CGI PrintStr son reemplazados por los valores devueltos por el PLC, tal como esperaríamos en un archivo .SHTML.

Eso es todo. Cualquier duda me avisas y te explico (es sencillo si lees el código).



Algunas notas:

  • Para el refresco de la pagina, valores muy pequeños debajo de 1000 mS pueden generar retardos de conexión en conexiones por celulares, debido a la naturaleza de las conexiones inalambricas móviles. Refrescos inferiores se recomienda solo para redes locales.
  • Los errores de tipeo en JavaScript no se muestran en pantalla al acceder desde el navegador, lo mismo que errores de formato en archivos JSON, por lo tanto se debe prestar especial atención al llamar dichas funciones y escribir el código, en caso de no obtener el funcionamiento deseado. Comprobar nombres y referencias.








« Última Modificación: mayo 18, 2016, 09:02:18 am por Soporte »
SOPORTE TÉCNICO

Slicetex Electronics
www.slicetex.com

Teraclima

  • Novato
  • *
  • Mensajes: 9
Re:Web Server- Actualización de datos en cliente
« Respuesta #5 : mayo 25, 2016, 16:23:56 pm »
Muchas gracias! Muy buena y muy detallada la explicacion!