HMICustomMng, manages a custom HMI

Home / Knowledge Base / Manualistica / Programmazione IEC 61131-3 / Gestione periferiche / HMICustomMng, manages a custom HMI
List

Questa pagina fa parte del Manuale Programmazione IEC 61131-3. Vai all indice.

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 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. Il FB deve essere eseguito in task back, 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.

Information Circle

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.

Immagine FB HMICustomMng

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
NomeTipoDescrizione
BlinkingBOOLSe attiva il valore della variabile lampeggia
EditableBOOLSe attiva la variabile è inputabile
RowUSINTDefinizione riga di visualizzazione
ColumnUSINTDefinizione colonna di visualizzazione
LengthUSINTLunghezza in caratteri della variabile
TypeVR_TYPEDefinizione tipo variabile
Format@STRINGIndirizzo stringa di formattazione valore (Vedi definizione)
AddressPVOIDIndirizzo 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
NomeTipoDescrizione
DDataSTRING[…]Stringa dati da visualizzare sul display, deve essere pari al numero di caratteri totali (Rows*Columns)
DPHolderSTRING[…]Stringa segnaposto per variabili sul display, deve essere pari al numero di caratteri totali (Rows*Columns)
FKeyUSINTValore numerico del tasto funzione di cambio pagina visualizzata
VIDxUSINT Indice variabile in inputazione
VValueSTRING[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.

WebFace screenshot

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]-->"
}
Was this article helpful?