IMA3/IMA4 2019/2021 P11+
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 (LAN eXtensions for Instrumentation).
L'interface sera constituée de deux modules :
- une interface paramétrable de commande à distance des appareils (panneau de commande) ;
- une interface d'affichage des données.
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 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.
Liens qui peuvent être utiles pour la suite :
Résumé de l'utilisation de la commande lxi.
Voici une 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.
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.
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 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 : [5]. 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 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 :
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 commence par réaliser le raffraichissement de l'image de l'oscilloscope sur l'interface Web.
Afin de pouvoir obtenir une capture d'écran de l'oscilloscope toutes les secondes, je crée un nouveau fichier (screenshot.php) qui sera appelé toutes les secondes par un script sur la page de l'oscilloscope. Le fichier de screenshot réalise juste la commande de capture d'écran avec la commande 'lxi screenshot' et l'adresse IP de l'appareil. En plus d'appeler ce fichier, le script recharge l'image sur la page.
Ensuite, 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.
De plus, j'organise l'interface pour faire en sorte que tous les paramètres soient accordés avec les paramètres sur l'oscilloscope. Cela permet de voir directement si le changement que l'on souhaite faire sur l'oscilloscope a été effectué, parce que l'on ne peut pas choisir le menu que l'on peut voir sur l'oscilloscope. Par exemple, si on modifie l'unité de la voie 1, l'interface se met à jour avec l'unité choisie sur l'onglet de la voie 1 (si l'on choisit des ampères, 1V/Division devient 1A/Division et ce jusqu'au prochain changement d'unité).
Semaine 4
Pour rendre l'interface plus agréable à utiliser, je retire les boutons pour soumettre les changements. Les changements sont maintenant réalisés directement une fois l'option sélectionnée. Ceci est réalisé en ajoutant simplement la commande 'onchange="this.form.submit();"' au bon endroit dans le code.
Par exemple, pour l'onglet CH1, on a maintenant :
A faire maintenant : Rendre modulaire le fichier de l'interface de l'oscilloscope pour rendre les potentielles modifications sur ce fichier plus simple :
- Un dossier par type d'appareil :
- Dans ce dossier, on trouve 1 dossier par commande
- Dans ces dossiers : un fichier pour l'affichage et un fichier pour la réalisation de la commande.
- Dans ce dossier, on trouve 1 dossier par commande
Pour cela, la fonction PHP 'scandir' sera à utiliser.
Avant d'attaquer cette partie, j'ajoute deux dernières commandes sur l'interface de l'oscilloscope : la modification du Trigger Level ainsi que la modification des limites de fréquences des filtres.
Maintenant, le fichier principal reprend les fichiers d'affichage et de réalisation des commandes pour l'oscilloscope comme c'était prévu. Je pense que dans le futur j'essaierai d'avoir une page principale et selon le type de l'appareil que l'on choisit d'utiliser, cette page va chercher dans le dossier du type tout ce dont elle a besoin pour le bon fonctionnement de l'interface.
Avant de commencer à commander un nouvel appareil (qui sera le générateur de signaux SDG1032X dont la documentation pour les commandes avec LXI se trouve ici), on essaie l'interface en regardant l'oscillation d'un Quartz sur le projet d'Andrei Florea. On obtient le résultat suivant :
L'interface est alors bien utilisable.
Au final je m'attaque tout de suite à réaliser une page unique peu importe l'appareil selectionné, mais qui affiche de façon différente selon le type de l'appareil sélectionné.
Cette page fonctionne de la manière suivante :
- Il y a un grand dossier par type d'appareil (Oscilloscope, Generateur...). A l'interieur de ce dossier, on retrouve des dossiers avec le nom des menus que l'on affiche (pour l'Oscilloscope par exemple : CH1,CH2,Curseurs et Global). A l'intérieur de ces dossiers, se trouvent des dossiers selon les commandes que l'on peut réaliser sur l'appareil. Dans ces derniers dossiers, on retrouve un fichier avec le code l'affichage de la commande sur la page et un autre fichier avec la réalisation de la commande si celle-ci a été choisie par l'utilisateur. Ainsi, on peut parcourir l'arborescence pour afficher de manière procédurale l'ensemble des menus, boutons...
Afin que ceci soit efficace, il faut reprendre cette arborescence pour les différents types d'appareils que l'on utilise.
Cette fois-ci je m'attaque pour de bon à la réalisation de l'interface du générateur de signaux SDG1032X. Pour commencer, j'assigne une adresse IP valide à l'appareil, puis je m'assure tout d'abord qu'il est possible de réaliser une capture d'écran avec la commande 'lxi screenshot'. Cette commande fonctionne, donc on pourra l'utiliser pour l'affichage sur l'interface Web. En parcourant les commandes LXI disponibles dans la documentation, je m'aperçois qu'il existe une commande permettant de simuler l'appuie d'une touche sur le générateur. Cette commande permet de faciliter grandement la tâche par rapport à l'oscilloscope. L'interface ne sera donc composée que de boutons comme pour le générateur physique. Avec la commande SCPI 'VKEY VALUE,<valeur>,STATE,1', on peut réaliser la pression de la touche 'valeur'. Les valeurs des touches sont indiquées sur la documentation.
Pour la réalisation sur l'interface, je crée le dossier 'Generateur' correspondant au type de l'appareil. A l'intérieur de ce dossier, je crée trois dossiers différents pour réaliser trois menus sur l'interface (Fonction,Global et Menus). A l'interieur de ces dossiers je ne place pour l'instant qu'un seul sous dossier qui contient le code d'affichage et de réalisation des différents boutons.
L'affichage est alors très basique mais l'utilisation est n'est pas intuitif du tout. Pour ajouter une note positive, tous les boutons fonctionnent correctement. L'un des prochains objectifs est d'améliorer l'affichage pour rendre l'utilisation plus simple.
De plus, lors de l'affichage des appareils disponibles, il est maintenant indiqué le type des appareils.
Pour conclure cette semaine, j'ai essayé de brancher l'oscilloscope et le générateur en même temps. La page de recherche affiche bien les deux appareils avec leurs bons types respectifs, et la sélection fonctionne correctement. L'affichage des interfaces et les réalisations des commandes se comportent convenablement.
