Skip to main content

Processus de développement recommandé

Contrôle de démonstration en tant que modèle

Téléchargez l'exemple d'API HTML5 sur votre ordinateur. Ensuite, les commandes de démonstration avec des wrappers d'éléments JavaScript sont à votre disposition.

We recommend using the copy of an ElementWrapper.js from the HTML5 examples as a template and adapting the name and functionality to your HTML5 control.

Pour plus d'informations, voir Exemple : HTML5-API

Test de la fonctionnalité du contrôle HTML5

Nous vous recommandons de tester d'abord votre contrôle HTML5 sur une page de démonstration HTML. Le contrôle HTML5 peut être affiché dans le navigateur sans ElementWrapper le script et la fonctionnalité peuvent être testés. Vous commencez à créer le JavaScript fichier (ElementWrapper.js) uniquement après que la fonctionnalité ait été testée avec succès.

Note

Pour CODESYS Visualization V4.8.0.0 et versions supérieures, le fichier JS ElementWrapper est automatiquement créé lorsqu'un nouveau contrôle HTML5 est créé. Il ne contient que le cadre. La fonctionnalité spécifique à l'élément doit être ajoutée à l'étape suivante

  1. Création de la page HTML TestControl.html pour tester le script sans installation supplémentaire dans CODESYS.

    Structure de la page HTML

    <!DOCTYPE html>
<html>
    <head>
        <title>MyTestControl Test Page</title>
        <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
        <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1' />
        <meta name='HandheldFriendly' content='True' />
        <meta name='MobileOptimized' content='480' />
        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' />
        <meta name='apple-mobile-web-app-capable' content='yes' />
        <meta name='theme-color' content='#2f434e' />
        <meta http-equiv='cleartype' content='on' />
        <scripttype='text/javascript' src='ElementWrapper.js'> </script>
    </head>
    <body>
        <script>
            var wrapper = new MyTestControlElementWrapper();
            (function loop() {
                var testValue = Math.random() * 100;  
                wrapper.setText(testValue + "");      
                wrapper.setColor("#0079FF");       
                window.setTimeout(loop, 4000);     
            })();    
        </script>    
    </body>
</html>

  2. Incluez des fichiers supplémentaires (JavaScript fichiers ou fichiers de feuille de style) pour le contrôle HTML5 de cette page de test. Il s'agit de fichiers responsables de la mise en page ou fournissant des fonctionnalités supplémentaires.

    Cela correspond à un import de script pour rendre les sources disponibles.

    Exemple de code

    <link rel="stylesheet" href="gauge.css" />
<script type="text/javascript" src="gauge.js"> </script>

    Vous pouvez l'insérer au-dessus de la ligne suivante :

    <script type="text/javascript" src="ElementWrapper.js"> 
 </script>

  3. Afficher l'élément (sans ElementWrapper) dans le navigateur et testez les fonctionnalités.

    Une fois le test terminé avec succès, vous pouvez commencer à créer JavaScript fichier (ElementWrapper.js).

Création du ElementWrapper

  1. Programmez le ElementWrapper script.

    L'exemple de code crée un bouton avec du texte et une couleur. La taille est définie sur 100 % car le contrôle HTML5 peut remplir complètement l'espace créé par le framework. En outre, un IFrame est créé pour chaque contrôle HTML5. Par conséquent, le contrôle HTML5 peut être ajouté directement dans document.body.

    Exemple de code

    var MyTestControlElementWrapper;

(function ()
{
    MyTestControlElementWrapper = function()
    {
        this.domNode = document.createElement("div");
        this.domNode.className = "button";
        this.domNode.style.width = "100%";
        this.domNode.style.height = "100%";
        this.domNode.style.overflow = "visible";
        this.domNode.style.backgroundColor = "#0079FF";

        document.body.appendChild(this.domNode);
     };
    
    MyTestControlElementWrapper.prototype =
    {
        setText:function(value)
        {
            this.domNode.innerHTML = value;
        },

        setColor: function(value)
        {
        this.domNode.style.backgroundColor = value;
        },
    };
})();

  2. Vous pouvez instancier et afficher le contrôle HTML5 à l'aide de la page HTML Test.html et le ElementWrapper script.

  3. Vous pouvez également tester les différentes méthodes dans ElementWrapper à l'aide d'un loop fonction qui est démarrée par une minuterie.

    Le ElementWrapper le script fournit la fonctionnalité.

Création d'un contrôle HTML5

  • Vous pouvez maintenant créer le contrôle HTML5. L'éditeur de contrôle HTML5 vous y aide

    1. Sur le Général onglet, configurez le nouvel élément.

    2. Sur le Propriétés de contrôle onglet, spécifiez les propriétés souhaitées.

    3. Créer une nouvelle propriété de type Variable. Dans le Appel de méthode colonne, spécifiez le nom de méthode souhaité.

      C'est ainsi que les variables sont transférées aux méthodes de contrôle.

      Astuce

      Pour vous familiariser avec les fonctionnalités, il est utile d'ouvrir les exemples dans l'éditeur de contrôle HTML5.

      Pour plus d'informations, voir : Référence : Éditeur de contrôle HTML5

    4. Sur le Localisation onglet, localisez les textes de l'interface du champ pour les différentes langues.

      Les textes sont localisés. L'élément peut être localisé dans différentes langues.

    5. Enregistrez votre configuration sous le nom du contrôle et installez-la dans CODESYS Référentiel d'éléments de visualisation.

      Pour ce faire, utilisez le _visu_icon_save_install.png icône de commande.

      Pour plus d'informations, voir : Première installation d'un champ HTML5

    Vous pouvez désormais utiliser le contrôle HTML5 dans une visualisation.

Utilisation d'un contrôle HTML5

  1. Créez un CODESYS projeter avec une visualisation et faire glisser le nouvel élément dans l'éditeur de visualisation.

    Configurez les propriétés de l'élément et attribuez la variable que le nouveau contrôle doit afficher.

  2. Compilez et démarrez l'application. Et lancez la visualisation sur un WebVisu

    Ils peuvent surveiller votre visualisation en mode en ligne.

Débogage du contrôle HTML5

La section suivante explique comment vérifier la présence d'erreurs dans votre contrôle HTML5 dans le navigateur.

Pour activer la fonctionnalité, vous devez appeler l'URL avec le paramètre de débogage DebugHTML5=true:

http://localhost:8080/webvisu.htm?CFG_DebugHTML5=true

Procédure. Débogage dans le navigateur

  1. Cliquez avec le bouton droit sur la page dans le navigateur. Sélectionnez le »Inspectezoption » dans le menu contextuel qui s'ouvre.

    Le « DevTools » page du navigateur s'ouvre.

  2. Cliquez sur Sources onglet.

    En la pestaña "Sources", encontrará una estructura de árbol donde se encuentra el archivo elementwrapper<index>.js. El índice se añade automáticamente al nombre del archivo para garantizar la unicidad en el controlador.

    Le fichier est enregistré dans le système d'exécution dans lePlcLogic/visudossier «.

  3. Le moyen le plus rapide d'implémenter et de tester les corrections de bogues consiste à apporter les modifications nécessaires au fichier stocké dans le système d'exécution.

    1. Changez le ElementWrapper fichier pour le débogage.

    2. Sélectionnez le »Rechargeroption « dans le navigateur.

      L'élément est mis à jour et peut être testé.

    3. Astuce

      Il est recommandé de démarrer le local CODESYS Control en tant qu'environnement d'exécution. Le moteur d'exécution s'exécute localement sur votre propre ordinateur. Cela vous permet d'ouvrir le dossier du système d'exécution dans l'Explorateur et d'ouvrir et de modifier le code JavaScript à l'aide d'un éditeur de texte externe.

      elementwrapper<index>.js

    4. Définissez un point d'arrêt dans le constructeur ou dans les méthodes afin de déboguer la fonctionnalité dans le navigateur. Vous devez connaître les options de débogage pour cela

    Les erreurs ont été identifiées et corrigées. L'élément de test se comporte désormais correctement.

  4. Transfiera los cambios en el elementwrapper<index>.js de JavaScript de prueba al archivo ElementWrapper.js original.

  5. Réinstallez le contrôle HTML5.

    Les modifications sont en vigueur. L'élément se comporte en conséquence.

Exemple

La page liée ci-dessous fournit des exemples des différentes fonctions et caractéristiques relatives aux contrôles HTML5.

Avis

_example_icon.png Exemple de projet : API HTML5

Les appels d'API utilisés sont décrits dans la référence pour les développeurs suivante :

Référence : Développement de contrôles HTML5

Dans cette section​: