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:
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 **
In pratica un campo **