Tutoriel : Utilisation de l'animation client

Créez un nouveau projet standard avec le CODESYS Control Win manette.

Ajoutez un Visualisation objet situé en dessous de l'Application. Choisissez le nom Visu_Main.

Ouvrez le gestionnaire de visualisation dans l'éditeur et sélectionnez le Prise en charge des animations client et de la superposition d'éléments natifs option.

Ouvrez le PLC_PRG programme dans l'éditeur.

Saisissez le code suivant dans l'éditeur de déclaration :

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                            

Entrez le code suivant dans l'implémentation :

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

Insérez un Visu_Menu visualisation sous l'application.

Ouvrez les propriétés de l'objet. Dans le Visualisation onglet, définissez Taille de visualisation à un Largeur de 300 et un Hauteur de 180.

Ouvrez la visualisation dans l'éditeur.

Sélectionnez le Avancée possibilité dans le Propriétés voir.

Dans le coin supérieur gauche, ajoutez un bouton avec un Largeur de 300 et un Hauteur de 60.

Étiquetez le bouton comme "Visu 1". Définissez la taille de la police sur 24.

Ouvrez le Configuration des entrées → OnMouseClick propriété.

Sélectionnez le Exécuter le code ST action.

Saisissez le code ST suivant :

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

Met le Variable d'état du bouton → Variable numérique propriété à PLC_PRG.iSelection=0.

Ajoutez deux autres boutons nommés Visu 2 et Visu 3.

Modifiez les propriétés des boutons de Visu2 (P)LC_PRG.iSelection = 1) et Visu3 (PLC_PRG.iSelection = 2).

Résultat:

Insérez le Visu1 visualisation en dessous de l'application.

Ouvrez les propriétés de l'objet. Dans le Visualisation onglet, définissez Taille de visualisation à un Largeur de 800 et un Hauteur de 600.

Modifiez la couleur d'arrière-plan de l'écran (par exemple, gris clair).

Insérez un Étiquette objet dans l'écran de visualisation et nommez-le (par exemple avec Visu 1).

Insérer deux autres visualisations Visu2 et Visu3 en dessous de l'application. Modifiez les propriétés de la même manière que pour Visu1.

Ouvrez les propriétés du Visu_Main visualisation. Dans le Visualisation onglet, définissez le Taille de visualisation à un Largeur de 800 et un Hauteur de 600.

Ouvrez la visualisation dans l'éditeur.

Insérez un Cadre élément dans la visualisation.

Ajoutez le Visu1 (Indice 0), Visu2 (Index 1), et Visu3 (Index 2) visualisations.

Définissez les valeurs de propriété de Position comme suit: X = 0, Oui = 0, Largeur = 800, et Hauteur = 600.

Définissez la valeur de Variable de cadre du commutateur → Variable propriété à PLC_PRG.iSelection.

Insérez un Bouton élément dans la visualisation.

Définissez les valeurs de propriété de Position comme suit: X = 0, Oui = 0, Largeur = 800, et Hauteur = 600.

Définissez la valeur de Textes→ Texte propriété à =.

Définissez la valeur de Propriétés du texte → Fonte propriété à Arial; 36.

Ouvrez le Configuration des entrées → OnMouseClick propriété.

Sélectionnez le Exécuter le code ST action.

Saisissez le code ST suivant :

PLC_PRG.xToggle := TRUE;

Définissez la valeur de Variable d'état du bouton → Variable numérique propriété à PLC_PRG.xVisible.

Insérez le Visu_Menu élément de visualisation de la Projet en cours catégorie dans la visualisation.

Définissez les valeurs de propriété de Position comme suit: X = 0, Oui = 0, Largeur = 300, et Hauteur = 180.

Définissez la valeur de Mouvement absolu → Mouvement → X propriété à PLC_PRG.iMenuPos.

Définissez la valeur de Variables d'état → Invisible propriété à not(PLC_PRG.xVisible).

Définissez la valeur de propriété de Durée des animations pour 2000.

Résultat:

Générez le projet et chargez-le dans l'automate.

Démarrez le projet.

Dans le navigateur, connectez-vous à la visualisation (http://localhost:8080).

Dans la visualisation, cliquez sur le bouton de menu.

Sélectionnez un élément de menu.