Présentation de l’interface MultiTouch (MT)

Présentation de l’interface MultiTouch (MT)PJE Multi-Touch

Fabrice [email protected]

2019-2020

F. Aubert PJE MultiTouch/ Présentation de l’interface MT 2019-2020 1 / 32

[email protected]

Outils de développement utilisés

I Développement en Java

I Utilisation de Swing pour l’interface

I Utilisation d’un client TUIO pour les couches basses (connexion UDP, etc)

I Utilisation de Java2D pour la visualisation


Objectifs du toolkit MultiTouch

I Structure logicielle calquée sur les librairies d’interfaces usuelles (Component, Container,Widget, Programmation événementielle).

I Analyse du geste d’interaction (translate/rotate/scale, one dollar, axe principaux).

I Illustration de ces concepts avec un visualiseur d’images.


1 Java et Swing


Hello World

I Cours JAVA (POO : LS4, COO : LS5) : http://www.fil.univ-lille1.fr/portail/

I Tutorial SWING : http://docs.oracle.com/javase/tutorial/uiswing/

import javax . swing .∗ ;import java . awt .∗ ;import java . awt . event .∗ ;

public class Main {

s t a t i c public void createAndShowGUI ( ) {JFrame f =new JFrame ( " He l lo World ! ! ! " ) ;

f . se tPre fe r redS ize (new Dimension (500 ,500 ) ) ;

f . pack ( ) ;f . s e t V i s i b l e ( true ) ;

}

s t a t i c public void main ( S t r i n g arg [ ] ) {. . .

}

}


http://www.fil.univ-lille1.fr/portail/

http://docs.oracle.com/javase/tutorial/uiswing/

Event Dispatch Thread

I La gestion des événements SWING est réalisée dans un thread appeléEvent Dispatch Thread.

I Différent du Initial Thread qui correspond à l’exécution dustatic public main() {}.

I Il faut s’assurer que tout ce qui concerne la gestion de l’interface est faite dans le EventDispatch Thread⇒ utiliser invokeLater pour la création !

import javax . swing .∗ ;import java . awt .∗ ;import java . awt . event .∗ ;

public class Main {

s t a t i c public void createAndShowGUI ( ) {JFrame f =new JFrame ( " He l lo World ! ! ! " ) ;. . .f . s e t V i s i b l e ( true ) ;

}

s t a t i c public void main ( S t r i n g arg [ ] ) {S w i n g U t i l i t i e s . invokeLater (new Runnable ( ) {

public void run ( ) {createAndShowGUI ( ) ;

}} ) ;

}

}


JFrame = Top-Level Container

I Component : brique de base de l’interface (= widgets : boutons, listes déroulantes, etc).I Container : ensemble (ou groupe) de composants de l’interface graphique (pour

organiser l’interface en sous ensembles ; boutons radios ; ...).I Un container est lui-même un composant⇒ possibilité d’organiser l’interface

hiérarchiquement.I La racine de la structure de l’interface (Top-Level Container) est gérée par la classe

JFrame :• d’un container (container racine de tous les composants de l’interface) :

contentPane.• du fenêtrage système (fermeture, iconification, look and feel).• de la possibilité d’ajouter un menu.


Ajouter des composants à un container

s t a t i c public void createAndShowGUI ( ) {JFrame f =new JFrame ( " He l lo World ! ! ! " ) ;f . setLayout (new FlowLayout ( ) ) ;f . se tPre fe r redS ize (new Dimension (500 ,500 ) ) ;

JButton but ton1=new JButton ( " Bouton 1 " ) ;but ton1 . se tPre fe r redS ize (new Dimension (100 ,100 ) ) ;f . getContentPane ( ) . add ( but ton1 ) ;


}


Layout Manager

I Tout container possède un « Layout Manager » : fixe la stratégie de positionnement descomposants.

I La taille et la position des composants sont fixés au moment du f.pack() qui respecte aumieux le layout manager.

I Exemple : JFrame avec un FlowLayout, et 2 boutons dans le conteneur (remarquer lessetPreferredSize)

s t a t i c public void createAndShowGUI ( ) {JFrame f =new JFrame ( " He l lo World ! ! ! " ) ;f . se tPre fe r redS ize (new Dimension (500 ,500 ) ) ;

f . setLayout (new FlowLayout ( ) ) ;

JButton but ton1=new JButton ( " but ton1 " ) ;but ton1 . se tPre fe r redS ize (new Dimension (100 ,30 ) ) ;f . getContentPane ( ) . add ( but ton1 ) ;

JButton but ton2=new JButton ( " but ton2 " ) ;but ton2 . se tPre fe r redS ize (new Dimension (200 ,50 ) ) ;f . getContentPane ( ) . add ( but ton2 ) ;


}


Evénement

I L’interface doit réagir aux événements utilisateurs (click sur un JButton par exemple).

I Programmation événementielle :

• Il faut indiquer à SWING quelle est la méthode à appeler dans le cas où unévénement donné se produit pour un composant donné (mécanisme de callback).

• A l’exécution, les événements (click, affichage d’un composant, etc) reçus par lescomposants sont gérés par la boucle d’événements (le Event Dispatch Thread) :pour chaque événement le callback correspondant est appelé.

I Pour spécifier les callbacks : on utilise les Listener (= écouteur d’événements).

. . .JButton but ton1=new JButton ( " Bouton 1 " ) ;but ton1 . se tPre fe r redS ize (new Dimension (100 ,100 ) ) ;

/ / l es événements du bouton1 seront gé r és par un écouteur/ / l ’ ob j e t un_ecouteur es t dé f i n i dans l e t ransparen t su ivan tbut ton1 . addAct ionL is tener ( un_ecouteur ) ;

f . getContentPane ( ) . add ( but ton1 ) ;. . .

a.addActionListener(b) :l’objet b écoute le composant a


ActionListener

I La classe de un_ecouteur doit implémenter l’interface ActionListener.

I Méthode à implémenter : actionPerformed.

import java . awt . event .∗ ;

public class MyListener implements Ac t i onL i s t ene r { / / c lasse de un_ecouteurpublic void act ionPerformed ( Act ionEvent arg0 ) {

System . out . p r i n t l n ( " Bouton c l i c k " ) ;}

}

public class Main {

s t a t i c Ac t i onL i s tene r un_ecouteur=new MyListener ( ) ;

s t a t i c public void createAndShowGUI ( ) {JFrame f =new JFrame ( " He l lo World ! ! ! " ) ;. . .but ton1 . addAct ionL is tener ( un_ecouteur ) ;. . .

}

. . .}


En plus concis...

On peut utiliser une classe anonyme qui implémente l’interface ActionListener(évite de définir une nouvelle classe pour les écouteurs) :


JButton but ton1=new JButton ( " Bouton 1 " ) ;but ton1 . se tPre fe r redS ize (new Dimension (100 ,100 ) ) ;but ton1 . addAct ionL is tener (new Ac t i onL i s t ene r ( ) {

public void act ionPerformed ( Act ionEvent e ) {ac t ionBut ton1 ( e ) ;

}} ) ;

f . getContentPane ( ) . add ( but ton1 ) ;


}

s t a t i c void ac t ionBut ton1 ( Act ionEvent e ) {System . out . p r i n t l n ( " j ’ appuie sur J1 " ) ;

}


Components/Containers

I Tous les composants et conteneurs héritent de JComponent

I Containers SWING utilisés pour le projet : JFrame (pour lancer l’interface de l’appli),JPanel pour faire un cadre et dessiner à l’intérieur.

I Mais nous allons définir nos propres composants et containers (avec leur mécanisme delisteners) :

• MTComponent : affichage = photo ; événements = message des curseurs (add,update, remove des doigts).

• MTSurface : initialisera et contiendra les MTComponent (i.e. les photos).


2 Créer ses propres listeners


Basé sur le mécanisme de SWING

I On veut retrouver ce style de code sur nos propres composants (exemple du boutoncliqué) :

/ / L i s t ene r d ’ un c l i c k ( i . e . événement Act ion ) sur un bouton SWING :JButton b=new JButton ( " h e l l o " ) ;b . addAct ionL is tener (new Ac t i onL i s t ene r ( ) {

public void act ionPerformed ( Act ionEvent ev t ) {System . out . p r i n t l n ( " c l i c k sur h e l l o " ) ;

}} ) ;

I Autrement dit :

• Créer des objets qui diffusent des événements qui puissent être écoutés (écoutablesavec un add...Listener)

• Créer des écouteurs qui appellent la méthode voulue pour un événement donné(écouteurs avec des méthodes ...Performed).


Exemple

I L’exemple présenté s’appuie sur un générateur de nombres aléatoires :

• On suppose une boucle infinie qui génère des nombres aléatoires (à comparer àl’EDT)

• Un nombre impair génère un événement (à comparer au click sur un bouton).• Cet événement est diffusé par un objet Ecoutable (le bouton).• On souhaite alors qu’un objet quelconque puisse écouter (et réagir à) cet événement.

I On propose donc de :

1 Définir la classe des événements pouvant être générés (la classe ImpairEvent dansl’exemple).

2 Faire la génération d’événements (voir méthode generate dans la suite).3 Inclure une liste des écouteurs pour la classe écoutable (classe Ecoutable).4 Faire l’interface des écouteurs possibles (interface ImpairListener dans la suite).5 Exploiter le mécanisme d’écouteur pour réagir aux événements (simple affichage

d’un message dans l’exemple qui suit).


Exploiter le mécanisme

On souhaite donc pouvoir faire le code suivant (à comparer avec l’exemple du boutonswing) :

/ / f a i r e un écouteur d ’ un événement Impai r sur un ob je t de classe Ecoutable :Ecoutable unEcoutable=new Ecoutable ( ) ;unEcoutable . add Impa i rL is tener (new Impa i r L i s t ene r ( ) {

public void impairPerformed ( ImpairEvent ev t ) {System . out . p r i n t l n ( "Evénement nombre impa i r : "+evt . getValue ( ) ) ;

}} ) ;

Pour mémoire (exemple du bouton SWING) :

/ / L i s t ene r d ’ un événement Act ion ( i . e . un c l i c k ) sur un bouton SWING :JButton b=new JButton ( " h e l l o " ) ;b . addAct ionL is tener (new Ac t i onL i s t ene r ( ) {

public void act ionPerformed ( Act ionEvent ev t ) {System . out . p r i n t l n ( " c l i c k sur h e l l o " ) ;

}} ) ;


La classe des événements

Classe des événements (elle inclut toutes les infos utiles/nécessaires à l’événement) :

public class ImpairEvent extends AWTEvent {private double v ;

public ImpairEvent ( Object source , i n t id , double value ) {super ( source , i d ) ;v=value ;

}

public double getValue ( ) {return v ;

}}


La génération des événements

A inclure dans une boucle infinie (thread qui gère les événements : à comparer avecl’Event Dispatch Thread) :

public void generate ( ) {i n t a=( i n t ) ( Math . random ()∗1000.0) ;i f ( a % 2==1) {

ImpairEvent ev t=new ImpairEvent ( unComposant , 0 , a ) ;/ / => dé te rminer l ’ ob j e t concerné par l ’ événement ; i c i on suppose qu ’ i l s ’ a g i t de unEcoutableunEcoutable . f i re Impa i rPer fo rmed ( ev t ) ; / / d i f f u s e r l ’ événement aux écouteurs

}}


Interface de l’écouteur

Tous les écouteurs doivent implémenter la méthode qui doit être appelée lors del’événement :

public inter face Impa i r L i s t ene r extends EventL is tener {public void impairPerformed ( ImpairEvent ev t ) ;

}


Les objets écoutables

public class Ecoutable extends JComponent {

/ / L i s t e d ’ écouteurs :private E v e n t L i s t e n e r L i s t l i s t e n e r L i s t =nul l ;

public Composant ( ) {l i s t e n e r L i s t =new E v e n t L i s t e n e r L i s t ( ) ;

}

/ / a j o u t e r un écouteurpublic void addImpa i rL is tener ( Impa i r L i s t ene r e ) {

l i s t e n e r L i s t . add ( Impa i rL i s t ene r . class , e ) ;}

/ / i n fo rmer tous les écouteurspublic void f i r e Impa i rPer fo rmed (AWTEvent event ) {

Object [ ] l i s t e n e r s = l i s t e n e r L i s t . g e t L i s t e n e r L i s t ( ) ;for ( i n t i = l i s t e n e r s . length−1; i >=0; i−−) {

i f ( ( l i s t e n e r s [ i ] == Impa i rL i s t ene r . class ) )( ( Impa i r L i s t ene r ) l i s t e n e r s [ i + 1 ] ) . impairPerformed ( ( ImpairEvent ) event ) ;

}}

}


3 Introduction à JAVA 2D


paintComponent

I Tutoriel : http://docs.oracle.com/javase/tutorial/2d/

I JComponent : méthode paintComponent appelée à chaque événement repaint()(provoqué par le système, ou directement par le programmeur).

I Exemple : surcharge de JButton :

import javax . swing .∗ ;import java . awt .∗ ;import java . awt . geom.∗ ;

public class CButton extends JButton {

public CButton ( S t r i n g s ) {super ( s ) ;

}

public void paintComponent ( Graphics g ) {Graphics2D g2=( Graphics2D ) g ;

g2 . f i l l (new El l ipse2D . Double (30 ,30 ,40 ,40 ) ) ;

}}

s t a t i c public void createAndShowGUI ( ) {JFrame f =new JFrame ( " He l lo World ! ! ! " ) ;f . se tPre fe r redS ize (new Dimension (500 ,500 ) ) ;

CButton but ton1=new CButton ( " Bouton 1 " ) ;. . .


http://docs.oracle.com/javase/tutorial/2d/

Graphics2D

I paintComponent(Graphics g) : g = environnement graphique du composant

I Cast en Graphics2D pour bénéficier de toutes les fonctionnalités de Java2D

I Les méthodes de Graphics2D permettent de :

• lire/modifier les attributs de tracé (hauteur, largeur, couleur, épaisseur de traits,transformations...) : l’ensemble des valeurs de ces attributs à un instant donnéconstitue l’état courant du tracé.

• dessiner (rectangle, ellipse, polygones, images, textes...) dans l’état courant.

Repère initial :

Pour connaitre la hauteur et la lar-geur (en pixels), utiliser getWidth() etgetHeight() du composant.


draw/fill

I draw(Shape s) : trace une forme géométrique.

I fill(Shape s) : remplit la forme géométrique.

public class MyPanel extends JPanel {

public MyPanel ( ) {super ( ) ;

}


g2 . se tCo lor (new Color ( 2 0 0 , 0 , 0 ) ) ;g2 . draw (new Rectangle2D . Double (10 ,10 ,100 ,100) ) ;g2 . se tCo lor (new Color ( 0 , 0 , 1 0 0 ) ) ;g2 . f i l l (new Rectangle2D . Double (150 ,10 ,100 ,100) ) ;

}

}

public class Main {


MyPanel panel=new MyPanel ( ) ;panel . se tPre fe r redS ize (new Dimension (300 ,300 ) ) ;panel . setBorder (new LineBorder (

new Color ( 0 , 2 0 0 , 0 ) , 3 ) ) ;

f . getContentPane ( ) . add ( panel ) ;


}

s t a t i c public void main ( S t r i n g arg [ ] ) {S w i n g U t i l i t i e s . invokeLater (new Runnable ( ) {

public void run ( ) {createAndShowGUI ( ) ;

}} ) ;

}

}


Remarques

I pour Graphics2D

• setColor(new Color(r,v,b)) : fixe la couleur courante en composantes(rouge,vert,bleu) (∈ [0,255]).

• new Rectangle2D.Double(x0,y0,width,height) : dérive de Shape

I pour JPanel :

• Container simple, sans particularité : très souvent utilisé pour faire un espace dedessin.

• setBorder(new LineBorder(Color c, int thickness)) : permet de déssinerun bord.


Lignes Polygonales


GeneralPath p=new GeneralPath ( ) ;

p . moveTo(50 , 200) ;p . l i neTo (150 , 100) ;p . l i neTo (250 , 200) ;/ / p . c losePath ( ) ; / / s i on souhai te fermer l e path

/ / ( i . e . r e l i e r avec l e po in t i n i t i a l )

g2 . draw ( p ) ;}


Tracer une image

import java . i o .∗ ;import javax . swing .∗ ;import javax . imageio .∗ ;import java . awt .∗ ;import java . awt . image .∗ ;import java . awt . geom.∗ ;

public class MyPanel extends JPanel {

BufferedImage img ;

public MyPanel ( ) {super ( ) ;t ry {

img=ImageIO . read (new F i l e ( " data / univ− l i l l e 1 _ p e t i t e . jpg " ) ) ;

} catch ( IOExcept ion e ) {e . p r in tS tackTrace ( ) ;

}}

public void paintComponent ( Graphics g ) {super . paintComponent ( g ) ;Graphics2D g2=( Graphics2D ) g ;

g2 . drawImage ( img ,50 ,100 , nul l ) ;}

}


4 Fondations de l’application MultiTouch


Vers un Widget Toolkit

I MTsurface : Top-Level container des composants multi-touch.

• hérite de JPanel pour être intégré à une application SWING.• possèdera un unique MTcontainer (container racine).• reçoit tous les messages de position des curseurs : c’est MTsurface qui détermine à

quel composant cela s’adresse (fonctionnement simplifié par rapport à l’edt deSWING).

I MTedt : reçoit les événements TUIO et les transmets à MTsurface (intermédiaire entre leserveur TUIO et MTsurface).


MTedt : lanceur et écouteur du client TUIO

I On utilise un client TUIO déjà implémenté en Java (http ://www.tuio.org/?software).

• classe TuioClient : assure la connexion UDP avec le serveur TUIO.• classe TuioListener : interface pour écouter les événements TUIO.

public class MTedt implements Tu ioL i s tene r {

Tu ioC l i en t c l i e n t =nul l ;

MTSurface sur face ;

public MTedt ( MTSurface s ) {i n t po r t =3333;c l i e n t =new Tu ioC l i en t ( po r t ) ;c l i e n t . addTuioL is tener ( th is ) ;c l i e n t . connect ( ) ;i f ( ! c l i e n t . isConnected ( ) ) {

System . e x i t ( 1 ) ;}System . out . p r i n t l n ( " connect ion " ) ;sur face=s ;

}. . .

}


MTedt : réponses aux messages

public class MTedt implements Tu ioL i s tene r {

Tu ioC l i en t c l i e n t =nul l ;MTSurface sur face ;

. . .

public void addTuioCursor ( TuioCursor t c u r ) {/ / System . out . p r i n t l n ( " add cur "+ t c u r . getCursorID ( ) + " ( "+ t c u r . getSessionID ( ) + " ) "+ t c u r . getX ( ) + " "+ t c u r . getY ( ) ) ;

sur face . addCursor ( t c u r . getCursorID ( ) , t c u r . getX ( ) , t c u r . getY ( ) ) ;}

public void updateTuioCursor ( TuioCursor t c u r ) {/ / System . out . p r i n t l n ( " se t cur "+ t c u r . getCursorID ( ) + " ( "+ t c u r . getSessionID ( ) + " ) "+ t c u r . getX ( ) + " "+ t c u r . getY ( ) + " "+/ / t c u r . getMotionSpeed ( ) + " "+ t c u r . getMot ionAccel ( ) ) ;

sur face . updateCursor ( t c u r . getCursorID ( ) , t c u r . getX ( ) , t c u r . getY ( ) ) ;}

public void removeTuioCursor ( TuioCursor t c u r ) {/ / System . out . p r i n t l n ( " de l cur "+ t c u r . getCursorID ( ) + " ( "+ t c u r . getSessionID ( ) + " ) " ) ;

sur face . removeCursor ( t c u r . getCursorID ( ) , t c u r . getX ( ) , t c u r . getY ( ) ) ;

}

}


Documents

Présentation de l’interface MultiTouch (MT)