Exemple : API HTML5

L'exemple de projet contient divers contrôles HTML5 configurés. La fonctionnalité des contrôles HTML5 est facile à reconnaître en mode en ligne.

Les commandes ne sont utilisées qu'à des fins de démonstration. C'est pourquoi ils ont un look simple.

HTML5DemoButton

Ce contrôle montre comment évaluer les actions de la souris via un contrôle HTML5 et les transmettre à IEC via la configuration d'entrée. Vous pouvez exécuter les événements d'entrée configurés OnMouseDown, OnMouseUp, et OnMouseMove.

HTML5DemoCombobox

Cette commande montre comment utiliser une énumération IEC dans une zone de liste déroulante. L'exemple montre comment interroger des informations de type (getTypeDesc) à partir d'une variable. Il montre également comment transférer et utiliser des couleurs et des polices.

HTML5DemoImage

Ce contrôle montre comment utiliser des images dans un contrôle HTML5.

HTML5DemoResize

Cette commande montre comment utiliser les fonctions de WebVisu-Support.js pour adapter sa taille et son ordre Z. Cette fonctionnalité peut être utilisée pour implémenter des éléments qui chevauchent d'autres éléments, ce qui peut par exemple apparaître dans une liste déroulante.

HTML5DemoTable

Ce contrôle montre comment afficher et modifier une matrice IEC dans un contrôle HTML5. Les données sont transmises de manière optimisée. Seule une zone spécifique est transmise. Cette solution est également possible pour les réseaux plus grands comportant de nombreuses lignes. Vous pouvez modifier les valeurs des cellules du tableau et, par conséquent, modifier les valeurs des variables du tableau.

HTML5DemoTableNoScrollRange

Ce contrôle montre comment afficher et modifier une matrice IEC dans un contrôle HTML5. L'ensemble du tableau est transféré lorsqu'une valeur du tableau a changé. Vous pouvez modifier les valeurs des cellules et, par conséquent, modifier les valeurs des variables du tableau.

HTML5DemoTextfield

Cette commande montre comment différents types de valeurs scalaires IEC peuvent être gérés dans les deux sens (lecture/écriture).

HTML5DemoDonutGauge

Ce contrôle montre comment utiliser un élément HTML5 avec la bibliothèque d3. La taille variable de la zone du cadre est transférée directement via la largeur et la hauteur. Il se compose d'un écran et d'un bouton pour le faire glisser.

HTML5DemoBarGauge

Ce contrôle montre comment utiliser un élément HTML5 avec la bibliothèque d3. La taille variable de la zone du cadre est transférée directement via la largeur et la hauteur. Un élément de barre modifiable s'affiche.