Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision
Révision précédente
projets:plc_web_monitoring:01_avancement [2019/09/06 16:46]
JC
projets:plc_web_monitoring:01_avancement [2020/02/23 21:23] (Version actuelle)
JC [La TODO list !!]
Ligne 1: Ligne 1:
 ~~NOCACHE~~ ~~NOCACHE~~
 ====== PLC Web Monitoring ====== ====== PLC Web Monitoring ======
-|| Visite: || Aujourd'​hui:​ {{counter|today}} || Hier: {{counter|yesterday}} || Depuis ​maintenant: {{counter|total}} ||+|| Visite: || Aujourd'​hui:​ {{counter|today}} || Hier: {{counter|yesterday}} || Depuis ​Sept 2019: {{counter|total}} ||
  
 Ce qui me passionne actuellement est le web temps réel : \\ 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 ​via F5 du navigateur. \\+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 : \\ 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. \\ \\ Directement exploitable par un navigateur web, multi terminal, multi-plateforme,​ multi utilisateurs et un seul code source à maintenir. \\ \\
Ligne 14: Ligne 14:
   * Les idées viennent au fur et à mesure et je n'​hésite pas à me former pour atteindre mes objectifs. \\   * 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. \\   * 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. \\
-  * C'est un projet personnel, développé en dehors de mon temps de travail. ​ \\+  * 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.  \\
  
 ====== Présentation du projet ====== ====== Présentation du projet ======
Ligne 23: Ligne 23:
   * Ce projet utilise des technologies 100% open source comme Python, HTML, JavaScript etc ...   * 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.   * Pour ceux qui connaisse l'​automatisme,​ il s'agit de VAT (Variable Animation Table) visible sans logiciel de programmation:​ Directement dans une page web.
 +
 +====== Les dernières modifications !! ======
 +===== 2019-10-03: Ajout des commentaires ​ =====
 +  * Détails de la syntaxe des commentaires coté admin de le grille :
 +{{:​projets:​plc_web_monitoring:​plc-web-monitoring_commentaires-admin.png?​nolink|}}
 +  * Voici le rendu de la grille :
 +{{:​projets:​plc_web_monitoring:​plc-web-monitoring_commentaires.png?​nolink|}}
 +====== La TODO list !! ======
 +L'​avantage d'​utiliser son propre logiciel, c'est que les idées d'​améliorations arrivent naturellement ! \\ \\
 +<todo #​open1024jc:​2019-10-10>​Ajouter l'​insertion de commentaire dans la zone d'​adresses,​ comme une VAT Siemens</​todo>​ \\
 +Exemple:
 +<​file>​
 +// Doseur 3 - séparateur
 +</​file>​
 +<​todo>​Remplacer l'​entête de carte par un "​Popovers Boostrap"​.</​todo>​
 +<​todo>​Remplacer le code Pur JavaScript trop lourd à mettre en oeuvre et à maintenir, par le framework ReactJS (formation en cours).</​todo>​ \\
 +<​todo>​Décliner le format 0b qui affiche 8bits en BIN8, BIN16, BIN32.</​todo>​ \\
 +<​todo>​Décliner le format 0x qui affiche 8bits hexa en HEX8, HEX16, HEX32.</​todo>​ \\
 +<​todo>​Ajouter une ListeTexte sur les booleans et les entiers pour afficher un message en plus du chiffre.</​todo>​ \\
 +<​todo>​Ajouter la possibilité de mettre en surbrillance une ligne importante de grille.</​todo>​ \\
 +<​todo>​Créer de nouveaux cadrans pour tracer des courbes, utile pour surveiller une régulation.</​todo>​ \\
 +<​todo>​Créer de nouveaux cadrans pour afficher les logs des adresses sur forme texte: ​
 +</​todo>​ \\
 +Exemple:
 +<​file>​
 +2019-10-01 10:05:11 Doseur 3 niveau haut
 +2019-10-01 10:05:12 Doseur 3 Arrêt vanne écluse
 +...
 +</​file>​
 +<​todo>​Ajout le protocole Modbus/​TCP</​todo>​ \\
 +<​todo>​Ajout une communication Client OPC</​todo>​ \\
 +<​todo>​Ajout une communication MQTT</​todo>​ \\
 +\\
 +**Voici un aperçu des évolutions futures:**
 +\\ \\
 +{{ :​projets:​plc_web_monitoring:​debian-hmi_evolutions.png?​nolink |}}
 +\\
 +======= Voici l'​histoire de ce projet ! =======
  
 ====== Matériel ====== ====== Matériel ======
-  * Dans le futur, le serveur web sera hébergé dans un PC tactile reconditionné,​ qui partait à la déchetterie.+  * Le serveur web est hébergé dans un PC tactile reconditionné,​ qui partait à la déchetterie.
   * Retrouver l'​article consacré au PC : \\ [[projets:​borne_tactile:​00_ventilation|Modification de la ventilation]]   * Retrouver l'​article consacré au PC : \\ [[projets:​borne_tactile:​00_ventilation|Modification de la ventilation]]
-  * Retrouver l'​article sur la reconnaissance de la dalle tactile sous GNU Linux Debian: ​ \\ [[projets:​borne_tactile:​01_config_tactile|Configuration de la dalle tactile]]+  * Retrouver l'​article sur la reconnaissance de la dalle tactile ​en liaison série ​sous GNU Linux Debian: ​ \\ [[projets:​borne_tactile:​01_config_tactile|Configuration de la dalle tactile]]
 {{:​projets:​borne_tactile:​20180314_test1.jpg?​400|}} {{:​projets:​borne_tactile:​20180314_test1.jpg?​400|}}
  
Ligne 37: Ligne 75:
   * Le détail de l'​application montre les sous parties technologiques :   * Le détail de l'​application montre les sous parties technologiques :
       * Le système d'​exploitation GNU Linux Debian.       * 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 etc..). \\ A lire : [[developpement:​docker:​03_docker_debian_django|Création image de dev Debian Django]]+      * 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 : [[developpement:​docker:​03_docker_debian_django|Création image de dev Debian Django]]
       * En environnement partagé avec l'OS hôte: Les Librairies et //​Framework//​ utilisés. \\ A lire : [[developpement:​django:​memo|MEMO DJANGO]] [[developpement:​crossbar_autobahn:​crossbar_memo|Mise en service de crossbar]] [[developpement:​css:​sass:​00_install|Installation de Sass]] [[developpement:​css:​compass:​00_install|Installation de compass]] ​       * En environnement partagé avec l'OS hôte: Les Librairies et //​Framework//​ utilisés. \\ A lire : [[developpement:​django:​memo|MEMO DJANGO]] [[developpement:​crossbar_autobahn:​crossbar_memo|Mise en service de crossbar]] [[developpement:​css:​sass:​00_install|Installation de Sass]] [[developpement:​css:​compass:​00_install|Installation de compass]] ​
-      * En environnement partagé avec l'OS hôte: Les sources Python, ​HTLS, JS, CSS, SASS, etc...+      * En environnement partagé avec l'OS hôte: Les sources Python, ​HTLM, JS, CSS, SASS, etc...
 {{:​projets:​plc_web_monitoring:​interaction-diagram.png|}} {{:​projets:​plc_web_monitoring:​interaction-diagram.png|}}
  
 ====== Évolution du projet ====== ====== Évolution du projet ======
   * La base du projet est issu d'un cours en ligne Django, TP de blog, où je me sent à l'​aise.   * La base du projet est issu d'un cours en ligne Django, TP de blog, où je me sent à l'​aise.
-  * Retrouver ​ici, les étapes marquantes de l'​évolution du projet, tel un //git log//.+  * Retrouver ​dans les chapitres suivants, les étapes marquantes de l'​évolution du projet, tel un **git log**.
 ===== 2018-10-15: Web temps réel ===== ===== 2018-10-15: Web temps réel =====
-  * Il s'agit d'une première étude d'​affichage en temps réel dans la page web. +  * 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. +  * L'​idée est d'​afficher en temps réel la charge ​**CPU/​Mémoire/​Disque du serveur**
-  * Intégration de Crossbar dans Django +  * Intégration de **//Crossbar//** dans **//Django//** (framework web Python) 
-  * Intégration //​HTML/​JavaScript//​ des //jauges CPU// dans //​Bootstrap//​.+  * 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).
 {{:​projets:​plc_web_monitoring:​2018-10-15_cpu_monitoring.png|}} {{:​projets:​plc_web_monitoring:​2018-10-15_cpu_monitoring.png|}}
-===== 018-10-31: Lecture d'une donnée automate et diffusion web =====+===== 2018-10-31: Lecture d'une donnée automate et diffusion web =====
   * Une seule valeur est lue dans l'​automate   * Une seule valeur est lue dans l'​automate
-  * Son adresse est, pour l'​instant, en dur dans le code+  * Son adresse est, à ce stade, en dur dans le code
 {{:​projets:​plc_web_monitoring:​2018-10-31_first_plc_web_broadcastxcf.png|}} {{:​projets:​plc_web_monitoring:​2018-10-31_first_plc_web_broadcastxcf.png|}}
  
 ===== 2018-10-31: Lecture de plusieurs valeurs ===== ===== 2018-10-31: Lecture de plusieurs valeurs =====
   * Le détail de l'​automate et les adresses des données sont 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 via JavaScript.+  * 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.
 ==== 1ère version : ==== ==== 1ère version : ====
 {{:​projets:​plc_web_monitoring:​2018-10-31_several_read_web_broadcasting.png|}} {{:​projets:​plc_web_monitoring:​2018-10-31_several_read_web_broadcasting.png|}}
Ligne 64: Ligne 102:
 {{:​projets:​plc_web_monitoring:​2018-10-31_multiple_plc_read_web_broadcaster_v2.png|}} {{:​projets:​plc_web_monitoring:​2018-10-31_multiple_plc_read_web_broadcaster_v2.png|}}
  
-===== 2018-11-01: Adresse PLC dans Database Django =====+===== 2018-11-01: Adresse PLC dans la Database Django =====
   * Une structure de base de données est écrite dans l'ORM de Django   * Une structure de base de données est écrite dans l'ORM de Django
   * Les caractéristiques de l'​automate.   * Les caractéristiques de l'​automate.
   * Les adresses de l'​automate à lire   * 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).   * 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// s'​occupe de décrypter l'​organisation du copier coller de TIA pour exploiter les adresses PLC.+  * Un //​parseur// ​Python ​s'​occupe de décrypter l'​organisation du copier coller de TIA pour exploiter les adresses PLC.
 <note important>​Ces screens sont plus récent et contiennent quelques améliorations,​ je n'ai pas de screen de l'​époque.</​note>​ <note important>​Ces screens sont plus récent et contiennent quelques améliorations,​ je n'ai pas de screen de l'​époque.</​note>​
  
Ligne 88: Ligne 126:
 ===== 2019-01-27: Double PLC et nouveau design ​ ===== ===== 2019-01-27: Double PLC et nouveau design ​ =====
   * L'​appli est capable de lire 2 automates.   * L'​appli est capable de lire 2 automates.
-  * La présentation a été retravaillé avec Sass et Compass.+  * La présentation a été retravaillé avec Sass et Compass ​(Langage et framework permettant de générer les feuilles de styles CSS).
 {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-01-27_20-52-31.png|}} {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-01-27_20-52-31.png|}}
  
Ligne 98: Ligne 136:
   * La page est auto-adaptative en fonction de la taille du navigateur   * 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   * Les grille automate se place en ligne ou en colonne en fonction de la largeur d'​écran
-==== Version ​normale ​====+==== Version ​pour un PC de bureau ​====
 {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-01-30_23-41-14.png|}} {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-01-30_23-41-14.png|}}
 ==== Version smartphone ==== ==== Version smartphone ====
Ligne 111: Ligne 149:
 {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-03-04_23-07-47.png|}} {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-03-04_23-07-47.png|}}
 ==== Visible depuis le smartphone en Wi-Fi ==== ==== Visible depuis le smartphone en Wi-Fi ====
 +  * Le smartphone utilisé est un Samsung Galaxy A5.
 {{:​projets:​plc_web_monitoring:​screenshot_20190304-231021_firefox.jpg?​400|}} {{:​projets:​plc_web_monitoring:​screenshot_20190304-231021_firefox.jpg?​400|}}
  
 ===== 2019-03-13: Recherche dalle tactile ===== ===== 2019-03-13: Recherche dalle tactile =====
-La pointeur tactile communique via liaison série. Le driver //​elotouch//​ fonctionne sous Debian mais je n'ai pas encore réussi à intergrer ​l'​étalonnage de la dalle dans l'​environnement //X11// du système. Retrouver le détail des investigations ici : [[projets:​borne_tactile:​01_config_tactile|Configuration de la dalle tactile]]+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 : [[projets:​borne_tactile:​01_config_tactile|Configuration de la dalle tactile]]
  
 ===== 2019-03-30: De Docker vers LXC ===== ===== 2019-03-30: De Docker vers LXC =====
Ligne 127: Ligne 167:
 Les notes: [[linux:​debian:​debian_installation#​lightdm_autologin|lightdm_autologin]] Les notes: [[linux:​debian:​debian_installation#​lightdm_autologin|lightdm_autologin]]
  
-===== 2019-04-02: Systemd : Crossbar et plc-monitoring =====+===== 2019-04-02: Systemd : Crossbar et plc-monitoring ​en autorun ​=====
 Ajout de Crossbar et plc-monitoring en tant que service Debian pour le launch auto au boot du container. ​ Ajout de Crossbar et plc-monitoring en tant que service Debian pour le launch auto au boot du container. ​
 [[projets:​borne_tactile:​02_config_systeme#​demarrage_automatique|demarrage_automatique]] [[projets:​borne_tactile:​02_config_systeme#​demarrage_automatique|demarrage_automatique]]
Ligne 140: Ligne 180:
   * 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 !   * 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 !
 {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-04-26_12-21-04.png}} {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-04-26_12-21-04.png}}
-  * A ce stade du projet, il n'y a qu'une seule VAT d'​affichée à la fois.+  * 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 :   * Voici une autre VAT en version smartphone :
 {{:​projets:​plc_web_monitoring:​screenshot_20190424-144040_firefox.jpg|}} {{:​projets:​plc_web_monitoring:​screenshot_20190424-144040_firefox.jpg|}}
Ligne 154: Ligne 194:
   * Ici le design a été modifier et il est possible de visualiser plusieurs VAT en même temps.   * 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.   * 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 ​+  * 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 Desktop :
 {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-06-06_12-29-40.png|}} {{:​projets:​plc_web_monitoring:​capture_d_ecran_2019-06-06_12-29-40.png|}}
Ligne 166: Ligne 206:
   * Super expérience ​ sur chantier, merci à Fred d'​avoir joué le jeu en utilisant pleinement cet outil ;-)   * Super expérience ​ sur chantier, merci à Fred d'​avoir joué le jeu en utilisant pleinement cet outil ;-)
  
 +===== 2019-09-24: 3ème session de chantier =====
 +  * Ce //GIF animé// est issu de l'​enregistrement de la page web du projet \\ (Réalisé avec [[https://​www.maartenbaert.be/​simplescreenrecorder/​|SimpleScreenRecorder]] et [[https://​kdenlive.org/​fr/​|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.
 +{{https://​open1024.fr/​images/​2019-10-01_PWM_Shulman-x2-1024x819.gif?​nolink|}}
 +  * Voici le rendu en capture d'​écran non compressé :
 +{{ :​projets:​plc_web_monitoring:​capture_d_ecran_2019-09-25_17-04-08.png|}}
 +  * Le manque d'​insertion de commentaire dans les VAT ce fait ressentir: Ce sera la prochaine amélioration du projet.
 +===== 2019-10-03: Ajout des commentaires ​ =====
 +  * Détails de la syntaxe des commentaires coté admin de le grille :
 +{{:​projets:​plc_web_monitoring:​plc-web-monitoring_commentaires-admin.png?​nolink|}}
 +  * Voici le rendu de la grille :
 +{{:​projets:​plc_web_monitoring:​plc-web-monitoring_commentaires.png?​nolink|}}