TP n°2

Mise en place d'un serveur web sur automate Siemens

Objectifs du TP

  1. Mettre en œuvre un système alternatif à la supervision en paramétrant un serveur web sur un automate S7-1500.
  2. Apprendre à animer une page web en langage HTML et javascript.

Documents avec Exemples

Exemples S7-1200 Manuel serveur Web S7-1500 Exemples S7-1500

I - Présentation générale

Le principe général de conception d'une supervision web sur un automate Siemens est représenté sur la figure suivante avec les différentes étapes à réaliser :



  • 1 - Créer les pages web à l'aide d'un éditeur HTML quelconque.
  • 2 - Regrouper tous les fichiers nécessaires à l'application web (*.html, *.jpg, *.png, *.js, *.css) dans un répertoire.
  • 3 - Générer les DB qui vont contenir l'application web codée à l'aide de TIA portal et insérer dans l'OB1 le bloc SFC99 (WWW) qui gère l'intéraction avec le serveur Web.
  • 4 - Transférer le programme et tous les blocs dans la CPU.
  • 5 - Ouvrir l'application web à l'aide d'un navigateur en utilisant l'adresse IP de l'automate.


Une fois que l'application web est lancée sur le navigateur, les échanges entre ce dernier et le programme automate passent par des DB comme sur le schéma suivant :



Le système qui va servir de base pour la mise en place du serveur web est le distributeur de boissons dont le fonctionnement est expliqué dans l'énoncé du TP7 du module AUTOM. Le but n'étant pas de reprogrammer le système, récupérez l'archive suivante et la décompresser à l'aide de TIA portal : TP2Etudiant.zap15_1

Assurez-vous de la compatibilité du firmware de la CPU avant de charger le programme dans l'automate et vérifiez l'adresse IP !!!!


II - Paramétrage du serveur Web sur un automate Siemens

La procédure pour paramétrer un serveur web sur un automate Siemens est la suivante :

Etapes à suivre l'une après l'autre
  1. Aller dans les propriétés de la CPU et selectionner "Serveur Web"
  2. Cocher "Activer le serveur Web sur le module"
  3. Valider le message
N.B. : Si pour plus de sécurité on souhaite activer la connection via HTTPS, il faut alors mettre en place un certificat.
  1. Aller dans la partie "Gestion des utilisateurs".
  2. Attribuer des droits utilisateurs à l'utilisateur Chacun qui est l'utilisateur par défaut. Ce dernier doit pouvoir accéder aux pages personnalisées et écrire dedans.
  3. Valider
N.B. : On peut créer d'autres utilisateurs avec des droits différents, notamment pour l'accès aux paramétrages de la CPU.
  1. Aller dans la partie "Pages Web personnalisées".
  2. Définir le répertoire qui contient les pages web. Le répertoire est contenu dans le projet TIA Portal.
  3. Définir la page d'acceuil : Distributeur.html
  4. Mettre un nom d'application
  5. Cliquer sur "Générer des blocs"
N.B. : Si on a des fichiers Javascript (*.js), il faut ajouter l'extension dans "Fichiers à contenu dynamique".
  1. Aller dans la partie "Page d'entrée".
  2. Sélectionner AWP1 comme page d'entrée dans la liste.
  1. Aller dans l'OB1.
  2. Rechercher le SFC 99 - WWW dans la liste d'intructions - rubrique "Communication".
  3. Insérer le bloc dans l'OB1.
  1. Paramétrer le bloc en utilisant le DB333 en entrée et une variable de type Word en sortie pour la gestion des erreurs eventuelles
  2. Charger dans l'automate en choisissant "Matériel et logiciel".

III - Ajouts au programme automate

Le programme automate doit être complété avec une partie spécifique à la supervision par les pages web personnalisées. Cette partie va servir à créer des animations à partir de variables définies dans le programme.


Questions

  1. Afin de pouvoir gérer les échanges de variables, créer un DB qui s'appelera web et qui contiendra les variables suivantes (attention à l'orthographe !!!) :


  2. Créer un FC qui sera nommé Supervision qui effectuera les opérations suivantes :

    • Mise à 0 ou à 1 des variables du DB web indiquant les ingrédients choisis.
    • Mise à 0 ou à 1 des variables du DB web indiquant le manque de produits pour la fabrication des boissons.
    • Mise à 0 ou à 1 des variables du DB web indiquant l'état des différents actionneurs.
    • Mise à jour de la variable info du DB web qui prendra les valeurs 0 ("Insérez votre pièce"), 1 ("Choisissez votre boisson"), 2 ("Boisson en préparation"), ou 3 ("Boisson prête").
    • Remise à 0 au bout de 500ms des varaibles valSucre, valCafe, valLait et valChoco afin de gérer l'effet "bouton-poussoir" et d'éviter le redémarrage automatique.
  3. Ajouter en "parallèle" des boutons physiques (S1,S2,S3,S4), les BP valSucre, valCafe, valLait et valChoco dans les grafcets de choix de boissons et d'ingrédients.

IV - Etude et complément du code HTML et Javascript

L'ensemble des fichiers nécessaires au bon fonctionnement de l'application web se situent dans le répertoire HTML du projet que vous avez désarchivé (figure ci-dessous).




Informations sur le codage d'une page personnalisé

Les pages permettant la supervision sont écrites pour une partie en langage HTML et pour la partie plus interactive en langage Javascript. Le langage HTML est un langage à balise dont les principales balises peuvent être vues ici.

La structure d'une page HTML se découpe de la manière suivante :

  • Entre les balises <head> et </head> se situe l'entête de la page autrement dit tout ce qui n'est pas le contenu de la page à proprement dit. Dans ces balises on trouve la définition de plusieurs choses dont :
    • Entre les balises <style> et </style> les paramètres de style des différents objets graphiques qui composent la page (couleur, position, marge, ...).
    • Entre les balises <script> et </script> On trouve les fonctions Javascript qui vont permettre de modifier l'état des éléments graphiques qui composent la page en fonction de l'évolution des variables qui changent d'état dans le programme automate ou des clics sur les boutons.
  • Entre les balises <body> et </body> se situe tout ce qui correspond au corps de la page et ce qui la composera. On trouvera donc la création des champs texte, des boutons, l'insertion des images, .... C'est la partie visible de la page. Chacun des composants de la page doit être identifié de manière unique grâce à un id

Au niveau du Javascript, on utilisera 2 fonctions principales :

  • La fonction init() qui sera executée à chaque chargement de la page et qui initialisera les composants graphiques.
  • La fonction refresh() qui sera appelée toutes les secondes et qui fera évoluer l'affichage en fonction de l'état des variables du programme automate.

Le lien entre les variables automates et les pages web se fait grâce à des commandes AWP (Automation Web Programming). Ces commandes désignent une syntaxe de commandes spéciales permettant d'échanger des données entre la CPU et les pages utilisateur. Elles sont insérées en tant que commentaires HTML tout en haut du fichier. La liste des principales commandes AWP est données dans le tableau suivant :


Fonction Représentation
Lire des variables API :=<Varname>:
Ecrire des variables API <!-- AWP_In_Variable Name='<Varname>' -->
Lire des variables spéciales <!-- AWP_Out_Variable Name='<Typ>:<Name>' -->
Ecrire des variables spéciales <!-- AWP_In_Variable Name='<Typ>:<Name>' -->
Définir les types Enum <!-- AWP_Enum_Def Name='<Name Enum-Typ>' Values='0: "<Text_1>",1:"<Text_2>",...,x:"<Text_y>"' -->
Affecter des variables à des types Enum <!-- AWP_Enum_Ref Name='<Varname>' Enum='<Name Enum-Typ>' -->

La structure de l'application est expliquée dans la figure ci-dessous.



L'application se compose de 2 pages :

  • distributeur.html qui est la page principale et qui contient la supervision. Elle agit directement sur les variables boutons-poussoirs du DB web.
  • varUpdate.html qui s'occupe de rafraichir les variables en allant les lire toutes les secondes dans le DB web.
  • approvisionnement.html qui est la page qui s'occupe du réapprovisionement des magasins.

Le contenu du DB web évolue en fonction du programme.

Questions

  1. Ouvrir le fichier distributeur.html à l'aide de Notepad++ et analyser le code (si besoin à l'aide de l'enseignant).
  2. Le fichier HTML contient des exemples déjà codés pour la partie boisson café. Essayer de compléter le code Javascript et HTML aux endroits indiqués afin de pouvoir gérer le chocolat, le sucre et le lait.
  3. Sans faire tourner le programme automate, faire varier les variables du DB web dans une table de visualisation et vérifier que cela correspond à vos souhaits sur la page HTML ouverte dans le navigateur.
  4. Une fois les animations au point, tester avec le programme.
  5. Ouvrir le fichier approvisionnement.html et la compléter afin que les magasins soient remplis via l'interface et non plus en appuyant sur la combinaison de S0 et du bouton de la boisson à recharger.

A chaque modification du code Javascript et HTML, il faut sauvegarder le fichier, regénérer les blocs dans TIA portal et retransférer le code dans l'automate

Si toutes les animations sont actives, vous devez obtenir une page web identique à l'image suivante :