Skip to main content

Liaison et utilisation d'un contrôle HTML5

Vous pouvez installer un contrôle HTML5 directement dans votre référentiel d'éléments de visualisation.

Des contrôles HTML5 peuvent être ajoutés à un référentiel afin qu'il soit possible de distribuer un projet avec tout le contenu nécessaire.

Astuce

Les contrôles HTML5 sont souvent livrés sous forme de package. L'installation initiale est ensuite effectuée dans le gestionnaire de packages.

Procédure. Première installation d'un champ HTML5

  1. Cliquez sur Outils → Référentiel d'éléments de visualisation.

    La Référentiel d'éléments visuels la boîte de dialogue s'ouvre.

  2. Sélectionnez le Contrôles HTML5 option.

    La Éléments installés list fournit des informations sur les contrôles HTML5 déjà installés.

  3. Clique le Installer commande.

  4. Dans la boîte de dialogue de sélection de fichier qui s'ouvre, sélectionnez le fichier de description souhaité du champ HTML5 (*.html5control.xml).

    • Si le fichier de description est valide, alors l'élément est automatiquement installé dans le référentiel. Dans la visualisation, le contrôle est répertorié dans Éléments installés. Tu peux l'utiliser.

    • Si le fichier de description n'est pas valide, une erreur est émise. Ensuite, vous devez contacter l'auteur de l'élément.

Pour plus d'informations, voir : Commande : Référentiel d'éléments de visualisation

Procédure. Créer un champ HTML5

  1. La _visu_icon_html5controls.png Éditeur de contrôle HTML5 se trouve dans le dossier d'installation de CODESYS dans le menu Démarrer de Windows.

    Ouvrez l'éditeur.

  2. La boîte de dialogue de sélection de fichier s'ouvre en premier. Sélectionnez-y le fichier de description souhaité du champ HTML5 (*.html5control.xml).

    Les données de l'élément sont affichées dans le _visu_icon_html5controls.png Éditeur de contrôle HTML5.

  3. Modifiez l'élément afin qu'un fichier de description valide soit créé :

    1. Configurez le Général languette:

      1. Compagnie: Test GmbH

      2. Nom: FirstControl

        Important

        Le nom ne doit pas contenir d'espaces.

      3. Catégorie Boîte à outils: Contrôles spéciaux

      4. Si vous le souhaitez, spécifiez un fichier image.

        Note

        Si aucune image n'est spécifiée, une icône par défaut est utilisée.

      5. Spécifiez un JavaScript file (JS) comme enveloppe d'élément. Cela est requis de manière inconditionnelle. Ce fichier encapsule les appels provenant du CODESYS cadre avec les appels au contrôle lui-même.

        Si d'autres fichiers sont nécessaires pour le contrôle, ceux-ci doivent également être spécifiés ici. Il peut s'agir de fichiers CSS ou de fichiers JS.

        Important

        Vous devez fournir le fichier wrapper.

        Assurez-vous que ElementWrapper.js le fichier est en haut et les autres fichiers nécessaires à l'exécution se trouvent en dessous.

        Exemple

        _vis_configuration_html5_control_files.png

    2. En option, sur le Propriétés du contrôle , configurez l'interface de l'élément.

    3. Facultativement, sur le Localisation onglet, configurez les traductions des textes de l'interface utilisateur du contrôle.

  4. Cliquez sur _visu_icon_save_install.png Enregistrer et installer.

    Vos paramètres sont appliqués et leur validité vérifiée. Ensuite, le fichier de description est enregistré et le champ est installé dans le référentiel.

Dans le référentiel d'éléments de visualisation, le contrôle est répertorié dans Éléments installés.

Procédure. Utilisation d'un contrôle

  1. Ouvrez votre CODESYS projet.

  2. Ouvrez un objet de visualisation.

    Le contrôle récemment installé est disponible dans le Boîte à outils de visualisation vue dans la catégorie qui a été spécifiée dans le fichier de description.

  3. Faites glisser le contrôle vers l'éditeur de visualisation et sélectionnez-le.

    L'interface de l'élément est disponible dans le Propriétés vue telle que définie dans le _visu_icon_html5controls.png Éditeur de contrôle HTML5.

Exemple

Exemple 56. Contrôle : HTML5DemoDonutGauge
_visu_example_html5_donutgauge.png


Dans cette section​: