Creazione di pagine web utente

Home / Knowledge Base / PLC SlimLine/NetSyst Cortex M7/ARM7 / Creazione di pagine web utente

Grazie al server web integrato è possibile trasferire sul sistema pagine utente, le pagine devono essere realizzate con un proprio editor HTML e trasferite nel file system del sistema. Nei sistemi ARM 7 si possono trasferire nelle cartelle Storage ed SDCard, nei sistemi Cortex si potranno trasferire all'interno della cartella C:/Web dove è anche possibile creare sottocartelle in cui trasferire le proprie pagine. Le pagine caricate saranno direttamente fruibili da browser semplicemente digitandone il percorso (Download programma con esempi).

Vediamo ad esempio una semplice pagina che visualizza un messaggio di presentazione, salvando il testo riportato in un file, esempio SPage.html, e trasferendo il file nella cartella C:/Web, sarà possibile visualizzare la pagina web risultante semplicemente digitando nel proprio browser l'indirizzo della pagina.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SlimLine - Simple page</title>
</head>
<body>
This page is served by the <b>SlimLine</b>
</body>
</html>
Screenshot pagina SPage.html

Pagine dinamiche, gestione TAGs ed ARGs

La caratteristica più importante del server web è possibilità di gestire le pagine dinamiche il cui contenuto, in tutto o in parte, è generato sul momento dal server, potendo dunque essere diversa ogni volta che viene richiamata, consentendo quindi un'interattività con l'utente. Per gestire le variabili si utilizzano TAGs ed ARGs che fanno riferimento a variabili allocate nella DB100.

TAGs: Per visualizzare il valore di variabili PLC nella pagina web è possibile nelle pagine con estensione htm inserire TAGs che indicano il formato di visualizzazione, il tipo e l'indirizzo della variabile da visualizzare (Esempio <!--['%d', UINT, 10]->, visualizza variabile UINT allocata a DB100.10). Le TAGs verranno sostituite dal server con il valore della variabile al momento di inviare il contenuto della pagina al browser.

ARGs: Per permettere l'impostazione di variabili PLC da pagina web è possibile inviare al server in POST degli ARGs indicando il tipo e l'indirizzo della variabile seguito dal valore da impostare (Esempio UINT 12=100, imposta valore 100 nella variabile UINT allocata a DB100.12). Si possono accodare più definizioni utilizzando il simbolo & (Esempio UINT 12=100&REAL 14=1.3). Per impostare da pagina web variabili PLC il metodo più semplice è di utilizzare i moduli, tutti gli oggetti contenuti tra <form> e </form>all'invio del form vengono automaticamente accodati ed inviati al sistema che aggiorna le variabili.

Nell'esempio seguente riporto il sorgente html di una semplice pagina (DPage.htm) che visualizza il valore di una variabile PLC di tipo UINT allocata all'indirizzo DB100.10 e permette di impostare il valore di una variabile PLC di tipo UINT allocata all'indirizzo DB100.12.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>SlimLine - Simple page</title>
</head>
<body">
DB100.10:&nbsp;<!--['%d', UINT, 10]--></br>
<form id="MyForm" name="MyForm" method="post" action="DPage.htm">
DB100.12:&nbsp;<input name="UINT 12" type="text" size="5" maxlength="10" value="<!--['%d', UINT, 12]-->">
&nbsp;<input type="submit" id="MyButton" value="Save"/>
</form>
</body>
</html>
Screenshot pagina DPage.htm

Aggiornamento pagine con AJAX

AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo per la realizzazione di applicazioni web interattive. Lo sviluppo di applicazioni HTML con AJAX si basa su uno scambio di dati in background fra web browser e server, che consente l'aggiornamento dinamico di una pagina web senza esplicito ricaricamento da parte dell'utente. Questa tecnica permette di avere un aggiornamento automatico dei dati in una pagina web senza dover ricaricare la pagina, permettendo di visualizzare le variabili PLC automaticamente. Le richieste AJAX sono grestite utilizzando le API fetch.

Ecco come si presenta la pagina web AjaxPage.html che visualizza il valore di un angolo ed i rispettivi valori di seno e coseno. I valori sono sono appoggiati in 3 variabili REAL, Angle DB 100.100, angolo in radianti, Sine DB 100.104, Cosine DB 100.108. Il programma PLC ogni secondo esegue l'incremento del valore dell'angolo con il valore della variabile IFactor DB100.112 impostabile da pagna web. Tutti i valori visualizzati sulla pagina vengono automaticamente aggiornati in AJAX ogni secondo. Nella pagina AjaxPage.html troverete le funzioni javascript di gestione:

Screenshot pagina AjaxPage.html
  • GetPage(Page, RFlag), Esegue la API Fetch richiamando in GET la pagina indicata in Page (Nell'esempio AjaxPage.htm) e sul ritorno dei dati esegue la funzione SetupValues che aggiorna i campi della pagina.
  • SubmitData(Page), Eesegue la API Fetch inviando in POST alla pagina indicata in Page (Nell'esempio AjaxPage.htm) i dati di set variabili e sul ritorno dei dati esegue la funzione SetupValues che aggiorna i campi della pagina.
  • LoadPage(Page), Eseguita al caricamento della pagina esegue la funzione GetPage per aggiornare immediatamente tutti i campi della pagina e poi attiva l'esecuzione a tempo sempre della funzione GetPage per aggiornare i campi automaticamente.
  • SetupValues(RData,RFlag), Valorizza gli oggetti nella pagina con i valori ricevuti in RData. RFlag se attiva abilita l'aggiornamento degli oggetti in inputazione. In questo modo è possibile disabilitarlo permettendo di scrivere il valore da browser senza che venga riscritto dall'aggiornamento automatico in AJAX.

Al caricamento pagina viene eseguita la funzione <body onLoad="LoadPage('AjaxPage.htm')"> indicando la pagina AjaxPage.htm, questa pagina contiene le TAGs che al caricamento saranno sostitute con il valore della variabile relativa. La pagina è scritta in modo da ritornare una stringa JSON con l'indicazione dell'id dell'oggetto ed il valore a cui settarlo.

{"Angle":<!--["%5.3f", REAL, 100]-->, "Sine":<!--["%5.3f", REAL, 104]-->, "Cosine":<!--["%5.3f", REAL, 108]-->,"IFactor":<!--["%5.3f", REAL, 112]-->}

In questo modo nella funzione SetupValues basterà parsare il ritorno per poter valorizzare gli oggetti. Da notare che al caricamento pagina RFlag è attivo in questo modo verrà valorizzato anche il campo di inputazione IFactor. Mentre sulla esecuzione in interval RFlag non è attiva bloccandone l'aggiornamento.

Ti è stato utile questo articolo ?