air - User contributions [en]

Proj-2014-2015-SmartClassRoom

2015-03-28T13:25:03Z

RICM4-prj14-grp12:

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart] (Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible)

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

= Gestion de projet =
==Management et leadership==
Nous avons décidé, malgré la séparation du projet en deux sous parties (et donc notre division en deux groupes de deux personnes), de travailler ensemble au même endroit tous les jours ouvrables de la semaine. Cela avait pour but de nous permettre à tout instant de connaître l’état d’avancement des deux projets. Les caractéristiques de chacun étaient ainsi bien exploitées. La communication interpersonnelle se faisait donc en continu (utilisation de réseaux sociaux les week-ends), afin que nul ne reste bloqué trop longtemps sur un problème. Issus de milieux très différents, la présence d’un arbitre a parfois été nécessaire. Le moindre conflit était immédiatement contrôlé par la présence d’une troisième personne prenant le rôle d’arbitre (les rôles ont tournés au cours du projet). Ces conflits étaient souvent dûs à la trop longue durée de côtoiement, côtoiement qui paradoxalement nous permettait aussi de progresser bien plus vite pour la réalisation des tâches.

Afin d'être le plus productif possible nous nous sommes séparés en deux groupes selon le sujet sur lequel chacun souhaitait travailler. De plus, nous avons organisé certaines activités hors travail (repas, bowling) afin de renforcer les liens ainsi que le respect mutuel.

Les premières semaines ont été marquées par la présence de nombreux brainstormings, afin de cibler et séparer intelligemment les taches. Par la suite, ces séances se sont plus espacées et étaient propres à chaque partie du projet.

Un autre aspect management de notre projet était la gestion des deux étudiants de DUT. Afin de les motiver au maximum, nous leur avons laissé le choix du projet. Nous organisions ensuite des réunions hebdomadaires en fonction de leurs disponibilités. Les tâches qui leur étaient proposées devaient permettre des résultats visibles assez rapides (toujours dans le but de les motiver).

Notre groupe a la particularité d’être scindée en deux. De ce fait un leadership globale ne peut pas être mis en place. On a donc plutôt affaire à un management participatif qui implique que chaque membre va détailler le travail réalisé à son binôme. En d’autres termes, le second membre est chargé de superviser et d’apporter sa vision et son jugement sur le travail de son collègue. Par la suite, ils vont présenter à intervalles moins réguliers l’état d’avancement des objectifs principaux (sprint) à l’autre binôme. L’objectif était qu’un groupe pouvait solliciter temporairement l’aide d’un membre de l’autre groupe, pour effectuer une tâche complexe.

A chaque objectif principal à réaliser, nous avons décidé de définir des sous objectifs pour chaque membre en restreignant les interdépendances. Cela a permis d’éviter les conflits au maximum.
Pour résoudre les conflits, nous avons sollicité un intervenant extérieur qui était au courant de l’avancement détaillé de notre projet.

==Diagramme de Gantt==
[[File:GanttDiagram.png|500px|thumb|center]]

==Gestion des risques==
Notre projet étant pour l’instant à but non lucratif, il est soumis principalement à des risques techniques, matériels et de délais. Pour les identifier nous avons défini la matrice des risques ci-dessous :
[[File:MatriceRisques.png|500px|thumb|center]]

=Récapitulatif=
Ce projet de fin d’étude, qui s’est étalé sur deux mois, est le plus gros projet que nous avons eu à réaliser durant notre cursus à Polytech. Ces deux mois nous ont donc poussé à nous poser de nouvelles questions sur la gestion d’un groupe de personnes travaillant sur un même sujet mais avec deux directions différentes. Le groupe était composé de quatre étudiants RICM5 ainsi que de deux DUTs. Le cours de Management pour l'innovation nous a permis de découvrir de nouvelles techniques qui nous ont permis de gérer ces deux situations. Il nous a permis d’approfondir et de mettre en pratique des notions que nous avons abordées lors des années précédentes.

Nous avons suivi le cahier des charges et effectué l’ensemble des tâches à réaliser grâce à une bonne motivation, une entraide journalière et une répartition intelligente et concertée des tâches. Nous avons aussi pu éviter les conflits en évitant qu’ils s’enveniment et en promulguant de multiples activités hors travail.
D’un point de vue personnel, ce projet nous a tous permis d’élargir nos compétences et de découvrir de nouvelles technologies et procédés.

Proj-2014-2015-SmartClassRoom/UML

2015-03-28T13:23:33Z

RICM4-prj14-grp12: /* Architecture */

Proj-2014-2015-SmartClassRoom/UML

2015-03-28T13:23:10Z

RICM4-prj14-grp12: /* Diagrammes projet Tableau interactif */

Proj-2014-2015-SmartClassRoom/UML

2015-03-28T13:22:58Z

RICM4-prj14-grp12:

Proj-2014-2015-SmartClassRoom/UML

2015-03-28T13:18:14Z

RICM4-prj14-grp12: /* Use Case */

File:MatriceRisques.png

2015-03-28T13:15:05Z

RICM4-prj14-grp12:

Proj-2014-2015-SmartClassRoom

2015-03-28T13:14:23Z

RICM4-prj14-grp12: /* Gestion de projet */

Proj-2014-2015-SmartClassRoom

2015-03-28T13:08:17Z

RICM4-prj14-grp12: /* Management et leadership */

File:GanttDiagram.png

2015-03-28T12:57:15Z

RICM4-prj14-grp12:

Proj-2014-2015-SmartClassRoom

2015-03-28T12:56:12Z

RICM4-prj14-grp12: /* Diagramme de Gantt */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart] (Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible)

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

= Gestion de projet =
==Management et leadership==
Nous avons décidé, malgré la séparation du projet en deux sous parties (et donc notre division en deux groupes de deux personnes), de travailler ensemble au même endroit tous les jours ouvrables de la semaine. Cela avait pour but de nous permettre à tout instant de connaître l’état d’avancement des deux projets. Les caractéristiques de chacun étaient ainsi bien exploitées. La communication interpersonnelle se faisait donc en continu (utilisation de réseaux sociaux les week-ends), afin que nul ne reste bloqué trop longtemps sur un problème. Issus de milieux très différents, la présence d’un arbitre a parfois été nécessaire. Le moindre conflit était immédiatement contrôlé par la présence d’une troisième personne prenant le rôle d’arbitre (les rôles ont tournés au cours du projet). Ces conflits étaient souvent dûs à la trop longue durée de côtoiement, côtoiement qui paradoxalement nous permettait aussi de progresser bien plus vite pour la réalisation des tâches.

Afin d'être le plus productif possible nous nous sommes séparés en deux groupes selon le sujet sur lequel chacun souhaitait travailler. De plus, nous avons organisé certaines activités hors travail (repas, bowling) afin de renforcer les liens ainsi que le respect mutuel.

Les premières semaines ont été marquées par la présence de nombreux brainstormings, afin de cibler et séparer intelligemment les taches. Par la suite, ces séances se sont plus espacées et étaient propres à chaque partie du projet.

Un autre aspect management de notre projet était la gestion des deux étudiants de DUT. Afin de les motiver au maximum, nous leur avons laissé le choix du projet. Nous organisions ensuite des réunions hebdomadaires en fonctions de leurs disponibilités. Les tâches qui leur étaient proposées devaient permettre des résultats visibles assez rapides (toujours dans le but de les motiver).

Notre groupe a la particularité d’être scindée en deux. De ce fait un leadership globale ne peut pas être mis en place. On a donc plutôt affaire à un management participatif qui implique que chaque membre va détailler le travail réalisé à son binôme. En d’autres termes, le second membre est chargé de superviser et d’apporter sa vision et son jugement sur le travail de son collègue. Par la suite, ils vont présenter à intervalles moins réguliers l’état d’avancement des objectifs principaux (sprint) à l’autre binôme. L’objectif était qu’un groupe pouvait solliciter temporairement l’aide d’un membre de l’autre groupe, pour effectuer une tâche complexe.

A chaque objectif principal à réaliser, nous avons décidé de définir des sous objectifs pour chaque membre en restreignant les interdépendances. Cela a permis d’éviter les conflits au maximum.
Pour résoudre les conflits, nous avons sollicité un intervenant extérieur qui était au courant de l’avancement détaillé de notre projet.

==Diagramme de Gantt==
[[File:GanttDiagram.png|500px|thumb|center]]

Proj-2014-2015-SmartClassRoom

2015-03-28T12:55:07Z

RICM4-prj14-grp12: /* Gestion de projet */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart] (Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible)

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

= Gestion de projet =
==Management et leadership==
Nous avons décidé, malgré la séparation du projet en deux sous parties (et donc notre division en deux groupes de deux personnes), de travailler ensemble au même endroit tous les jours ouvrables de la semaine. Cela avait pour but de nous permettre à tout instant de connaître l’état d’avancement des deux projets. Les caractéristiques de chacun étaient ainsi bien exploitées. La communication interpersonnelle se faisait donc en continu (utilisation de réseaux sociaux les week-ends), afin que nul ne reste bloqué trop longtemps sur un problème. Issus de milieux très différents, la présence d’un arbitre a parfois été nécessaire. Le moindre conflit était immédiatement contrôlé par la présence d’une troisième personne prenant le rôle d’arbitre (les rôles ont tournés au cours du projet). Ces conflits étaient souvent dûs à la trop longue durée de côtoiement, côtoiement qui paradoxalement nous permettait aussi de progresser bien plus vite pour la réalisation des tâches.

Afin d'être le plus productif possible nous nous sommes séparés en deux groupes selon le sujet sur lequel chacun souhaitait travailler. De plus, nous avons organisé certaines activités hors travail (repas, bowling) afin de renforcer les liens ainsi que le respect mutuel.

Les premières semaines ont été marquées par la présence de nombreux brainstormings, afin de cibler et séparer intelligemment les taches. Par la suite, ces séances se sont plus espacées et étaient propres à chaque partie du projet.

Un autre aspect management de notre projet était la gestion des deux étudiants de DUT. Afin de les motiver au maximum, nous leur avons laissé le choix du projet. Nous organisions ensuite des réunions hebdomadaires en fonctions de leurs disponibilités. Les tâches qui leur étaient proposées devaient permettre des résultats visibles assez rapides (toujours dans le but de les motiver).

Notre groupe a la particularité d’être scindée en deux. De ce fait un leadership globale ne peut pas être mis en place. On a donc plutôt affaire à un management participatif qui implique que chaque membre va détailler le travail réalisé à son binôme. En d’autres termes, le second membre est chargé de superviser et d’apporter sa vision et son jugement sur le travail de son collègue. Par la suite, ils vont présenter à intervalles moins réguliers l’état d’avancement des objectifs principaux (sprint) à l’autre binôme. L’objectif était qu’un groupe pouvait solliciter temporairement l’aide d’un membre de l’autre groupe, pour effectuer une tâche complexe.

A chaque objectif principal à réaliser, nous avons décidé de définir des sous objectifs pour chaque membre en restreignant les interdépendances. Cela a permis d’éviter les conflits au maximum.
Pour résoudre les conflits, nous avons sollicité un intervenant extérieur qui était au courant de l’avancement détaillé de notre projet.

==Diagramme de Gantt==

Proj-2014-2015-SmartClassRoom

2015-03-28T12:54:24Z

RICM4-prj14-grp12: /* Management et leadership */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart] (Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible)

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

= Gestion de projet =
==Management et leadership==
Nous avons décidé, malgré la séparation du projet en deux sous parties (et donc notre division en deux groupes de deux personnes), de travailler ensemble au même endroit tous les jours ouvrables de la semaine. Cela avait pour but de nous permettre à tout instant de connaître l’état d’avancement des deux projets. Les caractéristiques de chacun étaient ainsi bien exploitées. La communication interpersonnelle se faisait donc en continu (utilisation de réseaux sociaux les week-ends), afin que nul ne reste bloqué trop longtemps sur un problème. Issus de milieux très différents, la présence d’un arbitre a parfois été nécessaire. Le moindre conflit était immédiatement contrôlé par la présence d’une troisième personne prenant le rôle d’arbitre (les rôles ont tournés au cours du projet). Ces conflits étaient souvent dûs à la trop longue durée de côtoiement, côtoiement qui paradoxalement nous permettait aussi de progresser bien plus vite pour la réalisation des tâches.

Afin d'être le plus productif possible nous nous sommes séparés en deux groupes selon le sujet sur lequel chacun souhaitait travailler. De plus, nous avons organisé certaines activités hors travail (repas, bowling) afin de renforcer les liens ainsi que le respect mutuel.

Les premières semaines ont été marquées par la présence de nombreux brainstormings, afin de cibler et séparer intelligemment les taches. Par la suite, ces séances se sont plus espacées et étaient propres à chaque partie du projet.

Un autre aspect management de notre projet était la gestion des deux étudiants de DUT. Afin de les motiver au maximum, nous leur avons laissé le choix du projet. Nous organisions ensuite des réunions hebdomadaires en fonctions de leurs disponibilités. Les tâches qui leur étaient proposées devaient permettre des résultats visibles assez rapides (toujours dans le but de les motiver).

Notre groupe a la particularité d’être scindée en deux. De ce fait un leadership globale ne peut pas être mis en place. On a donc plutôt affaire à un management participatif qui implique que chaque membre va détailler le travail réalisé à son binôme. En d’autres termes, le second membre est chargé de superviser et d’apporter sa vision et son jugement sur le travail de son collègue. Par la suite, ils vont présenter à intervalles moins réguliers l’état d’avancement des objectifs principaux (sprint) à l’autre binôme. L’objectif était qu’un groupe pouvait solliciter temporairement l’aide d’un membre de l’autre groupe, pour effectuer une tâche complexe.

A chaque objectif principal à réaliser, nous avons décidé de définir des sous objectifs pour chaque membre en restreignant les interdépendances. Cela a permis d’éviter les conflits au maximum.
Pour résoudre les conflits, nous avons sollicité un intervenant extérieur qui était au courant de l’avancement détaillé de notre projet.

Proj-2014-2015-SmartClassRoom

2015-03-28T12:52:11Z

RICM4-prj14-grp12: /* Gestion de projet */

Proj-2014-2015-SmartClassRoom

2015-03-28T12:52:01Z

RICM4-prj14-grp12: /* Gestion de projet */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart] (Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible)

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

= Gestion de projet =
==Management et leadership
Nous avons décidé, malgré la séparation du projet en deux sous parties (et donc notre division en deux groupes de deux personnes), de travailler ensemble au même endroit tous les jours ouvrables de la semaine. Cela avait pour but de nous permettre à tout instant de connaître l’état d’avancement des deux projets. Les caractéristiques de chacun étaient ainsi bien exploitées. La communication interpersonnelle se faisait donc en continu (utilisation de réseaux sociaux les week-ends), afin que nul ne reste bloqué trop longtemps sur un problème. Issus de milieux très différents, la présence d’un arbitre a parfois été nécessaire. Le moindre conflit était immédiatement contrôlé par la présence d’une troisième personne prenant le rôle d’arbitre (les rôles ont tournés au cours du projet). Ces conflits étaient souvent dûs à la trop longue durée de côtoiement, côtoiement qui paradoxalement nous permettait aussi de progresser bien plus vite pour la réalisation des tâches.

Afin d'être le plus productif possible nous nous sommes séparés en deux groupes selon le sujet sur lequel chacun souhaitait travailler. De plus, nous avons organisé certaines activités hors travail (repas, bowling) afin de renforcer les liens ainsi que le respect mutuel.

Les premières semaines ont été marquées par la présence de nombreux brainstormings, afin de cibler et séparer intelligemment les taches. Par la suite, ces séances se sont plus espacées et étaient propres à chaque partie du projet.

Proj-2014-2015-SmartClassRoom

2015-03-28T12:48:43Z

RICM4-prj14-grp12:

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart] (Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible)

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

= Gestion de projet =
Nous avons décidé, malgré la séparation du projet en deux sous parties (et donc notre division en deux groupes de deux personnes), de travailler ensemble au même endroit tous les jours de semaine. Cela avait pour but de nous permettre à tout instant de connaître l’état d’avancement des deux projets. Les caractéristiques de chacun étaient ainsi bien exploitées car proposées au
moindre problème. La communication interpersonnelle se faisait donc en continue (utilisation
de réseaux sociaux les week-ends), afin que nul ne reste bloqué trop longtemps.
Issus de milieux très différents, la présence d’un arbitre a parfois été nécessaire. Le moindre
conflit était immédiatement contrôlé par la présence d’une troisième personne prenant le rôle
d’arbitre (les rôles ont tournés au cours du projet). Ces conflits étaient souvent dû à la trop
longue durée de côtoiement, côtoiement qui paradoxalement nous permettait aussi de
progresser bien plus vite pour la réalisation des taches.
Afin de nous rendre le plus productif possible nous nous sommes séparés en deux groupes
selon le sujet sur lequel chacun souhaitait travaillé. De plus, nous nous sommes organisé
certaines activités hors travail (repas, bowling) afin de renforcer les liens ainsi que le respect
mutuel.

Les premières semaines ont été marqué par la présence de nombreux brainstormings, afin de
cibler et séparer intelligemment les taches. Par la suite, ces séances se sont plus espacées et
étaient propre à chaque partie du projet.

Proj-2014-2015-SmartClassRoom

2015-03-26T11:09:54Z

RICM4-prj14-grp12: /* Documents liés */

Proj-2014-2015-SmartClassRoom

2015-03-26T11:09:27Z

RICM4-prj14-grp12: /* Documents liés */

Proj-2014-2015-SmartClassRoom

2015-03-26T11:08:48Z

RICM4-prj14-grp12: /* Documents liés */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

Pour des raisons de confidentialité, une seule partie du code (celle du Tiled Display) est accessible
* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Projets 2014-2015

2015-03-25T19:34:17Z

RICM4-prj14-grp12: /* Projet Semestre S10 */

<<[[Projets 2013-2014]] [[Projets|^Projets^]] [[Projets 2015-2016]]>>

=RICM=
==RICM3==

==RICM4==

* '''Evaluation à mi-parcours le lundi 2 mars''': Format: 10min (5min de présentation 3 slides au plus, 5min de discussion). Cette évaluation sera prise en compte dans la note finale.

'''Consignes générales:'''

* '''Vous devez être pro-actifs !!!''': Si des points sont pas ou mals spécifiés, vous le faîtes et vous justifiez vos choix. Pour les problèmes techniques éventuels vous pouvez: vous creusez la question, vous contactez l'auteur du code si il y a lieux, vous faites un rapport de bug ('''Attention:''' ca se prépare !), vous soumettez un patch, vous contactez l'enseignant ou la personne suivant le projet.

* '''Vous devez maintenir une fiche de suivi de projet''': elle doit être mise à jour chaque semaine, elle rassemble les élements essentiels du projet, elle
indique les évolutions du projet et présente sa feuille de route. '''Note:''' le nom de la fiche doit être composé du nom du projet et suffixé par ricm4_2014_2015.

* '''Vous devez utiliser un logiciel de gestion de version''' pour vos développements comme [http://en.wikipedia.org/wiki/Git_%28software%29 git ] et nous vous conseillons d'utiliser le site [https://github.com github] pour l'hébergement de votre dépôt public.

* Les document public (exemple sur github) doivent être rédigés en anglais (README, documentation, commentaires de code, nom de variables et de fonctions). Une bonnification sera accordée si le rapport et les transparents sont en anglais (la soutenance sera en francais).

{|class="wikitable alternance"
|+ Affectation des projets RICM4 2014-2015
|-
|
!scope="col"| Sujet
!scope="col"| Etudiants
!scope="col"| Enseignant(s)
!scope="col"| Fiche de suivi
!scope="col"| Dépot git
|-

!scope="row"| 1
| [[Projet de monoski intelligent]]
| Blondet, Torck
| Didier Donsez, Pascal Jay, David Eon
| [[Proj-2014-2015-MonoskiIntelligent| '''Fiche''']] [[Proj-2014-2015-MonoskiIntelligent/SRS| '''SRS''']]==== Sprint 5 ====
----
Sprint Duration
===== Sprint goals =====

===== Sprint Backlog =====
[[Proj-2014-2015-MonoskiIntelligent/UML| '''Diagrammes UML''']] [[Proj-2014-2015-MonoskiIntelligent/Scrum| '''Scrum''']] ([https://waffle.io/quentin74/monoski Waffle])
| [https://github.com/quentin74/application-monoski '''github''']
| [[Media:ProjetXYZ/Rapport|rapport]] - [[Media:ProjetXXX-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]] - [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 2
| [[Smart Classroom]]
| Darrigol, Badamo, Damotte, Leonard
| Didier Donsez, Vivien Quema, Jérome Maisonnasse
| [[Proj-2014-2015-SmartClassroom| '''Fiche''']] [[Proj-2014-2015-SmartClassroom/SRS| '''SRS''']] [[Proj-2014-2015-SmartClassroom/UML| '''Diagrammes UML''']] [[Proj-2014-2015-SmartClassroom/Scrum| '''Scrum''']]
| [https://github.com/AlanDamotte/auth '''github''']
| [[Media:Proj-2014-2015-SmartClassroom/Rapport|rapport]] - [[Media:Proj-2014-2015-SmartClassroom-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-SmartClassroom-flyer.pdf|flyer]] [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 3
| [[RobAIR]] et [[STM32 Nucleo]]
| Hammerer, Michel, Klipffel, Viallet **
| Didier Donsez
| [[Projet-2014-2015-RobAIR| '''Fiche''']] [[Projet-2014-2015-RobAIR/SRS| '''SRS''']] [[Projet-2014-2015-RobAIR/UML| '''Diagrammes UML''']] [[Projet-2014-2015-RobAIR/Scrum| '''Scrum''']]
| [https://github.com/teiroy/RobAIR '''github''']
| [[Media:Projet-2014-2015-RobAIR/Rapport|rapport]] - [[Media:Projet-2014-2015-RobAIR-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]] [[Media:Projet-2014-2015-RobAIR-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 4
| [[IDS|Interactive Digitale Signage]]
| Adam, Zhang
| Didier Donsez
| [[Proj-2014-2015-Interactive_Digitale_Signage| '''Fiche''']] [[Projet-2014-2015-Interactive_Digitale_Signage/SRS| '''SRS''']] [[Projet-2014-2015-Interactive_Digitale_Signage/UML| '''Diagrammes UML''']] [[Projet-2014-2015-Interactive_Digitale_Signage/Scrum| '''Scrum''']]
| [https://github.com/zhangzhengmeng/ProjetIDS2015.git '''github''']
| [[Media:Proj-2014-2015-Interactive_Digitale_Signage/Rapport|rapport]] - [[Media:Proj-2014-2015-Interactive_Digitale_Signage-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-Interactive_Digitale_Signage-flyer.pdf|flyer]] [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 5
| [[Régie vidéo autonome et mobile multi-caméra]]
| Zominy, Bodard, Qian
| Didier Donsez, Thierry C.
| [[Proj-2014-2015-RegieVideoAutonomeEtMobileMulticamera| '''Fiche''']] [[Proj-2014-2015-Regie_Video_Autonome_Et_Mobile_Multicamera/SRS| '''SRS''']] [[Proj-2014-2015-Regie_Video_Autonome_Et_Mobile_Multicamera/UML| '''Diagrammes UML''']] [[Proj-2014-2015-Regie_Video_Autonome_Et_Mobile_Multicamera/Scrum| '''Scrum''']]
| [https://github.com/kurisuter/Regie-video-autonome-'''github''']
| [[Media:Projet-2014-2015-RegieVideoAutonomeEtMobileMulticamera/Rapport|rapport]] - [[Media:ProjetXXX-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]] - [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 6
| OpenHAB Extended GUI ([[IFTTT]] et à la [[Node-RED]] ou [[Flowhub]] pour [[OpenHAB]], Découverte [[UPnP]] des équipements)
| Toussaint, Saussac
| Didier Donsez
| [[Proj-2014-2015-OpenHAB-ExtendedGUI| '''Fiche''']] [[Projet-2014-2015-OpenHAB-ExtendedGUI/SRS| '''SRS''']] [[Projet-2014-2015-OpenHAB-ExtendedGUI/UML| '''Diagrammes UML''']] [[Projet-2014-2015-OpenHAB-ExtendedGUI/Scrum| '''Scrum''']]
| [https://github.com/saussact/projet '''github''']
| [[Media:Proj-2014-2015-OpenHAB-ExtendedGUI/Rapport|rapport]] - [[Media:Proj-2014-2015-OpenHAB-ExtendedGUI-transparents.pdf|transparents]] - [[Media:PProj-2014-2015-OpenHAB-ExtendedGUI-flyer.pdf|flyer]] - [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 7
| [[CannonBall de voitures autonomes|CannonBall de voitures autonomes, Edition 2015]]
| Le-Jean, Mammar, Pelloux-Prayer, Rodrigues
| Didier Donsez & Vivien Quema
| [[Project-2014-2015-CannonBall| '''Fiche''']][[Project 2014-2015-CannonBall/SRS| '''SRS''']][[Project 2014-2015-CannonBall/UML| '''UML''']][[Project 2014-2015-CannonBall/Scrum| '''Scrum''']][[Project 2014-2015-CannonBall/DesignPatterns| '''DesignPatterns''']]
| [https://github.com/malek0512/2014_2015_ricm4_cannon_ball '''github''']
| [[Media:ProjetXYZ/Rapport|rapport]] - [[Media:ProjetXXX-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]]- [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 8
| [[Navigation et Montre connectée]]
| Hamdani, Mesnier, Yao
| Jacques Lemordant
| [[Proj-2014-2015-Montreconnectée| '''Fiche''']] [[Proj-2014-2015-Montreconnectée/SRS| '''SRS''']] [[Proj-2014-2015-Montreconnectée/UML| '''Diagrammes UML''']] [[Proj-2014-2015-Montreconnectée/Scrum| '''Scrum''']][[Proj-2014-2015-Montreconnectée/DesignPattern| '''DesignPattern''']]
| [https://github.com/vince0508/MontreConnectee '''github''']
| [[Media:ProjetXYZ/Rapport|rapport]] - [[Media:ProjetXXX-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]]- [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 9
| [[Python sur ESP8266]]
| Libralesso, Soldano
| Olivier Richard
| [[Project-2014-2015-ESP8266| '''Fiche''']] - [[Proj-2014-2015-ESP8266/SRS| '''SRS''']] - [[Proj-2014-2015-ESP8266/UML| '''UML diagrams''']] - [[Proj-2014-2015-ESP8266/Scrum| '''Scrum''']]
| [https://github.com/librallu/RICM4Projet/ '''github''']
| [[Media:ProjetXYZ/Rapport|rapport]] - [[Media:ProjetXXX-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]]- [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast] - [http://librallu.github.io/RICM4Projet/ '''website''']
|-

!scope="row"| 10
| [[Serious Game: Handicap, parole et geste v2]]
| Aissanou, Codazzi, Guo
| Olivier Richard
| [[Proj-2014-2015-SeriousGamev2| '''Fiche''']][[Proj-2014-2015-SeriousGamev2/SRS| '''SRS''']][[Proj-2014-2015-SeriousGamev2/Scrum| '''Scrum''']] [[Projet-2014-2015-SeriousGamev2/Diagrammes| '''Diagrammes UML''']]
| [https://github.com/wizardkeven/SeriousGameV2 '''github''']
| [[Media:ProjetXYZ/Rapport|rapport]] - [[Media:ProjetXXX-transparents.pdf|transparents]] - [[Media:ProjetXXX-flyer.pdf|flyer]]- [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 11
| [[Plateforme d'expérimentation mini-datacentre]] Système
| Fotsing, Morison
| Olivier Richard
| [[Proj-2014-2015-Mini_DataCenter_Systeme| '''Fiche''']][[Proj-2014-2015-Mini_datacenter_Systeme_SRS| '''SRS''']] [[Proj-2014-2015-Mini_datacenter_Systeme_scrum| '''Scrum''']]
| [https://github.com/ '''github''']
| [[Media:ProjetMini_DataCenter_Systeme/Rapport|rapport]] - [[Media:ProjetMini_DataCenter_Systeme-transparents.pdf|transparents]] - [[Media:ProjetMini_DataCenter_Systeme-flyer.pdf|flyer]]- [[Media:ProjetMini_DataCenter_Systeme-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 12
| [[Plateforme d'expérimentation mini-datacentre]] Portail
| Rossi, Eudes
| Olivier Richard
| [[Proj-2014-2015-Mini_datacenter_portail| '''Fiche''']] [[Proj-2014-2015-Mini_datacenter_portail_SRS| '''SRS''']] [[Proj-2014-2015-Mini_datacenter_portail_scrum| '''Scrum''']] [[Proj-2014-2015-Mini_datacenter_portail_uml| '''UML''']]
| [https://github.com/EudesRobin/webui-oardocker '''github''']
| [[Media:Projet_Projet_Mini_datacenter_portail/Rapport|rapport]] - [[Media:Projet_Mini_datacenter_portail-transparents.pdf|transparents]] - [[Media:Projet_Mini_datacenter_portail-flyer.pdf|flyer]]- [[Media:ProjetXXX-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

|}

* [[Projet de monoski intelligent]] (RICM4 et 3I4 et Matériaux) pour le [http://www.defi-foly-laclusaz.com/ défi Foly 2015] : Didier Donsez, Pascal Jay, David Eon (2 élèves)
* [[Smart Classroom]] (avec ENSIMAG) Didier Donsez, Vivien Quema, Jérome Maisonnasse (4 élèves)
* Robot [[RobAIR]] à base de [[STM32 Nucleo]] (+ cartes additionnelles MEMS BLE4) et de téléphones [[Firefox OS]]. Didier Donsez (4 élèves)
* [[StartAIR]] (Fabrice Dubost) (2 élèves)
* [[IDS|Interactive Digitale Signage]] avec [[Reveal.js]], [[Kinect]], [[WebRTC]], [[Node.js]], [[Open Data]], [[NFC]], [[Miracast]] [http://blueimp.github.io/Bootstrap-Image-Gallery/ Bootstrap Gallery]... (Didier Donsez) (2 élèves)
* [[Régie vidéo autonome et mobile multi-caméra]] (Didier Donsez, Thierry C.) (2 élèves)
* Interface HTML5 à la [[IFTTT]] et à la [[Node-RED]] ou [[Flowhub]] pour [[OpenHAB]] (2 élèves)
* [[Intégration d'Espruino à RIOT OS]] sur [[STM32 Nucleo]]: Application à la robotique [[RobAIR]] (Didier Donsez) (2 élèves)
* [[Inventaire Forestier]] sous Android (3I4 ou 5, RICM4) Emmanuel Promayon (2 élèves)
* [[Navigation indoor basé iBeacons]], Jacques Lemordant (2 élèves)
* [[Navigation et Montre connectée]], Jacques Lemordant (2 élèves)
* [[Projets Sitra avec la région Rhône-Alpes]], Jacques Lemordant (2 élèves)
* [[CannonBall de voitures autonomes|CannonBall de voitures autonomes, Edition 2015]] Didier Donsez & Vivien Quema (piste [[Star War Drone Race]]) (2 élèves)
* [[Python sur ESP8266]] Olivier Richard (2 élèves)
* [[Serious Game: Handicap, parole et geste v2]], edition 2015, Olivier Richard (2 élèves)
* [[Plateforme d'expérimentation mini-datacentre]] édition 2015, Olivier Richard (2 élèves)

==RICM5==
===Projet Semestre S10===
Démarrage : Lundi 26/01 à 8H00-12H00, P257 (Rendez-vous devant la salle AIR)

Soutenance : Mercredi 25/03 à 9H00-12H00, Salle à confirmer

{|class="wikitable alternance"
|+ Affectation des projets RICM5 2014-2015
|-
|
!scope="col"| Sujet
!scope="col"| Etudiants
!scope="col"| Enseignant(s)
!scope="col"| Fiche de suivi
!scope="col"| Dépot git
|-

!scope="row"| 1
| [[iRock]] :Plateforme Ubilitics pour la surveillance des risques naturelles (déploiement grande échelle de capteurs [[LoRa]] sur le terrain pour l'observation de glissement de terrain) .
| Peyre, Guo, Ginoux, Boey
| Didier Donsez & Denis Jongmans & Georges-Pierre Bonneau
| [[Proj-2014-2015-iRock| '''Fiche''']] [[Proj-2014-2015-iRock/SRS| '''SRS''']] [[Proj-2014-2015-iRock/UML| '''Diagrammes UML''']] [[Proj-2014-2015-iRock/Scrum| '''Scrum''']]
| [https://github.com/fpeyre/IRock_2015'''github''']
| [[Media:Proj-2014-2015-iRock-Rapport|rapport]] - [[Media:Proj-2014-2015-iRock-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-iRock-flyer.pdf|flyer]] - [[Media:Proj-2014-2015-iRock-poster.pdf|poster]] - [[Proj-2014-2015-iRock-media.pdf|Video ou Screencast]]
|-

!scope="row"| 2
| Plateforme Ubilitics pour [[SmartCampus 2015]] : (déploiement grande échelle de capteurs [[LoRa]]) (voir [[OpenBAS]]).
| Sambe, Husson, Labat, Fréby, Barbier
| Didier Donsez & Vivien Quema
| [[Proj-2014-2015-SmartCampus2015| '''Fiche''']] [[Proj-2014-2015-SmartCampus2015/SRS| '''SRS''']] [[Proj-2014-2015-SmartCampus2015#G.C3.A9nie_Logiciel| '''Diagrammes UML''']] [[Proj-2014-2015-SmartCampus2015#Organisation_du_projet| '''Scrum''']]
| [https://github.com/nexucis/SmartCampus '''github''']
| [[Media:Proj-2014-2015-SmartCampus2015-Rapport|rapport]] - [[Media:Proj-2014-2015-SmartCampus2015-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-SmartCampus2015-flyer.pdf|flyer]] - [[Media:Proj-2014-2015-SmartCampus2015-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 3
| [[Extensions XBMC Sujet 2015]]
| Valentin, Bobo, Legros, Gabin Teulon (DUT1 R&T)
| Nicolas Palix
| [[Extensions_XBMC_2015| '''Fiche''']] [[Proj-2014-2015-Ext_XBMC/SRS| '''SRS''']] [[Proj-2014-2015-Ext_XBMC/UML| '''Diagrammes UML''']] [[Proj-2014-2015-Ext_XBMC/Scrum| '''Scrum''']]
| [https://github.com/ '''github''']
| [[Media:Proj-2014-2015-xbmc-rapport.pdf|rapport]] - [[Media:Proj-2014-2015-Ext_XBMC2015-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-xbmc-flyer.png|flyer]] - [[Media:Proj-2014-2015-xbmc-poster.png|poster]]
|-

!scope="row"| 4
| [[Smart Classroom]] : tables tactiles en mode [[Tiled Display]], Murs interactifs, Robots de Téléprésence, ...
| Benyounes, Fall, Tiamiou, Perruche, Quentin Fombaron (DUT1 R&T), Lucas Reygrobellet (DUT1 R&T)
| Didier Donsez & Vivien Quema & Jérome Maisonnasse
| [[Proj-2014-2015-SmartClassRoom| '''Fiche''']] [[Proj-2014-2015-SmartClassRoom/SRS| '''SRS''']] [[Proj-2014-2015-SmartClassRoom/UML| '''Diagrammes UML''']] [[Proj-2014-2015-SmartClassRoom/Scrum| '''Scrum''']]
| [https://github.com/falle38/SmartClassroom-TiledDisplayPart '''github''']
| [[Media:Proj-2014-2015-SmartClassRoom-Rapport|rapport]] - [[Media:Proj-2014-2015-SmartClassRoom-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-SmartClassRoom-flyer.pdf|flyer]] - [[Media:Proj-2014-2015-SmartClassRoom-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

!scope="row"| 5
| Défi H 2015 : Rééducation de la main
| Mariage, Perea, Clerc-Ghérardi, Arredondo (TIS5)
| Didier Donsez & Alessandro Semere & Nicolas Vuillerme + Pierre-Yves Thomas (tuteur Sogeti)
| '''Sur DropBox''' : [[HandTrainer| '''Fiche''']] [[HandTrainer-SRS| '''SRS''']] [[Proj-2014-2015-ReducMain/UML| '''Diagrammes UML''']] [[Proj-2014-2015-ReducMain/Scrum| '''Scrum''']]
| [https://github.com/ '''github''']
| [[Media:Proj-2014-2015-ReducMain-Rapport|rapport]] - [[Media:Proj-2014-2015-ReducMain-transparents.pdf|transparents]] - [[Media:Proj-2014-2015-SmartClassRoom-flyer.pdf|flyer]] - [[Media:Proj-2014-2015-ReducMain-poster.pdf|poster]] - [http://youtube.com Video ou Screencast]
|-

|}

Rappel: les séances de MPI (Management de Projet Innovant) auront lieu les jours suivants (salles sur ADE) :
* Mardi 27/01 après-midi (Stéphanie Diligent)
* Lundi 2/02 matin (Emmanuelle Tréhoust)
* Lundi 9/02 matin (Emmanuelle Tréhoust)
* Lundi 23/02 matin (Stéphanie Diligent)
* Mardi 17/03 matin (Stéphanie Diligent+Emmanuelle Tréhoust)

Remarque: il y à 3 étudiants PEIP D de l'IUT 1 R&T qui participeront aux projets.

===Projet Biométrie===
Démarrage : Lundi 26/01 à 8H00-9H45

Voir Laurent Besacier & François Portet

=3I=
==3I3==

==3I4==

==3I5==
* Carte d'extension Semtech [[LoRa]] pour [[Arduino]] et [[STM32 Nucleo]] (Didier Donsez)

===Projet Semestre 10===
Démarrage : 26/01/2015
Soutenance: 26/03/2015

{|class="wikitable alternance"
|+ Affectation des projets 3I5 2014-2015
|-
|
!scope="col"| Sujet
!scope="col"| Etudiants
!scope="col"| Enseignant(s)
!scope="col"| Fiche de suivi
!scope="col"| Dépot git
!scope="col"| Docs.
|-

!scope="row"| 1
| [[Projet Cannonball - Intégration d'une caméra auto-directive| '''Projet Cannonball''']] : Intégration d'une caméra auto-directive.
| Alwan, Laurent, Cottin Bizonne
| Alina Voda & Ahmad Farhat
| [[Fiche de suivi Projet Cannonball 2015| '''Fiche de suivi''']]
| [https://github.com/Jerome-Laurent/CannonBall-Nucleo-STM32F401 '''github''']
| [[Media:Rapport_Cannonball2015.pdf‎|Rapport]] - [[Media:Poster_Project_Cannonball.pdf|Poster]] - [https://www.youtube.com/watch?v=44PW_EM8MZ0| Vidéo ]

|}

=M2PGI=
* Extensions à [[SmartCampus]]

=Bachelor Summer Program=

=Année A définir=
* [[GeoDiff]] Production, visualisation, fusion de variations (diff) sur de l'information géocodée : Nicolas Palix
* [[Smart campus augmenté et contributif]]
* [[Intégration OpenHAB / OpenTele]]
* [[Client MQTT pour OBD]] sur Android
* [[Sommeilomètre]] (Michael Perin, Didier Donsez)
* [[Open DynDNS]]
* [[IllumiRoom]]
* [[Emergency mobile app]] Nicolas Palix pour TIS, PRI et RICM
* [[OwnPOI]] ownCloud plugin and osmand plugin to share POI and favorite positions. Nicolas Palix.
* [[OwnList]] ownCloud plugin and Android app to share a TODO list. Nicolas Palix.
* [[floatingimage UPnP feed]] Nicolas Palix
* [[XBMC Reflexive Remote]] Dynamic remote control for XBMC. Nicolas Palix.
* [http://intgat.tigress.co.uk/rmy/uml/index.html Zerofree] Portage de zerofree pour d'autres systèmes de fichiers que ext2/3/4 (notamment Unix FS). Voir également la page [http://packages.qa.debian.org/z/zerofree.html QA de Debian]. Nicolas Palix.
* [[Bracelet électronique de monitoriing de l'alcoolémie]]
* [[Oxymètre DIY]]
* [[PinSound]]
* [[Extension du support STM32Fx-Discovery dans libopencm3]] : Olivier Richard
* [[Arduino et libopencm3]] : Olivier Richard
* [[Data Acquisition System et Stm32f4-Discovery]] : Olivier Richard
* [[Distributed Data Storage System]] : Olivier Richard
* [[Dashboard based on w2ui]]
* [[Environnement logiciel pour FabLab]] : Olivier Richard
* [[Environnement logiciel pour le Live Programming]] : Olivier Richard
* [[VirtualPinball]]
* Tondeuse dessinatrice
* [[ImmersiveDog]] Nicolas Glade, Didier Donsez
* Projet avec [[OpenROV]] ???? : Didier Donsez
* [[Sphero]] malin (Michael Périn) (2 etudiants)
* [[Drone paramoteur]] ???
* [[IRock : Surveillance Géotechnique LoRa|iRock]]: Plateforme Ubilitics pour la surveillance des risques naturelles (déploiement grande échelle de capteurs [[LoRa]] sur le terrain pour l'observation de glissement de terrain) en commun avec Geotech (à confirmer) : Didier Donsez & Denis Jongmans
* [[Optimisation de l'énergie pour cyclotouriste électrique]]
* [[SmartSelfService|Smart Self-Service 2015]] Didier Donsez & Vivien Quema
* [[Station Météo LoRa]] : contribution au projet [[LoRA-Fabian]] (Didier Donsez)

=Réserve (boite à idées)=

# [[Tag et Paint Ball en réalité augmentée]] (Michaël Périn)
# [[Passe moi ton fichier]] (Michaël Périn)
# [[Extensions à Fab Server]] (Jean-Michel Molenaar) sous reserve (CM ou SR)
# [[Table multijeux de café 2.0]]
# [[ GPIO_Qemu_RasPI| Emulation des GPIO dans QEMU pour le carte Raspberry Pi]] (Olivier Richard)
# [[ Qemu et STM32F0-Discovery ]] (Olivier Richard)
# [[Serrure à clé MIDI multifactorielle]] (Didier Donsez)
# [[Table interactive musicale]] (Didier Donsez)
# [[iMailbox]] (Didier Donsez)
# [[AmILight]] (eclairage d'ambience intelligent) (Didier Donsez)
# [[PDAmeetPDA]] (synchronisation d'agenda) (Michaël Périn)
# [[1 000 000 VMs]] (expérimentation d'application distribuée à très grande échelle) (Olivier Richard) (2-3 RICM4)
# [[Multiple Kinect]] (utilisation simultanée de plusieurs Kinect) (Olivier Richard) (RICM ou 3I)
# [[Kinect musicale]] (Didier Donsez) (RICM)
# [[Ktechlab Simavr Arduino | Ktechlab et integration de Simavr(Arduino)]] (Olivier Richard) (2-3 RICM4-SR)
# Ocaml on AVR (Arduino)
# Ocaml on Cortex-M3
# [[Arduino on STM32 Discovery]]
# [[Reverse Geocache Puzzle Box]]
# [[OSGi ME]] (Didier Donsez)
# [[Affichage Etudiant à Polytech]]
# Synthèse 3D + motion capture Kinect
# Logiciel d'[[apprentissage du calcul]] sur tablette Android (reconnaissance de chiffres manuscrits)
# Plancher de verre (saint gobain) à la [http://www.wat.tv/video/mickael-jackson-billie-jean-oewj_2ey2h_.html Mickael Jackson dans Billie Jean] ! woo
# [[Ktechlab Simavr Arduino | Ktechlab et integration de Simavr(Arduino)]] (Olivier Richard) (2-3 RICM4-SR)
# [[CNC]]
# [[Idées en Vrac]]
# Scheme Everywhere (Olivier Richard) (2-3 RICM4-SR)
# [[Projet Station Météo]]
# Ocaml on AVR (Arduino)
# [[Table interactive musicale]] (Didier Donsez)
# [[AmILight]] (eclairage d'amnbience intelligent) (Didier Donsez)
# [[Cube pointeur]] d'activité ingénieur
# [http://www.instructables.com/id/Puppeteer-Motion-Capture-Costume/ Puppeteer Motion-Capture Costume]
# [[Musical Staircase]] @ Polytech (Didier Donsez, 1 RICM4 + 1 3I4)
# [[Total Recall]] (Didier Donsez)
# [[SoundMachine]]
# [[IGN-OSM|Importation de données IGN publiques dans OSM]]
# [[Speed-limit-OSM|Analyse de traces GPX pour déterminer les limitations de vitesse]]
# [[Multi perceptual cameras]] (Didier Donsez)
# [[Photomaton 3D]] (Didier Donsez)
# [[ArduCopter]]
# [[Parking Intelligent]]

File:Proj-2014-2015-SmartClassRoom-transparents.pdf

2015-03-25T19:27:56Z

RICM4-prj14-grp12:

File:Proj-2014-2015-SmartClassRoom-Rapport.pdf

2015-03-25T19:13:28Z

RICM4-prj14-grp12:

File:EA2014-OpinionMining-Pres.pdf

2015-03-25T08:34:29Z

RICM4-prj14-grp12:

Opinion Mining et Sentiment Analysis

2015-03-25T06:40:34Z

RICM4-prj14-grp12: /* Démo */

= Présentation =

* Enseignants : Didier Donsez ([[EA2015]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : []

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
* explicite : la personne aime le cinéma.
* implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
* associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

= Démo =

Etude des sentiments sur la personne Bill Gates:
* [http://www.sentiment140.com/search?query=Bill+Gates&hl=en Sur Twitter]
* [http://socialmention.com/search?t=all&q=Bill+Gates&btnG=Search Posts hors réseaux sociaux]

Exemple d'application attribuant un score aux termes à caractères émotionnels dans un texte :
[https://semantria.com/demo Avec le texte Wikipedia sur Bill Gates]

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude1 sur l'Opinion Mining]
* [http://www.cs.uic.edu/~liub/FBS/Sentiment-Analysis-tutorial-AAAI-2011.pdf Etude2 sur L'OM]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Opinion Mining et Sentiment Analysis

2015-03-25T06:40:10Z

RICM4-prj14-grp12: /* Documentation */

= Présentation =

* Enseignants : Didier Donsez ([[EA2015]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : []

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
* explicite : la personne aime le cinéma.
* implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
* associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

= Démo =

Etude des sentiments sur la personne Bill Gates:
* [http://www.sentiment140.com/search?query=Bill+Gates&hl=en Sur Twitter]
* [http://socialmention.com/search?t=all&q=Bill+Gates&btnG=Search Posts hors réseaux sociaux]

Exemple d'application attribuant un score aux termes à caractères émotionnels dans un texte :
[https://semantria.com/demo Wikipedia sur Bill Gates]

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude1 sur l'Opinion Mining]
* [http://www.cs.uic.edu/~liub/FBS/Sentiment-Analysis-tutorial-AAAI-2011.pdf Etude2 sur L'OM]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Opinion Mining et Sentiment Analysis

2015-03-25T00:32:41Z

RICM4-prj14-grp12: /* Présentation */

= Présentation =

* Enseignants : Didier Donsez ([[EA2015]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : []

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
* explicite : la personne aime le cinéma.
* implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
* associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

= Démo =

Etude des sentiments sur la personne Bill Gates:
* [http://www.sentiment140.com/search?query=Bill+Gates&hl=en Sur Twitter]
* [http://socialmention.com/search?t=all&q=Bill+Gates&btnG=Search Posts hors réseaux sociaux]

Exemple d'application attribuant un score aux termes à caractères émotionnels dans un texte :
[https://semantria.com/demo Wikipedia sur Bill Gates]

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Opinion Mining et Sentiment Analysis

2015-03-25T00:31:59Z

RICM4-prj14-grp12: /* Présentation */

= Présentation =

* Enseignants : Didier Donsez ([[EA2014]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : []

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
* explicite : la personne aime le cinéma.
* implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
* associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

= Démo =

Etude des sentiments sur la personne Bill Gates:
* [http://www.sentiment140.com/search?query=Bill+Gates&hl=en Sur Twitter]
* [http://socialmention.com/search?t=all&q=Bill+Gates&btnG=Search Posts hors réseaux sociaux]

Exemple d'application attribuant un score aux termes à caractères émotionnels dans un texte :
[https://semantria.com/demo Wikipedia sur Bill Gates]

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Proj-2014-2015-SmartClassRoom

2015-03-25T00:04:43Z

RICM4-prj14-grp12: /* Conception : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images, ou la capture en temps-réel d'une vidéo HTML5 dans un canvas toutes les 1000/n millisecondes (n = 60, 30 ... fps)
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Opinion Mining et Sentiment Analysis

2015-03-25T00:02:37Z

RICM4-prj14-grp12:

= Présentation =

* Enseignants : Didier Donsez ([[EA2014]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : [http://slides.com/darkskull/firefoxos#/ slides]

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
* explicite : la personne aime le cinéma.
* implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
* associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

= Démo =

Etude des sentiments sur la personne Bill Gates:
* [http://www.sentiment140.com/search?query=Bill+Gates&hl=en Sur Twitter]
* [http://socialmention.com/search?t=all&q=Bill+Gates&btnG=Search Posts hors réseaux sociaux]

Exemple d'application attribuant un score aux termes à caractères émotionnels dans un texte :
[https://semantria.com/demo Wikipedia sur Bill Gates]

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Proj-2014-2015-SmartClassRoom

2015-03-25T00:01:19Z

RICM4-prj14-grp12: /* Technologies utilisées : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/

Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-25T00:00:49Z

RICM4-prj14-grp12: /* Technologies utilisées : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

ATTENTION: Nous avons effectué des modifications dans ce module pour définir nous-même les limites de déplacement des objets. Les modifications commencent à l'endroit (LIGNE 866 -> 912) où est indiqué le commentaire : /*AJOUT FONCTIONNALITE SUPPLEMENTAIRE*/
Nous avons aussi ajouté d'autres options.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"

====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:54:36Z

RICM4-prj14-grp12: /* Interface Graphique */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Prérequis - Projet Table Tactile =
* Le serveur peut accueillir au maximum quatre clients
* Les tables doivent être disposées en carré et orientées vers l'extérieur, de sorte que l'on puisse tourner autour du carré et être dans le bon sens de lecture
* Le serveur distingue quatre orientations : Nord-Ouest, Nord-Est, Sud-Ouest, Sud-Est.
* A chaque fois qu'un client se connecte, le serveur lui attribue la première orientation disponible suivant l'ordre ci-dessus.
* Utiliser Google Chrome de préférence
* Activer les événements tactiles pour le navigateur Google Chrome (chrome://flags/#touch-events)
* Pour chaque table, le mode plein écran doit être lancé manuellement (F11) pour le mode Tiled Display (sinon la taille maximale du média sera celle du Body)
* Pour lancer une vidéo, utiliser les fichiers .mp4 (chrome uniquement), .ogg, .webm

= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:41:44Z

RICM4-prj14-grp12: /* Tiled Display */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) délivrée par un serveur Express (NodeJS) connecté à un port précis.

La communication entre les clients et le serveur se fait grâce au module '''NowJS : https://github.com/Flotype/now/''' qui est basé sur des socket.io :

* Les clients et le serveur vont partager un composant Now qui peut contenir des méthodes ou des variables.
* Les méthodes sont implémentées dans ce composant, côté client et côté serveur.
* Lorsqu'un client veut appeler la méthode d'un ou plusieurs ou tous les clients (lui compris ou non), il appelle une méthode de now implémentée côté serveur, et c'est ce dernier qui est chargé d'appeler le ou les méthodes des clients.
* NowJs fonctionne sur le principe de groupe. Le premier groupe nommé "everyone" contient tous les clients. On peut ensuite créer des sous-groupes et y ajouter les clients au fur et à mesure. Cela rend facile la sélection des clients pour l'appel de méthode.

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:25:54Z

RICM4-prj14-grp12: /* Architecture Générale */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|500px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:22:15Z

RICM4-prj14-grp12: /* Conception : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|600px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

'''Drawing''' : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:21:07Z

RICM4-prj14-grp12: /* Conception : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|600px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
'''Ping-pong''' : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

Drawing : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:20:50Z

RICM4-prj14-grp12: /* Conception : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|600px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : Changement effectués :
* Chaque client ne bouge qu'une seule barre (celle du bas) et envoie les coordonnées du mouvements à l'autre client. En d'autre termes, la barre du haut pour chaque client est bougé par l'autre client.
* Le client à avoir lancé le jeu est le maître, il calcule les interactions entre les objets (balle, barre, mur...) et envoie les événements à l'autre client.
* Etant donné que chaque client bouge la barre du bas, il faut que le client non maître bouge la balle dans la direction et sens opposé à ceux du clients maître.
* Découpage de la canvas pour n'afficher que la moitié inférieure du terrain
* Ajout d'un bouton QUIT

Drawing : Chaque client effectuant un tracé envoie les coordonnées et la couleur du tracé à tous les autres clients.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:18:19Z

RICM4-prj14-grp12: /* Architecture Générale */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|600px|thumb|center]]

Les deux entités du projet communiquent via des sockets de connexion.

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:17:04Z

RICM4-prj14-grp12: /* Architecture Générale */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|600px|thumb|center]]

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

File:ArchiGeneral.png

2015-03-24T23:16:39Z

RICM4-prj14-grp12:

Proj-2014-2015-SmartClassRoom

2015-03-24T23:13:48Z

RICM4-prj14-grp12: /* Technologies utilisées : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|400px|thumb|center]]

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====
'''Ping Pong Game''' : http://cssdeck.com/labs/ping-pong-game-tutorial-with-html5-canvas-and-sounds
Nous nous sommes inspirés de ce jeu en effectuant le minimum de changement possible pour le rendre multijoueur en Tiled Display

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:11:50Z

RICM4-prj14-grp12: /* Objectif : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|400px|thumb|center]]

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.

'''Jeux Ping-pong''' : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.

'''Application Drawing''' : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:11:19Z

RICM4-prj14-grp12: /* Objectif : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|400px|thumb|center]]

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.
'''Jeux Ping-pong : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.
'''Application Drawing : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Proj-2014-2015-SmartClassRoom

2015-03-24T23:10:27Z

RICM4-prj14-grp12: /* Objectif : */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|400px|thumb|center]]

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
L'objectif est de réaliser une application multiutilisateur avec une gestion de l'affichage en tiled display si besoin.
Jeux Ping-pong : Application se jouant à deux, sur deux tables tactiles en face à face, et chaque table affiche la moitié du terrain de jeux.
Application Drawing : Les utilisateurs se partage une zone de dessin à la manière d'un Google Doc.

====Technologies utilisées :====

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Opinion Mining et Sentiment Analysis

2015-03-24T23:08:35Z

RICM4-prj14-grp12: /* Méthode pour l'analyse d'opinion */

= Présentation =

* Enseignants : Didier Donsez ([[EA2014]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : [http://slides.com/darkskull/firefoxos#/ slides]

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
* explicite : la personne aime le cinéma.
* implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
* associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Proj-2014-2015-SmartClassRoom

2015-03-24T23:08:28Z

RICM4-prj14-grp12: /* Architecture Générale */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
L'architecture générale peut être décrite comme-suit :
[[File:ArchiGeneral.png|400px|thumb|center]]

==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
Réalisation d'applications utilisables sur plusieurs tables à la fois.

====Technologies utilisées :====

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Opinion Mining et Sentiment Analysis

2015-03-24T23:08:10Z

RICM4-prj14-grp12: /* Présentation */

= Présentation =

* Enseignants : Didier Donsez ([[EA2014]])
* Sujet : Opinion Mining and Sentiment Analysis
* Date : 25 mars 2015
* Auteur : Benoit Perruche
* Lien vers les slides de la présentation : [http://slides.com/darkskull/firefoxos#/ slides]

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
- explicite : la personne aime le cinéma.
- implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
- associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Opinion Mining et Sentiment Analysis

2015-03-24T23:07:11Z

RICM4-prj14-grp12: /* Abstract */

= Présentation =

* Enseignants : Georges-Pierre Bonneau, Didier Donsez ([[EA2014]])
* Sujet : FirefoxOS
* Date : 4 octobre 2014
* Auteur : Flavien Peyre <Firstname DOT Name AT e DOT ujf-grenoble DOT fr>
* Lien vers les slides de la présentation : [http://slides.com/darkskull/firefoxos#/ slides]

== Abstract ==

Opinion mining is sentiment analysis from dematerialized textual sources on large amounts of data (big data).
This process appears in the early 2000s and knows a growing success due to the abundance of data provided by the social network Twitter.
The objective of the opinion mining is to analyze large amounts of data in order to deduce the different feelings that are expressed. The extracted feelings can then be subject of statistics on a community overall feeling.

=== Key Words===

big data, social networks, feelings, statistics, forecast

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
- explicite : la personne aime le cinéma.
- implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
- associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]

Proj-2014-2015-SmartClassRoom

2015-03-24T23:06:29Z

RICM4-prj14-grp12: /* Envoi d’une fenêtre vers une autre table */

= Présentation =

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic.
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.
Ce projet est donc principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.
Ce projet se divise en deux grandes parties :
*Tableau interactif
*Tiled Display sur les tables tactiles

= Equipe =

*'''Superviseurs:''' Didier DONSEZ
*'''Intervenants extérieurs''' : Jérôme MAISONNASSE et Amr AL-YAFI.

*'''Etudiants RICM5:''' Radhouane BEN YOUNES, El Hadji Malick FALL, Benoît PERRUCHE, Adam TIAMIOU
*'''Etudiants DUT R&T 1ère année:''' Quentin FOMBARON et Lucas REYGROBELLET

*'''Département :''' [http://www.polytech-grenoble.fr/ricm.html RICM 5], [[Polytech Grenoble]]

= Documents liés =
* Le SRS (Software Requirements Specification) est accessible [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom/SRS ici]

* '''Github repository''' : [https://github.com/falle38/SmartClassroom-TiledDisplayPart]

* '''Diagrammes UML''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/UML]

* '''Scrum''' : [http://air.imag.fr/index.php?title=Proj-2014-2015-SmartClassRoom/Scrum]

=Objectifs=
== Tableau interactif ==
Pour cette partie, nous sommes partis d’un projet déjà développé par des étudiants de l’ENSIMAG : le mur digital interactif. Le but de ce projet était d'ajouter des fonctionnalités électroniques à un tableau blanc ordinaire. L'utilisateur travaille sur le tableau, écrivant ou dessinant avec des feutres classiques. L'idée était de de permettre à l'utilisateur de prendre des copies numériques des éléments du tableau, et de lui renvoyer cette copie à la place de l'élément original. Celui-ci peut ensuite être effacé du tableau et l'utilisateur interagit alors uniquement avec la version numérique. Il peut ainsi faire toutes sortes de manipulations comme dupliquer l'objet, le déplacer, l'élargir, le réduire…

Nous devions apporter des améliorations à cette implémentation déjà fonctionnelle. Pour cela nous devions rajouter les fonctionnalités suivantes :
*Projection de la traduction du texte écrit au tableau suivant la langue choisie
*Résolution automatique d’une équation et tracé de courbe de la fonction

== Tiled display avec les tables ==

Les tables fournies par Digitale dont nous disposons possèdent une sur-couche linux SPHER OS dont nous devrons nous débarrasser afin de créer notre propre interface.

Dans le but d’effectuer un Tiled display sur les quatre tables, nous avons imaginer créer un serveur depuis l’une des tables. Chacun des écrans afficherait ensuite une page web représentant une partie de l’image globale.

Nous avons tout d’abord lister les différents déplacements possibles d’entités, ainsi que les moyens de communications entre les tables. Nous avons ensuite diviser le travail en trois parties : une portant sur le codage du moteur physique qui devra nous permettre de réaliser nos interactions, une autre sur la création du serveur et de la page web globale, et une dernier tournée vers la communication entre les tables à l’aide de sockets web ou par un bus de diffusion.

Suite à notre recherche sur les différents logiciels existants pour faire du tiling display, nous sommes tombé sur Sage2, un html viewer utilisé pour afficher de nombreux éléments dans de multiples fenêtres. Basé sur node.js, nous rencontrons des problèmes lors de l’installation de npm.

Le problème rencontré est le même sous windows ou linux.

====Les objectifs d’interactions à réaliser dans notre interface sont les suivants:====
*pouvoir déplacer les fenêtres
*zoomer / dezoomer sur plusieurs tables
*afficher un contenu statique, puis le répliquer dans les différentes fenêtres
*une touche pour un affichage plein écran (sur toutes les tables)
*la possibilité de faire tourner une fenêtre sur elle-même (ou rotation 90° à chaque coup)
*réaliser des applications en commun (par exemple un cours d’anatomie)
*proposer une représentation spatiale des tables afin de prévoir à l’avance les zones affichables
*prévoir les distances d’écartements entre les tables (prévoir les bordures)

=Architecture Générale =
==Tiled Display==
Chaque client affiche une page web (interface) connectée à un serveur Exress (NodeJS).

==Tableau interactif==
En résumé, après la capture de l'image d'entrée, suite à une action au niveau de l'interface, le Backend Java amorce la détection du texte. Différents traitements sont ensuite appliquées puis les scripts batch correspondants sont exécutés avec les paramètres requis. Ceux là contiennent les différents appels aux scripts Python associés et/ou à bibliothèque de transformation en image. Si une erreur survient, une exception est levée. Sinon on obtient bien une image de sortie (qui peut être erronée si le résultat de la détection n'est pas correct par exemple).

= Interface Graphique =
= Implémentation des fonctionnalités =

==Partie Tableau interactif==

===Mise en place d'un OCR===

====Objectif :====
L'objectif est d'être capable de récupérer du texte à partir d'une image donnée en entrée. Ce texte est destiné à être sauvegardé dans un fichier qui sera exploité par les prochains modules.

====Technologies utilisées : ====

'''Tess4J :''' http://sourceforge.net/projects/tess4j/

C'est un wrapper Java JNA pour l'API de '''Tesseract'''. Tess4J est distribué sous la licence Apache, v2.0.
Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

====Conception :====
Afin de faire de la récupération de texte sur des images, nous avons choisi d'utiliser Tess4J.
Ce choix a été fait par recommandation et par analyse comparative. Nous avons tout d'abord contacter Mr Laurent BESACIER qui nous a recommandé Tesseract. Puis nous avons fait un benchmark des différents OCR Open Source. Le choix de l'OCR est très important pour le procédé de traduction que nous comptons mettre en place.

Nous avons successivement testé '''Tesseract''', '''GOCR''', '''javaocr-source''', '''Asprise OCR''' (qui détecte même des codes barres et QR Codes). '''Tesseract''' et '''Asprise OCR''' sont ressortis comme les plus concluants pour la détection mais malheureusement le second n'est pas Open Source.
Toutefois comme le code développé par les étudiants de l'ENSIMAG était en JAVA, plutôt que de faire un appel système, nous avons sauté sur l'occasion d'utiliser '''Tess4J''' qui était une implémentation de Tesseract en Java. En effet il a été très facile de l'intégrer dans le code existant et de le lier aux différentes fonctions déjà présentes. Il s'agissait juste d'insérer un nouveau package.

====Problèmes rencontrés:====
L'intégration de Tess4J au projet existant a été plutôt simple. Toutefois cette librairie est seulement utilisable sur Windows et pas sur Linux à cause des '''DLL'''.
Le problème rencontré était plutôt liée aux performances de l'OCR lui-même. Il faut respecter une certaine syntaxe pour avoir une détection idéale. Certains caractères ne sont pas en effet reconnus ou confondus. Par exemple si un ''''r'''' est trop proche d'un ''''v'''' il peut être interpréter comme un ''''n''''.
Le temps de détection n'est pas optimal. Cela se ressent quand le texte est trop long.

===Intégration d'un module de traduction à l'OCR===

====Objectif :====
L'objectif est de traduire le texte récupéré par Tesseract et de le convertir en image de sortie qui sera affiché à l'utilisateur sur le tableau.

====Technologies utilisées : ====

'''Python Goslate:''' http://pythonhosted.org/goslate/

C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

====Conception :====
Pour mettre en place la traduction, nous commençons tout d'abord par récupérer le String renvoyé par Tess4J dans un fichier intitulé '''entree.txt'''. Le script que nous avons implémenté en python effectue tout d'abord une lecture de ce fichier dans son ensemble (et non pas mot par mot sinon nous n'obtiendrons pas une traduction fidèle). La traduction est ensuite renvoyée dans un fichier de sortie '''sortie.txt'''. Grâce à Image Magick, ce fichier de sortie est convertie en image PNG qui va être projetée sur le tableau par le vidéo-projecteur.
Pour plus de facilité, nous avons limité le choix des langues à cinq : '''français ('fr'), anglais ('en'), espagnol ('es') , italien ('it') et allemand ('de')'''.

====Problèmes rencontrés:====
Le premier problème rencontrée est que Tess4J détecte plus facilement les caractères en majuscule. Cependant, ces derniers ne sont pas très adaptés pour une traduction. De ce fait, au niveau du Java, lorsque nous récupérons le String résultat nous le transformons en minuscule grâce à la méthode '''toLowerCase()'''. A ce String nous appliquons au préalable un traitement de « nettoyage » avec la méthode '''trim()''' qui permet d'éliminer les éventuels caractères spéciaux qui se rajoutent et qui sont invisibles à l’œil nu. Il est nécessaire d'avoir une bonne connexion pour accélérer le processus de traduction.

Le passage du paramètre de la langue de traduction du code Java au script Python était plutôt délicat.

===Intégration à l'OCR d'un module de résolution d'équations et de calculs élémentaires===

====Objectif :====
L'objectif est que l'utilisateur écrive au tableau soit une opération élémentaire (addition, soustraction, multiplication et division), soit une équation du type '''ax+b''' et obtienne soit le résultat, soit la courbe de la fonction, par affichage.

====Technologies utilisées : ====

'''Librairies de Python :'''
*'''MatplotLib 1.2.0 :''' https://cloud.github.com/downloads/matplotlib/matplotlib/matplotlib-1.2.0.win32-py2.7.exe
*'''Numpy 1.9.2 :''' http://sourceforge.net/projects/numpy/files/NumPy/1.9.2/

'''Microsoft Visual Studio 2008 :''' http://download.microsoft.com/download/A/5/4/A54BADB6-9C3F-478D-8657-93B3FC9FE62D/vcsetup.exe

====Conceptions:====
Pour intégrer le module de résolution d'équation, nous reprenons le même modèle que pour la traduction '''(fichier entrée/fichier sortie)''' mais avec quelques particularités.
Nous avons conçu trois options pour les équations qui sont associés aux trois méthodes que nous avons implémentées pour elles :
* '''L'option -r''' :
Elle est associée à la méthode '''''solve_linear_equation(equ)'''''. Cette méthode prend en paramètre une équation du type '''ax+b''' et retourne la valeur de x , Pour la résolution on considère implicitement '''ax+b=0'''. Nous avons défini une expression régulière ('''r"(\d*)[xX]\+(\d+)"''') qui nous permet avec la méthode '''''group()''''' de récupérer les coefficients a et b et de résoudre l'équation. Le résultat de X avec 3 chiffres après la virgule est écrit dans le fichier de sortie puis affiché.
*'''L'option -rs''' :
Elle est associée à la méthode '''''solve_linear_equation_with_result(equ)'''''. Elle reprend la même idée que l'option précédente sauf que dans ce cas précis, on a un élément en plus qui correspond au résultat. On a ainsi des équations du type '''ax+b=c'''. L'expression régulière appliquée devient ainsi '''r"(\d*)[xX]\+(\d+)=(\d+)"'''.
*'''L'option -p''' :
Elle correspond à la méthode '''''plot_equation(formula, x_range)''''' et prend en entrée une formule du type '''ax+b''' et un intervalle d'affichage que nous avons fixé par défaut à '''[-10,11]'''. Elle permet l'affichage de la courbe de la fonction. Cette méthode n'implique pas l'édition d'un fichier de sortie. La courbe de la fonction est directement enregistré dans un '''fichier png'''. Toutes ces opérations ('''''tracé, enregistrement''''') sont possibles grâce à des méthodes inhérentes aux librairies Matplotlib et Numpy ('''''eval, plot, savefig''''').

Pour toutes ces options le format des équations doit être scrupuleusement respecté : pas d'espace, pas de nombres décimaux, pas de nombres négatifs. Il convient aussi de choisir la bonne équation pour le bon format d'entrée.

* '''L'option -o''' :
Elle fait appel à la méthode '''''solve_operation(formula)'''''. Celle-ci permet d'effectuer les opérations élémentaires : addition, soustraction, multiplication et division entre deux nombres. Ce format d'entrée est spécifié par l'expression régulière '''r"(\d*)[xX]\+(\d+)"'''.

====Problèmes rencontrés :====
Le problème majeur était lié à l'installation de la librairie '''Numpy''' sur Windows qui s'est avérée plus compliquée que prévue. Pour se faire nous avons dû installer '''Microsoft Visual Studio 2008''' pour pouvoir répondre à toutes les exigences de compilation pour intégrer cette bibliothèque à Python 2.7.

Dans une moindre mesure, concernant les options '''-r''' et '''-rs''' il fallait prendre en compte le cas où '''x=1''' dans l'expression '''ax+b'''. Nous avons juste rajouté la condition selon laquelle si le premier caractère renvoyé par la méthode '''''group()''''' valait '''"" (c’est-à-dire vide)''' , le nombre associé est '''1'''.

Ce problème est réapparu dans l'option '''-p'''. Pour faire appel à la méthode '''''eval()''''' le format de la formule ne doit plus être '''ax+b''' mais '''a*x+b'''. La transformation est plutôt facile au niveau du Java grâce à la fonction '''''replace("x", "*x")''''' mais elle ne doit se faire dans le cas où on a affaire à une équation du type '''x+b ("x\\+(\\d+)")''' pour éviter les erreurs (la formule '''x+1''' devient '''*x+1''' et n'est plus interprétée correctement).

==Partie Tiled Display==

===Lecture d’une vidéo (pdf, images etc...) en Tiled Display===

====Objectif :====

Afficher une video sur plusieurs tables tactiles, sans qu'il y est de latence entre les écrans.

====Technologies utilisées : ====

'''Module NowJS : https://github.com/Flotype/now/'''

Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''Module node-demux : https://github.com/tmarrinan/node-demux'''

Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''Module fluent-ffmpeg : https://github.com/fluent-ffmpeg/node-fluent-ffmpeg'''

Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les son. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

====Problèmes rencontrés:====
Nous avons estimé que le module fluent-ffmpeg serait suffisant pour que chaque client reçoivent les données vidéos en temps-réel.
Ce module est capable de décoder la video en format .flv et de piper les données dans un tuyau (stream) lu en sortie par un lecteur flowplayer. En gros, le client lance une méthode “get”, le serveur pipe les données dans la variable “res” qui est le résultat du “get”. Ensuite, côté client le lecteur flowplayer lit les données qui sont délivrées en continu.

Le problème est que le format .flv est non open-source et le lecteur Flowplayer ne permet pas d’utiliser les données une fois interprété. Par exemple, il nous était impossible de capturer chaque images du lecteur et des les copier dans un nouveau canvas; l’idée étant de pouvoir redimensionner les images à notre guise.

====Conception :====
Afin que chaque client puisse recevoir en temps-réel les données de la vidéo et puisse les traiter pour faire du Tiled Display, nous avons décidé d'utiliser :
*le module node-demux pour délivrer les images
*le module fluent-ffmpeg pour délivrer la partie audio

Les images délivrées sont traitées et redimensionnées par le client (cf: afficher une partie de la vidéo) et copiées dans un “canvas” spécifique.

Concernant la partie audio, chaque client possède un lecteur Flowplayer non visible et connecté par un tuyau au Serveur. Le module fluent-ffmpeg va ainsi permettre de délivrer toute sorte de données audio dans chaque tuyau de chaque client.
A noter que ce module peut délivrer la partie audio d’un fichier vidéo à partir d’un temps précis (par exemple à partir de la dixième minute); permettant ainsi de synchroniser les données lorsqu’un utilisateur avance ou recule la vidéo.

===Envoi d’une fenêtre vers une autre table, Rotation, Resize===

====Objectif : ====

Permettre à l'utilisateur d'envoyer par drag & drop un objet (video, pdf, image...) sur une autre table accolée à la sienne.

====Technologies utilisées :====
'''jquery.pep.js : http://pep.briangonzalez.org/ https://github.com/briangonzalez/jquery.pep.js'''
Ce module permet de faire du Drag and Drop sur des objets HTML. Il permet de calculer la vélocité du geste à tout moment et notamment lorsque l’utilisateur lâche l’objet.

'''interact.js : http://interactjs.io/ https://github.com/taye/interact.js'''
Ce module permet d'appliquer une rotation sur un objet et de changer ses dimensions.

'''jester.js : https://github.com/plainview/Jester
Ce module permet d'utiliser les évènements "doubletap"
====Problèmes rencontrés:====
Il a tout d'abord fallu adapter notre moteur physique à la sensibilité tactile des tables. Nous avons aussi dû préférer chrome à mozilla car firefox ne permettait pas de manipulation tactile performante.

====Conception :====
Dans un premier temps, à chaque fois qu'un client crée une fenêtre, il prévient tous les autres clients qui vont aussi la créer et la cacher. Dès qu'un client bouge une fenêtre, il envoie les coordonnées du mouvements aux autres clients. Ces derniers vont ensuite calculer ces coordonnées par rapport à l'orientation de la table (Nord-Est, Nord-Sud etc...). Par exemple, si l'utilisateur envoie la fenêtre à droite en dehors du cadre, la table tactile à droite affichera la fenêtre. Si il n'y a pas de table tactique à une orientation, alors la fenêtre ne peut sortir du cadre, il y a un mur.

A chaque fois que l'utilisateur fait un "doubletap" sur le header de la fenêtre, il se repositionne à son état angulaire d'origine, c'est-à-dire, comme si il n'y avait jamais eu de rotation.

===Jeux ping-pong et drawing===

====Objectif : ====
Réalisation d'applications utilisables sur plusieurs tables à la fois.

====Technologies utilisées :====

====Problèmes rencontrés:====
Adaptation de la sensibilité et gestion des bordures.

====Conception :====
Ping-pong : jeux de ping-pong basique en javascript jouable sur deux tables en face à face, le joueur déplace son doigt afin de déplacer la barre permettant de faire rebondir la balle.
Drawing : fenêtre partagée par plusieurs tables dans laquelle chaque client peut réaliser des dessins.

Proj-2014-2015-SmartClassRoom/SRS

2015-03-24T23:01:16Z

RICM4-prj14-grp12: /* 4. Product evolution */

The document provides a template of the Software Requirements Specification (SRS). It is inspired of the IEEE/ANSI 830-1998 Standard.

{|class="wikitable alternance"
|+ Document History
|-
|
!scope="col"| Version
!scope="col"| Date
!scope="col"| Authors
!scope="col"| Description
!scope="col"| Validator
!scope="col"| Validation Date
|-
!scope="row" |
| 0.1.0

0.1.1

1.0.1
|

March 2014

March 2014

March 2014
| El Hadji Malick Fall
Benoît Perruche

El Hadji Malick Fall

Benoît Perruche
| First description

Second description

Third description
| El Hadji Malick Fall
Benoit Perruche

Benoit Perruche

El Hadji Malick Fall
|
March, 14th 2015

March, 16th 2014

March, 19th 2014

|}

=1. Introduction=
==1.1 Purpose of the requirements document==

Les principaux objectifs de ce document qui décrit notre projet '''SmartClassroom''' sont:
*permettre aux lecteurs d'identifier les différentes parties de notre projet
*permettre aux lecteurs de découvrir les technologies que nous avons développer
*expliquer l'approche adoptée et les solutions que nous avons proposées
*fournir une base de travail pour de futures améliorations

==1.2 Scope of the product==

L'objectif à long terme de ce projet est de mettre en place des technologies qui permettent d'améliorer les techniques d'enseignement dans les salles de cours. On peut ainsi imaginer des activités pédagogiques interactives comme des évaluations fournissant des réponses instantanées et permettant ainsi aux enseignants de voir quand un concept doit être révisé ou quand ils doivent davantage aider les élèves.

==1.3 Definitions, acronyms and abbreviations==

'''OCR'''
::La reconnaissance optique de caractères (ROC, en anglais optical character recognition : OCR) désigne les procédés informatiques pour la traduction d'images de textes imprimés ou dactylographiés en fichiers de texte.

'''Goslate'''
::C'est une API gratuite en python qui fournit un service de traduction de Google en interrogeant le service de Google Traduction.

'''Tesseract'''
::Tesseract est un moteur open source de reconnaissance optique de caractères qui peut être utilisé :
*soit directement, en ligne de commandes soit par l'intermédiaire d'une interface graphique pour reconnaitre du texte avec mise en page basique ; cet usage est déjà fonctionnel.
*soit avec des surcouches gérant les mises en page complexes, etc., comme ocropus (encore en version beta).

'''Tiled Display'''
::Le principe est de créer un écran géant composé de plusieurs écrans plus petits :
N'importe quel écran peut être utilisé pour un wall display (il est tout de même nécessaire d'adapter ensuite la technologie et les outils utilisés). Par exemple il est possible d'utiliser :
*les écrans d'ordinateurs ou de télévisions
*plusieurs vidéoprojecteurs
*les écrans de téléphone mobile

'''NowJS'''
::Ce module utilise les socket.io et permet de créer des applications web fonctionnant en temps-réel.
Fonctionnement : Un composant “now” est partagé entre le serveur et tous les clients. On peut ainsi lancer une fonction implémentée sur le serveur à partir d’un client, et aussi avoir accès à tous les composants déposés dans “now”.

'''node-demux'''
::Ce module permet de décoder en temps-réel une video en images brutes. Il utilise la technologie ffmpeg.

'''fluent-ffmpeg'''
::Ce module très puissant permet d’utiliser la technologie ffmpeg sur NodeJS. Contrairement à node-demux, il permet de décoder des videos en temps-réel et en plusieurs formats, comme .flv, en incluant les sons. Il permet aussi de décoder uniquement la partie audio d’un fichier vidéo. Ce module est très efficace pour faire du streaming vidéo.

==1.4 References==

'''General :'''

Ce projet est un projet de fin d'étude, qui se déroule à Polytech Grenoble, et soutenu par la Fabmstic. La page du projet sur le wiki air est disponible via ce lien [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom ProjetSmartClassroom]

'''Technical :'''

Le Tiled Display - http://air.imag.fr/index.php/Tiled_Display

'''Librairies:'''

Tess4J - http://tess4j.sourceforge.net/

ImageMagick - http://www.imagemagick.org/

Goslate: Free Google Translate API - http://pythonhosted.org/goslate/

NowJS - https://github.com/Flotype/now/

node-demux - https://github.com/tmarrinan/node-demux

fluent-ffmpeg - https://github.com/fluent-ffmpeg/node-fluent-ffmpeg

==1.5 Overview of the remainder of the document==

Le reste de ce document présente les caractéristiques techniques du projet telles que les exigences et les contraintes, ainsi que les caractéristiques nécessaires à l'utilisateur.
La section 3 décrit les exigences détaillées, spécifiques et fonctionnelles, de performance, système et autres exigences relatives au projet. Des renseignements complémentaires sur les annexes sont également fournis dans cette même section.

=2. General description=
L'objectif à long terme de ce projet est de mettre en place des technologies qui permettront d'améliorer les techniques d'enseignement dans les salles de cours.

Ce projet se divise en deux parties :
* Tableau interactif avec numérisation de l'information
* Tiled display sur tables tactiles

==2.1 Product perspective==
Nous devons en effet tenir compte de l'évolution possible de ce projet.
Pour le tableau interactif, l'utilisateur effectue une manipulation virtuelle de données sur un tableau blanc physique. En effet il écrit son texte et la traduction de celui-ci est projeté dans la langue qu'il a choisie parmi celles proposées. Une idée d'amélioration est d'intégrer de la résolution automatique d'équations et d'animations de schémas physiques.
Pour la table, on pourrait imaginer la réalisation d'applications communes (par exemple un cours d’anatomie) pouvant tirer profit du tiling display.

==2.2 Product functions==
===2.2.1 Interactive board===
'''Text detection'''

Dans un premier temps, à partir d'un vidéo projecteur placé en face du tableau, il est possible en temps réel de:
* Capturer des images des textes manuscrits
* Récupérer des strings à partir de ces images

'''Translation or arithmetic and conversion'''

Dans un second temps, le résultat de la sortie récupérée est projetée sur le tableau.
Deux étapes sont nécessaires :
*Traitement
*Conversion
Si la sortie correspond à une opération mathématique ou une équation, son résultat (ou sa courbe) est affichée avec au préalable. Sinon si elle correspond à un texte, elle est d'abord traduite puis le texte traduit est converti en format image.

===2.2.2 Touch tables===
'''Tiled display'''
Une fois le serveur lancé et les clients connectés, chaque utilisateur (un par table tactile par exemple), a la possibilité de :
* Créer un objet (charger une video, une image, un pdf)
* Définir si cet objet est créé localement ou bien sur toutes les tables
* Réaliser de multiples interactions avec cet objet (mise en plein écran, déplacement d'une table à une autre, rotation,...)

==2.3 User characteristics==
Ce projet est principalement destiné aux enseignants. Il leur permettra de passer d'un type d'enseignement à un autre plus évolué, c'est à dire gérer plus efficacement leurs classes, et évaluer la compréhension des élèves durant le cours. On distingue ensuite les élèves qui pourront entre autres organiser leurs propres fichiers multimédias, prendre des notes, collaborer avec d'autres élèves ou partager des fichiers avec les enseignants.

Toutefois, on peut les distinguer des utilisateurs développeurs qui pourront ajouter de nouvelles fonctionnalités au projet.

==2.4 General constraints==
* L'image capturée du tableau ne doit pas être vide ou corrompue
* Pour les fichiers d'entrée et de sortie le format est '''.txt'''
* Le format de sortie des images est '''.png''' (peu importe leur format d'entrée)
* Le script de traduction est écrit en Python
* Une connexion internet est nécessaire pour l’exécution du script

==2.5 Assumptions and dependencies==
* Une connexion haut-débit est requise pou accélérer le processus de traduction de Goslate et la projection de vidéos HD en tiled display
* Pour bénéficier de cette connexion, des dongles wifi sont nécéssaires
* Pour la capture d'images et la projection il faut respectivement un appareil photo et un vidéo projecteur

=3.Specific requirements, covering functional, non-functional and interface requirements=
* document external interfaces,
* describe system functionality and performance
* specify logical database requirements,
* design constraints,
* emergent system properties and quality characteristics.

==3.1 Requirement X.Y.Z (in Structured Natural Language)==

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi imperdiet dignissim mi et venenatis. Proin dictum ligula odio, ut fringilla nulla tincidunt in. Maecenas eu euismod augue, ut mollis libero.

'''<image>'''

Nullam pulvinar sagittis orci nec cursus. Donec non sodales ipsum. Phasellus eleifend lobortis tortor, ut vulputate nisi interdum non. Fusce nec commodo tortor, id varius ante. Cras tincidunt tellus porta egestas bibendum.

=== 3.1.1 Text detection ===

'''Description''': Le texte écrit sur le tableau est capturé et extrait à partir d'une image

'''Inputs''': Image récupéré du tableau

'''Source''': Appareil photo et SDK gphoto2

'''Outputs''': Fichier texte contenant le texte écrit au tableau

'''Destination''': Le script de traduction Python

'''Action''':
L'appareil capture la surface manuscrite délimitée par les jetons. La bibliothèque Tess4J lance une détection sur l'image générée et insère le texte trouvé dans un fichier.

'''Non functional requirements''': L'extraction du texte doit être fait en temps réel et rapidement

'''Pre-condition''': Disposer d'un appareil photo et installer les librairies gphoto2 et Tess4J

'''Post-condition''': Le texte doit être bien reconnu

'''Side-effects''': Échec dans la détection du texte, Image d'entrée floue

=== 3.1.2 Translation and text projection ===

'''Description''': Le fichier de sortie de Tess4J est traduit puis transformé en image pour être projeté

'''Inputs''': Un fichier texte

'''Source''': Script de traduction Python Goslate

'''Outputs''': Une image contenant le texte traduit

'''Destination''': Le vidéo-projecteur

'''Action''':
Le fichier de sortie de Tess4J est donnée en entrée au script Python qui procède à sa traduction. Le nouveau fichier obtenu est ensuite transformé en image grâce à la bibliothèque ImageMagick.

'''Non functional requirements''': La traduction du texte doit être parfaite. La durée d’exécution du script ne doit pas être longue.

'''Pre-condition''': Avoir un vidéo projecteur et installer Python 2.7 et la librairie Goslate.

'''Post-condition''': Le texte de sortie n'est pas vide

'''Side-effects''':

=== 3.1.3 Tiled Display (video example) ===

'''Description''': Affichage d'une vidéo en tiling display sur deux tables tactiles accolées

'''Inputs''': vidéo .mp4

'''Source''': tables tactiles

'''Outputs''': chaque table affiche sa moitié de la vidéo

'''Destination''': affichage des tables

'''Action''': un client charge la vidéo et décide de l'afficher en tiling display. Le serveur envoie toutes les 50ms l'image que chaque client doit afficher.

'''Non functional requirements''': il ne doit pas y avoir de latence entre l'affichage des deux tables

'''Pre-condition''': tables connectées au serveur, présence de l'ensemble des librairies ainsi que du projet sur les deux tables, fichier video présent sur la table qui charge l'objet

'''Post-condition''': affichage en plein écran sur les deux tables qui doivent toujours rester connectées au serveur

=== 3.1.4 Translation from the teacher to the students ===

'''Description''': Capture du texte et envoie de la traduction aux tables tactiles

'''Inputs''': image du tableau

'''Source''': appareil photo

'''Outputs''': texte

'''Destination''': affichage tables tactiles

'''Action''': le texte est détecté, traduit, puis envoyé sur le serveur auquel sont connectées les tables

'''Non functional requirements''': réseau local entre les tables et le pc réalisant l'analyse d'image et la traduction

'''Pre-condition''': tables et ordinateur du tableau interactif connectés au serveur

'''Post-condition''': affichage de la traduction sur les tables

=4. Product evolution=
*Résolution d'équations plus complexes
*Animation de figures avec moteurs physiques
*Sélection de données à distance à partir d'une tablette

=5. Appendices=
==5.1 Specification ==
* La page principale du projet peut être trouvée [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassRoom ici]
* Un autre groupe en RICM4 travaille aussi sur ce projet. Leur page wiki est accessible via le lien ci-dessous:
:- [http://air.imag.fr/index.php/Proj-2014-2015-SmartClassroom Proj-2014-2015-SmartClassroom]

=6. Index=

Opinion Mining et Sentiment Analysis

2015-03-24T22:58:06Z

RICM4-prj14-grp12: /* Documentation */

= Présentation =

* Enseignants : Georges-Pierre Bonneau, Didier Donsez ([[EA2014]])
* Sujet : FirefoxOS
* Date : 4 octobre 2014
* Auteur : Flavien Peyre <Firstname DOT Name AT e DOT ujf-grenoble DOT fr>
* Lien vers les slides de la présentation : [http://slides.com/darkskull/firefoxos#/ slides]

== Abstract ==

Open data is any content that people are free to use, re-use and redistribute — without any legal, technological or social restriction.
It is the idea that certain data should be freely available to everyone to use and republish as they wish, without restrictions from copyright, patents or other mechanisms of control.[ The goals of the open data movement are similar to those of other "Open" movements such as open source.
Equality, Collobaration and innovation.

=== Mots-clés; Key Words===

ouverture, transparence, licence, W3C, Web des données, RDF, public, Tim Berners

= Synthèse =

== Qu'est-ce que l'Opinion Mining ? ==
* une discipline récente basée sur des méthodes de programmation issues de neuro-linguistique, d'intelligence artificielle et/ou de spectrocospie infrarouge pour l'extraction d'opinions.
* de manière plus conventionnelle, l'opinion mining traite de l'extraction de sentiments ou d'opinions à partir d'un texte.
* Internet aujourd'hui et le nombre toujours croissant de personnes utilisant les réseaux sociaux fourni une quantité astronomique de données texte traitant de différents sujets comme l'appréciation d'un produit ou d'une personne par exemple.
* ces sources d'information intéressent evidemment les entreprises, mais aussi les possibles acheteurs d'un produit qui souhaiteraient connaitre les appréciations des utilisateurs.

== Motivations ==
Le but est de savoir ce qu'une personne pense en fonction de ce qu'elle a écrit. Tous les utilisateurs ne désirent pas la même chose d'un produit (certains seront plus intéréssés par la durée de vie, d'autres par un prix avantageux, ou encore la vitesse de livraison).
Prenons l'exemple d'amazon, un acheteur potentiel va normalement se renseigner sur le produit et jeter un oeil aux différents commentaires. Une personne qui vient d'acheter ce produit va parler de son expérience et exprimer son ressenti. C'est donc dans l'interet de l'entreprise de rester au courant et d'analyser les retours que les acheteurs font, afin d'améliorer leurs produits et ajuster leur stratégie de marketing.

== Marché ==
Il existe déjà plusieurs applications analysant les sentiments de commentaires sur certains réseaux sociaux :
* Twitter sentiment : http://twittersentiment.appspot.com/ (nécessite un compte twitter)
* SocialMention: http://socialmention.com/
Ces applications permettent une recherche d'opinions facile pour des personnalitées ou des marques connues, recherche bien plus compliquée pour des sujets plus abstraits.
Ces applications, basées essentiellement sur l'analyse de la positivité ou négativité d'un terme (utilisation d'un dictionnaire attribuant un score positif ou negatif aux mots), ne fonctionnent pas bien :
* analyse des tweets possédant le mot-clé, pas des tweets dont le mot-clé en est le thème.
* il n'y a pas de corrélation entre le tweet et le mot-clé, le sentiment du tweeter s'attribue à l'ensemble du commentaire.

Derwent Capital Markets est une entreprise pionière pour l'utilisation de l'analyse de sentiments dans les réseaux sociaux afin d'élaborer des prédictions sur le cours de la bourse. Ils ont en effet établi certaines corrélations entre des mots à caractères émotionnels apparaissant dans les posts de Twitter et les variations de l'indice boursier. S'attendant au résultat selon lequel une baisse de l'indice boursier induisait une dégradation de l'humeur des gens sur Twitter, DCM ne s'attendait pas à découvrir que c'était la baisse de l'humeur des gens qui précédait une chute du cours boursiers.
Cependant, leurs résultats doivent être pris avec précautions. En effet, les résultats proposés par Derwent Capital Markets comporteraient de nombreuses failles. S'il était vraiment possible de prévoir les variations de l'indice boursier avec cette méthode, son utilisation serait beaucoup plus répandue.

== Méthode pour l'analyse d'opinion ==
S'en tenir à l'opinion d'un spécialiste pour répondre à une question technique est plus sûr que l'opinion générale. L'opinion mining doit donc seulement être utilisé pour certaines tâches.
Mais si l'on se retrouve en présence de plusieurs spécialistes, certaines études montrent que l'on aurait tendance à attribuer plus de poids au spécialiste le plus crédible qu'à la majorité. Des notions comme la confiance, l'autorité et l'influence sont donc relatées à l'opinion mining.
Il est nécessaire de séparer confiance relationnelle et confiance par réputation.

L'enjeu dans un tweet est d'extraire la partie représentant l'opinion. La deuxième étape est l'extraction de la polarité (positif, neutre, negatif ou bien à l'aide d'une échelle numérique) de l'opinion. Pour finir, la somme globale des scores sur les opinions représentera le sentiment général sur ce sujet.
La première amélioration consiste à déterminer dans un texte quelle opinion est attribuée à quelle caractéristique.Il est important de connaitre la source (la personne à l'origine) et la cible (le sujet) de chaque opinion.

L'un des problème à résoudre lors de l'analyse de sentiments est la détection de spams. En effet, c'est une pratique assez répandu chez les entreprises de payer certaines personnes pour écrire des commentaires positifs (ou négatifs) sur un produit, une entreprise ou même un gouvernement.

Les réseaux sociaux fournissent trois types d'intérêts à propos d'un utilisateur :
- explicite : la personne aime le cinéma.
- implicite : quelqu'un aimant les sports extrèmes aura tendance à aimer prendre des risques.
- associatif : les gens qui achètent des produits de la marque Zara auront aussi tendance à acheter des produits Apple.
Le but est de définir des clusters d'intérêts et d'opinions sur de larges groupes de personnes. En effet, les entreprises pourront ensuite cibler leur publicité aux différents groupes de personnes.

== Documentation ==
* [http://www.cs.cornell.edu/home/llee/omsa/omsa.pdf Etude sur l'Opinion Mining]
* [http://fr.wikipedia.org/wiki/Opinion_mining Opinion Mining Wikipedia]