Widget personnalisé

Les contrôles client et les applications OMI sont pris en charge uniquement sur le bureau et ne fonctionnent pas dans le client Web. Les widgets personnalisés fournissent une solution multiplateforme qui vous permet de les développer une seule fois et de les utiliser dans des applications InTouch et OMI dans des environnements Web ou de bureau.

Prérequis

Avant de commencer, assurez-vous que les éléments suivants sont installés :

• Node.js (24.15.0 ou version ultérieure) et npm (11.12.1 ou version ultérieure) : requis pour installer les dépendances et compiler le pack de widgets. Téléchargez-les depuis nodejs.org.

• Éditeur de texte : utilisé pour modifier les fichiers des widgets. Visual Studio Code est recommandé.

Cette section explique comment créer, compiler et utiliser un widget personnalisé dans les applications InTouch et OMI. Suivez les étapes ci-dessous :

• Étape 1 : Créer et modifier un widget personnalisé

• Étape 2 : Mettre à jour les fichiers de projet

• Étape 3 : Définir les propriétés du widget et les méthodes dans le fichier .wjson

• Étape 4 : Compiler le pack de widgets

• Étape 5 : Importer et utiliser le widget

Étape 1 : Créer et modifier un widget personnalisé

Pour commencer, un exemple de widget est disponible sur C:\ProgramData\AVEVA\Widgets\SampleWidget.

Le dossier Gabarits contient les fichiers de base utilisés pour créer de nouveaux widgets. Ne modifiez pas ces fichiers modèles pendant le développement normal du widget.

1. Ouvrez le terminal dans le répertoire WidgetCreator : C:\ProgramData\AVEVA\Widgets\WidgetCreator.

2. Exécutez la commande suivante pour créer un nouveau widget

   npm run create-widget MyWidgetName. Où MyWidgetName est le nom du nouveau widget.

3. Naviguez jusqu’au dossier du widget nouvellement créé : cd MyWidgetName.

4. Ouvrez le nouveau dossier du widget dans Visual Studio Code pour apporter des modifications.

Étape 2 : Mettre à jour les fichiers de projet

Vous pouvez personnaliser les fichiers de projet suivants pour créer votre widget :

• index.html : utilisé pour modifier la structure HTML selon les besoins. Ce fichier obligatoire est le point d’entrée principal et est chargé en premier lorsque le widget est ouvert. Ne renommez pas ce fichier.

• src/*.css : utilisé pour personnaliser les styles visuels.

• src/*.js : utilisé pour implémenter la logique du widget.

  Remarque : Les noms de fichiers CSS et JavaScript par défaut sont nommés d’après l’exemple de widget. Vous pouvez renommer ces fichiers selon vos besoins.

Étape 3 : Définir les propriétés du widget et les méthodes dans le fichier .wjson

Le fichier .wjson fait office de contrat entre le widget et les applications InTouch et OMI. Il définit les propriétés exposées par votre widget à la plateforme.

Comprendre la structure .wjson

Le fichier .wjson inclut les champs clés suivants :

• version : spécifie la version du widget.

• width et height : définissent la taille par défaut du widget au moment de son ajout initial.

• events : pas implémenté pour le moment, mais prévu pour les versions à venir.

• properties : définit les propriétés du widget exposées à la plateforme. Chaque propriété doit être numérotée séquentiellement en commençant par « 0 », puis « 1 », « 2 » et ainsi de suite.

  Remarque : Ces champs sont obligatoires et ne doivent pas être supprimés, car ils sont nécessaires au bon fonctionnement du widget.

Champs de propriété configurables

Vous pouvez configurer les champs suivants pour chaque propriété du widget :

• Nom : spécifie le nom de la propriété du widget affiché dans InTouch et OMI. La longueur maximum du nom est de 32 caractères.

• Type : définit le type de données de la propriété. Les types de propriété pris en charge sont les suivants : booléen, double, temps écoulé, flottant, entier, chaîne, heure et résumé historique.

• Valeur : définit la valeur par défaut affectée à la propriété du widget.

• Desc : fournit une description de la propriété du widget. Ce champ prend en charge plusieurs langues pour améliorer la localisation et la convivialité.

L’exemple suivant présente deux propriétés. Pour ajouter une nouvelle propriété, copiez l’entrée JSON complète et mettez à jour le numéro de séquence ainsi que le nom, le type et les autres champs pertinents.

{

"version": 0,

"width": 500,

"height": 500,

"events": {},

"properties": {

"0": {

"name": "Counter",

"type": "integer",

"value": 0,

"desc": {

"1033": "Counter value",

"1036": "Valeur du compteur",

"1031": "Zählerwert",

"1041": "カウンター値",

"2052": "计数器值"

}

},

"1": {

"name": "Label",

"type": "string",

"value": "Count:",

"desc": {

"1033": "Display label",

"1036": "Étiquette d'affichage",

"1031": "Anzeigebeschriftung",

"1041": "表示ラベル",

"2052": "显示标签"

}

}

}

}

Utiliser les propriétés d’un widget en JavaScript

Une fois que vous avez défini vos propriétés dans le fichier .wjson, vous pouvez y accéder en JavaScript à l’aide de cwidget.

Détecter les modifications de propriété

Pour détecter les modifications apportées à la propriété d’un widget, utilisez le motif suivant (remplacez 'Counter' par le nom réel de votre propriété) :

cwidget.on('Counter', callbackFn);

callbackFn : fonction exécutée à chaque modification de valeur de la propriété. Elle peut être utilisée pour mettre à jour l’interface utilisateur ou déclencher une logique supplémentaire.

Exemple tiré de l’exemple de widget :

Dans SampleWidget.js, lorsque la propriété 'Counter' change, la fonction _onCounterCshanged() est déclenchée pour mettre à jour l’affichage :

cwidget.on('Counter', _onCounterChanged);

function _onCounterChanged() {

document.getElementById('counter').innerText = cwidget.Counter;

}

Définir les valeurs des propriétés

Pour affecter une nouvelle valeur à la propriété d’un widget, utilisez la syntaxe suivante :

cwidget.Counter = nextValue;

nextValue : stocke la valeur à affecter à la propriété. Elle doit correspondre au type de données de la propriété (par exemple, un nombre pour une propriété entier ou une chaîne pour une propriété chaîne).

Exemple tiré de l’exemple de widget :

Dans SampleWidget.js, le bouton Incrémenter met à jour la propriété Counter. Cela déclenche automatiquement le rappel et met à jour l’ensemble des contrôles liés :

function _increment() {

const current = Number.parseInt(cwidget.Counter, 10) || 0;

cwidget.Counter = current + 1;

}

Lier des méthodes appelables en JavaScript (facultatif)

Pour permettre aux applications InTouch et OMI d’appeler des méthodes dans votre widget, vous pouvez exposer les méthodes de la classe du widget en les liant à des fonctions sur l’objet fenêtre.

Voici un exemple (remplacez SampleWidget, Decrement, _decrement et Counter par vos propres noms de classes et de méthodes) :

class SampleWidget {

constructor() {

window.Decrement = this._decrement.bind(this);

}

_decrement(args) {

var number = JSON.parse(args[0]);

const current = Number.parseInt(cwidget.Counter, 10) || 0;

const delta = Number.parseInt(number, 10) || 0;

cwidget.Counter = current - delta;

_onCounterChanged();

}

}

Cela crée une fonction exécutable appelée « Decrement », qui peut être utilisée dans des scripts d’action de graphiques industriels après l’importation du widget.

Étape 4 : Compiler le pack de widgets 

Une fois le développement terminé, suivez les étapes pour compiler le widget et générer le pack déployable :

5. Ouvrez un terminal dans le dossier des widgets (C:\ProgramData\AVEVA\Widgets\WidgetCreator\MyWidgetName).

6. Exécutez la commande de compilation npm run build.

   Cela génère un pack .cwp dans le dossier dist.

Étape 5 : Importer et utiliser le widget

Une fois votre widget compilé, vous pouvez l’importer et l’utiliser dans votre application. Suivez les étapes pour importer le widget dans une application InTouch et lier ses propriétés :

Importer et incorporer le widget pour InTouch WindowViewer

7. Ouvrez WindowMaker dans votre application.

8. Accédez à Fichier > Importer > Visualisation > Widget HTML5.

   

9. Sélectionnez le fichier .cwp généré à l’étape 4.

10. Ouvrez l’éditeur de graphiques et incorporez le widget à partir de Graphiques industriels > Widgets.

Importer et incorporer le widget pour System Platform IDE

11. Ouvrez votre Galaxy.

12. Accédez à l’onglet Accueil et sélectionnez Importer.

    

13. Sélectionnez Widgets Web.

14. Sélectionnez le fichier .cwp généré à l’étape 4.

    Après l’importation, votre widget apparaît dans la boîte à outils de l’éditeur de graphiques, où vous pouvez le faire glisser et le déposer sur votre graphique.

Lier des propriétés personnalisées

La liaison des propriétés du widget à des propriétés personnalisées permet une synchronisation bidirectionnelle entre votre widget et les autres contrôles de votre application.

Configurer la liaison

15. Créez une propriété personnalisée dans votre application. Dans cet exemple, nous utilisons cp_value.

    

16. Liez la propriété du widget à la propriété personnalisée. Dans la grille des propriétés du widget, liez la propriété Counter du widget à cp_value.

Liaison bidirectionnelle

Une fois la liaison configurée, les modifications se répercutent automatiquement dans les deux sens :

• Du widget à l’application : lorsque le widget met à jour sa propriété (par exemple, cwidget.Counter = newValue), la propriété personnalisée cp_value est mise à jour et tous les contrôles liés (comme une zone de texte) reflètent la nouvelle valeur.

• De l’application au widget : lorsque vous saisissez une valeur dans la zone de texte, cp_value change. Cette modification déclenche la fonction de rappel enregistrée avec cwidget.on(), ce qui permet au widget de répondre et de maintenir la synchronisation de l’interface utilisateur.

Appeler des méthodes de widget à partir de scripts

Si vous avez défini des méthodes appelables dans votre widget (voir Étape 3 : Lier des méthodes appelables en JavaScript), vous pouvez appeler une méthode de widget à partir de l’éditeur de scripts graphiques.

Dans cet exemple, créez un bouton avec une animation de script d’action de sorte que, lorsque vous cliquez dessus, il déclenche la méthode Decrement qui était auparavant liée en JavaScript.

dim args [1] as object;

args[1]=5;

SampleWidget1.ExecuteFunctionAsync("Decrement",args);

Par exemple, pour invoquer la fonction Decrement :

Ce script invoque la méthode Decrement sur l’instance de votre widget, en lui transmettant la valeur 5. Lorsque vous cliquez sur le bouton, le compteur du widget est décrémenté de 5.

où

• SampleWidget1 est le nom de l’instance du widget sur le graphique.

• ExecuteFunctionAsync est la méthode utilisée pour appeler les fonctions du widget de manière asynchrone.

• Decrement est le nom de la méthode associée à la fenêtre de liaison JavaScript . Decrement this._decrement.bind (this).

• args est un tableau d’objets qui stocke les arguments transmis à la méthode du widget. L’index du tableau doit commencer à [1] (et non [0]).

Remplacez SampleWidget1 par le nom réel de votre widget, et ajustez le nom de la méthode et les arguments si nécessaire.

Votre widget personnalisé est maintenant entièrement intégré et prêt à l’emploi.