Polytech Polytech 3e année
Interaction Homme-Machine

Cours

Anastasia Bezerianos
Site du cours

TP

Jérémie Garcia (salle B003, groupe 1)
David Bonnet (salle B020, groupe 2)

  1. Jeudi 18 avril 2013, 10h30-12h30
  2. Jeudi 25 avril 2013, 10h30-12h30
  3. Jeudi 16 mai 2013, 10h30-12h30
  4. Jeudi 23 mai 2013, groupe 1: 8h30-10h30, groupe 2: 10h30-12h30
  5. Jeudi 30 mai 2013, groupe 1: 10h30-12h30, groupe 2: 8h30-10h30
  6. Vendredi 21 juin 2013, 13h30-16h30

Ressources

Voici des sites ou des pages intéressantes à consulter :

TP 1 — Jeudi 18 avril 2013

Les exercices sont basés sur ceux réalisés par Nicolas Roussel.

Boîte de dialogue

Ce qu'il faut retenir :

Sélecteur de couleur

Ce qu'il faut retenir :

TP 2 — Jeudi 25 avril 2013

Sélecteur de fichier

Ce qu'il faut retenir :

TP 3 — Jeudi 16 mai 2013

Dessin de lignes à main levée

Le but de ce TP est de vous familiariser avec le dessin et la manipulation d'objets dans un canvas.

Télécharger l'archive contenant les éléments de base pour commencer.

  1. Exécuter le fichier ApplicationDessin.java et analyser le code source.
  2. Modifier la classe PersistentCanvas pour qu'elle affiche une image de fond (background.jpg que vous trouverez dans le dossier /img). Pour charger une image on utilise la méthode ImageIO.read(Fichier_image);. On conseille d'utiliser la classe Image via sa sous classe BufferedImage et les méthodes de la classe Graphics2D aide. Veiller à ce que l'image occupe tout le canvas, même lorsque la fenêtre est redimensionnée.
  3. Autoriser le dessin de plusieurs tracés différents. On conseille l'utilisation de la classe ArrayList pour conserver dans PersistentCanvas les tracés créés afin de pouvoir tous les afficher dans la méthode paintComponent().
  4. Ajouter un bouton permettant d'effacer le contenu du canvas lorsque l'utilisateur clique dessus.

Conseils

Ce qu'il faut retenir :

Picking, images et gestion du clavier

Le but de ce TP est d'apprendre à gérer le picking (qui consiste à trouver l'élément de l'interface qui se trouve sous le curseur de la souris) et à manipuler des images dans un canvas.

Télécharger l'archive contenant les éléments de base pour commencer.

  1. Exécuter le fichier Picking.java et analyser le code source.
  2. Créer un écouteur d'événements de la souris qui permet de sélectionner l'image sur laquelle se trouve la souris et de la sélectionner. Lors d'un click (MousePressedEvent de MouseEventListener), il faut trouver quel élément de l'image est en dessous en testant si l'un des éléments existants contient la position de la souris. On prendra soin de de désélectionner l'élément précédemment sélectionné et de sélectionner (s'il existe) le nouvel élément.
  3. Implémenter une méthode ImageItem.move(int dx, int dy) qui effectuera une translation de la position lors d'un drag (déplacement en gardant le bouton de la souris enfoncé) si un élément est sélectionné.
  4. Ajouter un écouteur d'événements du clavier qui supprime l'élément sélectionné lorsque l'utilisateur appuie sur la touche D du clavier. On utilisera pour cela la classe KeyboardFocusManager qui permet de récupérer l'ensemble des événements clavier.
  5. Ajouter un slider permettant de changer l'orientation de l'objet sélectionné (entre 0 et 360 degrés). On créera pour cela une variable orientation dans la classe ImageItem et on modifiera la méthode ImageItem.getTransform() afin de tenir compte de cette nouvelle variable. Ajouter un JLabel qui permet de visualiser la valeur de l'orientation de l'image sélectionnée.

Ce qu'il faut retenir :

TP 4 — Jeudi 23 mai 2013

Notez que la séance de TP pour le groupe 1 aura lieu de 8h30 à 10h30 et que celle du groupe 2 aura lieu de 10h30 à 12h30. La semaine prochaine, ce sera au groupe 2 de se lever plus tôt.

Animation et gestion de trajectoires

Le but de ce TP est de se familiariser avec les animations en Java Swing et de travailler sur le suivi de chemin.

Télécharger l'archive contenant les éléments de base pour commencer. Vous pouvez réutiliser et adapter les classes qui s'y trouvent pour votre projet.

  1. Exécuter le fichier FlightController.java et analyser le code source. Dans l'état actuel, il est possible de spécifier des trajectoires à la souris (en déplaçant le curseur en maintenant le bouton de la souris enfoncé) ce qui a pour effet de créer un avion qui va suivre cette trajectoire puis aller tout droit une fois qu'il en est arrivé au bout.
  2. Les avions sortent du cadre visible de la fenêtre. Modifier la méthode Animator.actionPerformed(ActionEvent event) pour que les avions tournent afin de rester dans la fenêtre. Utiliser la méthode Plane.setAngle(double angle).
  3. Modifier la méthode Animator.actionPerformed(ActionEvent event) pour faire apparaître aléatoirement (dans le temps) des avions depuis les bords de la fenêtre. Utiliser pour cela la méthode Math.random et le constructeur de Plane.
  4. Proposer des avions différents avec des vitesses différentes en utilisant par exemple cette image.
  5. Modifier les MouseListeners de la classe Animator afin de pouvoir changer la trajectoire de n'importe quel avion en appuyant sur le bouton de la souris tout en pointant sur un avion. Utiliser les méthodes Plane.contains(Point2D point) et Plane.setSelected(boolean selected).
  6. S'assurer que la définition d'une nouvelle trajectoire pour un avion en ayant déjà une remplace l'ancienne.
  7. Changer la méthode Animator.paint(Graphics g) ainsi que les MouseListeners déclarés dans son constructeur pour que le chemin soit en pointillés lors de sa création par l'utilisateur, puis représenté par un trait continu lorsque le bouton de la souris est relâché. Utiliser des variantes du constructeur de BasicStroke.
  8. Rendre le bouton Accélérer fonctionnel. Lorsque l'on clique dessus, la vitesse doit être deux fois plus rapide. S'assurer que le label du bouton change pour refléter cette modification. Utiliser la méthode Animator.setSpeed(int factor).
  9. Remplacer ce bouton par un slider pour pouvoir faire varier la vitesse de façon continue.
  10. Simplifier la trajectoire en utilisant l'algorithme de Ramer–Douglas–Peucker. Cela permet de stabiliser l'avion en supprimant le bruit lié à la prise en compte d'un trop grand nombre de positions de la souris.

Ce qu'il faut retenir :

TP 5 — Jeudi 30 mai 2013

Notez que la séance de TP pour le groupe 2 aura lieu de 8h30 à 10h30 et que celle du groupe 1 aura lieu de 10h30 à 12h30. Cela dit, tous les groupes sont bienvenus tout au long des deux séances si besoin.

Support pour les projets

Le but de cette séance est de vous aider dans la réalisation des projets. En particulier, nous pourrons aborder les points suivants:

TP 6 — Vendredi 21 juin 2013

Notez que les projets doivent être rendus le mercredi 19 juin 2013 avant 23h00. Au-delà, c'est un point en moins par heure de retard.

Présentation des projets

La présentation des projets aura lieu de 13h30 à 16h30. Chaque présentation devra :

Il est inutile de faire une introduction exhaustive, vu qu'elle sera la même pour tous et qu'elle ne contribuera qu'à la lassitude de vos évaluateurs. La présentation sera suivie d'au plus 4 minutes de questions.

Projet : Jeu de gestion de traffic aérien

Le projet consiste à implémenter un drawing game (jeu basé sur des trajectoires spécifiées à la souris) similaire à Flight Control ou Plane Control. Le but est de diriger des avions vers une piste d'atterrissage en spécifiant une trajectoire à la souris tout en veillant à ce qu'aucun avion n'entre en collision avec un autre, auquel cas le jeu se termine. Cette vidéo donne un aperçu du fonctionnement de ce type de jeu.

L'interface du jeu avec les fonctions de base devra contenir les éléments illustrés dans la figure ci-dessous (leur comportement est décrit dans la sous-section suivante) :

Gestion de traffic aérien

Une partie peut être démarrée en passant préalablement par une fenêtre avec ces éléments :

Écran d'accueil

Fonctions de base

Détection d'une trajectoire d'atterrissage

Toute trajectoire se terminant sur une piste d'atterrissage ne permet pas nécessairement à l'avion d'atterrir. La trajectoire doit s'arrêter vers le début de la piste d'atterrissage et avoir une direction qui va plus ou moins dans le sens de la trajectoire. En utilisant deux zones invisibles attachées à chaque piste d'atterrissage (bleues et rouges dans la figure ci-dessous), vous pouvez facilement contraindre le joueur à dessiner une trajectoire cohérente.

Détection de l'atterrissage

Fonctions avancées

Fonctions ultra avancées

Livraison et évaluation

Le logiciel doit être envoyé par mail à vos chargés de TP le mercredi 19 juin 2013 avant 23h00, en mettant Anastasia en copie. Le titre du mail doit avoir le format suivant: [IHM] Projet Flight Control Nom_A Nom_B (Remplacez Nom_A et Nom_B par vos noms de famille). Ce mail devra contenir une archive zippée renfermant :

Le projet sera évalué en fonction de la qualité d'implémentation, de la présence des fonctions de base et sur le nombre de fonctions avancées incluses. L'implémentation des fonctions de base est obligatoire et permet d'obtenir une note moyenne (aux alentours de 10). Toute fonction avancée supplémentaire augmente la note de 2 points environ (en fonction de la difficulté). Une attention particulière est accordée à l'interaction (indices visuels, choix des formes et des couleurs, etc.) qui pondèrera également la note finale du projet.

Ressources

Vous avez toute latitude sur l'apparence visuelle du jeu. Voici quelques sites qui vous permettent de récupérer des icônes et images utiles pour illustrer votre jeu :

Groupes

Groupe 1

Groupe 2