Come utilizzare il web server

» Home » Article » Come utilizzare il web server
  1. Home
  2. Knowledge Base
  3. Controllori SlimLine
  4. Esempi
  5. Come utilizzare il web server

Rimando alla lettura di questa Knowledge in cui si spiega come gestire un web server utilizzando il FB HTTPServer.

Web server

In informatica un server web (o web server) è un’applicazione software che, in esecuzione su un server, è in grado di gestire le richieste di trasferimento di pagine web di un client, tipicamente un web browser. La comunicazione tra server e client avviene tramite il protocollo HTTP, che utilizza la porta TCP 80. Per informazioni sul web server dei nostri sistemi rimando al relativo capitolo del Manuale programmazione IEC61131-3.

Pagine dinamiche

(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.

<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>

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. 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.

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.

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.

Aggiornamento pagine con AJAX

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 a tal scopo forniamo lo script “Sfw191a010.js” che dovrà essere incluso nella pagina web.

Esempio: AJAXUpdate

In questo esempio il sistema SlimLine esegue l’incremento ad ogni secondo di un contatore (Da 0 a 999), il valore di conteggio è visualizzato sulla pagina web. Sulla pagina è gestita anche la visualizzazione del valore suddiviso nei 3 digits.

Il valore di Counter value (id=”Counter”) può essere impostato da pagina, i valori di Counter digits (id=”Hundreds”, id=”Tens”, id=”Units”) sono solo in visualizzazione. Impostando Counter value ed inviando il valore con il tasto Save il conteggio continua dal valore impostato. Ecco il codice javascript presente nella head della pagina che ne gestisce l’aggiornamento ad ogni secondo.

<script src="Sfw191a010.js"></script>
<script>
    function SetupValues(PContent)
    {
        var Value=new Array(); //Array valori ricevuti da server
        if (PContent.indexOf('|') != -1)
        {
            Value=PContent.split('|');
            if (document.activeElement !== document.getElementById("Counter")) document.getElementById("Counter").value=Value[0];
            document.getElementById("Units").value=Value[1];
            document.getElementById("Tens").value=Value[2];
            document.getElementById("Hundreds").value=Value[3];
        }
    }
</script>
</head>
<body onLoad="setInterval('AJAXSendRequest(\'Values.htm\')', 1000)">

Sul caricamento della pagina viene impostato il tempo di esecuzione della funzione AJAX, ad ogni secondo viene richiesta al server la pagina Values.htm (Che deve essere caricata nella cartella C:/Web). Questa pagina contiene i TAGs relativi alle variabili da visualizzare il cui valore viene ritornato a passato alla funzione SetupValues che lo parsa e copia i valori negli oggetti di visualizzazione. La pagina Values.htm ritorna i valori delle 4 variabili separati dal simbolo |. Ecco il listato di questa pagina.

<!--['%d', UINT, 0]-->|<!--['%d', UINT, 2]-->|<!--['%d', UINT, 4]-->|<!--['%d', UINT, 6]-->

Come vedete contiene dei TAGs che saranno sostituiti con il valore delle rispettive variabili. Siccome i campi sono costantemente aggiornati in AJAX dovendo gestire l’impostazione del valore di Counter value (id campo Counter), è stato inserito un controllo sull’aggiornamento del suo valore, quando l’oggetto è attivo (Cursore del mouse sull’oggetto) l’aggiornamento si arresta.

Ti è stato utile questo articolo ?