Skip to main content

Procédure de base

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

Vous pouvez intégrer un contrôle HTML5 que vous avez développé vous-même ou que vous avez extrait d'une source externe dans votre CODESYS système de programmation. Pour ce faire, procédez comme suit.

Procédure. Préparation

  1. Créez un JavaScript fichier nommé ElementWrapper.js pour votre contrôle HTML5. Ou copiez un fichier d'encapsulation d'éléments à partir de l'exemple d'API HTML5 (par exemple, le fichier JS du HTML5DemoButton élément).

  2. Renommez l'objet wrapper dans le fichier JS. Le nom est prédéfini et est composé du nom de l'élément avec ElementWrapper y a été ajouté.

    Important

    Le nom du fichier doit toujours être ElementWrapper.js. Et l'objet wrapper qui y est appelé, qui est généré par le framework au moment de l'exécution, nécessite un nom attribué à l'élément selon la logique suivante :

    <element name>ElementWrapper

    Dans le fichier JS de votre élément, le nom de l'objet wrapper correspond au nouveau contrôle.

    Le fragment de code suivant le montre pour HTML5DemoButton contrôle :

    var HTML5DemoButtonElementWrapper;
HTML5DemoButtonElementWrapper = function(idGenerator)
…

  3. Spécifiez tous les fichiers nécessaires à l'exécution de l'élément. Il peut s'agir de fichiers de feuilles de style (CSS) JavaScript fichiers (JS) ou fichiers image (SVG).

  4. Créez une image d'élément (ElementImage.svg). Après l'installation, l'élément s'affiche dans le Boîte à outils de visualisation voir.

Procédure. Intégration dans le système de programmation

  1. Créez un fichier XML (.html5control.xml) avec des informations générales. Éditeur de contrôle HTML5 vous aide dans ce domaine.

    Astuce

    Les options de l'éditeur de contrôle HTML5 sont décrites dans le chapitre « »Éditeur de contrôle HTML5«.

  2. Créez le mappage des propriétés du contrôle HTML5 avec CODESYS propriétés des éléments de visualisation.

  3. Localisez les textes de l'interface.

  4. Installez l'élément.

  5. Signez l'élément.

Astuce

Suivez les instructions étape par étape Processus de développement recommandé avec des recommandations détaillées pour le débogage.

Dans cette section​: