109
Rapport final de projet PROJET TUTEURE SRC2 ANNEE 2011-2012 PAR L’AGENCE TOUCHDOWN POUR THIBAULT CARRON ENS EIGNANT ÉLABORATION D’UNE TABLE TACTILE HUGO BARBIER MORGAN CAMEROLA QUENTIN DAMEVIN JEAN DAVID DOS SANTOS GUILLAUME DUMOULIN SIMON HENRY NICOLAS LEFEBVRE ITAC

Rapport de projet

Embed Size (px)

DESCRIPTION

Rapport final de notre projet de table tactile

Citation preview

Rapport final de projetPROJET TUTEURE SRC2 ANNEE 2011-2012PAR L’AGENCE TOUCHDOWNPOUR THIBAULT CARRON ENSEIGNANT

ÉLABORATION D’UNE TABLE TACTILE

HUGO BARBIERMORGAN CAMEROLAQUENTIN DAMEVINJEAN DAVID DOS SANTOSGUILLAUME DUMOULIN SIMON HENRYNICOLAS LEFEBVRE

ITAC

ITAC

ITAC

SOMMAIRERemerciementsProjetClientAgenceRéalisationsGestion du projetProblèmes & solutionsBilans personnelsGlossaireAnnexe

p.4p.7p.8p.8p.9p.70p.73p.74p.82p.83

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

/ REMERCIEMENTS

ITAC5

Thibault Carron Gregory HouzetMaxime Bernier Lionel LangainSerges Hélies Virginie ColombelJeremy MacheninFréderic GaretAlexis VistalliVMComixTealcoun

Nos partenaires : Université de Savoie P.L.U.M Semageek Unitag Audio Electronique

Nous tenons à remercier toutes ces personnes pour leurs aide, leur soutient et pour certains, le prêt de matériel. Sans eux le projet n’aurait pas pu aboutir.

/ CONTEXTE

ITAC7

Notre client nous a donné pour mission de créer une table tactile de nos propres mains dans le double-but de maîtriser la technologie tout en maîtrisant le coût du matériel.

Il a souhaité également que des applications soient développées dans un but de collaboration où plusieurs personnes pourront effectuer différentes tâches en même temps; contrairement aux terminaux que nous connaissons qui sont adaptés à un seul utilisateur à la fois.

M. Thibault Carron à tenu également à ce que notre table tactile ne mise pas tout sur la technologie tactile mais aussi sur les manières que l’on a d’interagir avec une table, par exemple en posant des objets dessus : le principe de réactable.

La domotique est un principe intéressant pour une table de ce type et nous l’avons abordé. Cela permet par exemple de contrôler sa maison : chauffage, éclairage, stores; à partir de la table tactile.

LA DEMANDE

ITAC8

LE CLIENT M. Thibault Carron est enseignant-chercheur en informatique à l’Université de Savoie.Il travaille en parallèle à l’IUT de Chambéry et au laboratoire Syscom. Ses travaux de recherche portent notamment sur les learning games*.

Il s’intéresse également dans le cadre de ses travaux de recherche à la technologie tactile notamment pour l’apprentissage ou le travail collaboratif.

L’AGENCE TouchDown est une agence constituée de sept étudiants de deuxième année de DUT Services et Réseaux de Communication à l’IUT de Chambéry.Les membres de l’équipe disposent de diverses compétences en électronique, programmation, graphisme et communication.

Les rôles sont répartis de la manière suivante :

Guillaume Dumoulin , Chef de projet - Concepteur (matériel)Quentin Damevin , Chargé de CommunicationHugo Barbier , Chargé de Communication - Rédacteur Simon Henry , Développeur - Concepteur 3DNicolas Lefebvre , Développeur (logiciel)Jean-David Dos-Santos , Graphiste - Développeur (Web)Morgan Camerola , Graphiste

/ RÉALISATIONSCOMMUNICATION

ITAC10

INTRODUCTION Nous avions pour objectifs de communication de faire connaître le projet aux étudiants du campus et aux passionnés de nouvelles technologies. La communication était importante pour prouver que projet était sérieux et ambitieux afi n de trouver des partenaires.

La communication devait mettre également la formation SeRéCom en avant. Savoir que des étudiants en SeRéCom fabriquaient une table tactile permettait de promouvoir la formation et plus globalement l’Université de Savoie.

Notre communication avait deux niveaux : -un niveau léger pour informer sur l’avancement de la table et sur ses objectifs. Cela afi n d’intéresser un plus grand nombre de personne. -un niveau plus technique pour les personnes intéressées par le processus de fabrication, par le matériel utilisé, la programmation, etc.

Nous avons rapidement défi ni une charte graphique sur les polices utilisées, les couleurs, etc. Ainsi tous nos supports de communication s’inscrivaient dans cette charte graphique permettant de reconnaître un support ITAC.

ITAC11

LE TRAILERUtiliser un logiciel de modélisation 3D nous permettait de faire comprendre facilement l’agencement des éléments de la table. En effet, tous les éléments sont présentés un par un en vidéo : pour le spectateur, c’est plus clair qu’une photo explicative pour chaque partie de la table. De plus, si un des éléments de la vidéo ne nous plait pas, la 3D permet de le modifier aisément.

Nous avons donc modélisé la table et son environnement (à l’exception des personnages) sous Blender, logiciel gratuit et openSource. Tant en termes de proportions que de couleurs, nous avons voulu être le plus fidèle possible à la réalité. Ainsi le spectateur peut avoir une idée concrète de ce à quoi ressemble la table les différents éléments qui la composent. Les personnages (modélisés par VMComix) sont là pour appuyer l’aspect collaboratif de la table, qui a motivé sa conception. Pour la bande son, nous avons bien sûr travaillé avec une musique libre de droits, que nous avons remixée en fonction de nos besoins.

ITAC12

LA PLAQUETTEPlaquette de format A5 pliée verticalement en deux. C’est le premier support informatif de communication. Le premier contact entre les personnes et la table. Elle détaille le nom «ITAC» (Interface Tactile à Application Collaborative) et explique l’usage que nous voulons donner à cette table. Elle a été distribuée aux journées portes ouvertes.

Pour nous suivre :

Pour nous contacter :

http://projet-itac.tumblr.com

http://www.facebook.com/projet.itac

http://twitter.com/itacPro

[email protected]

Interface Tactile à Application Collaborative

Agence TouchDown

WWW.ITAC.ME

ITAC

ITAC13

L’AFFICHEL’affi che de format A3. Elle a été faite pour le lancement du site itac.me. Elle est sobre et met en avant le site. Le QR code est relié au site. Elle a été affi chée dans les couloirs de SeRéCom et dans la cafétéria de l’IUT. Cela la rendait visible notamment lors des journées portes ouvertes.

Notre partenaire Unitag pour le suivie des QR Codes

ITAC14

LE SITE ITACLe site internet est un site vitrine. Il décrit le projet et l’agence. Il permet aux visiteurs de visionner les vidéos et les photos du projet. Le site affi che également les tweets et les liens vers le wiki et le blog. Le site permet au visiteur de s’inscrire à la newsletter.

ITAC15

BLOG & RÉSEAUX SOCIAUX Le blog et les réseaux sociaux permettaient de donner des informations régulièrement sur le projet, son état d’avancement, les partenaires trouvés, ... Nous sommes présent sur Tumblr, pour faire du micro-blogging. Nous avons mis des vidéos des photos, ainsi que des articles.

Nous sommes sur Twitter et Facebook. Pour des informations plus brèves et en temps réel. Twitter nous a permis d’interagir avec des professionnels et d’établir des partenariats. Près de 240 personnes nous suivent sur Twitter. Notamment des professionnels comme :

-D-Link, spécialisé dans le matériel informatique -OVH, hébergeur de site internet -Microsoft Surface (qui suit 500 personnes et qui est suivit par plus de 12 000 personnes) -Unitag, spécialisé dans les QR Codes -SRC Bordeaux -Elephorm, spécialisé dans la formation vidéo -Université de Savoie

et des blogs connus dans le domaine des nouvelles technologies :

-Revue Apple -Semageek -Gérnération Tactile

Nous avons également un compte Instagram. Un réseau social de photos. Nous avons pris régulièrement des photos pour montrer la structure de la table et son évolution. Instagram est directement relié au site itac.me.

ITAC16

LE WIKI Le Wiki référence tous les détails techniques comme le matériel utilisé avec les références et les spécifi cités de chaque élément. Le Wiki s’adresse aux personnes intéressées par l’aspect technique.

ITAC17

LES VIDÉOS Nous avons réalisé plusieurs vidéos nous montrant en train de fabriquer la table. Les vidéos ont été publiées sur notre page Facebook et sur le blog. Elle permettent de montrer concrètement l’avcancement de la table.

D’autres vidéos montrent l’évolution de l’interface, avec son mode de fonctionnement. Ces vidéos permettent de montrer de manière concrète ce qui a été fait et où en est la construction de la table ainsi que le développement de l’interface.

ITAC18

LA NEWSLETTER Nous avons rédigé deux newsletters, une pour noël et une pour le mois de février. Elle ont été envoyées aux partenaires et aux personnes qui se sont inscrites sur le site. Ces newsletters présentaient l’état ainsi que les étapes à venir. Elles avaient pour but principal d’informer les partenaires et de les maintenir dans le projet.

JOURNÉE PORTES OUVERTES Nous avons été présent lors des journées portes ouvertes de l’IUT car c’était une bonne occasion de faire connaître le projet en dehors de l’IUT et de promouvoir la formation. Cela a permis de montrer la table et de la faire essayer à de nombreux visiteurs. Les retombées ont été très positives.

ITAC19

Nous avons réalisé un document qui présente visuellement et succintement notre projet que nous avons utilisé dans le but d’obtenir des partenariats.

PARTENARIATS

ITAC20

PARTENARIATSSuite à l’avancement du projet, nous avons pu avoir plusieurs partenariats dans différents domaines.

P.L.U.M est une société basée près de Marseille développant un outil de gestion de projet en ligne qui permet de faire collaborer l’ensemble des acteurs autour d’applications comme le Gantt ou encore le Gestionnaire de tâches...

Unitag est une agence spécialisée dans le web mobile et le QR Code qui propose la génération de sites mobiles et de QR Codes tout en mesurant le nombre de “flash” effectué.

Audio-Électronique est un magasin de composants électroniques et audio à Chambéry. il est spécialisé dans les compo-sants électroniques et accessoires audio-video.

Semageek est un web magazine dédié à la haute technologie, mais avec un point de vue et une expertise électronique approfondie. Leur ligne éditoriale est le DIY, l’électronique, le high-tech mais aussi la Robotique.

ITAC21

QUELQUES CHIFFRESTWITTER SITE AGENCE

BLOG TUMBLRFACEBOOK

435 tweets827 Abonnements236 Abonnéstel que : UnivSavoie, Miscrosoft Surface, AndroidFr, OVH, PLUM, UNITAG, JDN (journal du net), elephorm.

239 amis48 photos

500 Pages vues3 min temps moyen75% de rebond34 articles3 abonnés

+ de 1000 visites669 visiteurs uniques+ de 1700 pages vuesTemps moyen : 2 min+ de 300 visites avec la publicitié Adword

/ RÉALISATIONSPROGRAMMATION

ITAC23

LOGICIEL ITACLe programme a été développé en Java. Il est basé sur le framework Multitouch 4 Java (MT4J) développé par NuiGroup.

Il peut être éxécuté sous Windows, Mac et Linux.

L’utilisation de ce framework permet de créer des formes, de les placer à n’importe quel endroit de l’écran, et de leur attribuer des propriétés liées à des commandes tactiles.On peut également personnaliser leur apparence à l’aide d’images ou de couleurs.

Les commandes tactiles peuvent être simulées, lors de la programma-tion, à l’aide d’un trackpad multitouch sous Mac, et avec plusieurs souris sur Windows.

Lanceur d’applications - Constitué de cercles

LES APPLICATIONSENVIRONNEMENT DE DÉVELOPPEMENTLe logiciel ITAC et toutes ses composantes ont été développés à l’aide du programme Eclipse.

ITAC24

GESTESL’application permet d’effectuer certains mouvements avec les doigts : - Un tapotement sur l’écran effectue un clic - En maintenant un doigt sur un objet affi ché à l’écran, il est possible de le déplacer - Avec 2 doigts sur un objet, on peut l’agrandir, le rétrécir et le faire pivoter

LES APPLICATIONS

Application de démonstration proposée par MT4J pour tester l’agrandissement d’un objet avec

deux doigts.

Clic effectué sur l’écran d’authentifi cation du logiciel ITAC

ITAC25

LES APPLICATIONSEXEMPLE DE CODECi-contre, le code permettant d’ouvrir et fermer le navigateur d’albums de l’application photo, via un geste de glissement du doigt.

On utilise pour cela un écouteur d’événements de type «drag».

On répercute la translation horizontale effectuée par le doigt, et on l’applique au navigateur, ce qui donne l’impression de le contrôler .

Ci-contre, le code permettant de récupérer le fl ux XML de la météo d’une ville et de le parser pour en extraire les informations dont le programme a besoin.

ITAC26

LOGICIEL ITACLe programme a été développé en Java. Il est basé sur le framework Multitouch 4 Java (MT4J) développée par NuiGroup.

Il peut être éxécuté sous Windows, Mac et Linux.

GESTESL’application permet d’effectuer certains mouvements avec les doigts : - Un tapotement sur l’écran effectue un clic - En maintenant un doigt sur un objet affi ché à l’écran, il est possible de le déplacer - Avec 2 doigts sur un objet, on peut l’agrandir, le rétrécir et le faire pivoter

Lanceur d’applications

LES APPLICATIONS

ITAC27

LES APPLICATIONSEcran d’accueilL’écran d’accueil est un espace d’identifi cation des utilisateurs. On peut choisir la session à ouvrir et entrer son mot de passe via un clavier numérique.

Choix des sessions Clavier numérique permettant d’entrer un mot de passe

ITAC28

LES APPLICATIONSBureauLe bureau est spécifi que à chaque utilisateur : l’image de profi l et le fond d’écran peuvent être modifi és.Sur le bureau, on peut placer différents widgets. Il est possible de les déplacer et leur position est enregistrée, ce qui permet de retrouver son bureau tel qu’on l’avait laissé après s’être déconnecté.On trouve également en bas à droite du bureau, une icône permettant d’ouvrir le lanceur d’applications (à l’image du bouton «démarrer» de windows).

ITAC29

LES APPLICATIONSApplication PhotoC’est la première application qui a été créée pour la table. Elle nous a permis de nous familiariser avec la librairie MT4J et d’étudier la documentation.Cette application a eu droit à plusieurs versions différentes qui ont évolué au fur et à mesure que nous maîtrisions le langage.La version fi nale se présente de la manière suivante : un navigateur d’albums situé à droite. Il permet à l’aide d’un slider de choisir l’album photo à visionner. Lorsqu’on sélectionne un album, son contenu se déploie dans l’interface. On peut alors déplacer, pivoter ou même redimensionner les photos.

Démarrage de l’application Album ouvert

ITAC30

LES APPLICATIONSPianoCette application s’apparente à un widget, elle peut être ouverte plusieurs fois pour jouer du piano à plusieurs. Le piano est redimensionnable et permet de jouer de la musique.

Logiciel de dessinAvec cette application, on peut dessiner en utilisant les doigts. Il est possible de changer la couleur, la taille du pinceau, de sauvegarder son dessin ou bien de l’effacer.

ITAC31

LES APPLICATIONSAir HockeyLe air hockey est un jeu qui se joue à deux. Les joueurs doivent envoyer un palet dans les cages de l’adversaire à l’aide d’une manette que l’on peut déplacer avec le doigt.Le premier joueur marquant 15 points remporte la partie.

Le terrain de jeu

ITAC32

LES APPLICATIONSCarte du mondeCette application permet de visualiser la carte du monde et de zoomer sur les lieux qui nous intéressent. Il est également possible d’affi cher les routes.

Le campus universitaire de Savoie Technolac vu du ciel

ITAC33

MétéoCe widget permet d’affi cher les prévisions météorologiques sur 2 jours. Il affi che le temps qu’il fait dans une dizaines de villes prédéfi nies. On peut changer de ville à l’aide d’un tiroir comportant la liste des villes disponibles.Les informations sont récupérées via l’API Yahoo Weather, sur internet, à l’aide de fl ux XML.

Widget météo fermé Widget météo ouvert

DateCe widget affi che la date et l’heure actuelle. En cliquant dessus, il est possible de faire changer la couleur du texte parmi 3 jeux de couleurs différents.

LES APPLICATIONSWIDGETS

ITAC34

LES APPLICATIONSWIDGETSProgramme TV

Ce widget affi che le programme TV du soir, pour les 6 premières chaînes. Les informations sur les programmes sont récupérées sur internet via le fl ux XML proposé par programme-television.org.

CalculatriceUne calculette permettant d’effectuer les opérations basiques telles que l’addition, la soustraction, la multiplication et la division.

Lecteur MP3Un lecteur MP3 qui permet de lire les fi chiers audio. Il est capable d’affi cher les informations contenues dans les tags ID des fi chiers MP3, telles que le nom de la piste, le nom de l’album, le nom de l’artiste, ...

/ RÉALISATIONSDOMOTIQUE

ITAC36

LA DOMOTIQUENous avons décidé d’intégrer de la domotique dans notre table. En effet quoi de mieux que de pouvoir «piloter» une maison depuis un seul point ? Nous avons donc fait de la table tactile le noyau de la maison afin de rendre cette dernière «intelligente». Nous nous sommes tournés vers une solution «home-made» ou nous avons tout créé grâce à de petites cartes électronique : les cartes Arduino.

ITAC37

ARDUINO - COMMUNICATIONPour la communication en Arduino et la table tactile nous avons décidé d’envoyer les commandes sous forme de trames.

Début de la trame

Port de lʼactionneur (moteur, led, ...)

Fin de la trame

Type dʼactionneur Paramêtres sur lʼactionneur(vitesse moteur, état de la led, ...)

01 255 255255

Exemple de trame envoyée pour modifier la couleur d’une led RVB.ici les 3 paramêtres correspondent aux valeurs en rouge, vert et bleu

ITAC38

LES APPLICATIONSDomotiqueL’application domotique permet d’allumer des lampes dans une maison. Des interrupteurs virtuels permettent d’envoyer un signal aux lampes. Nous avons utilisé une carte arduino reliée en USB à l’ordinateur de la table. Les lampes de la maison sont directement connectées à cette carte.Pour la démonstration, nous avons réalisé une maquette d’une maison, en remplaçant les lampes par des diodes.

Widget domotique allimentant une diode Maquette d’une maison

/ RÉALISATIONSLOGOTYPES

ITAC40

ITAC

Composition généraleLe logo ITAC (Interface Tactile à Application Collaborative) est composé de la manière suivante :

• une main représentant le tactile,• un cercle symbolisant l’union d’un projet autour du tactile,• et une typographie permettant d’identifi er

son nom.

Deux couleurs dominantes :

Le logo possède des proportions qui doivent rester inchangées.

7%

100%

ITAC41

Typographie : IMPACTCette police est gratuite à condition que son utilisation ne soit pas à but commercial.

ITAC42

ITAC

Déclinaison

ITACITAC

ITACITAC ITAC

Niveaux de Gris Impression carbone

Impression sous fond

Niveaux de Gris + impression sous fond

Nous pouvons constater que le logo reste totalement visible, quelle que soit sa taille ou sa couleur.

ITAC43

Erreur à éviterITAC

ITAC ITAC ITACle logo ITAC ne peut subir une

rotation supérieure à 45°le logo ITAC ne doit pas apparaître

dans une couleur différente.Les proportions ne doivent pas être

modifi ées.

L’opacité ne doit pas être modifi ée en dehors d’une utilisation sur

fi ligrane

ITAC ITAC ITACle logo ITAC ne doit pas avoir de

contour.le logo ITAC ne doit pas être modi-

fi é.

La typographie ne doit pas être déplacée, réduite, élargie ou même

coupée.

Le logo ITAC doit garder toutes ses proportions.

ITAC44

Le logo TouchDown est composé de la manière suivante :

• La moitié d’un T se terminant par une pointe de fl èche dirigée vers le bas,• La lettre D,• Les 2 lettres sont reliées par une partie blanche centrale, qui symbolise le cordage que l’on retrouve sur

un ballon de Football Américian.

Deux couleurs dominantes (en plus du blanc):

On veillera à garder les mêmes proportions du logo, à savoir que l’espacement entreles 2 lettres (la largeur du cordage) doit être égal à 2% de la largeur du logo.

Composition générale

#117abc

#570d59

ITAC45

Nous avons choisi le nom TouchDown puisqu’il est associé au fait de mettre des points, de marquer, de gagner pour une équipe.

Notre projet étant de créer une table tactile à moindre coût, le fait d’utiliser le mot TouchDown est un rappel à l’objectif premier de l’agence (le tactile se rapprochant au mot «Touch» et la baisse du prix au mot «Down».

Recherches et symbolisme

La première idée a été d’utiliser la forme d’un casque de football américain pour y apposer les lettres TD symbolisant la «team» TouchDown, l’agence de communication TouchDown. Le rendu étant brouillon et peu synthétique en terme de sens, nous avons décidé de nous limiter aux lettre TD.

En faisant plusieurs tests de disposition et d’entrelacement entre ces 2 lettres nous avons fi nalement opté pour le logo fi nal.

ITAC46

A B C D E F G

A B C D E F G

1

2

3

4

5

6

7

8

10

9

1

2

3

4

5

6

7

8

10

9

Déclinaisons

Pour le choix des couleurs du logo, nous avons repris les codes couleurs des équipes de football américain et de NHL pour rester dans l’esprit d’équipe, de team, de groupe au sein d’une même agence qui se bat pour vaincre.

/ RÉALISATIONSSITE ITAC

ITAC48

CouleursLe site internet se base sur les couleurs dominantes du logo ITAC. C’est pour cela que le site possède peu de couleurs chaudes.

#FFFFFFHex

#969696Hex

#868686Hex

#1D1D1BHex

#002835Hex

ITAC49

Typographie

Cette typographie est utilisée exclusivement pour le contenu du site internet : citation, paragraphe, ...

Helvetica ImpactCette typographie est utilisée pour les titres et le menu.

ITAC50

Story-boardLOGO

ZONEMENU

ZONE CONTENU

BLOC DʼELEMENT

MENU

FOND DU SITE

LOGO

ZONE

CONTENU

BLOC

DʼELEMENT

MENU

la version web la version tablette &

mobile

Nous avons deux zones sur le site afi n d’aérer l’espace de la page web et ainsi bien distinguer le menu et le contenu.

Dans la zone du contenu, chaque partie d’information est regroupée en blocs. C’est à dire que chaque bloc ne contiendra qu’une seule information générale.

Voici des exemples non exhaustifs comme la vidéo de présentation du projet, les partenaires ou encore les médias (vidéos et photos).

Une version mobile/tablette est également disponible, afi n que le site soit adapté à tous les supports.

ITAC51

Disposition des élements écran

20px

920px

700px

20px

20px

200px

20px

ITAC52

Disposition des élements

700px

20px

230px

20px

mobile tablette

/ RÉALISATIONSSITE AGENCE

ITAC54

Site d’agenceCOULEURS & TYPOGRAPHIE

#30163eHex

#64417bHex

#a17141Hex

#c79d50Hex

Couleurs dominantes

Cette typographie est utilisée sur l’ensemble du site.

Helvetica

ITAC55

Story-boardzone menu

Fond du site

Nom

zone de contenu

La partie contenu du site se dévoile lorsque l’utilisateur clique sur une des plaques situées en dessous des cadres. En cliquant, le tableau pivote et laisse place au contenu à savoir: le rôle de la personne, ses traits de caractère, et sa phrase de prédilection.

ITAC56

Disposition des élements écran - état 1

768px

350px

70px

150px

180px

ITAC57

Disposition des élements écran - état 2

/ RÉALISATIONSINTERFACES

ITAC59

Interface

Pour changer vis à vis des interfaces tactiles de l’ipad ou autre(s) tablette(s), nous avons voulu réaliser une interface minimaliste.

Les applications ne sont donc pas disponible directement via un slider comme sur l’ipad : il faut appuyer sur le bouton en bas à droite de l’écran.Ainsi, l’utilisateur a accès à plusieurs applications dont les icônes apparaissent autour du logo ITAC (voir page suivante).

ITAC60

Interface

Apparaissent donc les icônes des applications : photo, piano, air hockey, dessin, fi reworks, google map, et domotique.

/ RÉALISATIONSCONSTRUCTION

ITAC62

Notre table tactile s’inspire essentiellement de la version de Microsoft, à savoir la Microsoft Surface. C’est une table tactile à but commercial qui, dans sa première version, n’était pas destinée au grand public (plus de 10 000$ pièce). Une communauté s’est donc formée pour créer et partager des idées sur des tables tactiles à moindre coût et avec des logiciels open source. C’est donc avec l’aide de la communauté NuiGroup que nous avons pu avoir des informations sur les composants et sur les logiciels à utiliser.

CCV le logiciel de gestion tactitle compatible Mac/Linux/Windows

PRINCIPE DE FONCTIONNEMENT

ITAC63

Vue 3D des éléments constituant la table tactile

PRINCIPE DE FONCTIONNEMENT

ITAC64

ConceptionPour la conception de la table tactile nous avons utilisé le logiciel de CAO : Solidworks par Dassault System.

Ce logiciel nous a permis de visualiser la table avant la phase de construction. Ici par exemple les cotations d’une des planches de façade.

LA CONSTRUCTION

ITAC65

RéalisationAprès finalisation des plans 3D de la table, la phase de construction a débuté.

LA CONSTRUCTION

Construction de l’armature de la table

ITAC66

Dalle TactileLa dalle tactile de notre table a été la partie sur laquelle nous avons passé le plus de temps. Il a en effet fallu acheter et polir 2 plaques de plexiglas, souder plus de 100 leds, et démonter et modifier une webcam. Ci-dessous un schéma explicatif :

Premier test des leds infrarouges en fonctionnement

LA CONSTRUCTION

ITAC67

Electronique Une partie de notre projet consistait à faire de l’électronique. Nous devions concevoir le circuit électronique qui relierai les leds infra-rouges. Pour cela nous avons fait appel à un autre département de l’Université de Savoie, le SFA pour la création de circuits imprimés. Ils ont mis à notre disposition tout le matériel dont nous avions besoin.

Soudure des résistances sur les circuits imprimés

Perçage des circuits imprimés dans les locaux de la fac.

LA CONSTRUCTION

ITAC68

Capture du tactilePour que l’ensemble du système devienne tactile et puisse gérer une multitude de points, nous devions prendre une webcam avec un taux de rafraîchissement assez rapide (70fps) et une qualité convenable. Nous avons donc opté pour une PS3Eye. Il a fallu la modifier pour qu’elle ne capte que les rayons infrarouges lorsque l’on touche la plaque de plexiglass. Il a aussi fallu modifier les objectifs pour qu’elle capte plus de surface sur une plus courte distance.

Test de calibrage de la tableLes nouveaux objectifs de caméra et démontage

LA CONSTRUCTION

ITAC69

FinalisationUne fois tous les éléments installés nous avons pu procéder à l’installation du système d’exploitation. Ensuite nous avons peint la table en noir.

Vue intérieure de la table avec tous les éléments fixés. On peut voir de chaque côté les hauts parleurs, les circuits imprimés.

Au centre le pico-projecteur. En bas à droite, l’ordinateur.

Installation du système d’exploitation. Nous avons choisi Windows 7 pour sa simplicté de modification

LA CONSTRUCTION

/ GESTION DE PROJET

ITAC71

Notre projet étant conséquent, nous nous sommes orientés vers un outil de gestion de projet global, et renommé : PLUM. En envoyant à leur entreprise un simple mail décrivant notre projet, nous avons pu obtenir gratuitement un compte premium de 6 mois, qui nous a été très utile.

Mais même si PLUM est un outil très pratique, nous avons voulu aller plus loin. Nous avons donc mis en place un système de post-it en ligne. Le fait de développer nous-même cet outil nous poussaient à l’utiliser, et c’est pourquoi nous avons choisi cette option. En parallèle à ce système, nous avons ouvert un groupe Facebook réservé aux membres de l’agence. Ainsi, partager des fichiers, des images, ou même des sites en rapport avec le projet était très facile.

OUTILS DE GESTION

ITAC72

Nous nous sommes imposé une réunion d’agence par semaine pour faire un point sur les nouvelles tâches à aborder, et sur celles déjà traitées. Pour chaque réunion, Le chef de projet désignait un président (qui orientait et dirigeait le discours) et un secrétaire (qui mettait par écrit tout ce qui a été dit). Un compte-rendu de réunion était mis en ligne le soir même sur Google Docs.

Au niveau des réunions client, nous a avons souhaité en faire au minimum 2 réunions par mois. Mis à part quelques problèmes de disponibilité, nous avons pu tenir cet objectif, et ainsi être toujours au clair entre notre vue du projet et les attentes du client.

OUTILS DE GESTION

ITAC73

Hardware • Lors du lancement de la table, certaines LEDs surchauffaient, grillaient, et entrainaient une fonte des fils de câblage. Avec l’aide de Grégory HOUZET, nous avons procédé à une restructuration du réseau électronique des LEDs. • La PS3Eye, qui sert à détecter les taches infrarouges créées par les doigts, était perturbée par la lumière extérieure, et captait mal les rayons infrarouges. Sur les conseils de Maxime BERNIER et Grégory HOUZET, nous avons utilisé un morceau de disque d’une vieille disquette afin de ne capter que les rayons lumineux utiles. • Le miroir de projection nous a posé problème au niveau de sa taille : l’espace disponible à l’intérieur du caisson de soutien de la table n’était pas suffisant. Nous avons donc dû procéder à plusieurs découpes pour pouvoir placer facilement et correctement le miroir au sein de la table. • Les dimensions de la table ont aussi compliqué le choix du vidéo-projecteur. Après plusieurs essais, nous avons utilisé un pico-projecteur Samsung. Nous avons pu le fixer en hauteur à l’intérieur de la table et augmenter ainsi la taille de l’image projetée.

Software • Initialement, nous avions choisi Linux pour faire fonctionner la table (du fait de sa gratuité). Mais les drivers de la PS3Eye ne fonctionnaient pas. Nous nous sommes donc rabattus sur la version professionnelle de Windows 7, mais là aussi, quelques problèmes persistaient. Actuellement, la table tactile fonctionne sous Mac.

PROBLÈMES ET SOLUTIONS

/ RETOUR SUR LE PROJETPAR L’ÉQUIPE

ITAC75

Dans l’ensemble et par comparaison avec le projet de l’an dernier je trouve que ce groupe de travail est plus hétérogène et bien plus complet. Avec seulement 2 personnes de plus que dans mon groupe de l’an dernier, nous avons produit un travail bien plus important et nous sommes surtout allés au bout du projet avec un produit: une table tactile qui fonctionne.

Certes rien n’est parfait, si je devais me reprocher une chose ce serait ma perte de motivation lorsque des semaines durant la construction de la table n’avançait pas comme on le souhaitait. Cela posait la question de l’utilité de mon travail en terme de graphisme sur l’interface. En effet y a t’il une utilité à produire quelque chose, que ce soit en terme de programmation, de graphisme ou même de communication si le sujet dont on parle n’est au final qu’utopie?

Je pense que j’avais comme beaucoup d’entre nous besoin de certitudes, mais dans ce genre de projet il est normal que certaines choses vous dépassent. Tout au long du projet nous avons trouvé les solutions à nos problèmes et experimenté ce que le mot persévérance veut dire.

Ce projet a été une très bonne expérience, très enrichissante. Je salue le sérieux et le professionnalisme de chacun des membres de l’équipe qui ont su jouer le jeu et se sont grandement impliqués personnellement. Nous pouvons être fiers d’avoir produit quelque chose de similaire et en même temps d’assez différent de ce qui se fait habituellement dans la formation.J’ai beaucoup appris en terme de gestion de projet, d’échanges dans une équipe. J’ai également appris à appréhender des désaccords, à proposer des idées, à m’imposer parfois.Une note positive globalement, avec une bonne entente et un respect mutuel que l’on a su conserver tout au long du projet avec une équipe soudée dans le travail.

MORGAN CAMEROLA

HUGO BARBIER

ITAC76SIMON HENRY

GUILLAUME DUMOULIN

En intégrant le groupe d’ITAC, j’avais déjà un savoir-faire en matière de 3D que je souhaitais utiliser au profit du projet. Cependant, pour réaliser le trailer de la table, j’ai eu besoin de connaissances que je ne possédais pas. Je me suis donc renseigné, amélioré, et j’ai beaucoup appris sur l’animation 3D. Et grâce à cela, j’ai pu récemment utiliser mes nouvelles compétences pour un projet professionnel.

Ce projet m’a donc permis d’approfondir mes connaissances en 3D, mais aussi de travailler au sein d’une agence, avec des échéances réelles, pour un projet concret. Et étant motivé par nos objectifs, je n’avais aucun mal à passer beaucoup de temps sur le projet. Je pense pouvoir dire honnètement que travailler au sein de l’agence ITAC a été une de mes meilleures expériences de ma deuxième année en SRC.

Pour ma part, j’ai trouvé ce projet très intéréssant. En effet mon envie de faire une table tactile ne datait pas d’SRC et je trouve vraiment bien que les enseignants de la formation SRC nous permettent de faire des projets comme celui la. Mon poste de chef de projet ma permis de faire face aux problèmes de démotivation ainsi qu’au problèmes entre les différents membres de l’équipe. Il y a eu pas mal de désaccords entre les personnes mais chacun a su mettre de l’eau dans son vin pour que le projet se passe du mieu possible.

Malgré les différents problèmes que nous avons eu durant le projet aussi bien matériels, qu’avec les membres de l’équipe ou avec notre client, je trouve que ce projet s’est globalement bien déroulé. Ce fut une très bonne expèrience nous avons tous acquis des compétences dans différents domaines auxquels nous n’aspirions pas forcement au début. Je tiens à féliciter toute l’équipe pour le travail que nous fait ensemble.

ITAC77JEAN DAVID DOS SANTOS

QUENTIN DAMEVINCe projet tuteuré m’a apporté beaucoup. Les conditions ont fait que nous avons dû faire face à plusieurs problèmes. La démotivation de certains membres de l’équipe, un client très occupé et des problèmes qui ont ralenti la fabrication de la table et donc modifié notre planning . J’ai donc appris à faire face à ce genre d’inconvenances. Surtout à rebondir en cas de contretemps.

Pour moi le projet a été plutôt agréable car faire une table tactile était déjà à la base un projet enthousiasment. De plus nous avons pu choisir avec qui nous voulions travailler contrairement à l’année dernière. Ainsi nous nous entendions bien. Le fait de travailler avec des amis m’a aussi appris à avoir plus de tact quand je voulais critiquer quelque chose. Car ils m’ont bien signifié que j’en manquais parfois !

Pour ma part, J’ai vécu une bonne expérience au sein de l’équipe mais aussi autour de cette table tactile qui m’a permis d’apprendre à travailler avec des personnes totalement différentes de moi. Ayant eu différents postes au sein de ce projet comme la plupart de l’équipe, cela a permis de souffler un peu mais aussi d’acquérir de nouvelles compétences totalement diverses et variées.

Le fait de partir « à l’aveugle » sur un sujet comme celui-là (pour ma part) , nous avons pu faire face aux problèmes survenus sur la table tactile et de trouver des solutions rapides et efficaces dans un minimum de temps, ce qui reflètent l’avenir professionnel et la maturité.

Je ne regrette pas d’avoir fait parti de ce projet qui s’est bien déroulé en général et cela m’a permis aussi de savoir prendre sur soi sur des désaccords afin d’avoir la meilleure ambiance possible entre les membres de l’équipe.

Bravo à toute l’équipe.

ITAC78

Travailler pour le projet ITAC a été une grande expérience pour moi. Cela m’a permis de découvrir les environnements tactiles au travers de la programmation orientée objet, ainsi que sur le plan matériel.La mise en pratique de la gestion de projet de type SCRUM nous a permis de mieux nous organiser face à ce projet.Je regrette d’avoir été l’unique développeur du projet. La mise en application des concepts établis par le groupe est devenue de plus en plus difficile. Une personne supplémentaire pour programmer aurait permis d’avancer plus rapidement et plus efficacement.Je suis très satisfait de notre travail, et jamais je n’aurais pensé pouvoir en arriver là.

NICOLAS LEFEBVRE

/ PLANNING PRÉVISIONNEL

ITAC80

Les réunions clients ne sont pas prédéfinies, le chef de projet s’engage à en organiser au moins une par mois (hors période scolaire).

Pour la planification des tâches importantes voici les dates :

Réalisation du logo : Semaine 37 (2011)Validation la Semaine 38 par le client

Graphisme + Développement du site : Semaine 48 (2011)Validation la Semaine 48 par le client

Construction de la table tactile terminée : Fin décembre (2011)

Application ITAC beta : Semaine 4 (2012)Évaluation à la recette

Journées portes-ouvertes : Mars

Application ITAC V1 : Semaine 13 (2012)Évaluation à la soutenance

/ GLOSSAIRE

ITAC82

learning games : jeux vidéos éducatifs, ayant une vocation à l’apprentissage

QRcode : c’est un code barre contenant des informations (URL, Contact, ...)

Wiki : site internet du même type que le site Wikipédia

Tumblr : Plateforme de micro-blogging

DIY : «Do It Yourself», terme désignant les objets à créer soi-même

Framework : Bibliothèque de logiciel simplifiant la création d’application

Trackpad : Pavé tactile qui fait office de souris sur les ordinateurs portable

«Drag» : terme anglais qui signifie déplacer

Flux XML : données en temps réel sous la forme de fichier dans le language XML

API : ensemble de fonctions, de programmes qui permettent l’intéraction entre les logiciels

Widget : Petit programme sur le bureau contenant des informations pratiques

Tag ID : Information contenu dans un fichier de musique MP3 (Auteur, Titre, ...)

«Home Made» : Principe de tout faire soi-même, similaire à DIY

NHL : Ligue de football américain

Fireworks: Logiciel de la suite Adobe

CAO : Conception Assisté par Ordinateur

FPS : Frame per second - nombre d’image par seconde

PS3Eye : nom de la webcam pour la Playstation 3

GLOSSAIRE

/ ANNEXE

ITAC84

PLAQUETTE PARTENARIATS

ITAC85

PLAQUETTE PARTENARIATS

ITAC86

PLAQUETTE PARTENARIATS

ITAC87

RECHERCHE DE LOGOS

ITAC88

ITAC

RECHERCHE DE LOGOS

ITAC89

CAMPAGNE ADWORD

ITAC90

POST-ITAC

ITAC91

RENDUS 3D TRAILER

ITAC92

RENDUS 3D TRAILER

ITAC93

APPLICATION PHOTO V1

ITAC94

ECRAN DE SESSION V2

ITAC95

ECRAN DE SESSION V2

ITAC96

LAUNCHER ITAC

ITAC97

APPLICATION PHOTO

ITAC98

BUREAU ITAC

ITAC99

JEUX AIR HOCKEY

ITAC100

NEWSLETTER

ITAC101

GESTION P.L.U.M

ITAC102

VUE ARTISTIQUE DE LA TABLE

ITAC103

1ERE VERSION SITE ITAC

ITAC104

LOGO A TABLE (WEB SERIE)

ITAC105

CHOIX LOGO TOUCHDOWN

ITAC106

LOGO TOUCHDOWN

ITAC107

LOGO TOUCHDOWN

ITAC108

FOND D’ÉCRAN TOUCHDOWN