Skip to main content

Référencement des visualisations

Affichage de plusieurs visualisations dans une seule visualisation

Important

Les visualisations peuvent être imbriquées à n'importe quelle profondeur au moyen de Cadre. Afin d'utiliser le Passer à n'importe quelle visualisation type de sélection de cadre sans aucun problème, un Cadre ne doit pas contenir plus de 21 visualisations référencées.

Vous pouvez référencer d'autres visualisations dans une visualisation principale soit dans un Cadre ou un Onglets élément, puis les afficher dans le volet de la fenêtre de l'élément.

Dans le cas de la Cadre Grâce à l'élément, vous pouvez programmer librement les visualisations affichées à chaque instant. Une option consiste à utiliser la variable « switch frame » de l'élément. Cadre Élément qui déclenche automatiquement un changement en fonction de sa valeur. Vous pouvez également programmer des contrôles supplémentaires qui, après saisie utilisateur, déclenchent des actions entraînant le changement de visualisation.

De plus, vous pouvez utiliser le Onglets pour référencer des visualisations. Il est facile et avantageux que Onglets L'élément fournit un contrôle préconfiguré du commutateur de visualisation.

Pour plus d'informations, voir : Configuration des entrées utilisateur

Avis

Kann auch veraltet seinExemple de projet pour changer de visualisation dans un cadre

Commutation des visualisations de cadre au moyen d'une variable

Dans la visualisation principale, le Cadre L'élément affiche l'une des visualisations de cadre référencées lors de l'exécution. L'utilisateur peut sélectionner l'élément Boutons radio élément qui est affiché dans le cadre.

Procédure. Connexion de visualisations de cadre avec un élément de boutons radio

  1. Créer un nouveau projet standard dans CODESYS.

  2. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  3. Dans le Ajouter une visualisation dialogue, spécifiez le nom VisuMain et cliquez Ajouter pour fermer la boîte de dialogue.

  4. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  5. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu1 et cliquez Ajouter pour fermer la boîte de dialogue.

  6. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  7. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu2 et cliquez Ajouter pour fermer la boîte de dialogue.

  8. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  9. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu3 et cliquez Ajouter pour fermer la boîte de dialogue.

    En plus de la visualisation principale, il existe trois autres objets de visualisation.

  10. Ouvrez le Visu1 objet.

  11. Dans le Boîte à outils de visualisation, dans le Basique catégorie, sélectionnez et faites glisser le Boutons radio élément à l'éditeur de visualisation.

    Le Propriétés la vue de l'élément s'ouvre.

  12. Configurez les propriétés du rectangle comme suit :

    • Textes, Texte propriété: Visu1

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris clair

    _visu_1_for_referencing.png

  13. Programmer l'objet Visu2 par conséquent.

    . Propriétés du rectangle :

    • Textes, Texte propriété: Visu2

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris

  14. Programmer l'objet Visu3 par conséquent.

    . Propriétés du rectangle :

    • Textes, Texte propriété: Visu3

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris foncé

  15. Ouvrez le VisuMain objet.

  16. Dans le Boîte à outils de visualisation, dans le Basique catégorie, sélectionnez et faites glisser le Cadre élément à l'éditeur de visualisation.

    Le Configuration du cadre la boîte de dialogue s'ouvre.

  17. Dans le Visualisations disponibles zone de fenêtre, sur le Par nom de visualisation onglet, sélectionnez l'objet Visu1. Dans Visualisations sélectionnées, cliquez Ajouter.

  18. Sélectionnez ensuite l'objet Visu2 et cliquez Ajouter dans Visualisations sélectionnées.

  19. Sélectionnez ensuite l'objet Visu3 et cliquez Ajouter dans Visualisations sélectionnées.

  20. Cliquez D'ACCORD pour fermer la boîte de dialogue.

    Maintenant le Cadre L'élément fait référence aux trois visualisations sélectionnées. Les références (1) sont répertoriées dans le Références propriété dans les propriétés de l'élément Cadre élément. En plus du nom de la visualisation, la valeur d'index correspondante (2) est également affichée.

    _visu_main_with_properties.png

    Remarque : vous pouvez ouvrir la boîte de dialogue en cliquant sur le bouton Configure bouton dans le champ de valeur du Références propriété. Voir (3). Vous pouvez influencer l'index grâce à l'ordre de visualisation dans le Visualisations sélectionnées liste.

  21. Dans le Boîte à outils de visualisation, dans le Contrôles communs catégorie, faites glisser le Boutons radio élément à l'éditeur de visualisation.

    Le Propriétés la vue de l'élément s'ouvre.

  22. Dans le Paramètres des boutons radio, Bouton radio, cliquez sur le Créer un nouveau bouton.

    Cet élément dispose de trois commutateurs parmi lesquels choisir.

  23. Configurez les propriétés du bouton radio comme suit :

    • Paramètres des boutons radio, Zones, [0], Texte propriété: Visu1

    • Paramètres des boutons radio, Zones, [1], Texte propriété: Visu2

    • Paramètres des boutons radio, Zones, [2], Texte propriété: Visu3

    _visu_main_for_referencing.png

  24. Dans le PLC_PRG programme, déclarez une variable locale pour le numéro de la visualisation qui est active.

                                        VAR
                                    iActiveVisu : INT; // Index of visu activated by the user
                                    END_VAR

  25. Sélectionnez le Boutons radio élément et dans le champ de valeur du Variable propriété, cliquez sur le _cds_icon_three_dots.png bouton.

  26. Dans le Assistant de saisie Dans la boîte de dialogue, sélectionnez la variable récemment déclarée. Quittez ensuite la boîte de dialogue.

    . Propriété de la Boutons radio élément:

    • Variable: PLC_PRG.iActiveVisu

  27. Sélectionnez le Cadre élément. Cliquez dans le champ de valeur de l'élément Variable de cadre de commutation, Variable propriété. Spécifiez également ici la variable récemment déclarée.

    . Propriété de la Cadre élément:

    • Variable de cadre de commutation , Variable propriété: PLC_PRG.iActiveVisu

    La variable de contrôle de la Boutons radio L'élément est également la variable de cadre de commutation du Cadre élément. Entrée utilisateur pour le Boutons radiol'élément change la visualisation du cadre.

  28. Cliquez Construire → Générer du code.

  29. Cliquez En ligne → Connexion et démarrez l'application.

    La visualisation démarre. L'une des visualisations référencées s'exécute dans le cadre. Lorsque vous cliquez sur une option non sélectionnée de l' Boutons radio élément, la visualisation bascule le contenu du cadre vers la visualisation souhaitée.

    _visu_reference_1_within_a_frame.png
    _visu_reference_2_within_a_frame.png
    _visu_reference_3_within_a_frame.png

Dans l'exemple, la variable « switch frame » est connectée à une variable d'entrée. Vous pouvez également définir la variable « switch frame » par programmation dans le code IEC.

Changement de visualisation de cadre au moyen d'une action de suivi

Dans la visualisation principale, le Cadre L'élément affiche l'une des visualisations du cadre lors de l'exécution. L'utilisateur peut utiliser des boutons pour contrôler l'affichage dans le cadre. La saisie utilisateur déclenche l'action. Visualisation du cadre de commutation action d'entrée.

Procédure. Programmation d'une visualisation

  1. Créer un nouveau projet standard dans CODESYS.

  2. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  3. Dans le Ajouter une visualisation dialogue, spécifiez le nom VisuMain et cliquez Ajouter pour fermer la boîte de dialogue.

  4. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  5. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu1 et cliquez Ajouter pour fermer la boîte de dialogue.

  6. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  7. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu2 et cliquez Ajouter pour fermer la boîte de dialogue.

  8. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  9. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu3 et cliquez Ajouter pour fermer la boîte de dialogue.

    En plus de la visualisation principale, il existe trois autres objets de visualisation.

  10. Ouvrez le Visu1 objet.

  11. Dans le Boîte à outils de visualisation, dans le Basique catégorie, sélectionnez et faites glisser le Rectangle élément à l'éditeur de visualisation.

    Le Propriétés la vue de l'élément s'ouvre.

  12. Configurez les propriétés du rectangle comme suit :

    • Textes, Texte propriété: Visu1

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris clair

    _visu_1_for_referencing.png

  13. Programmer l'objet Visu2 par conséquent.

    . Propriétés du rectangle :

    • Textes, Texte propriété: Visu2

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris

  14. Programmer l'objet Visu3 par conséquent.

    . Propriétés du rectangle :

    • Textes, Texte propriété: Visu3

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris foncé

  15. Ouvrez le VisuMain objet.

  16. Dans le Boîte à outils de visualisation, dans le Basique catégorie, sélectionnez et faites glisser le Cadre élément à l'éditeur de visualisation.

    Le Configuration du cadre la boîte de dialogue s'ouvre.

  17. Dans le Visualisations disponibles zone de fenêtre, sur le Par nom de visualisation onglet, sélectionnez l'objet Visu1. Dans Visualisations sélectionnées, cliquez Ajouter.

  18. Sélectionnez ensuite l'objet Visu2 et cliquez Ajouter dans Visualisations sélectionnées.

  19. Sélectionnez ensuite l'objet Visu3 et cliquez Ajouter dans Visualisations sélectionnées.

  20. Cliquez D'ACCORD pour fermer la boîte de dialogue.

    Maintenant le Cadre L'élément fait référence aux trois visualisations sélectionnées. Les références (1) sont répertoriées dans le Références propriété dans les propriétés de l'élément Cadre élément. En plus du nom de la visualisation, la valeur d'index correspondante (2) est également affichée.

    _visu_main_with_properties.png

    Remarque : vous pouvez ouvrir la boîte de dialogue indépendamment lorsque vous cliquez sur le bouton Configure bouton dans le champ de valeur du Références propriété. Voir (3). Vous pouvez influencer l'index grâce à l'ordre de visualisation dans le Visualisations sélectionnées liste.

  21. Dans le Boîte à outils de visualisation, dans le Contrôles communs catégorie, faites glisser le Bouton élément à l'éditeur de visualisation.

    L'élément est sélectionné et ses propriétés sont visibles dans le Propriétés voir.

  22. Configurer le Textes, Texte propriété avec Visu1.

  23. Dans le Configuration d'entréeSur la souris vers le bas propriété, cliquez Configure.

    Le Configuration d'entrée la boîte de dialogue s'ouvre.

  24. Sélectionnez le Visualisation du cadre de commutation action et clic _icon_arrow_right.png.

    L'action est affichée dans la fenêtre de droite.

  25. . Configurer l'action :

    • Sélectionnez le Changer de visualisation locale option.

    • Réglez le Sélection de visualisation à Visu1.

    • Cliquez D'ACCORD pour quitter la boîte de dialogue.

    L'action de suivi est configurée dans le Configuration d'entrée propriété.

    Configuration d'entrée, Sur la souris vers le bas, Visualisation du cadre de commutation propriété: 0

  26. Faites glisser un autre Bouton Élément dans l'éditeur de visualisation. Configurez le bouton en conséquence.

    . Propriétés du bouton :

    • Textes, Texte propriété: Visu2

    • Configuration d'entrée, Sur la souris vers le bas, Visualisation du cadre de commutation propriété: 1

  27. Faites glisser un autre Bouton Élément dans l'éditeur de visualisation. Configurez le bouton en conséquence.

    . Propriétés du bouton :

    • Textes, Texte propriété: Visu3

    • Configuration d'entrée, Sur la souris vers le bas, Visualisation du cadre de commutation propriété: 2

  28. Cliquez Construire → Générer du code.

  29. Cliquez En ligne → Connexion pour l'appareil et démarrez l'application.

    La visualisation démarre. L'une des visualisations référencées s'exécute dans le cadre. Lorsque vous cliquez sur l'un des boutons, la visualisation bascule le contenu du cadre vers la visualisation correspondante.

    _visu_1_in_runtime_action.png
    _visu_2_in_runtime_action.png
    _visu_3_in_runtime_action.png

Affichage de visualisations sur un élément d'onglets

Pour le Onglets La navigation entre les visualisations référencées est automatique. La première visualisation est au premier plan, tandis que les autres sont masquées. L'utilisateur peut naviguer entre elles grâce aux onglets fournis automatiquement.

Procédure. Configuration d'un élément d'onglets

  1. Créer un nouveau projet standard dans CODESYS.

  2. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  3. Dans le Ajouter une visualisation dialogue, spécifiez le nom VisuMain et cliquez Ajouter pour fermer la boîte de dialogue.

  4. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  5. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu1 et cliquez Ajouter pour fermer la boîte de dialogue.

  6. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  7. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu2 et cliquez Ajouter pour fermer la boîte de dialogue.

  8. Sélectionnez l'application dans l'arborescence des périphériques et cliquez sur Ajouter un objet → Visualisation.

  9. Dans le Ajouter une visualisation dialogue, spécifiez le nom Visu3 et cliquez Ajouter pour fermer la boîte de dialogue.

    En plus de la visualisation principale, il existe trois autres objets de visualisation.

  10. Ouvrez le Visu1 objet.

  11. Faites glisser un Rectangle élément à l'éditeur de visualisation.

    Le Propriétés la vue de l'élément s'ouvre.

  12. Configurez les propriétés du rectangle comme suit :

    • Textes, Texte propriété: Visu1

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris clair

    _visu_1_for_referencing.png

  13. Programmer l'objet Visu2 par conséquent.

    . Propriétés du rectangle :

    • Textes, Texte propriété: Visu2

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris

  14. Programmer l'objet Visu3 par conséquent.

    . Propriétés du rectangle :

    • Textes, Texte propriété: Visu3

    • Propriétés du texte, Fonte propriété: Titre

    • Couleurs, État normal, Couleur de remplissage propriété: Gris foncé

  15. Ouvrez le VisuMain objet.

  16. Dans le Boîte à outils de visualisation, dans le Basique catégorie, sélectionnez et faites glisser le Cadre élément à l'éditeur de visualisation.

    Le Configuration du cadre la boîte de dialogue s'ouvre.

  17. Dans le Visualisations disponibles zone de fenêtre, sur le Par nom de visualisation onglet, sélectionnez l'objet Visu1. Dans Visualisations sélectionnées, cliquez Ajouter.

  18. Sélectionnez ensuite l'objet Visu2 et cliquez Ajouter dans Visualisations sélectionnées.

  19. Sélectionnez ensuite l'objet Visu3 et cliquez Ajouter dans Visualisations sélectionnées.

  20. Cliquez D'ACCORD pour quitter la boîte de dialogue.

    Maintenant le Onglets L'élément fait référence aux trois visualisations sélectionnées. Les références (1) sont répertoriées dans le Références propriété dans les propriétés de l'élément Cadre élément. En plus du nom de la visualisation, la valeur d'index correspondante (2) est également affichée.

    _visu_main_with_properties.png

    Remarque : vous pouvez ouvrir la boîte de dialogue Configuration du cadre dialogue indépendamment lorsque vous cliquez sur le Configure bouton dans le champ de valeur du Références propriété. Voir (3). Vous pouvez influencer l'index grâce à l'ordre de visualisation dans le Visualisations sélectionnées liste.

  21. Dans le Boîte à outils de visualisation, dans le Contrôles communs catégorie, faites glisser le Onglets élément à l'éditeur de visualisation.

    Le Propriétés la vue de l'élément s'ouvre.

  22. Configurez les propriétés de l’onglet comme suit :

    • Largeur de l'onglet propriété: 40

    • Références, Visu1, En-tête propriété: Visu1

    • Références, Visu2, En-tête propriété: Visu2

    • Références, Visu3, En-tête propriété: Visu3

    _visu_within_a_tab.png

  23. Cliquez Construire → Générer du code.

  24. Cliquez En ligne → Connexion pour l'appareil et démarrez l'application.

    La visualisation démarre. L'une des visualisations référencées est en cours d'exécution dans le Onglets élément. Cliquez sur l'onglet pour passer à la visualisation correspondante.

    _visu_within_a_tab_in_runtime.png
Dans cette section​: