Version actuelle datée du 25 juin 2021 à 16:26

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

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 pour commencer, j'utiliserai les appareils de mesure déjà disponibles à Polytech, mais plus tard dans le projet des appareils avec une prise Ethernet peuvent être commandés.

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.

Réalisation du Projet

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.

Premier screenshot de l'oscilloscope

Liens qui peuvent être utiles pour la suite :

[1]

[2]

[3]

[4]

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.

Choix de l'appareil

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.

Premiers boutons de l'interface

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 :

Nouvelles commandes sur l'interface Web

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 :

Onglet "Global" de l'interface de l'Oscilloscope

Onglet "CH1" de l'interface de l'Oscilloscope

Onglet "Curseurs" de l'interface de l'Oscilloscope

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 :

Interface plus épurée sans bouton d'envoi pour l'Oscilloscope

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.

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 :

Exemple d'utilisation de l'Oscilloscope avec l'interface

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.

Tableau de valeurs des touches du générateur de signaux

Association entre les valeurs et les touches

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.

Aperçu d'un premier essai de l'interface du générateur

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.

Nouvelle indication sur la page de choix 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.

Semaine 5

Cette semaine, je commence par réaliser une meilleure interface pour le générateur. J'ai décidé de prendre des captures des boutons de l'appareil pour les mettre directement sur l'interface. Cependant, en plus d'avoir des boutons mal détourés, il n'était pas vraiment possible de connaitre les boutons sur lesquels il était possible d'appuyer. J'ai alors choisi de réaliser des boutons customisés avec CSS, pour obtenir une animation lorsque l'on passe la souris sur le bouton et lorsque l'on appuie sur le bouton. Néanmoins, lorsque l'on appuie sur un bouton, celui-ci ne reste pas de couleur sur l'interface, comme cela pourrait l'être sur l'appareil réel. Pour réaliser cette opération, il faudrait ajouter une commande à l'aide de la fonction PHP 'shell_exec' pour connaitre l'état des boutons. Ceci peut alors être modifié très prochainement. De plus, j'ai essayé de placer les boutons des menus juste en dessous de la capture d'écran pour faire comme sur l'appareil réel. Néanmoins, par moment les boutons sont affichés en haut de l'image et non en bas, donc cette fonctionnalité reste à parfaire.

Un autre aspect sur lequel j'ai travaillé cette semaine est l'utilisation de plusieurs appareils en même temps. Etant donné que le but de l'interface est de pouvoir réaliser des TP d’électroniques à distance, il est important de pouvoir utiliser plusieurs appareils en même temps. J'ai donc décidé de faire en sorte de pouvoir utiliser plusieurs appareils sur la même page.

Pour ce faire :

• La page de choix des appareils n'utilise plus des boutons 'radio' pour choisir un unique appareil, mais des 'checkbox' pour choisir tous les appareils que l'on veut utiliser. L'envoi des données vers la page de visualisation se fait dans un tableau.
• Pour la visualisation, l'affichage des appareils se fait l'un en dessous de l'autre.

Après quelques problèmes sur le rafraichissement des des captures des deux appareils en même temps, cet affichage fonctionne avec deux appareils. Je n'ai pas encore testé pour trois appareils mais cela devrait fonctionner.

Pour la semaine prochaine, pour avoir une interface plus claire, il faudrait réaliser une carte de l'appareil et placer les boutons aux bons endroits. Pour le générateur, cela devrait être réalisable, mais pour l'oscilloscope cela peut être plus difficile étant donné que les commandes ne correspondent pas directement aux boutons sur l'appareil réel.

Semaine 6

Finalement, je n'utiliserai pas de carte de l'appareil pour placer les boutons dessus. Je vais simplement garder une interface avec la capture d'écran de l'appareil sur la gauche et le panel de commande sur la droite, mais sans les différents onglets que pouvait contenir ce panel. Afin de réaliser ceci, j'ai un peu modifié la façon donc fonctionne le 'main.php'. En effet, dans les dossiers des types d'appareils (ici Generateur et Oscilloscope), j'ai ajouté 2 fichiers, l'un affiche la capture d'écran de l'appareil et le panel (fichier nommé main_oscilloscope.php pour l'Oscilloscope par exemple), et l'autre réalise les commandes de l'utilisateur (fichier nommé commandes_oscilloscope.php pour l'Oscilloscope par exemple).

'main.php' fonctionne donc de la manière suivante :

• Pour chaque appareil, il parcourt les dossiers de leur type et appel le fichier 'commandes_type.php', puis il fait de même pour le fichier 'main_type.php' (avec type correspondant au type de l'appareil).

De cette façon, l'affichage peut être propre à chaque appareil si l'on souhaite en ajouter un. Certaines choses sont tout de même à garder, comme l'utilisation du fichier permettant de réaliser la première capture d'écran de l'appareil (Scripts/creation_img.php).

Si l'on prends l'exemple de l'Oscilloscope, 'main_oscilloscope.php' parcourt l'arborescence du dossier Oscilloscope à la recherche des fichiers 'form' pour réaliser l'affichage, comme c'était le cas avant. Cependant, l'affichage est maintenant réalisé sans les onglets "Curseurs","Global","CH1" et "CH2". Cela donne quelque chose de la sorte :

Interface sans les onglets

J'ai également créé un Dépôt GIT qui contient les codes réalisés.

En fin de semaine, je me concentre sur l'écriture du rapport, qui sera une documentation technique du code et un guide permettant l'ajout de nouveaux appareils.

Documents Rendus

Dépôt GIT