Realizzare pagine web in Ajax con FB HTTPServer

  1. Home
  2. Knowledge Base
  3. PLC SlimLine/NetSyst Cortex M7/ARM7
  4. Programmazione LogicLab
  5. Esempi
  6. Realizzare pagine web in Ajax con FB HTTPServer

Scopo del programma

In questo articolo vedremo come utilizzare il FB HTTPServer per realizzare in modo semplice pagine HTML responsive e non che permettono di interagire con il programma PLC scambiando dati in formato JSON mediante tecnica Ajax utilizzando jProbeLite un file javascript che si occuperà di gestire la comunicazione .

Come si vede dall immagine, dalle pagina web si vede in ordine: la data e l'ora, dividendo, divisore , il comando accendi, il comando spegni, e la casella di status. Il programma si basa sul FB HTTPServer che permette di gestire fino a 2 connessioni contemporanee.

RespoonsiveAjaxPage

Il programma è fornito in un file zip che oltre al programma sorgente da aprire con LogicLab contiene la cartella WPages con all interno 4 File Home.html, RHome.html jProbeLite.js e la favicon.ico tutti da trasferire nella cartella definita nel programma PLC, nel nostro esempio C:/WPages.

Il lato PLC

Nella inizializzazione viene configurato il server HTTP impostando il numero di connessioni contemporanee gestite, la porta in ascolto (Nel nostro esempio è la 2000), la directory in cui si trovano le pagine da visualizare "C/WPages/" e la pagina di default che viene ritornata "Home.htm" quando è richiesto il solo indirizzo IP del dispositivo. Viene impostata anche la dimensione del buffer TCP che determina la dimensione massima dei pacchetti TCP scambiati con il client e la dimensione del buffer HTTP che deve essere dimensionata per contenere oltre all'header di richiesta anche tutti i dati ricevuti dal client (Esempio in caso di richiesta POST).

Viene poi gestito il server che accetta le connessioni dai clients (Web browser) sulla porta 2000. Appena dopo l'esecuzione si resettano le variabili RAck e RNAck che sono da settare nella gestione dei dati ricevuti dal client per inviare la risposta al client. Alla ricezione della richiesta di una pagina la pagina viene automaticamente ritornata se presente nella cartella definita in HPath. Se non è presente viene attivato RRcvd che fà proseguire l'esecuzione nella gestione delle sequenze.

Il lato Browser

Per realizzare un file HTML che comunica con il nostro PLC in ajax ci sono alcuni punti chiave da rispettare:

Le Inclusioni

jProbeLite.js Disponibile all'interno del nostro pacchetto PTP157.
jQuery Per chi desidera avere il sistema funzionante anche senza connessione a internet è possibile includerlo dal PLC alla cartella  /scripts/jqueryf.js. In alternativa per chi è sempre connesso ad internet può includerlo da CDN.

<script src="jProbeLite.js" type="text/javascript"></script>
<script src="http://192.168.0.128/scripts/jqueryf.js"></script>

Il refresh a tempo

La nostra pagina web per avere i dati sempre aggiornati dovrà aggiornarsi a tempo, ogni X milli secondi quindi, grazie a jProbeLite basterà inserire sull'elemento body l'esecuzione temporale (Nell'esempio ogni secondo) della funzione Update (Presente in jProbeLite) che richiederà la pagina GetData.cgi che deve essere definita nel programma PLC (Vedi listato):

<body onload="Update('GetData.cgi',1000)">

La visualizzazione dei valori

Il refresh a tempo, aggiornerà gli elementi del DOM come (span, checkbox), l'id dell'elemento dovrà essere uguale al Name dell'oggetto JSON ritornato dal PLC.

<span id="DateTime"></span>
<input type="checkbox" id="Status">

L'invio dei valori

E' possibile inviare al PLC dei valori che l'utente può inserire nella pagina web tramite input. Tramite alla funzione SendValue chiamata sul cambiamento del valore avremo automaticamente inviato i valori, ogni qualvolta questi cambieranno, l'id dell'elemento dovrà essere uguale al Name del JSON encode nel PLC.

<input type="text" id="Dividend" size="5 "maxlength="10" onchange="SendValue(this, 'SetData.cgi');" class="form-control">

L'invio dei comandi

L'invio di un comando non appena questo viene premuto è molto simile a quello dell'invio dei valori, l'unica differenza è data dal fatto che il comando verrà inviato sull'azione di click. Il valore inviato è quello indicato dall'attributo value, l'id dell'elemento dovrà essere uguale al Name del JSON encode nel PLC.

<button id="Command" value="On" onclick="SendValue(this, 'SetData.cgi');">

Conclusioni

La disponibilità del FB HTTPServer permette di aggiungere uno o più server web nel proprio programma PLC permettendo di gestire scambio dati in JSON con il browser e/o di gestire servizi web come ad esempio richieste REST.

Ti è stato utile questo articolo ?

Ultimo aggiornamento: 30 Settembre 2020