Rapport de projet by Jean David DOS SANTOS

Rapport final de projet

ITAC

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

ITAC

SOMMAIRE

Remerciements . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.4 Projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.7 Client . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.8 Agence . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.8 Réalisations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.9

ITAC

Gestion du projet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.70 Problèmes & solutions . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.73 Bilans personnels . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.74 Glossaire . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.82 Annexe . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . p.83

/ REMERCIEMENTS

Thibault Carron Gregory Houzet Maxime Bernier Lionel Langain Serges Hélies Virginie Colombel Jeremy Machenin Fréderic Garet Alexis Vistalli VMComix Tealcoun

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.

ITAC

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

/ CONTEXTE

LA DEMANDE 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.

ITAC

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.

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*.

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.

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

ITAC

Les rôles sont répartis de la manière suivante : Guillaume Dumoulin , Chef de projet - Concepteur (matériel) Quentin Damevin , Chargé de Communication Hugo Barbier , Chargé de Communication - Rédacteur Simon Henry , Développeur - Concepteur 3D Nicolas Lefebvre , Développeur (logiciel) Jean-David Dos-Santos , Graphiste - Développeur (Web) Morgan Camerola , Graphiste

/ RÉALISATIONS

COMMUNICATION

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 afin 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 afin 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éfini 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.

ITAC

LE TRAILER

Utiliser 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.

11 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.

ITAC

LA PLAQUETTE Agence TouchDown

Plaquette 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.

ITAC cation

Interface Tactile à Appli Collaborative

WWW.ITAC.ME Pour nous contacter :

projet.itac@gmail.com

Pour nous suivre : .com http://projet-itac.tumblr

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

http://twitter.com/itacPro

ITAC

L’AFFICHE

L’afﬁ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é afﬁ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.

ITAC Notre partenaire Unitag pour le suivie des QR Codes

LE SITE ITAC

Le 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 afﬁche également les tweets et les liens vers le wiki et le blog. Le site permet au visiteur de s’inscrire à la newsletter.

ITAC

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

ITAC

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.

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éciﬁcités de chaque élément. Le Wiki s’adresse aux personnes intéressées par l’aspect technique.

ITAC

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.

ITAC

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 OUVERTESI TAC

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.

PARTENARIATS 19

ITAC 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 Suite à 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 composants électroniques et accessoires audio-video.

ITAC

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.

QUELQUES CHIFFRES TWITTER

SITE AGENCE + de 1000 visites

435 tweets 827 Abonnements 236 Abonnés

tel que : UnivSavoie, Miscrosoft Surface, AndroidFr, OVH, PLUM, UNITAG, JDN (journal du net), elephorm.

FACEBOOK 239 amis 48 photos

ITAC

669 visiteurs uniques + de 1700 pages vues Temps moyen : 2 min + de 300 visites avec la publicitié Adword

BLOG TUMBLR 500 Pages vues 3 min temps moyen 75% de rebond 34 articles 3 abonnés

/ RÉALISATIONS

PROGRAMMATION

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

LOGICIEL ITAC

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

ITAC

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 programmation, à l’aide d’un trackpad multitouch sous Mac, et avec plusieurs souris sur Windows. Lanceur d’applications - Constitué de cercles

LES APPLICATIONS GESTES L’application permet d’effectuer certains mouvements avec les doigts : - Un tapotement sur l’écran effectue un clic - En maintenant un doigt sur un objet afﬁ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

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

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

LES APPLICATIONS EXEMPLE DE CODE Ci-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 .

ITAC

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

LES APPLICATIONS LOGICIEL ITAC Le 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.

GESTES

ITAC

L’application permet d’effectuer certains mouvements avec les doigts : - Un tapotement sur l’écran effectue un clic - En maintenant un doigt sur un objet afﬁ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 Ecran d’accueil L’écran d’accueil est un espace d’identiﬁcation des utilisateurs. On peut choisir la session à ouvrir et entrer son mot de passe via un clavier numérique.

ITAC Choix des sessions

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

LES APPLICATIONS Bureau Le bureau est spécifique à chaque utilisateur : l’image de profil 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).

ITAC

LES APPLICATIONS Application Photo C’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 ﬁ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.

ITAC Démarrage de l’application

Album ouvert

LES APPLICATIONS Piano Cette 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 dessin

ITAC

Avec 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.

LES APPLICATIONS Air Hockey Le 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.

ITAC Le terrain de jeu

LES APPLICATIONS Carte du monde Cette application permet de visualiser la carte du monde et de zoomer sur les lieux qui nous intéressent. Il est également possible d’afﬁcher les routes.

ITAC Le campus universitaire de Savoie Technolac vu du ciel

LES APPLICATIONS

WIDGETS

Météo

Ce widget permet d’afficher les prévisions météorologiques sur 2 jours. Il affiche le temps qu’il fait dans une dizaines de villes prédéfinies. 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 flux XML.

Date

ITAC

Widget météo fermé

Widget météo ouvert

Ce widget afﬁ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 APPLICATIONS Programme TV

WIDGETS

Ce widget afﬁ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 ﬂux XML proposé par programme-television.org.

Calculatrice

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

Lecteur MP3

ITAC

Un lecteur MP3 qui permet de lire les fichiers audio. Il est capable d’afficher les informations contenues dans les tags ID des fichiers MP3, telles que le nom de la piste, le nom de l’album, le nom de l’artiste, ...

/ RÉALISATIONS

DOMOTIQUE

LA DOMOTIQUE Nous 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.

ITAC

ARDUINO - COMMUNICATION Pour 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

ITAC

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

Type dʼactionneur

255

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

LES APPLICATIONS Domotique

L’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.

ITAC Widget domotique allimentant une diode

Maquette d’une maison

/ RÉALISATIONS LOGOTYPES

Composition générale Le 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’identiﬁer son nom.

Deux couleurs dominantes :

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

100%

Typographie : IMPACT Cette police est gratuite Ă condition que son utilisation ne soit pas Ă but commercial.

ITAC

DĂŠclinaison

Niveaux de Gris + impression sous fond

Niveaux de Gris

ITAC

Impression carbone

ITAC

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

Impression sous fond

Erreur à éviter IT A C le logo ITAC ne peut subir une rotation supérieure à 45°

ITAC le logo ITAC ne doit pas avoir de contour.

ITAC

le logo ITAC ne doit pas apparaître dans une couleur différente.

Les proportions ne doivent pas être modiﬁées.

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

ITAC le logo ITAC ne doit pas être modiﬁé.

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

ITAC Le logo ITAC doit garder toutes ses proportions.

Composition générale Le logo TouchDown est composé de la manière suivante : • • •

La moitié d’un T se terminant par une pointe de ﬂè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):

#117abc

#570d59

ITAC

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

Recherches et symbolisme 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».

45 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.

ITAC

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 ﬁnalement opté pour le logo ﬁnal.

Déclinaisons A

ITAC

10 A

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ÉALISATIONS

SITE ITAC

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

ITAC #FFFFFF Hex

#969696 Hex

#868686 Hex

#1D1D1B Hex

#002835 Hex

Typographie

Helvetica

ITAC

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

Impact

Cette typographie est utilisĂŠe pour les titres et le menu.

Story-board LOGO

FOND DU SITE

LOGO

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

ZONE CONTENU

BLOC DʼELEMENT

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, aﬁn que le site soit adapté à tous les supports.

ZONE CONTENU

BLOC DʼELEMENT

ZONE MENU

ITAC la version web

la version tablette & mobile

Disposition des élements

écran 920px

20px 200px 700px

20px

ITAC

Disposition des ĂŠlements

mobile

tablette

700px

230px

20px

52 20px

ITAC

/ RÉALISATIONS

SITE AGENCE

Site d’agence COULEURS & TYPOGRAPHIE

#30163e Hex

#64417b Hex

#a17141 Hex

Couleurs dominantes

ITAC #c79d50 Hex

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

Story-board zone menu

Fond du site

zone de contenu

ITAC

Nom

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.

Disposition des élements écran - état 1

350px

150px 70px

ITAC 180px

768px

Disposition des élements écran - état 2

ITAC

/ RÉALISATIONS

INTERFACES

Interface

ITAC 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).

Interface

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

/ RÉALISATIONS

CONSTRUCTION

PRINCIPE DE FONCTIONNEMENT 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.

ITAC

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

PRINCIPE DE FONCTIONNEMENT

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

LA CONSTRUCTION Conception

Pour 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.

ITAC

LA CONSTRUCTION Réalisation

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

ITAC Construction de l’armature de la table

LA CONSTRUCTION Dalle Tactile

La 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 :

ITAC

Premier test des leds infrarouges en fonctionnement

LA CONSTRUCTION Electronique

Une partie de notre projet consistait à faire de l’électronique. Nous devions concevoir le circuit électronique qui relierai les leds infrarouges. 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

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

LA CONSTRUCTION Capture du tactile

Pour 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.

ITAC

Les nouveaux objectifs de caméra et démontage

Test de calibrage de la table

LA CONSTRUCTION Finalisation

Une 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.

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

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.

/ GESTION DE PROJET

OUTILS DE GESTION 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.

ITAC

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 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.

ITAC

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.

PROBLÈMES ET SOLUTIONS

Hardware

Software

• 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.

• 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.

ITAC

/ RETOUR SUR LE PROJET

PAR L’ÉQUIPE

HUGO BARBIER

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

ITAC

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.

GUILLAUME DUMOULIN

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.

SIMON HENRY

ITAC

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.

QUENTIN DAMEVIN Ce 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 !

JEAN DAVID DOS SANTOS

ITAC

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.

NICOLAS LEFEBVRE 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à.

ITAC

/ PLANNING PRÉVISIONNEL

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)

Journées portes-ouvertes : Mars

Validation la Semaine 38 par le client

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

ITAC

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

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

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

/ GLOSSAIRE

GLOSSAIRE 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

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, ...)

DIY : «Do It Yourself», terme désignant les objets à

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

Framework : Bibliothèque de logiciel simplifiant la

NHL : Ligue de football américain

créer soi-même

création d’application

ITAC

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

similaire à DIY

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

/ ANNEXE

PLAQUETTE PARTENARIATS

ITAC

PLAQUETTE PARTENARIATS

ITAC

PLAQUETTE PARTENARIATS

ITAC

RECHERCHE DE LOGOS

ITAC

RECHERCHE DE LOGOS

ITAC ITAC

CAMPAGNE ADWORD

ITAC

POST-ITAC

ITAC

RENDUS 3D TRAILER

ITAC

RENDUS 3D TRAILER

ITAC

APPLICATION PHOTO V1

ITAC

ECRAN DE SESSION V2

ITAC

ECRAN DE SESSION V2

ITAC

LAUNCHER ITAC

ITAC

APPLICATION PHOTO

ITAC

BUREAU ITAC

ITAC

JEUX AIR HOCKEY

ITAC

NEWSLETTER

100

ITAC

GESTION P.L.U.M

101

ITAC

VUE ARTISTIQUE DE LA TABLE

102

ITAC

1ERE VERSION SITE ITAC

103

ITAC

LOGO A TABLE (WEB SERIE)

104

ITAC

CHOIX LOGO TOUCHDOWN

105

ITAC

LOGO TOUCHDOWN

106

ITAC

LOGO TOUCHDOWN

107

ITAC

FOND D’ÉCRAN TOUCHDOWN

108

ITAC