Pagine web dinamiche su SlimLine e Netsyst

Home / Knowledge Base / PLC SlimLine/NetSyst Cortex M7/ARM7 / Programmazione LogicLab / Esempi / Pagine web dinamiche su SlimLine e Netsyst

Pagine web dinamiche

Rimando alla lettura di questo articolo in cui si spiega come gestire un web server utilizzando il FB HTTPServer.
(Download esempi) La caratteristica più importante del web server web dei nostri sistemi è la possibilità di gestire le pagine dinamiche. Una pagina web dinamica è una pagina 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 aiutare nella realizzazione delle pagine dinamiche forniamo esempi con programma SlimLine e pagine web.

TAGs: All'interno di pagine con estensione htm è possibile inserire TAGs che verranno automaticamente sostituiti dal server con il valore della variabile PLC. I TAGs hanno il costrutto di un commento HTML, ad esempio il TAG "<!--['%d', UINT, 10]->" verrà sostituito con il valore della variabile UINT allocata nella DB100.10.

ARGs: All'interno di pagine con estensione htm è possibile inserire ARGs che permettono di impostare da pagina web valori di variabili PLC. Per definire le ARGs si utilizzano i nomi degli oggetti che saranno inviati in POST al server, ad esempio un oggetto input di nome "UINT 12" permette di impostare con il valore definito la variabile PLC allocata all'indirizzo DB100.12.

Ecco una pagina html con la visualizzazione di un TAG e con l'impostazione di un ARG. Salvando il testo riportato in un file, esempio DPage.htm, e trasferendo il file nella cartella C:/Web (o cartella Storage sui sistemi ARM 7) di SlimLine, sarà possibile visualizzare la pagina web risultante semplicemente digitando nel proprio browser l'indirizzo IP del dispositivo seguito dal nome della pagina.

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

Come si vede nella riga superiore viene visualizzato il valore della variabile PLC DB100.10 mentre impostando un valore nella casella di testo della riga inferiore e agendo sul tasto Save sarà possibile impostare il valore della variabile PLC DB100.12. In una pagina web possono essere visualizzate e impostate tutte le variabili desiderate, si consiglia comunque di non esagerare con il numero di variabili, è preferibile suddividerle in più pagine.

Esempio: WebObjects

Semplicemente utilizzando gli oggetti messi a disposizione dal linguaggio HTML si possono fare pagine con un piacevole impatto grafico come è possibile vedere in questo esempio. Per inviare i valori allo SlimLine occorre agire sul tasto Save, agendo sul tasto Reload si richiede la pagina al server aggiornando i valori delle variabili SlimLine. In questo esempio ogni volta che desideriamo visualizzare i nuovi valori occorre ricaricare l'intera pagina, utilizzando la tecnica AJAX è possibile gestire l'aggiornamento automatico delle variabili.

Check box: Eseguendo il tick si attiva una variabile BOOL, lo stato dei primi 2 è trasferito anche sulle uscite logiche del modulo CPU.

Radio button (A): Questi radio button riportano lo stato degli ingressi del modulo CPU. Come vedi hanno attributo name diverso, in questo modo sono oggetti unici e tra di loro slegati. Siccome sono di sola visualizzazione sono stati disabilitati in modo da non essere modificabili da pagina web.

Radio button (B): Questi radio button hanno lo stesso attributo name è quindi agendo su di uno si disabilita l’altro. Agiscono su una variabile USINT, che viene valorizzata in base alla selezione.

Text field: Definendo il valore viene valorizzata una variabile UINT con il valore definito.

Progress bar: Viene visualizzata una barra progressiva con il valore impostato nel campo Text field.

Select: Scegliendo una delle opzioni viene valorizzata una variabile USINT.

Screenshot pagina web con oggetti HTML

Esempio: AJAXUpdate

AJAX, acronimo di Asynchronous JavaScript and XML, è una tecnica di sviluppo software 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. Per gestire l'aggiornamento nella pagina deve essere inserito uno script java che gestisce le richieste AJAX, troverete lo script nella nostra pagina di esempio.

Nell'esempio AJAXUpdate viene gestita una pagina web con la visualizzazione di due contatori ed una semplice calcolatrice che permette le 4 operazioni, i valori sono aggiornati in AJAX.

Come si vede nella finestra a lato nel browser Chrome è stata abilitata la console di ispezione codice che peremette di visualizzare i dati AJAX in scambio con lo SlimLine ed i mesaggi inviati da programma Javascript con il comando console.log.

Gestione counters: Eseguito incremento ad ogni secondo di due contatori (Da 0 a 999), il valore di conteggio è visualizzato sulla pagina web in casella di testo. Posizionandosi sulla casella la visualizzazione si arresta ed è possibile impostare un nuovo valore. Con il tasto Update il valore verrà inviato allo SlimLine.

Calcolatrice: Impostando da pagina web il valore degli operandi e scegliendo l'operazione da effettuare con il tasto Calculate vengono inviati i dati allo SlimLine che esegue il calcolo e viene visualizzato il risultato. E' gestito anche il report delle ultime 4 operazioni eseguite.

Screenshot pagina web AJAXUpdate

Per testare l'esempio trasferire il file Index.htm con la pagina, ed il file Values.htm con i valori, nella cartella C:/Web (o cartella Storage sui sistemi ARM 7). Al caricamento della pagina viene impostato il tempo di esecuzione della funzione PRefresh che richiede allo SlimLine la pagina Values.htm, la pagina contiene i TAGs relativi alle variabili da visualizzare e li ritorna come stringa JSON. Il valore ritornato dalla pagina è passato alla funzione PUpdate che lo parsa e copia i valori negli oggetti di visualizzazione.

Siccome i campi della pagina sono aggiornati ogni secondo in AJAX dovendo gestire l'impostazione del valore dei countersè stato inserito un controllo sull'aggiornamento del valore, quando l'oggetto è attivo (Cursore del mouse sull'oggetto) l'aggiornamento si arresta.

Esempio responsive

Nel programma LInputOnWeb è gestita una semplice pagina responsive realizzata con Skeleton, nella pagina è visualizzato lo stato dei 6 ingressi di un modulo CPU compact ethernet. Nel progetto oltre al programma LogicLab vi è la cartella Storage che contiene i files da trasferire nella omonima cartella del modulo CPU.

Il titolo della pagina e la descrizione degli ingressi digitali è definita nel file Defs.js. Nel file Values.htm sono inseriti i TAGs che verrano sostituiti al caricamento con i reali valori delle variabili definite. Nel file Fcts.js vi è la funzione javascript che esegue l'aggiornamento a tempo dello stato degli ingressi.

Ti è stato utile questo articolo ?