Creazione pagine web utente =========================== Con il nuovo sistema operativo SFW184 è stata implementata la possibilità di creare pagine web direttamente dall'utente, queste pagine potranno essere trasferite nelle directory del sistema e verranno visualizzate accedendo da browser web. Per trasferire le pagine web create dall'utente nel file system del sistema SlimLine occorre utilizzare un client Ftp (Esempio FileZillla) ma è possibile usare anche il semplice esplora risorse di Windows. Come si vede dalla figura sottostante, impostando nella barra indirizzo le credenziali di accesso al sistema ed il suo indirizzo IP **ftp://Admin:Admin@192.168.0.162**, è possibile connettersi e visualizzare il file system. |image0| Ecco come si presenta la visualizzazione del file system alla connessione. Le cartelle **Project** e **System** sono riservate al sistema e si consiglia di **non modificarne il contenuto**. I file delle pagine utente possono essere trasferiti nelle cartelle **Storage** e **SDCard** (Se presente). |image1| Quindi l'utente può creare le sue pagine web utilizzando un qualsiasi editor html ma anche semplicemente usando un semplice editor di testo come il blocco note, certo deve conoscere la sintassi del linguaggio html. Le pagine create saranno trasferite nella directory desiderata ed accedendo da un normale browser alla pagina la pagina sarà visualizzata. **Criteri per realizzazione pagina** ------------------------------------ Naturalmente il web server integrato nello SlimLine ha solo un ridotto set di funzioni e quindi nella creazione delle pagine web occorre sottostare a certe regole, vediamole: a) La pagina non può contenere inclusione di altre pagine (Esempio pagine di stile o di scripts). b) La pagina non può contenere inclusione di immagini (Esempio file gif o jpg), eventuali immagini possono essere embedded nella pagina stessa. Vediamo ad esempio una semplice pagina che visualizza un messaggio di presentazione. **Sorgente html pagina** .. code-block:: HTML SlimLine - Simple page This page is served by the SlimLine Salvando il testo riportato in un file, esempio **SPage.htm**, e trasferendo il file nella directory **Storage** di SlimLine, sarà possibile visualizzare la pagina web risultante semplicemente digitando nel proprio browser l'indirizzo della pagina. |image2| Naturalmente la pagina può contenere links ad altre pagine, sarà così possibile realizzare una propria navigazione tra diverse pagine. Ecco lo stesso esempio di prima con incluso la definizione di uno stile. **Sorgente html pagina** .. code-block:: HTML SlimLine - Simple page This page is served by the SlimLine Pagine dinamiche ---------------- La caratteristica più importante del server web integrato in SlimLine è 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. Ecco quindi che sarà possibile realizzare pagine che riportano valori di variabili PLC e permettono di modificare il valore di variabili PLC. Nell'esempio seguente riporto il sorgente html di una semplice pagine 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. **Sorgente html pagina** .. code-block:: HTML SlimLine - Simple page DB100.10: 
DB100.12:   
Salvando il testo riportato in un file, esempio **DPage.htm**, e trasferendo il file nella directory **Storage** di SlimLine, sarà possibile visualizzare la pagina web risultante semplicemente digitando nel proprio browser l'indirizzo della pagina. |image3| 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. Naturalmente in una pagina web possono essere visualizzate e possono essere impostate tutte le variabili desiderate, si consiglia comunque di non esagerare con il numero di variabili, è preferibile suddividerle in più pagine. Formato TAGs ------------ Come si è visto in una pagina dinamica parte del contenuto viene generato sul momento dal server Http (Il modulo CPU SlimLine), vediamo quali sono i meccanismi per definire le **TAGs** da visualizzare. All'interno del sorgente della pagina Html è possibile definire dei campi di commento del tipo . I campi sono interpretati come commenti e quindi sono gestibili da qualsiasi editor Html (Esempio Macromedia), ma il server Http nel momento in cui invia la pagina al client (Il browser che la visualizza) sostituisce al campo il valore della variabile indicata. Nell TAG sono riportate tutte le informazioni necessarie secondo la sintassi ```` Campo Format ^^^^^^^^^^^^^ La stringa di formattazione **Format**, può contenere elementi di due tipi, il primo consiste in caratteri che vengono ritornati nella pagina inalterati. Il secondo consiste in direttive di conversione che descrivono il modo in cui gli argomenti devono essere visualizzati. Le direttive di conversione iniziano con il simbolo % seguito dalle direttive secondo il formato: `` % [Flags] [Width] [.Precision] [Length] Conversion `` +-----------------------------------+-----------------------------------+ | **Flags** | | +-----------------------------------+-----------------------------------+ | + | La visualizzazione delle | | | variabili con segno, inizierà | | | sempre con il segno - o +. | +-----------------------------------+-----------------------------------+ | space | La visualizzazione delle | | | variabili con segno, inizierà | | | sempre con il segno - o con lo | | | spazio. | +-----------------------------------+-----------------------------------+ | x | I valori diversi da 0 vengono | | | prefissati con 0x. | +-----------------------------------+-----------------------------------+ | 0 | Al valore visualizzato vengono | | | aggiunti 0 fino al raggiungimento | | | del numero di cifre desiderato | | | (Per variabili di tipo d, i, o, | | | u, x, X, e, E, f, g, G). | +-----------------------------------+-----------------------------------+ **Width:** Definisce il numero di cifre che devono essere visualizzate. **Precision:** Definisce il numero di cifre decimali da visualizzare (Per variabili di tipo e, E, f). +-----------------------------------+-----------------------------------+ | **Length** | | +-----------------------------------+-----------------------------------+ | h | Prima di (d, i, u, x, X, o) | | | denota una variabile short int o | | | unsigned short int. | +-----------------------------------+-----------------------------------+ | l (elle) | Prima di (d, i, u, x, X, o) | | | denota una variabile long int o | | | unsigned long int. | +-----------------------------------+-----------------------------------+ | L | Prima di (e, E, f, g, G) denota | | | una variabile long double. | +-----------------------------------+-----------------------------------+ +-----------------------------------+-----------------------------------+ | **Conversion** | | +-----------------------------------+-----------------------------------+ | d | Valore decimale con segno. | +-----------------------------------+-----------------------------------+ | i | Valore decimale con segno. | +-----------------------------------+-----------------------------------+ | o | Valore ottale senza segno. | +-----------------------------------+-----------------------------------+ | u | Valore decimale senza segno. | +-----------------------------------+-----------------------------------+ | x | Valore esadecimale, viene | | | visualizzato utilizzando lettere | | | minuscole (Da 0 a 9, da a a f). | +-----------------------------------+-----------------------------------+ | X | Valore esadecimale, viene | | | visualizzato utilizzando lettere | | | maiuscole (Da 0 a 9, da A a F). | +-----------------------------------+-----------------------------------+ | e | Valore decimale in virgola | | | mobile, visualizzato con | | | indicazione dell'esponente | | | (Esempio: [-]d.ddde+dd). | +-----------------------------------+-----------------------------------+ | E | Valore decimale in virgola | | | mobile, visualizzato con | | | indicazione dell'esponente | | | (Esempio: [-]d.dddE+dd). | +-----------------------------------+-----------------------------------+ | f | Valore decimale in virgola mobile | | | (Esempio: [-]d.ddd). | +-----------------------------------+-----------------------------------+ | c | Singolo carattere. | +-----------------------------------+-----------------------------------+ | s | Stringa. | +-----------------------------------+-----------------------------------+ Campo Type ^^^^^^^^^^^^^^ Il campo **Type** indica il tipo di variabile che si vuole visualizzare, sono gestiti tutti i tipi definiti nella IEC61131. Campo Address ^^^^^^^^^^^^^^ Il campo Address indica l'indirizzo della variabile, ricordo che è possibile indicare solo variabili allocate nella DB 100. Esempi di TAGs ^^^^^^^^^^^^^^^^ Per meglio comprendere il formato di visualizzazione delle TAGs riporto alcuni esempi. +-----------------------------------+-----------------------------------+ | | Visualizza il valore della | | | variabile UINT allocata | | | all'indirizzo DB 100.10 con un | | | numero di cifre intere variabili | | | in base al valore. | +-----------------------------------+-----------------------------------+ | | Visualizza il valore della | | | variabile UINT allocata | | | all'indirizzo DB 100.10 sempre | | | espresso con 4 cifre. | +-----------------------------------+-----------------------------------+ | | Visualizza il valore della | | | variabile REAL allocata | | | all'indirizzo DB 100.32 con 3 | | | cifre intere e nessuna cifra | | | decimale. | +-----------------------------------+-----------------------------------+ | | Visualizza il valore della | | | variabile REAL allocata | | | all'indirizzo DB 100.50 con 2 | | | cifre intere e 2 cifre decimali. | +-----------------------------------+-----------------------------------+ Formato ARGs ------------ La principale peculiarità del web dinamico è la possibilità di variare i contenuti delle pagine in base alle richieste degli utenti. Questa possibilità si materializza attraverso i meccanismi che permettono agli utenti, oltre che di richiedere una pagina ad un web server, anche di specificare determinati parametri da inviare al server web. Per impostare da pagina web valori di variabili PLC viene gestita una richiesta di tipo POST, il metodo è utilizzato con i moduli: quando una pagina Html contiene un tag **
**. I dati impostati nei vari oggetti contenuti nel **** sono inviati in maniera da non essere direttamente visibili per l’utente, attraverso la richiesta HTTP che il browser invia al server. Se ci riferiamo all'esempio precedente vediamo che la parte di pagina Html che permette l'impostazione della variabile PLC UINT allocata all'indirizzo DB 100.12 è la seguente. **Sorgente html pagina** .. code-block:: HTML DB100.12:   
In pratica un campo **
** con id **MyForm** contiene una casella di testo con id **UINT12** di dimensione 5 caratteri con un massimo impostabile di 10 caratteri. Nel form trova posto anche un pulsante di tipo submit la cui pressione esegue l'invio dell'intero modulo. Definendo nel browser il valore della casella di testo ed agendo sul tasto **Save**, il dato inputato verrà inviato al server che visualizzerà la pagina **DPage.htm** e contemporaneamente provvederà a scrivere il valore definito nella variabile UINT DB100.12. ARG name ^^^^^^^^^ Il campo **name** dell'argomento è molto importante in quanto definisce il tipo di variabile PLC da impostare (Sono gestiti tutti i tipi definiti nella IEC61131) ed il suo indirizzo, i due campi devono essere separati da uno spazio. Un nome del tipo **UINT 12** indicherà una variabile UINT allocata ad indirizzo DB 100.12. Un nome del tipo **REAL 128** indicherà una variabile REAL allocata ad indirizzo DB 100.128. Quindi un nome del tipo **STRING 1000 16** indicherà una variabile STRING di lunghezza 16 caratteri allocata ad indirizzo DB 100.1000. ARG id ^^^^^^^ Il campo **id** dell'argomento serve a referenziare l'oggetto all'interno del form in modo da poterlo valorizzare con la funzione **SetValues()**. La scelta di definirlo come UINT12 utilizzata nell'esempio è puramente indicativa, meglio sarebbe utilizzare una definizione che ne riprenda il significato (Esempio “SetPoint”, “Preset”, ecc.). Alcuni esempi ------------- Naturalmente le pagine web vanno create in base alle proprie esigenze inserendo gli oggetti desiderati. Per facilitare lo sviluppo delle proprie pagine viene fornito un programma dimostrativo PTP128*000 che contiene una serie di programmi SlimLine e relative pagine web. Per testare i vari programmi occorre trasferire sul modulo CPU il programma tramite LogicLab e tramite un client FTP trasferire la pagina **htm** nella directory **Storage**. Ora da un browser si digita l'indirizzo IP del modulo CPU seguito dalla directory e dal nome della pagina Esempio **http://192.168.0.122/Storage/Page.htm**. LogicIO, gestione I/O logici ---------------------------- Ecco un esempio di gestione I/O logici da pagina web, per visualizzare lo stato degli ingressi e delle uscite sono stati utilizzati degli oggetti **checkbox**. Lo stato di attivo è indicato dalla presenza del tick, per attivare le uscite si pone il tick sulla uscita desiderata e si agisce sul tasto **Set outputs**. |image4| Per visualizzare lo stato reale degli ingressi la pagina viene automaticamente rinfrescata ogni 10 secondi. Per ottenere l'aggiornamento della pagina dopo la direttiva **** viene posta la dichiarazione: **** Per la gestione della pagina sono utilizzate alcune funzioni javascript. **Check(Field, Value)**, Imposta o rimuove il simbolo di tick sull'oggetto di tipo checkbox indicato in **Field** in base a **Value**. **SetValues()**, Eseguita al caricamento della pagina esegue l'aggiornamento di tutti gli oggetti di tipo checkbox presenti. **SubmitForm(Form)**, Eseguita su pressione del tasto Set outputs controlla se i checkbox di attivazione uscite sono settati ed aggiorna il valore dei campi hidden di scrittura variabili. **Sorgente funzioni javascript di pagina** .. code-block:: HTML COMPort, parametri comunicazione seriale ---------------------------------------- Ecco un esempio di come gestire la visualizzazione e l'impostazione dei parametri di comunicazione seriale da pagina web. Per la selezione della porta, baud rate, numero bit dato, tipo di parità e modo di gestione del segnale DTR si sono utilizzati oggetti **select**. L'oggetto select permette di selezionare il valore desiderato tramite una lista di valori. Per le definizione dei tempi di ritardo sul segnale DTR si sono utilizzati degli oggetti **text** che permettono di visualizzare ed impostare valori. Richiamando la pagina vengono visualizzati i valori corrispondenti alle impostazioni definite nelle variabili dello SlimLine. I valori sono stati appoggiati su di un'area ritentiva per mantenerne il valore impostato anche allo spegnimento del sistema. Definendo nuovi valori ed agendo sul tasto **Preset COM port** i valori saranno trasferiti nelle variabili dello SlimLine e la pagina verrà visualizzata con i nuovi valori definiti. Ecco come si presenta la pagina web, è stata visualizzata sulla finestra del programma LogicLab che visualizza in debug i valori delle variabili. |image5| Funzioni javascript ^^^^^^^^^^^^^^^^^^^^^^ Per la gestione della pagina sono utilizzate alcune funzioni javascript. **Set(Field, Value)**, Imposta il campo **text** di name **Field** con il valore **Value**. **Choose(Field, Value)**, Seleziona l'oggetto **select** di name **Field** sull'opzione il cui valore corrisponde a **Value**. **SetValues()**, Eseguita al caricamento della pagina esegue l'aggiornamento di tutti gli oggetti presenti. **Sorgente funzioni javascript di pagina** .. code-block:: HTML **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. 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. Vediamo come funziona questa tecnica, nella pagina web deve essere inserito uno script java che gestisce le richieste AJAX. Viene fornito uno script già pronto all'uso (Ns codice SFW191*000). |image6| Ecco come si presenta una pagina web che visualizza il valore di un angolo ed i rispettivi valori di seno e coseno. I valori sono gestiti dallo SlimLine che ne esegue la variazione a tempo. I valori sono appoggiati in 3 variabili nella DB 100. Angle UINT DB 100.0 Contiene valore angolo Sin REAL DB 100.4 Contiene valore del seno Cos REAL DB 100.8 Contiene valore del coseno **Sorgente html pagina** .. code-block:: none AJAX Page
Angle: Sin: Cos:
Sul caricamento della pagina **** viene eseguita la richiesta AJAX ogni 3 secondi della pagina **Values.htm**. Il valore di ritorno di questa pagina viene automaticamente passato alla funzione **SetupValues** che lo parsa e copia i valori negli oggetti di visualizzazione. La pagina **Values.htm** ritorna i valori delle 3 variabili separati dal simbolo \|. Ecco il listato di questa pagina. **Sorgente pagina Values.htm** .. code-block:: HTML || .. |image0| image:: media/image1.jpg :width: 6.19653in :height: 2.70833in .. |image1| image:: media/image2.jpg :width: 6.32292in :height: 2.575in .. |image2| image:: media/image3.jpg :width: 5.425in :height: 1.61389in .. |image3| image:: media/image4.jpg :width: 5.39792in :height: 1.95694in .. |image4| image:: media/image5.jpg :width: 6.0625in :height: 3.13542in .. |image5| image:: media/image6.jpg :width: 7.08681in :height: 4.01181in .. |image6| image:: media/image7.jpg :width: 3.83333in :height: 1.55208in