Ce qui me passionne actuellement est le web temps réel :
Le principe est d'afficher dans une page web, des informations qui évoluent régulièrement sans devoir forcer l'actualisation du navigateur via la touche F5.
Par ce projet, j'explore les possibilités de cette techno qui me semble prometteuse :
Directement exploitable par un navigateur web, multi terminal, multi-plateforme, multi utilisateurs et un seul code source à maintenir.

Le projet :

• Il s'agit de faciliter un monde que je connais bien : La mise en service de projet d'automatisme.
  
• L'idée est de voir ce qui ce passe dans un automate programmable sans logiciel particulier, mais via une page web.
  
• Les technologies choisies sont GNU Linux Debian, Python et l'univers du web.
  
• Le système de versioning est Git.
  
• Les idées viennent au fur et à mesure et je n'hésite pas à me former pour atteindre mes objectifs.
  
• Le défi est aussi de fusionner différentes technologies open source, de construire une application pérenne, maintenable, tout en réalisant projet utile dans ma vie professionnelle.
  
• Il s'agit d'un projet personnel, développé en dehors de mon temps de travail, une manière de faire de la veille techno.
  

• Le principe est de lire des données dans un automate programmable et de les diffuser en temps réel sur réseau LAN via un serveur web.
• Pour visualiser ces informations en temps réel, il suffit de saisir l'adresse IP du serveur dans la zone URL d'un navigateur. Exemple: 192.168.1.230
• Les clients peuvent être, un PC, un smartphone, une tablette.
• Le serveur embarque des pages Responsive Web Design, dont la taille s'adapte automatiquement à la taille d'écran du client connecté.
• Ce projet utilise des technologies 100% open source comme Python, HTML, JavaScript etc …
• Pour ceux qui connaisse l'automatisme, il s'agit de VAT (Variable Animation Table) visible sans logiciel de programmation: Directement dans une page web.

• Détails de la syntaxe des commentaires coté admin de le grille :

• Voici le rendu de la grille :

L'avantage d'utiliser son propre logiciel, c'est que les idées d'améliorations arrivent naturellement !

Ajouter l'insertion de commentaire dans la zone d'adresses, comme une VAT Siemens
Exemple:

// Doseur 3 - séparateur

Remplacer le code Pur JavaScript trop lourd à mettre en oeuvre et à maintenir, par le framework ReactJS (formation en cours).
Décliner le format 0b qui affiche 8bits en BIN8, BIN16, BIN32.
Décliner le format 0x qui affiche 8bits hexa en HEX8, HEX16, HEX32.
Ajouter une ListeTexte sur les booleans et les entiers pour afficher un message en plus du chiffre.
Ajouter la possibilité de mettre en surbrillance une ligne importante de cadran.
Créer de nouveaux cadrans pour tracer des courbes, utile pour surveiller une régulation.
Créer de nouveaux cadrans pour afficher les logs des adresses sur forme texte:
Exemple:

2019-10-01 10:05:11 Doseur 3 niveau haut
2019-10-01 10:05:12 Doseur 3 Arrêt vanne écluse
...

Ajout le protocole Modbus/TCP
Ajout une communication Client OPC

• Le serveur web est hébergé dans un PC tactile reconditionné, qui partait à la déchetterie.
• Retrouver l'article consacré au PC :
  Modification de la ventilation
• Retrouver l'article sur la reconnaissance de la dalle tactile en liaison série sous GNU Linux Debian:
  Configuration de la dalle tactile

• Ce diagramme montre le système connecté à des automates.
• La liaison est un simple réseau LAN avec des abonnés en TCP/IP.
• Le détail de l'application montre les sous parties technologiques :
  • Le système d'exploitation GNU Linux Debian.
  • Un “container Docker” contenant un autre Debian autonome permettant de modéliser tous les softs nécessaires au développement et au fonctionnement (Python3.6, Ruby, nginx, nodeJS etc..).
    A lire : Création image de dev Debian Django
  • En environnement partagé avec l'OS hôte: Les Librairies et Framework utilisés.
    A lire : MEMO DJANGO Mise en service de crossbar Installation de Sass Installation de compass
  • En environnement partagé avec l'OS hôte: Les sources Python, HTLM, JS, CSS, SASS, etc…

• La base du projet est issu d'un cours en ligne Django, TP de blog, où je me sent à l'aise.
• Retrouver dans les chapitres suivants, les étapes marquantes de l'évolution du projet, tel un git log.

• Il s'agit d'une première étude d'affichage en temps réel dans la page web.
• L'idée est d'afficher en temps réel la charge CPU/Mémoire/Disque du serveur.
• Intégration de Crossbar dans Django (framework web Python)
• Intégration HTML/JavaScript des jauges CPU dans Bootstrap (framework CSS responsive web design, c'est à dire auto-adaptation des page web en fonction du terminal: PC, PC portable, Tablette, Smarphone).

• Une seule valeur est lue dans l'automate
• Son adresse est, à ce stade, en dur dans le code

• Le détail de l'automate et les adresses des données sont en dur dans le code.
• Les grilles HTML se dessinent dans la page dés que la communication PLC est établie. La technique web employée est la création des objets directement dans le DOM du navigateur via JavaScript. Les données aux format JSON, sont propulsées par Python.

• Une structure de base de données est écrite dans l'ORM de Django
• Les caractéristiques de l'automate.
• Les adresses de l'automate à lire
• Le principe est de copier coller les adresses automate depuis une VAT de TIA Portal vers un champs texte de Django (Ce principe évoluera par la suite).
• Un parseur Python s'occupe de décrypter l'organisation du copier coller de TIA pour exploiter les adresses PLC.

• Pour rendre transportable l'environnement de développement.
• Pour ne pas avoir de serveur comme NGINX qui tourne en permanence inutilement sur mon PC portable.
• Retrouver le tuto Docker pour créer le container :
  developpement:docker:03_docker_debian_django
• Retrouver la doc + config Docker sur git lab :
  gitlab.com/JC_onLine/docker-debian-dev-environment

• L'appli est capable de lire 2 automates.
• La présentation a été retravaillé avec Sass et Compass (Langage et framework permettant de générer les feuilles de styles CSS).

• Les progressbars sont renseignés en mini/maxi à la suite des adresses automate

• La page est auto-adaptative en fonction de la taille du navigateur
• Les grille automate se place en ligne ou en colonne en fonction de la largeur d'écran

• Le container Docker n'est plus isolé du réseau LAN en 172.17.0.2
• Le container à l'adresse 192.168.1.230
• Voir le tuto container_visible_du_lan_avec_ip_statique

• Le smartphone utilisé est un Samsung Galaxy A5.

Bien sur, Les drivers tactile sont designés pour les systèmes Windows. Le formatage à eu raison du tactile.
Le pointeur tactile communique via liaison série. Le driver elotouch fonctionne sous GNU Linux Debian mais je n'ai pas encore réussi à intégrer l'étalonnage de la dalle dans l'environnement X11 du système. Retrouver le détail des investigations ici : Configuration de la dalle tactile

Le PC tactile fonctionne en architecture 32bits. Hors Docker n'est pas compatible 32bits. Je m'oriente donc vers le gestionnaire de container LXC.
Retrouver l'installation et configuration ici : Configuration Système
Et le chapitre sur LXC Installation

• Mise en place du démarrage automatique de LXC au boot.
• Suppression du login de lightdm d'XFCE pour un démarrage direct sur le bureau.
  

Les notes: lightdm_autologin

Ajout de Crossbar et plc-monitoring en tant que service Debian pour le launch auto au boot du container. demarrage_automatique

Retrouver l'article Installation du support d'écran

Première mise en service avec ce projet “PLC web monitoring” !

• Mise en situation de l'écran :

• Capture de la VAT (Variable Animation Table) que l'on a utilisée pour la mise en service : Big up à Fred mon coéquipier sur ce chantier !

• A ce stade du projet, il n'y a qu'une seule VAT d'affichée à la fois par automate.
• Voici une autre VAT en version smartphone :

Après un 1er séjour sur chantier, il fallait installer une poignée.

Voir Montage d'une poignée

• Ici le design a été modifier et il est possible de visualiser plusieurs VAT en même temps.
• L'ajout de VAT est rafraîchi en temps réel depuis l'administration de Django.
• On note que chaque VAT possède un numéro d'ordre d'apparition et que les LEDs indiques les VATs qui seront affichées.
• La version Desktop :

• La version smartphone connecté en wifi : Il faut imaginé le défilement avec le pouce sur l'écran. Ici le screen est coupé car trés long.

• La liste des VATs a été développé et permettra dans le futur d'accéder au formulaire d'édition des VATs
• On note que la liste est trié dans l'ordre du numéro d'apparition :

• La version smartphone de la liste :

• Super expérience sur chantier, merci à Fred d'avoir joué le jeu en utilisant pleinement cet outil

• Ce GIF animé est issu de l'enregistrement de la page web du projet
  (Réalisé avec SimpleScreenRecorder et kdenlive). La vitesse d'animation est doublée pour avoir un fichier plus petit.
• Il s'agit d'une mise en service sur un SIEMENS S7-400.
• Le PLC Web Monitiring m'a été d'une aide précieuse: Il m'a permis d'avoir une visu temps réelle du S7-400, pendant que j'étais connecté en MPI avec la console step7 sur un autre automate (S7-313c) qui intervient dans le même process.
• Cela m'a évité de changer de connexion physique et d'avoir en même temps les visus dynamiques des S7400 et S7-313c.

• Voici le rendu en capture d'écran non compressé :

• Le manque d'insertion de commentaire dans les VAT ce fait ressentir: Ce sera la prochaine amélioration du projet.

• Détails de la syntaxe des commentaires coté admin de le grille :

• Voici le rendu de la grille :