Lycée > Seconde > SNT > La conception d'une IHM

La conception d'une IHM

Fiche de cours
Quiz
Profs en ligne
Videos
Application mobile

Objectifs

Réaliser une IHM simple d'un objet connecté.
Identifier des algorithmes de contrôle à travers les données des capteurs, l’IHM et les actions des actionneurs.

Points clés

Une bonne interface homme-machine (IHM) doit être ergonomique, c’est-à-dire qu’elle doit permettre à l’utilisateur de réaliser ses tâches de façon efficace, en toute sécurité et tout en prenant plaisir à le faire.
Le processus de conception d’une IHM est un processus itératif (et souvent long) qui recommence après modifications et qui comprend :
- une phase de spécification ;
- une phase de réalisation ;
- une phase de validation.

Pour bien comprendre

L’interface homme-machine est l’ensemble des dispositifs matériels et logiciels qui permettent à un utilisateur humain d’interagir avec une machine, notamment dans le cas des objets connectés.

1. Généralités

Une bonne interface homme-machine (IHM) doit permettre à l’utilisateur de réaliser ses tâches de façon efficace, en toute sécurité et en prenant plaisir à le faire.

Remarque
Le crash du mont Sainte-Odile en 1992 serait en partie dû à une mauvaise présentation de l’IHM dans le cockpit de l’airbus A320 (confusion entre la vitesse verticale et l’angle de descente sur le cadran partagé).

On peut résumer ces contraintes (efficacité, sécurité, simplicité d’utilisation) par le terme ergonomie, qui représente l’étude des conditions de travail et des relations entre l’être humain et la machine. L’ergonomie a pour but de faciliter la traduction entre ce que l’utilisateur veut obtenir et ce que la machine va exécuter.

Le processus de conception d’une IHM est un processus itératif (qui va être exécuté plusieurs fois), qui comprend trois phases.

Une phase de spécification, durant laquelle on définit les besoins de l’interface, on produit un scénario et on élabore le plan de test.
Une phase de réalisation, qui correspond au développement et à la programmation.
Une phase de validation, qui comprend les tests unitaires (sur des parties précises), les tests d’intégration (fonctionnement global), les tests fonctionnels (respect des spécifications). À l’issue de cette phase, on apporte les modifications nécessaires, on affine la conception et ainsi de suite.

On peut représenter la conception d’une IHM par le schéma suivant.

Processus de conception d’une IHM

2. Concevoir une IHM sous la forme d'une application pour smartphone

a. Que souhaite-t-on obtenir ?

Le but est ici de concevoir une IHM permettant de visualiser l’information de température et permettant de déclencher le clignotement d’une alerte visuelle par l’intermédiaire d’une application fonctionnant sur smartphone.

b. Comment obtenir cette IHM ?

On va modifier un système informatique embarqué (SIE) fonctionnel, à savoir un système qui émet une alarme visuelle (lumière) en fonction de la température.

Une lumière bleue pour une alerte au gel
(en dessous de 3 °C).
Une lumière rouge pour une alerte canicule
au-dessus de 30 °C).
Une lumière verte dans tous les autres cas.

Montage et programme de l’IHM à modifier

Le montage de départ est le suivant.

Montage de notre SIE à à partir d’une carte Arduino

Remarque
Notre système possède un microprocesseur, un capteur (de température) et un actionneur (LED RGB).

Le matériel et le programme Arduino qui sont nécessaires à la réalisation de ce montage sont consultables dans la partie « Aller plus loin », à la fin de cette fiche.

Questions à se poser

Pour obtenir l’IHM souhaitée, il faut se poser quelques questions, comme notamment :

que doit-on modifier ou ajouter à notre montage ?
quel design doit-on réaliser ?
comment programmer l’IHM ?

Il n’y a pas de réponse unique à ces questions. On va essayer de proposer des éléments simples.

Les modifications du montage existant

On a besoin d’un moyen de communication entre le smartphone et l’objet. On va prendre la technologie Bluetooth car elle est déjà prise en charge par le smartphone. Il faut donc ajouter au montage un module Bluetooth.

Montage avec gestion du Bluetooth

Remarque
Il faudra adapter le programme, notamment pour la gestion du Bluetooth. Il faudra réfléchir à cela lorsque le design sera décidé.

Le design proposé et la programmation de l’IHM

Voici ci-dessous une proposition d’interface découpée en 3 parties :

la connection/déconnection au Bluetooth (boutons) ;
l’affichage de la température (label) ;
la commande de clignotement ou non de la LED (boutons).

Interface de notre IHM

On peut pour cela utiliser le service AppInventor depuis l’adresse suivante : http://ai2.appinventor.mit.edu

Pour un projet donné, cet environnement se présente sous la forme de deux onglets.

« Designer » : il permet de réaliser l’aspect graphique.
« Blocs » : il permet la programmation de l’interface par blocs.

Environnement d’AppInventor onglet « designer »

Environnement d’AppInventor onglet « blocs »

L’adaptation du programme côté objet

Suite à l’ajout du module Bluetooth et de la fonctionnalité de clignotement de la LED RGB, il faut apporter des modifications au programme de l’objet.

Il faut notamment être vigilant sur les messages échangés de part et d’autre pour que l’interface comprenne les messages venus de l’objet et vice versa.

Le programme Arduino modifié est consultable dans la partie « Aller plus loin », à la fin de cette fiche.

Il reste maintenant à réaliser les tests et vérifier que tout fonctionne correctement.

3. Le futur des IHM

Les interfaces homme-machine sont le cœur de l’internet des objets. Avec la multiplication des objets connectés, il est en effet important pour les utilisateurs de disposer d’interfaces fiables et faciles à utiliser.

L’interface cerveau-machine, appelée également interface neuronale, désigne un système de liaison directe entre un cerveau et un ordinateur.

Le principe est le suivant.

On enregistre les niveaux électriques du cerveau, soit par une implantation directe d'électrodes, soit par un casque équipé d'électrodes.
Une fois captés, ces signaux sont interprétés par un logiciel et envoyés à l’ordinateur.

Des expérimentations sont notamment réalisées pour pallier aux handicaps caractérisés par une déficience des muscles, dans les cas de paraplégie ou de maladie de Charcot.

Pour aller plus loin - Réalisation

Le matériel nécessaire

Voici le matériel nécessaire pour la réalisation du projet complet :

une carte programmable arduino Uno ;
un capteur de température LM35 ;
une LED RGB ;
un module Bluetooth ;
une platine d’essai et des fils de connection.

Programmes Arduino

Les tableaux ci-dessous donnent le programme Arduino présent initialement dans le microprocesseur, puis le programme modifié.

Programme Arduino de départ

int capteur = 0;
int patteR = 6;
int patteV = 3;
int patteB = 4;

void setup()
{
Serial.begin(9600);
pinMode(patteR,OUTPUT);
pinMode(patteV,OUTPUT);
pinMode(patteB,OUTPUT);
}

void loop()
{
int valcapt = analogRead(capteur);
float temperature = valcapt*(5.0/1024.0 * 100.0);
Serial.print( "temperature : ");
Serial.print(temperature);
Serial.println(" C ");
delay(2000);

if(temperature > 30)
{
digitalWrite(patteV,LOW);
digitalWrite(patteB,LOW);
digitalWrite(patteR,HIGH); }
else
{
if (temperature < 5)

{

digitalWrite(patteV,LOW);

digitalWrite(patteB,HIGH);

digitalWrite(patteR,LOW);

}
else
{
digitalWrite(patteV,HIGH);
digitalWrite(patteB,LOW);
digitalWrite(patteR,LOW);
}
}
}

Programme Arduino modifié (en bleu)

#include <softwareserial.h>

SoftwareSerial hc06(10,11);
int capteur = 0;
int patteR = 6;
int patteV = 3;
int patteB = 4;
bool clignotmentActif = false;
int delai = 100;

void setup()
{
Serial.begin(9600);
hc06.begin(9600);
pinMode(patteR,OUTPUT);
pinMode(patteV,OUTPUT);
pinMode(patteB,OUTPUT);
}

void loop()
{
while (hc06.available() > 0)
{
char car_lu = hc06.read();
if (car_lu == 'C')
{
clignotmentActif = true;
}
else
{
clignotmentActif = false;
}
}

int valcapt = analogRead(capteur);
float temperature = valcapt*(5.0/1024.0 * 100.0);
Serial.print( "temperature : ");
Serial.print(temperature);
Serial.println(" C ");
//on envoie la temperature via bluetooth
hc06.print(temperature);
if (clignotmentActif)
{
delay(delai);
}
else
{
delay(delai*2);
}

if( temperature > 30)
{
digitalWrite(patteV,LOW);
digitalWrite(patteB,LOW);
digitalWrite(patteR,HIGH);
if (clignotmentActif)
{
delay(delai);
digitalWrite(patteR,LOW);
}
}
}