Voir la source de IMA3/IMA4 2019/2021 P11+

__TOC__
<br style="clear: both;"/>

=Présentation générale=

==Description==

Concevoir et réaliser une interface de visualisation pour des appareils de mesure 

==Objectifs==

L'objectif du projet global (découpé en trois sous-projets) est de réaliser une plateforme complète permettant de faire des travaux pratiques d'électronique à distance.

Ce sous projet consiste en la réalisation d'une interface de commande d'un appareil de mesure (oscilloscope, multimètre, ...) ou d'un générateur à distance au travers d'une interface LXI ([https://en.wikipedia.org/wiki/LAN_eXtensions_for_Instrumentation LAN eXtensions for Instrumentation]).

L'interface sera constituée de deux modules :
<ul>
<li> une interface paramétrable de commande à distance des appareils (panneau de commande) ; </li>

<li> une interface d'affichage des données. </li>
</ul>
Si possible, les développements se feront en HMTL5 au travers d'un framework à choisir.

=Préparation du projet=

==Cahier des charges==
==Choix techniques : matériel et logiciel==

* Utilisation de l'HTML5 et du PHP pour le développement de l'interface ;

* Framework : Bootstrap ;

* Pas de matériel particulier à commander, j'utiliserai les appareils de mesure déjà disponibles à Polytech.

==Liste des tâches à effectuer==

* Prendre en main l'interface LXI avec des appareils de mesure électronique (oscilloscope, multimètre, ...) ;

* Réaliser une interface web permettant de contrôler les appareils et afficher les résultats.

==Calendrier prévisionnel==

=Réalisation du Projet=

==Prologue==
==Semaine 1==

Prise d'information sur l'interface LXI : en entrant l'IP de l'appareil dans la barre de recherche d'un navigateur, il semblerait que l'on puisse accéder à l'interface et commander l'appareil.

Utilisation d'un oscilloscope SDS 1102CML+ pour tester l'interface LXI : 

* on le branche sur une carte réseau du PC puis on lui assigne une adresse ip dans le réseau local (dans le menu Utility de l'oscilloscope) et on ping cette adresse pour s'assurer de la connexion : cela fonctionne ;

* j'essaie d'entrer l'adresse IP sur un navigateur pour vérifier s'il existe une interface LXI mais la connexion ne fonctionne pas ;

* installation du programme [https://lxi-tools.github.io/ lxi-tools] (et même installation plus simple avec la commande : apt-get install lxi-tools) qui permet d'utiliser LXI en ligne de commande et l'oscilloscope est bien retrouvé avec la bonne adresse IP.

Avec ce programme on peut obtenir des screenshots de l'oscilloscope, cela pourra être utile pour l'affichage.

[[Fichier:premier_screen.jpg|200px|thumb|right|Premier screenshot de l'oscilloscope]]

Liens qui peuvent être utiles pour la suite :

[https://teledynelecroy.com/doc/introducing-the-lxi-interface]

[https://lxistandard.org/About/LXI-Core-Features.aspx]

[https://www.lxistandard.org/About/LXI-Discovery-Tools.aspx]

[https://siglentna.com/application-note/lxi-tools/]

[https://www.siglenteu.com/application-note/quick-remote-computer-control-using-lxi-tools/ Résumé de l'utilisation de la commande lxi].

Voici une [https://siglentna.com/wp-content/uploads/dlm_uploads/2017/10/ProgrammingGuide_forSDS-1-1.pdf liste des commandes SCPI] pour contrôler l'oscilloscope. Peut-être faudra-t-il trouver d'autres commandes pour d'autres appareils de mesures.

En testant quelques commandes en mode SCPI, on s'aperçoit qu'elles ont le comportement souhaité sur l'oscilloscope.

Pour réaliser l'interface web, j'utilise un serveur Apache2 et le langage PHP (sous Linux utilisation des commandes : "apt-get install apache2" et "apt-get install libapache2-mod-php"). Pour le moment, on peut lancer la recherche des appareils connectés au réseau (réalisé avec la commande 'lxi discover'); puis choisir l'appareil que l'on souhaite utiliser. 

[[Fichier:Appareils_decouverts.png]]

J'ai à ma disposition un seul oscilloscope donc pour le moment cela ne lance que la page de contrôle et de visualisation de l'oscilloscope. A l'avenir, il faudra ajouter une base de donnée pour pouvoir sélectionner la bonne page à lancer selon l'appareil selectionné. Sur la page de contrôle et de visualisation, on affiche une capture d'écran de l'oscilloscope et quelques boutons pour tester la communication entre le serveur et l'oscilloscope. 

[[Fichier:Visu_et_cmd_oscillo.png]]

Afin d'afficher cette capture d'écran, il faut modifier le groupe des fichiers du serveur apache2 (sachant que les fichiers se trouvent dans le dossier /var/www/testdomain.info, on utilise la commande 'chgrp -R www-data /var/www/testdomain.info'), et on donne la permission au groupe d'écrire dans ce dossier pour y sauvegarder la photo (avec la commande 'chmod -R g+w /var/www/testdomain.info/').

J'utiliserai ensuite le framework Bootstrap pour l'interface web.

L'affichage du screenshot devrait être raffraichit le plus souvent possible pour obtenir une visualisation réactive. Pour ce faire, il faut regarder du côté du JavaScript.

Pour débuger le code HTML/PHP, on utilise la commande : tail -f /var/log/apache2/error.log .

==Semaine 2==

Afin d'utiliser Bootstrap pour l'interface Web, j'utilise les lignes de code que l'on peut retrouver [https://getbootstrap.com/docs/5.0/getting-started/download/#cdn-via-jsdelivr ici]. Ceci correspond à utiliser un CDN (Content Delivery Network) qui permet de faire le lien entre le framework sans avoir à télécharger les fichiers sources sur le serveur Apache2. Il faudra alors utiliser ces deux lignes dans les entêtes de chaque fichier html et php. On peut trouver un petit comparatif entre la version locale de Bootstrap et la version CDN : [https://www.studiogalaxie.fr/librairies-cdn-ou-local-que-choisir/]. Etant donné que l'ordinateur sur lequel j'implémente le serveur est connecté à Internet, l'utilisation du CDN ne devrait pas poser du soucis. Dans le pire des cas, il devrait être possible de passer de cette version à la version locale facilement. 

Avec ce framework, je peux maintenant commencer à réaliser des affichages plus esthétiques en utilisant la [https://getbootstrap.com/docs/5.0/components/ documentation de Bootstrap].

Je me penche maintenant vers la redirection sur la bonne page lors du choix de l'appareil. En effet, étant donné le type de l'appareil, la page de visualisation et commande doit être différente, et donc selon l'appareil choisi, il faut pouvoir visualiser la bonne page. J'utilise pour l'instant un fichier .JSON qui me permet d'associer un type d'appareil avec un nom. De ce fait pour la redirection, selon le nom que l'on trouve dans ce fichier, on peut savoir sur quelle page il faut rediriger selon le type trouvé (si c'est un oscilloscope, un multimètre...). Par la suite, peut-être qu'une base de donnée SQL correspondra mieux au travail à réaliser.

Maintenant que cette redirection est effective, il faut pouvoir transmettre les données (nom et adresse ip de l'appareil) vers la page web. Etant donné que ces données transitent par 2 pages différentes, j'utilise la méthode GET (qui écrit les données dans l'URL de la page). Cela peut poser un problème de confidentialité des données mais ici cela ne devrait pas être un problème, la seule information importante est l'adresse IP de l'appareil. 

Il semblerait qu'un léger problème se pose avec une interférence entre les données. L'affichage de la  capture d'écran en fonction de la commande envoyée depuis le site est correct, mais par exemple en réalité l'oscilloscope affiche un menu alors qu'on lui envoie une commande pour fermer le menu. Cette réaction semble donc sans conséquence sur l'utilisation depuis l'interface web, mais cela reste à surveiller pour la suite du projet.

Pour le moment, j'ai ajouté quelques fonctionnalités à l'interface de l'oscilloscope :

[[Fichier:Interface_web_ajout_boutons.png]]

L'utilisation du framework Bootstrap reste à parfaire pour une interface claire et esthétique, mais on peut voir un début de prise en main.

Je précisais auparavant que j'utilisais la méthode GET pour faire transiter les données. Je suis finalement revenu sur cette partie du code parce qu'on pouvait y trouver de la duplication de code. J'utilise maintenant des variables de session pour l'adresse IP et le nom de l'appareil. Cela fourni un code un peu plus propre qu'avec la méthode GET.

==Semaine 3==

Lors de cette semaine, je mets en place d'autres boutons permettant d'utiliser l'oscilloscope. De plus, en utilisant bootstrap je regroupe les boutons dans des onglets pour rendre l'interface web plus facilement compréhensible, avec moins d'information sur la même page.

Voici trois captures d'écrans permettant de résumer les paramètres utilisables sur l'oscilloscope à partir de l'interface :

Les onglets 'CH1' et 'CH2' réalisent chacuns les mêmes actions respectivement sur le signal de la voie 1 et de la voie 2.

==Semaine 4==

=Documents Rendus=