# HG changeset patch
# User bastiena
# Date 1342184263 -7200
# Node ID 983d7be910c1b2c5673196fdf8a4ecf0d260acde
# Parent  4e1ee94d70b19fa9c581febd01fb97470d0ed2a1
Front JS:

pointers repaired + help added to gestures

diff -r 4e1ee94d70b1 -r 983d7be910c1 contact.txt
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/contact.txt	Fri Jul 13 14:57:43 2012 +0200
@@ -0,0 +1,5 @@
+Ce fichier contient les adresses où vous pouvez me joindre ou joindre l'Institut de Recherche et d'Innovation :
+This file contains my email or IRI's if you want to contact us :
+
+Mon email : alexandre.bastien.033569@gmail.com
+Contact IRI : contact@iri.centrepompidou.fr
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/gestures/communication/js/client.js
--- a/front_js/gestures/communication/js/client.js	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/gestures/communication/js/client.js	Fri Jul 13 14:57:43 2012 +0200
@@ -21,7 +21,7 @@
  * Un client est défini par une socket, qui permettra de recevoir les données du server websocket du Middleware.
  * On accède aussi à la classe des pointeurs.
 */
-function client(host, port, _gestures)
+function Client(host, port, _gestures)
 {
     this.socket;
     this.gestures = _gestures;
@@ -33,7 +33,7 @@
 /*
  * Création et Initialisation des sockets et listeners permettant d'écouter le server.
 */
-client.prototype.createWebSocket = function(host)
+Client.prototype.createWebSocket = function(host)
 {
     var _this = this;
     
@@ -81,7 +81,7 @@
 /*
  * Traite un message reçu du Middleware.
 */
-client.prototype.processMsg = function(msg)
+Client.prototype.processMsg = function(msg)
 {
     if(typeof msg === 'undefined' || typeof msg.data === 'undefined')
     {
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/gestures/gestures/css/gestures.css
--- a/front_js/gestures/gestures/css/gestures.css	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/gestures/gestures/css/gestures.css	Fri Jul 13 14:57:43 2012 +0200
@@ -23,7 +23,7 @@
     overflow: hidden;
 }
 
-#textPanel
+#textPanel, #helpText
 {
     position: relative;
     height: 50px;
@@ -36,4 +36,18 @@
 #imagePanel
 {
     position: absolute;
+}
+
+.help_imgs
+{
+	position: relative;
+	margin: 15px;
+	width: 150px;
+	height: 150px;
+}
+
+#helpImgs
+{
+	width: 100%;
+	text-align: center;
 }
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/gestures/gestures/js/gestures.js
--- a/front_js/gestures/gestures/js/gestures.js	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/gestures/gestures/js/gestures.js	Fri Jul 13 14:57:43 2012 +0200
@@ -20,7 +20,7 @@
 /*
  * Classe définissant les gestes.
  */
-function gestures(config)
+function Gestures(config)
 {
     this.isGestureShown = false;
     this.showGestureTimeout;
@@ -29,6 +29,8 @@
     this.imgHeight;
     
     this.config = config;
+
+	this.help();
     
     var textPanel = "<div id='textPanel'>Aucune gesture n'est détectée.</div>";
     var imagePanel = "<img id='imagePanel' src='./img/black.png'></img>";
@@ -42,18 +44,19 @@
         //On positionne l'image au centre de l'écran.
         $('#imagePanel').css(
         {
-            top: ($(window).height() - this.imgWidth) / 2,
+            top: ($(window).height() - $('#help').position().top) / 2,
             left: ($(window).width() - this.imgHeight) / 2
         });
     });
     
-    this.wsClient = new client(this.config["host"], this.config["port"], this);
+    this.wsClient = new Client(this.config.host, this.config.port, this);
+	
 }
 
 /*
  * Affiche les gestures reçues.
 */
-gestures.prototype.showGesture = function(gesture)
+Gestures.prototype.showGesture = function(gesture)
 {
     //Si on n'avait aucune gesture, on peut l'afficher.
     if(!this.isGestureShown)
@@ -72,6 +75,35 @@
             _this.isGestureShown = false;
             $('#imagePanel').attr("src", "./img/black.png");
             $('#textPanel').html("Aucune gesture n'est détectée.");
-        }, this.config["timeShowGesture"]);
+        }, this.config.timeShowGesture);
     }
+}
+
+/*
+ * Affiche les gestes affichables.
+*/
+Gestures.prototype.help = function()
+{
+	//On crée le texte et les images à mettre en bas de la fenêtre pour guider l'utilisateur.
+	var imgs = ['bend', 'fall', 'hello', 'jump', 'knee_up', 'pull_both', 'pull_right', 'pull_left', 'push_both', 'push_left', 'push_right', 'swipe_left', 'swipe_right'];
+	var helpText = '<div id="helpText">Gestures affichables :</div>';
+	var helpImgs = '<div id="helpImgs">';
+	for(var i = 0 ; i < imgs.length ; i++)
+	{
+		helpImgs += '<img class="help_imgs" id="img_' + imgs[i] + '" src="./img/' + imgs[i] + '.png" />';
+	}
+	helpImgs += '</div>';
+	var help = '<div id="help">' + helpText + helpImgs + '</div>'
+	
+	$('body').append(help);
+	
+	$('#help').css(
+	{
+		position: 'absolute',
+		left: 0,
+		width: '100%',
+		top: $(window).height() - $('#help').height()
+	});
+	
+	console.log($(window).height() - $('#help').height());
 }
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/gestures/index.html
--- a/front_js/gestures/index.html	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/gestures/index.html	Fri Jul 13 14:57:43 2012 +0200
@@ -37,16 +37,17 @@
         <script type="text/javascript">
             var gts;
             
-            var config = new Object();
-            
-            config["timeShowGesture"] = 1000;
-            config["host"] = "127.0.0.1";
-            config["port"] = 8090;
+            var config =
+			{
+				timeShowGesture: 1000,
+				host: '127.0.0.1',
+				port: 8090
+			};
             
             //Si la page a chargé, on charge les pointeurs.
             $(document).ready(function ()
             {
-                gts = new gestures(config);
+                gts = new Gestures(config);
             });
         </script>
     </body>
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/pointers/communication/js/client.js
--- a/front_js/pointers/communication/js/client.js	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/pointers/communication/js/client.js	Fri Jul 13 14:57:43 2012 +0200
@@ -21,7 +21,7 @@
  * Un client est défini par une socket, qui permettra de recevoir les données du server websocket du Middleware.
  * On accède aussi à la classe des pointeurs.
 */
-function client(host, port, _pointers)
+function Client(host, port, _pointers)
 {
     this.socket;
     this.pointers = _pointers;
@@ -39,7 +39,7 @@
 /*
  * Création et Initialisation des sockets et listeners permettant d'écouter le server.
 */
-client.prototype.createWebSocket = function(host)
+Client.prototype.createWebSocket = function(host)
 {
     var _this = this;
     
@@ -87,7 +87,7 @@
 /*
  * Traite un message reçu du Middleware.
 */
-client.prototype.processMsg = function(msg)
+Client.prototype.processMsg = function(msg)
 {
     if(typeof msg === 'undefined' || typeof msg.data === 'undefined')
     {
@@ -111,6 +111,8 @@
         {
             this.pointers.mainPointerDisplay(true);
             this.pointers.isMainPointerDisplayed = true;
+			
+			this.pointers.textUpdate();
         }
         
         this.pointerLeftTimeout = setTimeout(function()
@@ -121,6 +123,8 @@
             {
                 _this.pointers.isMainPointerDisplayed = false;
                 _this.pointers.mainPointerDisplay(false);
+				
+				_this.pointers.textUpdate();
             }
         }, this.timePointers);
     }
@@ -140,6 +144,8 @@
         {
             this.pointers.secondPointerDisplay(true);
             this.pointers.isSecondPointerDisplayed = true;
+			
+			this.pointers.textUpdate();
         }
         
         this.pointerRightTimeout = setTimeout(function()
@@ -150,6 +156,8 @@
             {
                 _this.pointers.isSecondPointerDisplayed = false;
                 _this.pointers.secondPointerDisplay(false);
+				
+				_this.pointers.textUpdate();
             }
         }, this.timePointers);
     }
@@ -157,5 +165,6 @@
     if(this.pointerLeft && !this.pointerRight || !this.pointerLeft && this.pointerRight || !this.pointerLeft && !this.pointerRight)
     {
         this.pointers.areBothPointersHere = false;
+		this.pointers.textUpdate();
     }
 }
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/pointers/index.html
--- a/front_js/pointers/index.html	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/pointers/index.html	Fri Jul 13 14:57:43 2012 +0200
@@ -36,10 +36,18 @@
         <!-- Scripts principaux. -->
         <script type="text/javascript">
             var pts;
+			
+			var config =
+			{
+				timeFilling: 1000,
+				host: '127.0.0.1',
+				port: 8090
+			};
+			
             //Si la page a chargé, on charge les pointeurs.
             $(document).ready(function ()
             {
-                pts = new pointers();
+                pts = new Pointers(config);
             });
         </script>
     </body>
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/pointers/pointers/css/pointers.css
--- a/front_js/pointers/pointers/css/pointers.css	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/pointers/pointers/css/pointers.css	Fri Jul 13 14:57:43 2012 +0200
@@ -24,6 +24,7 @@
 
 #mainPointer
 {
+	position: absolute;
     height: 74px;
     width: 74px;
     background-image: url("../../img/pointer.png");
@@ -33,9 +34,20 @@
 
 #secondPointer
 {
+	position: absolute;
     height: 74px;
     width: 74px;
     background-image: url("../../img/pointer2.png");
     background-repeat: no-repeat;
     background-position: 0px 0px;
+}
+
+#textPanel
+{
+    position: relative;
+    height: 50px;
+    width: 100%;
+    color: #fff;
+    font-size: 40px;
+    text-align: center;
 }
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 front_js/pointers/pointers/js/pointers.js
--- a/front_js/pointers/pointers/js/pointers.js	Mon Jul 09 14:24:42 2012 +0200
+++ b/front_js/pointers/pointers/js/pointers.js	Fri Jul 13 14:57:43 2012 +0200
@@ -20,27 +20,41 @@
 /*
  * Classe définissant les pointers.
  */
-function pointers()
+function Pointers(config)
 {
     this.mainPointerLastX = 0;
     this.mainPointerLastY = 0;
     this.secondPointerLastX = 0;
     this.secondPointerLastY = 0;
+	
+	this.isMainPointerDisplayed = false;
+	this.isSecondPointerDisplayed = false;
+	
+	this.pointerLeftTimeout = null;
+	this.pointerRightTimeout = null;
+	
+	this.config = config;
+	
+	this.client = new Client(this.config.host, this.config.port, this);
+	
+	this.addPointers();
 }
 
 /*
  * Affiche les pointeurs.
 */
-pointers.prototype.addPointers = function()
+Pointers.prototype.addPointers = function()
 {
     var mainPointer = '<div id="mainPointer" class="pointers"></div>';
     var secondPointer = '<div id="secondPointer" class="pointers"></div>';
-    $('body').append(mainPointer + secondPointer);
+	var textPanel = "<div id='textPanel'>Les mains sont trop loin ou trop près.</div>";
+    $('body').append(textPanel + mainPointer + secondPointer);
     
     $('#secondPointer').css(
     {
         top: $(window).height() / 2 - $('#secondPointer').height() / 2,
-        left: $(window).width() / 4 - $('#secondPointer').width() / 2
+        left: $(window).width() / 4 - $('#secondPointer').width() / 2,
+		opacity: 0
     });
     
     this.secondPointerLastX = $(window).width() / 4 - $('#secondPointer').width() / 2;
@@ -49,7 +63,8 @@
     $('#mainPointer').css(
     {
         top: $(window).height() / 2 - $('#mainPointer').height() / 2,
-        left: $(window).width() * 3 / 4 - $('#mainPointer').width() / 2
+        left: $(window).width() * 3 / 4 - $('#mainPointer').width() / 2,
+		opacity: 0
     });
 
     this.mainPointerLastX = $(window).width() * 3 / 4 - $('#mainPointer').width() / 2;
@@ -60,43 +75,43 @@
  * Affiche/Masque le pointeur principal.
  * Main est un booléen valant vrai s'il faut afficher le pointeur.
 */
-pointers.prototype.mainPointerDisplay = function(main)
+Pointers.prototype.mainPointerDisplay = function(main)
 {
     var _this = this;
     
     //Si le booléen est à vrai, on affiche le pointeur.
     if(main)
     {
-        $('#mainPointer').fadeTo(this.config['timeFilling'], '1');
+        $('#mainPointer').fadeTo(this.config.timeFilling, '1');
     }
     else
     {
-        $('#mainPointer').fadeTo(this.config['timeFilling'], '0');
+        $('#mainPointer').fadeTo(this.config.timeFilling, '0');
     }
 }
 /*
  * Affiche/Masque le pointeur secondaire.
  * Main est un booléen valant vrai s'il faut afficher le pointeur.
 */
-pointers.prototype.secondPointerDisplay = function(second)
+Pointers.prototype.secondPointerDisplay = function(second)
 {
     var _this = this;
     
     //Si le booléen est à vrai, on affiche le pointeur.
     if(second)
     {
-        $('#secondPointer').fadeTo(this.config['timeFilling'], '1');
+        $('#secondPointer').fadeTo(this.config.timeFilling, '1');
     }
     else
     {
-        $('#secondPointer').fadeTo(this.config['timeFilling'], '0');
+        $('#secondPointer').fadeTo(this.config.timeFilling, '0');
     }
 }
 
 /*
  * Raffraîchit la position des pointeurs.
 */
-pointers.prototype.refreshMainPointer = function(x, y)
+Pointers.prototype.refreshMainPointer = function(x, y)
 {
     x *= 7;
     y *= 7;
@@ -135,7 +150,7 @@
     });
 }
 
-pointers.prototype.refreshSecondPointer = function(x, y)
+Pointers.prototype.refreshSecondPointer = function(x, y)
 {
     if(!this.mouseInteractions)
     {
@@ -175,4 +190,27 @@
         top: pointerY,
         left: pointerX
     });
+}
+
+/*
+ * Met à jour l'affichage du texte.
+*/
+Pointers.prototype.textUpdate = function()
+{
+	if(this.isMainPointerDisplayed && this.isSecondPointerDisplayed)
+	{
+		$('#textPanel').html('Les deux pointeurs sont détectés.');
+	}
+	else if(this.isMainPointerDisplayed && !this.isSecondPointerDisplayed)
+	{
+		$('#textPanel').html('Le pointer droit est détecté.');
+	}
+	else if(!this.isMainPointerDisplayed && this.isSecondPointerDisplayed)
+	{
+		$('#textPanel').html('Le pointeur gauche est détecté.');
+	}
+	if(!this.isMainPointerDisplayed && !this.isSecondPointerDisplayed)
+	{
+		$('#textPanel').html('Les mains sont trop loin ou trop près.');
+	}
 }
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 readme - Front Processing.txt
--- a/readme - Front Processing.txt	Mon Jul 09 14:24:42 2012 +0200
+++ b/readme - Front Processing.txt	Fri Jul 13 14:57:43 2012 +0200
@@ -85,4 +85,4 @@
 http://bodytag.org/nav.php?u=smoke2/
 http://bodytag.org/smoke2/smoke2.pde
 
-Si vous expérimentez des difficultés ou souhaitez me soumettre une requête, voici mon adresse : alexandre.bastien@iri.centrepompidou.fr
\ No newline at end of file
+Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 readme - Front Web.txt
--- a/readme - Front Web.txt	Mon Jul 09 14:24:42 2012 +0200
+++ b/readme - Front Web.txt	Fri Jul 13 14:57:43 2012 +0200
@@ -4,7 +4,7 @@
 
 I) TraKERS - Eléments requis :
 
-Dans cette partie, il vous faudra installer WampServer 2, disponible ici : http://www.wampserver.com/en/.
+Dans cette partie, il vous faudra installer WampServer 2, disponible ici : http://www.wampserver.com/en/ et consulter la documentation pour l'installation du Front JS disponible dans Front JS/doc/.
 
 II) TraKERS - Structure :
 
@@ -23,4 +23,4 @@
 
 Note importante : La norme WebSocket permet le multi-client. Par conséquent, il est possible de lancer ces deux exemples en même temps, à condition que le Middleware soit lançé en premier. Dans tous les cas, en cas de problème de connexion, il suffit de raffraichir la page web (avec F5 par exemple).
 
-Si vous expérimentez des difficultés ou souhaitez me soumettre une requête, voici mon adresse : alexandre.bastien@iri.centrepompidou.fr
\ No newline at end of file
+Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.
\ No newline at end of file
diff -r 4e1ee94d70b1 -r 983d7be910c1 readme - Middleware.txt
--- a/readme - Middleware.txt	Mon Jul 09 14:24:42 2012 +0200
+++ b/readme - Middleware.txt	Fri Jul 13 14:57:43 2012 +0200
@@ -125,4 +125,6 @@
 Par contre, le serveur WebSocket permet de gérer le multi-client.
 Si vous expérimentez des difficultés ou souhaitez me soumettre une requête, voici mon adresse : alexandre.bastien@iri.centrepompidou.fr
 
-Paramétrage : Le Middleware était conçu à l'origine pour permettre une modification de la configuration via une fenêtre durant le runtime. Il semblerait que Fleck provoque un comportement innatendu de cette fenêtre. Par conséquent, il est nécessaie de modifier le fichier config.txt à la racine de Middleware si on souhaite modifier les paramètres du Middleware. En cas de problème, le fichier ErrorFile.txt est créé dans ce même dossier.
\ No newline at end of file
+Paramétrage : Le Middleware était conçu à l'origine pour permettre une modification de la configuration via une fenêtre durant le runtime. Il semblerait que Fleck provoque un comportement innatendu de cette fenêtre. Par conséquent, il est nécessaie de modifier le fichier config.txt à la racine de Middleware si on souhaite modifier les paramètres du Middleware. En cas de problème, le fichier ErrorFile.txt est créé dans ce même dossier.
+
+Si vous expérimentez des difficultés ou souhaitez nous soumettre une requête, veuillez consulter le fichier contact.txt à la racine du projet.
\ No newline at end of file