Création de pages Web utilisateur

Nos systèmes SlimLine e Netsyst ils disposent d'un serveur web intégré, il est possible de transférer les pages utilisateur visibles du navigateur vers le système. Les pages doivent être créées avec votre propre éditeur HTML et transférées vers le système de fichiers du système. Sur les systèmes ARM 7, ils peuvent être transférés vers des dossiers Storage ed SDCard, dans les systèmes CortexM7 ils peuvent être transférés dans le dossier C:/Web créer vos propres sous-dossiers. Les pages chargées seront directement accessibles depuis le navigateur en tapant simplement l'IP de l'appareil et le chemin de la page. Pour les applications Web plus complexes, FB est disponible HTTPServer qui vous permet d'exécuter un programme PLC pour compiler le contenu à renvoyer au navigateur. Il est prévu pour le télécharger un programme, dans les dossiers du programme trouvés.

• LogicLab, Programme de gestion de pages à transférer vers le système SlimLine.
• Web, Dossier WPages avec des pages Web à transférer vers le dossier C:/Web sur le système SlimLine.

En tapant l'adresse IP du système depuis le navigateur suivi du chemin vers la page d'index (Exemple http://xxx.xxx.xxx.xxx/WPages/Index.html), vous pouvez naviguer entre les différents exemples. Tous les exemples sont modifiables à l'aide d'un simple éditeur de texte (Exemple Notepad++).

Simplement paginer

Dans l'exemple sur le côté de la page SPage.html, une page simple qui affiche un message de présentation. Pour ceux qui n'ont aucune connaissance en HTML je recommande de tester en éditant le fichier avec un éditeur de texte ou un éditeur HTML SPage.html. En enregistrant le fichier modifié et en mettant à jour la page sur le navigateur, nous verrons les modifications apportées. Il sera alors possible d'insérer les différents éléments HTML et de voir comment ils fonctionnent.

Gestion dynamique des pages, des TAG et des ARG

Dans l'exemple sur le côté de la page DPage.htm affiche la valeur de la variable automate VView de type UINT affecté à l'adresse DB100.10 et permet de définir la valeur de la variable automate VSet de type REAL affecté à l'adresse DB100.12. L'exemple met en avant la fonctionnalité la plus importante du serveur web, la possibilité de gérer les pages dont le contenu est modifié par le serveur. L'exemple montre comment il est possible de gérer l'interactivité avec l'utilisateur qui peut afficher les variables de l'automate grâce aux TAG insérés dans la page et modifier leur valeur avec les ARG. TAGs ed ARGs se référer aux variables allouées dans le DB100 de l'automate et doit être inséré dans les pages avec extension htm.

TAGs: Pour afficher la valeur des variables API sur la page Web, vous pouvez saisir TAGs qui indiquent le format d'affichage, le type et l'adresse de la variable à afficher (Exemple <!–[‘%d’, UINT, 10]->, variable d'affichage UINT attribué à DB100.10). Les TAG seront remplacés par le serveur avec la valeur de la variable lors de l'envoi du contenu de la page au navigateur.

ARGs: Pour permettre le paramétrage des variables de l'automate depuis la page web, il est possible d'envoyer au serveur en POST à partir de ARGs indiquant le type et l'adresse de la variable suivi de la valeur à régler (Exemple UINT 12=100, définissez la valeur 100 dans la variable UINT attribué à DB100.12). Plusieurs définitions peuvent être ajoutées à l'aide du symbole & (Exemple UINT 12=100&REAL 14=1.3). Pour définir des variables API à partir de la page Web, la méthode la plus simple consiste à utiliser des modules, tous les objets contenus entre <form> e </form>lorsque le formulaire est envoyé, ils sont automatiquement mis en file d'attente et envoyés au système qui met à jour les variables.

<!--["%d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di cifre intere variabili in base al valore.
<!--["%04d", UINT, 10]--> Visualizza variabile UINT allocata a DB 100.10 con numero di 4 cifre.
<!--["%3.0f", REAL, 32]--> Visualizza variabile REAL allocata a DB 100.32 con numero di 3 cifre intere senza decimali.
<!--["%4.2f", REAL, 50]--> Visualizza variabile REAL allocata a DB 100.50 con numero di 1 cifra intera ed 2 decimali.
<!--["%s", STRING, 128]--> Visualizza variabile STRING allocata a DB 100.128.

UINT 12=10 Imposta variabile UINT allocata a DB 100.12 al valore 10.
REAL 128=185.5 Imposta variabile REAL allocata a DB 100.128 al valore 185.5.
STRING 1000 16="Hello!" Imposta variabile STRING allocata a DB 100.1000 con "Hello!". Lunghezza testo limitata a 16 caratteri.

Mise à jour des pages avec AJAX

AJAX, acronyme pour Asynchronous JavaScript and XML, est une technique de développement permettant de créer des applications Web interactives. Le développement d'applications HTML avec AJAX repose sur un échange de données en arrière-plan entre le navigateur Web et le serveur, ce qui permet la mise à jour dynamique d'une page Web sans rechargement explicite par l'utilisateur. Cette technique permet une mise à jour automatique des données d'une page web sans avoir à recharger la page, permettant l'affichage automatique des variables de l'automate. Les requêtes AJAX sont traitées à l'aide de le API fetch.

Dans l'exemple sur le côté de la page DPAjax.html qui affiche la valeur de la variable IValue de type UDINT DB100.20 auquel la valeur de la variable est ajoutée chaque seconde IFactor de type USINT DB100.24. Toutes les valeurs sont automatiquement mises à jour dans AJAX chaque seconde. L'exemple de saisie d'une variable de chaîne allouée à est également affiché DB100.52. Les fonctions de gestion de l'API fetch sont dans le fichier Scripts.js Il y a une fonction de mise à jour des champs sur la page :

• GetPage(Page, RFlag), Effectue le API Fetch rappelant dans GET la page indiquée dans Page (Dans l'exemple DPAjax.htm) et au retour des données exécute la fonction SetupValues qui met à jour les champs de la page.
• SubmitData(Page), Exécute le API Fetch envoi POST sur la page indiquée dans Page (Dans l'exemple DPAjax.htm) les variables de données définies et au retour des données exécute la fonction SetupValues qui met à jour les champs de la page.
• LoadPage(Page), Exécuté lorsque la page est chargée exécute la fonction GetPage pour mettre à jour immédiatement tous les champs de la page puis activer l'exécution temporisée de la fonction GetPage pour mettre à jour les champs automatiquement.
• SetupValues(RData,RFlag), Valorise les objets de la page avec les valeurs reçues dans RData. RFlag s'il est actif, il permet la mise à jour des objets dans l'attribut. De cette façon, il est possible de le désactiver permettant d'écrire la valeur depuis le navigateur sans être réécrit par la mise à jour automatique en AJAX.

Lorsque la page est chargée, la fonction est exécutée <body onLoad=”LoadPage(‘DPAjax.htm’)”> pointant vers la page DPAjax.htm, cette page contient les TAGs qui, au chargement, seront remplacés par la valeur de la variable relative. La page est écrite de manière à renvoyer une chaîne JSON avec l'indication de l'identifiant de l'objet et la valeur à laquelle le définir.

{
    "IValue":<!--['%d', UDINT, 20]-->,
    "IFactor":<!--['%d', USINT, 24]-->,
    "VStr":"<!--['%s', STRING, 52]-->"
}

De cette façon dans la fonction SetupValues il suffira d'analyser le retour pour pouvoir valoriser les objets. Notez que lors du chargement de la page RFlag est actif de cette manière, le champ de saisie sera également évalué IFactor. Pendant l'exécution dans l'intervalle RFlag il n'est pas actif pour bloquer la mise à jour.

Utilisation d'objets HTML

Dans l'exemple sur le côté de la page WObjects.html affiche une série d'objets mis à disposition par le langage HTML avec lesquels vous pouvez créer des pages avec un impact graphique agréable. La gestion des objets s'effectue en Ajax à l'aide des fonctions évoquées précédemment.

Pour créer des pages Web avec des graphiques, des jauges, des histogrammes et bien plus encore, vous pouvez insérer des objets Google Chart (Voir la galerie). En cet article Des jauges ont été utilisées pour afficher les valeurs de température, d'humidité et de pression sur un appareil Amazon Echo Show.

• Check box: En exécutant cette coche, une variable BOOL est activée, l’état des premiers 2 est également transféré aux sorties logiques du module de la CPU.
• Radio button (A): Ces boutons radio indiquent l’état des entrées du module de la CPU. Comme vous pouvez le constater, ils ont des attributs de nom différents, ce qui en fait des objets uniques et sans rapport. Comme ils sont uniquement en affichage, ils ont été désactivés pour ne pas pouvoir être édités depuis une page Web.
• Radio button (B): Ces boutons radio ont le même attribut de nom, donc agir sur l’un désactive l’autre. Ils agissent sur une variable USINT, qui est évaluée en fonction de la sélection.
• Input field: En définissant la valeur, une variable UINT avec la valeur définie est évaluée.
• Progress bar: Une barre de progression s'affiche avec la valeur définie dans le champ Entrée.
• Select: En choisissant l'une des options, une variable USINT est évaluée.

Pages réactives

Aujourd'hui, il est essentiel que les pages Web soient accessibles depuis une grande variété de terminaux, non seulement le PC mais aussi les tablettes et les smartphones, il est donc nécessaire de développer des pages responsives pour qu'elles puissent s'adapter automatiquement aux différents appareils.

l'application eDoorkeeper avec son code source (Download) illustre comment en utilisant judicieusement les styles CSS, il est possible de développer des pages simples et réactives pour la gestion du contrôle d'accès avec identification via RFiD TAG.

Page Accueil.htm affiche l'état de fonctionnement, les E/S numériques, la valeur du TAG acquis et les éventuelles erreurs, la page est mise à jour en AJAX. Page Balises.htm permet de définir jusqu'à 16 TAG avec le code correspondant et l'utilisateur qui lui est associé.