Per gestire l’interfaccia Uomo/Macchina oltre ai terminali come Picoface od il display integrato nei sistemi Netlog, è possibile gestire display custom connessi al bus estensione dei nostri sistemi. Questo blocco funzione da eseguire in task Back, nasce proprio per facilitare la gestione di una interfaccia custom, che, grazie al progetto WebFace può essere gestita direttamente da browser. Il blocco funzione è protetto per utilizzarlo occorre richiedere il codice di sblocco, vedi protezione funzioni e blocchi funzione. E’ comunque possibile utilizzarlo liberamente in modo test per 15 Min. Inserire nel progetto la libreria eLLabHMICustomLib.
Per la visualizzazione dei messaggi definire in HMIDef indirizzo di allocazione della struttura HMICUSTOMDEF che definisce l’area dati su cui il FB opera, nella struttura sono allocati i buffer dati da trasferire sul display ed i comandi per la gestione della inputazione delle variabili. In Rows e Columns il numero di righe e colonne del display utilizzato, in DPText l’indirizzo array definizione stringhe testo da visualizzare, una stringa per ogni riga del display.
Per la visualizzazione delle variabili all’interno del messaggio definire in VarsNr il numero di variabili presenti, in DPVars indirizzo dell’array allocazione strutture HMICUSTOMVAR di definizione variabile, una definizione per ogni variabile da visualizzare.
Blocco funzione
CODESYS: Non disponibile
LogicLab: eLLabHMICustomLib
Descrizione
SpyOn (BOOL) Se attivo permette di spiare il funzionamento della FB (Vedi articolo).
HMIDef (@HMICUSTOMDEF) Indirizzo allocazione struttura dati definizione HMI da gestire.
Rows (USINT) Numero di righe del display.
Columns (USINT) Numero di colonne del display.
DPText (@STRING) Indirizzo allocazione array definizione testi da visualizzare.
VarsNr (USINT) Numero di variabili presenti nel messaggio.
DPVars (@HMICUSTOMVAR) Indirizzo allocazione struttura dati definizione variabili messaggio.
AUTime (REAL) Definizione tempo rinfresco automatico dati display (S).
DUpdated (BOOL) Si attiva per un loop ad ogni aggiornamento del mesaggio sul display.
Fault (BOOL) Attivo per un loop su errore esecuzione.
Struttura dati “HMICUSTOMVAR”
Questa struttura dati fornita con la libreria eLLabHMICustomLib, contiene definizione delle variabili da visualizzare/inputare sul terminale. Nel proprio progetto occorre allocare una struttura per ogni variabile. Se Editable è attivo la variabile potrà essere inputata.
HMICUSTOMVAR
| Nome | Tipo | Descrizione |
|---|---|---|
| Blinking | BOOL | Se attiva il valore della variabile lampeggia |
| Editable | BOOL | Se attiva la variabile è inputabile |
| Row | USINT | Definizione riga di visualizzazione |
| Column | USINT | Definizione colonna di visualizzazione |
| Length | USINT | Lunghezza in caratteri della variabile |
| Type | VR_TYPE | Definizione tipo variabile |
| Format | @STRING | Indirizzo stringa di formattazione valore (Vedi definizione) |
| Address | PVOID | Indirizzo variabile |
Struttura dati “HMICUSTOMDEF”
Questa struttura dati và definita nel proprio progetto utilizzando l’esempio fornito dimensionando i campi DData e DPHolder in base alla dimensione del proprio terminale, (Rows*Columns). Nell’esempio riportato è impostato per il progetto WebFace con display da 4 righe da 40 caratteri.
HMICUSTOMDEF
| Nome | Tipo | Descrizione |
|---|---|---|
| DData | STRING[…] | Stringa dati da visualizzare sul display, deve essere pari al numero di caratteri totali (Rows*Columns) |
| DPHolder | STRING[…] | Stringa segnaposto per variabili sul display, deve essere pari al numero di caratteri totali (Rows*Columns) |
| FKey | USINT | Valore numerico del tasto funzione di cambio pagina visualizzata |
| VIDx | USINT | Indice variabile in inputazione |
| VValue | STRING[31] | Valore variabile inputato |
HMICUSTOMDEF: STRUCT
DData : STRING[ 160 ]; (* Display data *)
DPHolder : STRING[ 160 ]; (* Display place holder *)
FKey : USINT; (* Function key *)
VIDx : USINT; (* Variable index *)
VValue : STRING[ 31 ]; (* Variable value *)
END_STRUCT;Progetto WebFace
Il progetto è scaricabile da qui, viene gestito un terminale virtuale da 4 righe da 40 caratteri che può essere visualizzato direttamente da browser. Tasti funzione permettono di selezionare la visualizzazione di pagine diverse.
La visualizzazione è automaticamente aggiornata con tecnica AJAX ed oltre al testo nel messaggio sono riportate variabili. Le variabili visualizzate in rosso sono inputabili agendo con il mouse sul valore si aprirà un pop-up di inputazione.
Come utilizzare gli esempi
Il programma LogicLab di WebFace permette agendo sui tasti funzione da pagina web di navigare nelle pagine. Una pagina visualizza visualizza data/ora ed una pagina visualizza 3 variabili di cui è possibile l’inputazione. La struttura HMICUSTOMDEF di definizione dati terminale è stata allocata nella DB100 in modo da poterla gestire da pagina web utilizzando TAGs e ARGs (Vedi articolo).
LogicLab (Ptp197, WebFace)
PROGRAM WebFace
VAR
i : UDINT; (* Auxiliary counter *)
TimeBf : UDINT; (* Time buffer (mS) *)
VUDINT : UDINT; (* Variable UDINT *)
VREAL : REAL; (* Variable REAL *)
VSTRING : STRING[ 16 ] := 'Hello!'; (* Variable STRING *)
DPText : ARRAY[0..3] OF @STRING; (* Data row text *)
DPVars : ARRAY[0..5] OF HMICUSTOMVAR; (* Variable data *)
WebFace AT %MB100.0 : HMICUSTOMDEF; (* WebFace data *)
LDTS : LDATETIMESTRUCT; (* Long Date/Time struct *)
HMI : HMICustomMng; (* HMI custom management *)
END_VAR
// *****************************************************************************
// PROGRAM "WebFace"
// *****************************************************************************
// WebFace HMI management.
// To test the program, copy the content of the "WebFace" directory on the
// SlimLine "C:\Web" directory. Then by a browser like "Chrome" digit as a URL
// the SlimLine IP address followed by "/WebFace/WebFace.html" path.
// -----------------------------------------------------------------------------
// -------------------------------------------------------------------------
// INITIALIZATION
// -------------------------------------------------------------------------
// Program initializations.
IF (SysFirstLoop) THEN
// Set HMI management parameters, 4 rows 40 chars each.
// +----------------------------------------+
// |0 1 2 3 |
// |0123456789012345678901234567890123456789|
// +----------------------------------------+
// | |
// | |
// | |
// | |
// +----------------------------------------+
HMI.SpyOn:=TRUE; //Spy On
HMI.Rows:=4; //Number of rows
HMI.Columns:=40; //Number of columns
HMI.AUTime:=1.0; //Auto update time (S)
HMI.DPText:=ADR(DPText); //Data pointer text
HMI.DPVars:=ADR(DPVars); //Data pointer variables
HMI.HMIDef:=ADR(WebFace); //HMI definition data struct
// Initialize program variables.
TimeBf:=SysTimeGetMs(); //Time buffer (mS)
END_IF;
// -------------------------------------------------------------------------
// HMI ON WEB MANAGEMENT
// -------------------------------------------------------------------------
// Here execute the HMI manager.
HMI(); //HMI custom management
IF NOT(HMI.DUpdated) THEN RETURN; END_IF;
// -------------------------------------------------------------------------
// MESSAGE DISPLAY
// -------------------------------------------------------------------------
// Page selection.
CASE (WebFace.FKey) OF
// ---------------------------------------------------------------------
// WELCOME SCREEN
// ---------------------------------------------------------------------
// At system power up a welcome screen is displayed.
0:
DPText[0]:=ADR('WebFace program demo ');
DPText[1]:=ADR('Hello! ');
DPText[2]:=ADR(' ');
DPText[3]:=ADR(' ');
HMI.VarsNr:=0; //Number of variables
IF ((SysTimeGetMs()-TimeBf) > TO_UDINT(T#2s)) THEN WebFace.FKey:=1; END_IF;
// ---------------------------------------------------------------------
// PAGE 1
// ---------------------------------------------------------------------
// The date and time is displayed.
1:
DPText[0]:=ADR('WebFace program demo ');
DPText[1]:=ADR('Date:xx/xx/xxxx ');
DPText[2]:=ADR('Time:xx:xx:xx ');
DPText[3]:=ADR(' ');
HMI.VarsNr:=6; //Number of variables
i:=SPLIT_DT(TO_DATE_AND_TIME(SysDateGetS()), ADR(LDTS.Year), ADR(LDTS.Month), ADR(LDTS.Day), ADR(LDTS.Hours), ADR(LDTS.Minutes), ADR(LDTS.Seconds));
HMICUSTOMVDEFS(DPVars[0], FALSE, 1, 5, 2, INT_TYPE, '%02d', LDTS.Day);
HMICUSTOMVDEFS(DPVars[1], FALSE, 1, 8, 2, INT_TYPE, '%02d', LDTS.Month);
HMICUSTOMVDEFS(DPVars[2], FALSE, 1, 11, 4, INT_TYPE, '%04d', LDTS.Year);
HMICUSTOMVDEFS(DPVars[3], FALSE, 2, 5, 2, INT_TYPE, '%02d', LDTS.Hours);
HMICUSTOMVDEFS(DPVars[4], FALSE, 2, 8, 2, INT_TYPE, '%02d', LDTS.Minutes);
HMICUSTOMVDEFS(DPVars[5], FALSE, 2, 11, 2, INT_TYPE, '%02d', LDTS.Seconds);
// ---------------------------------------------------------------------
// PAGE 2
// ---------------------------------------------------------------------
// The date and time is displayed.
2:
DPText[0]:=ADR('WebFace program demo ');
DPText[1]:=ADR('VUDINT:xxxxxxxx ');
DPText[2]:=ADR('VREAL:xxx.xxx ');
DPText[3]:=ADR('VSTRING:xxxxxxxxxxxxxxxx ');
HMI.VarsNr:=3; //Number of variables
HMICUSTOMVDEFS(DPVars[0], TRUE, 1, 7, 8, DWORD_TYPE, '%08X', VUDINT);
HMICUSTOMVDEFS(DPVars[1], TRUE, 2, 6, 7, REAL_TYPE, '%7.3f', VREAL);
HMICUSTOMVDEFS(DPVars[2], TRUE, 3, 8, 16, STRING_TYPE, '%-16s', VSTRING);
END_CASE;
// [End of file]La cartella “WebFace” và trasferita in FTP nella cartella Web sul sistema. Al suo interno vi sono i files necessari al funzionamento:
- WebFace.js: Contiene il codice javascript di gestione del display virtuale.
- WebFace.htm: Pagina htm che viene richiesta in AJAX per l’aggiornamento dei dati sul display. Modificare la pagina con un text editor definendo gli indirizzi di allocazione delle variabili DData e DPHolder.
- WebFace.html: E’ la pagina di visualizzazione del terminale, include lo script di gestione e permette la definizione del display. Modificare la pagina con un text editor indicando nell’istanza della classe WebFace il numero di righe e di colonne del display da visualizzare (In esempio 4*40). Con la chiamata a funzione lcd.addbuttons si definisce il numero di pulsanti funzioni da visualizzare e l’indirizzo della variabile a cui inviare il codice tasto premuto. Nell’esempio abbiamo.
USINT 322: Riferimento a variabile USINT in DB100 a cui viene inviato l’identificativo del tasto funzione premuto.
USINT 323: Riferimento a variabile USINT in DB100 a cui viene inviato l’identificativo della variabile in inputazione.
STRING 324 31: Riferimento a variabile STRING[31] in DB100 a cui viene inviato il valore della variabile in inputazione.
WebFace.html
<script src="WebFace.js"></script>
<script>
var lcd = new WebFace(4,40,"WebFace.htm",'USINT 323','STRING 324 31');
lcd.start();
lcd.addbuttons(10,"USINT 322");
</script>
WebFace.htm: Pagina che contiene le TAGs riferite all’area DB100 dove il programma LogicLab appoggia i dati display. La pagina viene ciclicamente richiesta ed il server web del sistema la fornisce sostituendo le TAGs con i dati presenti nella struttura HMICUSTOMDEF allocata in DB100.
WebFace.htm
{
"DData":"<!--["%s", STRING, 0]-->",
"DPHolder":"<!--["%s", STRING, 161]-->"
}