Passa al contenuto principale

Creazione di pagine web utente

Per realizzare pagine dinamiche e interfacce grafiche web, ti consigliamo di consultare la documentazione di ePageStudio.

I nostri sistemi SlimLine e Netsyst dispongono di un server web integrato, che permette di trasferire sul dispositivo pagine utente visualizzabili tramite browser.

Le pagine devono essere realizzate con un editor HTML e trasferite nel file system del sistema:

  • Sistemi ARM7: le pagine possono essere trasferite nelle cartelle Storage e SDCard.
  • Sistemi Cortex-M7: le pagine possono essere trasferite nella cartella C:/Web, creando eventuali sottocartelle.

Le pagine caricate sono accessibili tramite browser, digitando l'indirizzo IP del dispositivo seguito dal percorso della pagina.

Per applicazioni web più complesse è disponibile il blocco funzione HTTPServer, che permette al programma PLC di generare dinamicamente il contenuto da restituire al browser.

È disponibile per il download il programma PTP153, che contiene:

  • LogicLab: programma di gestione delle pagine da trasferire sul sistema SlimLine.
  • Web: cartella WPages, contenente pagine web da trasferire nella directory C:/Web del sistema SlimLine.

Ad esempio, digitando nel browser l'indirizzo seguente è possibile accedere alla pagina indice e navigare tra gli esempi:

http://xxx.xxx.xxx.xxx/WPages/Index.html

Sostituisci xxx.xxx.xxx.xxx con l'indirizzo IP del dispositivo.

Tutti gli esempi possono essere modificati utilizzando un semplice editor di testo, ad esempio Notepad++.

È inoltre disponibile il nuovo builder ePageStudio.

Concetto di funzionamento del server HTTP

Approfondimenti​

Simple page​

L'esempio SPage.html mostra una semplice pagina di presentazione.

Per chi non conosce HTML, è possibile effettuare prove modificando il file SPage.html con un editor di testo o un editor HTML. Salvando il file modificato e aggiornando la pagina nel browser, è possibile vedere immediatamente le modifiche.

In questo modo si possono aggiungere elementi HTML e verificarne il funzionamento.

Screenshot della pagina SPage.html

Pagine dinamiche: gestione di TAG e ARG​

L'esempio DPage.htm visualizza il valore della variabile PLC VView, di tipo UINT, allocata all'indirizzo DB100.10, e permette di impostare il valore della variabile VSet, di tipo REAL, allocata all'indirizzo DB100.12.

L'esempio evidenzia una caratteristica importante del server web: la possibilità di generare pagine il cui contenuto viene modificato dal server.

L'interattività con l'utente viene gestita attraverso:

  • TAG: consentono di visualizzare nelle pagine web i valori delle variabili PLC.
  • ARG: consentono di modificare i valori delle variabili PLC inviando richieste al server.

TAG e ARG fanno riferimento a variabili allocate nella DB100 del PLC e devono essere inseriti nelle pagine con estensione .htm.

Screenshot della pagina DPage.htm

Formato TAG​

Le TAG permettono di visualizzare il valore delle variabili PLC. Indicano il formato di visualizzazione, il tipo e l'indirizzo della variabile.

La sintassi è:

<!--["Format", Type, Address]-->

Le TAG vengono interpretate come commenti HTML. Quando il server HTTP invia la pagina al browser, sostituisce ciascuna TAG con il valore della variabile indicata.

Format

Indica il formato di visualizzazione e inizia con %, seguito dalle specifiche di formattazione. Per maggiori informazioni consulta l'articolo sui segnaposto del formato printf.

Type

Indica il tipo della variabile da visualizzare, tra quelli supportati secondo la norma IEC 61131. Per ulteriori dettagli consulta la colonna IECType della tabella dei tipi VR.

Address

Indica l'indirizzo della variabile. È possibile indicare soltanto variabili allocate nella DB100.

Esempi di TAG​

È importante rispettare la posizione delle virgole e degli spazi.

<!--["%d", UINT, 10]-->

Visualizza la variabile UINT allocata a DB100.10, con un numero di cifre intere variabile in base al valore.

<!--["%04d", UINT, 10]-->

Visualizza la stessa variabile utilizzando quattro cifre.

<!--["%3.0f", REAL, 32]-->

Visualizza la variabile REAL allocata a DB100.32, senza cifre decimali.

<!--["%4.2f", REAL, 50]-->

Visualizza la variabile REAL allocata a DB100.50, con due cifre decimali.

<!--["%s", STRING, 128]-->

Visualizza la variabile STRING allocata a DB100.128.

Formato ARG​

Gli ARG vengono utilizzati nelle richieste HTTP POST per impostare il valore delle variabili PLC.

La sintassi è:

Type Address [Length]=Value

I campi sono:

  • Type: tipo della variabile da impostare, secondo i tipi supportati dalla norma IEC 61131. Consulta la colonna IECType della tabella dei tipi VR.
  • Address: indirizzo della variabile, limitato alle variabili allocate nella DB100.
  • Length: lunghezza massima della stringa, fino a 200 caratteri. Si utilizza soltanto per le stringhe e deve corrispondere alla lunghezza assegnata alla variabile.
  • Value: valore da assegnare alla variabile.

Esempi di ARG​

UINT 12=10

Imposta a 10 la variabile UINT allocata a DB100.12.

REAL 128=185.5

Imposta a 185.5 la variabile REAL allocata a DB100.128.

STRING 1000 16="Hello!"

Imposta la variabile STRING allocata a DB100.1000 con il testo Hello!, utilizzando una lunghezza dichiarata di 16 caratteri.

È possibile accodare più definizioni di ARG utilizzando &, ad esempio:

UINT 12=100&REAL 14=1.3

Per impostare le variabili PLC da una pagina web, il metodo più semplice consiste nell'utilizzare un modulo HTML (form). Al suo invio, gli oggetti contenuti nel modulo vengono automaticamente accodati e inviati al sistema, che aggiorna le variabili corrispondenti.

Aggiornamento delle pagine con AJAX​

AJAX (Asynchronous JavaScript and XML) è una tecnica utilizzata per realizzare applicazioni web interattive. Consente lo scambio di dati in background tra browser e server, aggiornando dinamicamente una pagina senza doverla ricaricare.

Questa tecnica permette di aggiornare automaticamente i valori delle variabili PLC visualizzati nella pagina. Le richieste vengono gestite tramite le API JavaScript fetch.

L'esempio DPAjax.html visualizza il valore della variabile IValue, di tipo UDINT, allocata a DB100.20. A questa variabile viene sommato ogni secondo il valore della variabile IFactor, di tipo USINT, allocata a DB100.24.

I valori vengono aggiornati automaticamente ogni secondo. L'esempio comprende anche l'inserimento di una variabile stringa allocata a DB100.52.

Le funzioni di gestione delle API fetch sono definite nel file Scripts.js.

Screenshot della pagina DPAjax.html

Funzioni JavaScript​

  • GetPage(Page, RFlag): esegue una richiesta GET tramite Fetch alla pagina indicata da Page (nell'esempio DPAjax.htm). Al ritorno dei dati, richiama SetupValues per aggiornare i campi della pagina.
  • SubmitData(Page): invia tramite POST alla pagina indicata da Page i dati delle variabili da impostare. Al ritorno dei dati, richiama SetupValues.
  • LoadPage(Page): al caricamento della pagina esegue immediatamente GetPage e attiva successivamente l'aggiornamento periodico.
  • SetupValues(RData, RFlag): aggiorna gli oggetti della pagina con i valori ricevuti in RData. Se RFlag è attivo, abilita anche l'aggiornamento degli oggetti di input. In questo modo è possibile evitare che l'aggiornamento automatico sovrascriva il valore che l'utente sta digitando.

Al caricamento della pagina viene richiamata la funzione:

<body onLoad="LoadPage('DPAjax.htm')">

La pagina DPAjax.htm contiene le TAG che vengono sostituite con i valori delle variabili PLC. Il server restituisce una stringa JSON contenente gli identificativi degli oggetti e i relativi valori.

Esempio di risposta JSON:

{
  "IValue": <!--['%d', UDINT, 20]-->,
  "IFactor": <!--['%d', USINT, 24]-->,
  "VStr": "<!--['%s', STRING, 52]-->"
}

Nella funzione SetupValues è possibile elaborare la risposta per aggiornare gli oggetti della pagina.

Al caricamento, RFlag è attivo e viene aggiornato anche il campo di input associato a IFactor. Durante gli aggiornamenti periodici, invece, RFlag non è attivo e il campo non viene sovrascritto mentre l'utente lo modifica.

Utilizzo di oggetti HTML​

L'esempio WObjects.html mostra diversi oggetti HTML che permettono di realizzare pagine con un'interfaccia grafica più completa. La loro gestione avviene tramite AJAX, utilizzando le funzioni descritte in precedenza.

Screenshot della pagina WebObjects

Per realizzare pagine con grafici, indicatori (gauge), istogrammi e altri elementi è possibile utilizzare Google Charts.

Nell'articolo Amazon Echo Show come HMI per SlimLine vengono utilizzati indicatori per visualizzare temperatura, umidità e pressione su un dispositivo Amazon Echo Show.

Gli oggetti dell'esempio WObjects.html comprendono:

  • Checkbox: attivano una variabile BOOL. Lo stato dei primi due oggetti viene trasferito anche alle uscite logiche del modulo CPU.
  • Radio button (A): visualizzano lo stato degli ingressi del modulo CPU. Hanno attributi name differenti, sono quindi indipendenti tra loro e, poiché sono di sola visualizzazione, sono disabilitati.
  • Radio button (B): condividono lo stesso attributo name, per cui selezionandone uno si deselezionano gli altri. Agiscono su una variabile USINT, valorizzata in base alla selezione.
  • Input field: permette di impostare una variabile UINT.
  • Progress bar: visualizza una barra di avanzamento in base al valore impostato nel campo di input.
  • Select: consente di selezionare un'opzione, aggiornando una variabile USINT.

Pagine responsive​

Oggi è essenziale che le pagine web siano utilizzabili su diversi dispositivi, inclusi PC, tablet e smartphone. Per questo è opportuno sviluppare pagine responsive, in grado di adattarsi automaticamente alle dimensioni dello schermo.

L'applicazione eDoorkeeper, disponibile con il relativo codice sorgente nel download SFW201, mostra come utilizzare gli stili CSS per realizzare pagine responsive per la gestione di un sistema di controllo accessi con identificazione tramite TAG RFID.

La pagina Home.htm visualizza lo stato di funzionamento, gli I/O digitali, il codice del TAG acquisito e gli eventuali errori. La pagina viene aggiornata tramite AJAX.

La pagina Tags.htm permette di definire fino a 16 TAG, associando a ciascuno il relativo codice e utente.

Screenshot delle pagine web del programma eDoorkeeper