Esercitazione: utilizzo dell'animazione del cliente

L'esempio mostra una visualizzazione con tre schermate. Un menu controlla la navigazione delle schermate. Il menu è nascosto finché non viene visualizzato tramite un pulsante hamburger. Durante lo spostamento, la trasparenza del menu viene modificata. Dopo aver selezionato lo schermo, il menu torna fuori dalla visualizzazione. L'animazione è calcolata interamente sul sistema di destinazione. Il CODESYS la visualizzazione definisce solo i valori target (posizioni, trasparenza).

Preparazione

Crea un nuovo progetto standard con il CODESYS Control Win controllore.
Aggiungi un Visualizzazione oggetto al di sotto dell'Applicazione. Scegli il nome Visu_Main.
Apri il Visualization Manager nell'editor e seleziona il Supporta le animazioni dei clienti e la sovrapposizione di elementi nativi opzione.

Per ulteriori informazioni, vedere quanto segue: Impostazioni

Creazione del programma PLC_PRG

Il programma verifica se il pulsante del menu è stato premuto. Se la barra dei menu non è visibile (posizione –300), la posizione viene spostata nell'area visibile (0). Se la barra dei menu è già visibile (posizione 0), la posizione viene spostata nell'area nascosta.

Aprire il PLC_PRG programma nell'editor.

Immettere il codice seguente nell'editor di dichiarazione:

PROGRAM PLC_PRG
VAR
    iSelection : INT; // to switch the referenced visualization page
    xVisible: BOOL; // auxiliary variable to toggle the menu bar
    iMenuPos : INT := -300; // position of the menu bar
    xToggle: BOOL; // button variable to toggle the menu bar
END_VAR

Immettere il codice seguente nell'implementazione:

IF xToggle THEN
    xToggle := FALSE;
    IF xVisible THEN
        xVisible := FALSE;
        iMenuPos := -300;
    ELSE
        xVisible := TRUE;
        iMenuPos := 0;
    END_IF
END_IF

Creazione di una barra dei menu

La barra dei menu ha tre voci di menu. Una schermata di visualizzazione viene visualizzata facendo clic sulla voce di menu corrispondente.

Inserisci un Menu_Visu visualizzazione sotto l'applicazione.
Aprire le proprietà dell'oggetto. Visualizzazione scheda, imposta Dimensioni della visualizzazione a un larghezza di 300 e un altezza di 180.
Aprire la visualizzazione nell'editor.
Seleziona il Avanzate opzione nel Proprietà Visualizza.
Nell'angolo in alto a sinistra, aggiungi un pulsante con a Larghezza di 300 e a Altezza di 60.
Etichetta il pulsante come "Visu 1". Imposta la dimensione del carattere su 24.
Aprire il Configurazione di input → OnMouseClick proprietà.
Seleziona il Eseguire il codice ST azione.

Immettere il seguente codice ST:

PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;

Impostare il Variabile stato pulsante → Variabile digitale proprietà a PLC_PRG.iSelection=0.
Aggiungi altri due pulsanti denominati Visu 2 e Visu 3.
Modificare le proprietà dei pulsanti di Visu2 (PLC_PRG.iSelection = 1) e Visu3 (PLC_PRG.iSelection = 2).
Risultato:

Crea più pagine di visualizzazione

Inserisci il Visu1 visualizzazione sotto l'applicazione.
Aprire le proprietà dell'oggetto. Visualizzazione scheda, imposta Dimensioni della Visualizzazione a un Larghezza di 800 e un Altezza di 600.
Cambia il colore di sfondo dello schermo (ad esempio, grigio chiaro).
Inserisci un Etichetta inserire l'oggetto nella schermata di visualizzazione e assegnare un nome all'elemento (ad esempio con Visu 1).
Inserisci altre due visualizzazioni Visu2 e Visu3 sotto l'applicazione. Modificare le proprietà nello stesso modo utilizzato per Visu1.

Crea la pagina di visualizzazione principale

In questa schermata, puoi vedere la barra dei menu e un pulsante per mostrare o nascondere la barra dei menu. Le diverse schermate di visualizzazione vengono navigate Cornice elemento di visualizzazione.

Aprire le proprietà di Visu_Main visualizzazione. Visualizzazione scheda, imposta il Dimensioni della visualizzazione a un Larghezza di 800 e un Altezza di 600.
Aprire la visualizzazione nell'editor.
Inserisci un Telaio elemento nella visualizzazione.
Si apre una finestra di dialogo Configurazione del telaio.
Aggiungete il Visu1 (Indice 0), Visu2 (Indice 1) e Visu3 (Indice 2) visualizzazioni.
Imposta i valori delle proprietà di Posizione come segue: X = 0, Y = 0, Larghezza = 800, e Altezza = 600.
Imposta il valore di Cambia variabile frame → Variabile proprietà a PLC_PRG.iSelection.
Inserisci un Pulsante elemento nella visualizzazione.
Imposta i valori delle proprietà di Posizione come segue: X = 0, Y = 0, Larghezza = 800, e Altezza = 600.
Imposta il valore di Testi→ Testo proprietà a =.
Imposta il valore di Proprietà del testo → Carattere proprietà a Arial; 36.
Aprire il Configurazione di input → OnMouseClick proprietà.
Seleziona il Eseguire il codice ST azione.
Immettere il seguente codice ST:
```
PLC_PRG.xToggle := TRUE;
```
Imposta il valore di Variabile di stato del pulsante → Variabile digitale proprietà a PLC_PRG.xVisible.
Inserisci il Menu_Visu elemento di visualizzazione dal Progetto attuale categoria nella visualizzazione.
Imposta i valori delle proprietà di Posizione come segue: X = 0, Y = 0, Larghezza = 300, e Altezza = 180.
Imposta il valore di Movimento assoluto → Movimento → X proprietà a PLC_PRG.iMenuPos.
Imposta il valore di Variabili di stato → Invisibile proprietà a not(PLC_PRG.xVisible).
Imposta il valore della proprietà di Durata dell'animazione a 2000.
Risultato:

Scaricare il progetto nel controllore e avviare WebVisu

Costruisci il progetto e scaricalo nel PLC.
Avvia il progetto.
Nel browser, collegarsi alla visualizzazione (http://localhost:8080).
Il WebVisu si collega al controller e si apre la visualizzazione.
Nella visualizzazione, fare clic sul pulsante del menu.
Il menu viene visualizzato.
Seleziona una voce di menu.
La schermata di visualizzazione viene selezionata e il menu torna fuori dalla visualizzazione.

In questa sezione: