Presentation du projet
Le but de ce projet est de réaliser une interface Web de commande et de visualisation d'appareils de mesures (tels que des oscilloscopes, générateurs, multimètres, etc ...) afin de pouvoir réaliser des TP d'électronique à distance.
Bases pour réaliser le projet
Afin de réaliser ce projet, il faut :
Connaitre l'utilisation des commandes LXI (pour installer le package sous linux :
apt-get install lxi-tools) qui va permettre la communication avec les appareils à distance ;Installation d'un serveur, ici j'ai utilisé un serveur Apache2 ;
Utiliser les langages HTML,PHP,CSS et JavaScript ainsi que le framework Bootstrap pour réaliser l'interface Web ;
Modifier les groupes des fichiers pour utiliser l'interface sur le Web correctement (notemment pour les photos) avec la commande :
chgrp -R www-data dossier-html.
Contenu du dépôt GIT
Ce dépôt GIT est constitué des codes de l'interface Web. On retrouve à l'intérieur du dossier html :
bdd.json : fichier qui permet d'associer un nom d'appareil à son type (Oscilloscope,Generateur...) ;
index.html : fichier qui constitue la page d'accueil du site, on peut simplement y lancer la recherche des appareils connectés au réseau ;
decouvre.php : fichier qui regroupe l'ensemble des appareils avec certaines informations (Nom, Type et Adresse IP) et qui permet de sélectionner un ou plusieurs appareils à utiliser ;
main.php : fichier qui affiche les interfaces des appareils séléctionnés et réalise les commandes des boutons appuyés (s'il y en a), ce fichier va chercher les fichiers d'affichages et de commandes directement dans les dossiers selon les types d'appareils ;
Oscilloscope : dossier qui regroupe des fichiers d'affichages et de commandes pour les Oscilloscopes. Ces fichiers sont répartis dans différents sous-dossiers selon les noms des boutons ;
- main_oscilloscope.php : fichier du dossier Oscilloscope qui réalise l'affichage d'un Oscilloscope.
- commandes_oscilloscope.php : fichier du dossier Oscilloscope qui réalise les commandes associés aux boutons appuyés par l'utilisateur de l'interface.
- Ces fichiers sont appelés par main.php s'il doit afficher l'interface d'un Oscilloscope.
- Des sous dossiers contenant l'affichage et la réalisation d'un unique bouton sont parcourus par les deux fichiers précédents pour réaliser l'ensemble de l'interface.
Generateur : dossier qui regroupe des fichiers d'affichages et de commandes pour les Generateurs. Ces fichiers sont répartis dans différents sous-dossiers selon les noms des boutons ;
- main_generateur.php : fichier du dossier Generateur qui réalise l'affichage d'un Generateur.
- commandes_generateur.php : fichier du dossier Generateur qui réalise les commandes associés aux boutons appuyés par l'utilisateur de l'interface.
- Ces fichiers sont appelés par main.php s'il doit afficher l'interface d'un Generateur.
- Des sous dossiers contenant l'affichage et la réalisation d'un unique bouton sont parcourus par les deux fichiers précédents pour réaliser l'ensemble de l'interface.
Oscilloscope_onglets et Generateur_onglets : dossiers qui ont les memes commandes que pour les deux dossiers précédents, mais avec un affichage différent (panel de commande avec des onglets). Pour voir ces affichages, il faut modifier le type de l'appareil dans bdd.json par le nom de l'un de ces répertoires.
Scripts : dossier qui regroupe des fichiers php qui permettent de réaliser des petites fonctions tels que la capture d'écran d'un appareil ou l'affichage d'une image sur l'interface. Ces fichiers sont appelés dans différents fichiers du projet ;
Captures : dossier qui regroupe les différentes captures d'écrans des appareils selon leurs noms afin de pouvoir les afficher sur l'interface Web.
Utilisation du site
La page d'accueil ne contient qu'un bouton permettant de lancer la recherche des appareils connectés sur le réseau local. Cette recherche dure environ 5 secondes.
Ensuite, on arrive sur la page decouvre.php qui affiche les appareils trouvés dans un tableau. On peut choisir celui ou ceux que l'on veut utiliser. Il est également possible de relancer la recherche ou de retourner sur la page d'accueil.
Après avoir sélectionné un appareil, on arrive sur la page main.php. Cette page affiche l'interface de l'appareil sélectionné, avec :
Une image de l'appareil, qui se rafraichit toutes les secondes ;
Ainsi qu'un panel de commande avec les différentes commandes que l'on peut réaliser sur l'appareil.
Si plusieurs appareils ont été sélectionnés, les interfaces apparaitront les unes en dessous des autres. Il est également possible de retourner sur la page d'accueil ou de relancer la recherche des appareils depuis cette page.
Comment ajouter un nouvel appareil à l'interface ?
Verification de la compatibilité d'un appareil avec LXI
Avant de pouvoir créer une nouvelle interface pour un appareil, il est impératif de vérifier sa compatibilité avec les commandes LXI. Sans cette compatibilité, il n'est pas possible de commander l'appareil à distance et donc inutile de l'ajouter à l'interface Web. Il faut également que le package lxi-tools soit installé sur l'ordinateur avec lequel on veut tester.
Pour commencer, il faut assigner une adresse IP valable à l'appareil (pour cela, il faut regarder la datasheet de l'appareil pour savoir comment modifier son adresse IP).
Ensuite, on branche l'appareil sur une prise Ethernet, et, dans un terminal, on entre la ligne de commande lxi discover. Cette commande va afficher tous les appareils possèdant une interface LXI connectés au réseau. Si l'appareil n'apparait pas, on peut essayer la commande ping avec son adresse IP pour vérifier que l'appareil est bien connecté. Si le ping fonctionne, alors l'appareil ne possède pas d'interface LXI. On peut néanmoins essayer de réaliser la prochaine étape, cela voudrait dire que l'on doit garder en mémoire l'adresse IP de l'appareil si on veut réaliser son interface Web. En effet, la page de recherche (decouvre.php) utilise la commande lxi discover pour trouver les appareils utilisables.
La prochaine étape consiste à réaliser une première capture d'écran de l'appareil, ce qui permettra de l'afficher ensuite sur l'interface. Pour cela on utilise la commande lxi screenshot -a 111.111.111.111 screenshot.bmp (111.111.111.111 représentant l'adresse IP de l'appareil et screenshot.bmp le fichier où est sauvegardée la capture d'écran).
Pour finir la vérification, il faut rechercher les commandes SCPI pour l'appareil. Ces commandes permettent de piloter l'appareil à distance, ce sont elles que l'on va utiliser pour réaliser les commandes sur l'interface. La syntaxe de la ligne de commande à entrer dans le terminal est : lxi scpi -a 111.111.111.111 "CMD" (111.111.111.111 représentant l'adresse IP de l'appareil et CMD la commande SCPI).
Si tout a correctement fonctionné, l'appareil est compatible avec LXI et l'on peut passer à l'étape suivante.
Modification/Ajout de code
Après avoir vérifier la compatibilité de l'appareil avec LXI, on souhaite écrire le code correspondant à son interface de visualisation et de commande.
Tout d'abord, il faut modifier le fichier bdd.json et ajouter le nom de l'appareil ainsi que son type.
Si c'est un nouveau type d'appareil, il faut alors créer un nouveau dossier ayant le même nom que le type de l'appareil. A l'interieur de ce dossier, il faut créer un fichier ayant pour nom main_type.php (donc main_multimetre.php si c'est un multimetre par exemple) et un fichier commandes_type.php. Dans le fichier main_type.php, il faut utiliser le script de creation d'image avec la ligne de code en PHP :
include('Scripts/creation_img.php');
Ensuite, afin de rendre le code plus facilement modifiable par la suite, il faut séparer les différentes commandes dans différents dossiers. Dans ces dossiers, on ajoute deux fichiers PHP, l'un correspond à l'affichage du bouton permettant de lancer la commande (avec un nom comme par exemple form_bouton.php), et l'autre correspond à la réalisation de la commande (avec un nom comme cmd_bouton.php). A l'interieur de ce dernier, pour réaliser la ligne de commande lxi, il faut utiliser la fonction php shell_exec. Concernant la façon d'afficher les différents paramètres sur la page, c'est à vous de le réaliser.
Puis il faut faire en sorte que le fichier commandes_type.php utilise tous les fichiers cmd dans les sous dossiers (pour réaliser les commandes), et de même pour le fichier main_type.php qui utilise les fichiers form dans les sous dossiers. Pour ce faire, on parcours les dossiers avec la fonction PHP scandir et on utiliser la fonction include pour inclure les fichiers souhaités.
Si le type de l'appareil existe déjà dans l'arborescence, plusieurs options se dégagent :
Si les commandes SCPI sont les mêmes que les autres appareils du même type, il n'y a rien d'autre à modifier.
Si les commandes SCPI sont différentes, il faut alors modifier l'arborescence dans le dossier du type, et placer un sous-dossier selon le nom de l'appareil qui contiendra toutes les sources permettant de réaliser l'affichage des boutons et les commandes. Dans ce cas, il faut également modifier le fichier PHP se trouvant dans le dossier du type (qui est sous la forme main_type.php) pour modifier sa facon de parcourir les dossiers. Après cette réorganisation, on peut réaliser l'ajout du code comme expliqué précédemment.