Front IDILL: V00.10
authorbastiena
Tue, 18 Sep 2012 23:45:16 +0200
changeset 97 be87091be54e
parent 92 9927cbd5ec65
child 98 f3249915a9bd
Front IDILL: credits & gestures files added
front_idill/src/credits.json
front_idill/src/gestures.json
front_idill/src/lang/en.json
front_idill/src/lang/fr.json
front_idill/src/mosaic/css/mosaic.less
front_idill/src/mosaic/js/mosaic.js
front_idill/src/mosaic/js/notifications.js
front_idill/src/mosaic/js/search.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/credits.json	Tue Sep 18 23:45:16 2012 +0200
@@ -0,0 +1,188 @@
+{
+	"creditsData":[
+		{
+			"film":"animalz",
+			"realisation":"sergio cruz",
+			"company":"",
+			"production":"south east dance",
+			"choregraphy":"jp omari",
+			"music":"sergio cruz, filipe galante, christos fanaras"
+		},
+		{
+			"film":"encontros cotidianos",
+			"realisation":"gustavo fataki",
+			"company":"",
+			"production":"gustavo fataki",
+			"choregraphy":"gustavo fataki",
+			"music":"all angels gone avec adriana santos"
+		},
+		{
+			"film":"exotica",
+			"realisation":"sergio cruz",
+			"company":"",
+			"production":"",
+			"choregraphy":"",
+			"music":"steve rolands"
+		},
+		{
+			"film":"fenella",
+			"realisation":"tal amiran",
+			"company":"aegis arts live",
+			"production":"tal amiran",
+			"choregraphy":"julia gleich",
+			"music":"charles avison"
+		},
+		{
+			"film":"flying lesson",
+			"realisation":"rosane chamecki, andrea lerner, phil harder",
+			"company":"",
+			"production":"www.chameckilerner.com",
+			"choregraphy":"rosane chamecki, andrea lerner",
+			"music":"vivina lewine"
+		},
+		{
+			"film":"mue",
+			"realisation":"clémence coconnier",
+			"company":"",
+			"production":"meidosems",
+			"choregraphy":"clémence coconnier",
+			"music":"marco suarez cifuentes"
+		},
+		{
+			"film":"tank man tango at tian an men memorial",
+			"realisation":"deborah kelly",
+			"company":"",
+			"production":"sumugan sivanesan",
+			"choregraphy":"jane mc kernan",
+			"music":"spoken word + kineta files (with permission)"
+		},
+		{
+			"film":"you are you",
+			"realisation":"françois brice",
+			"company":"",
+			"production":"françois brice",
+			"choregraphy":"françois brice",
+			"music":"peter vermeersch"
+		},
+		{
+			"film":"50 shots",
+			"realisation":"lorenz huber",
+			"company":"",
+			"production":"tanzapartement clo huber and christen, galerie unter berlin, carolyn von toerne",
+			"choregraphy":"vanessa huber-christen",
+			"music":""
+		},
+		{
+			"film":"alger",
+			"realisation":"juan bernado pineda, nacho blanco",
+			"company":"",
+			"production":"",
+			"choregraphy":"juan bernado pineda",
+			"music":""
+		},
+		{
+			"film":"deep end dance",
+			"realisation":"conor horgan",
+			"company":"",
+			"production":"martha o'neill (wildfire)",
+			"choregraphy":"david bolger",
+			"music":"michael fleming"
+		},
+		{
+			"film":"i am my mother",
+			"realisation":"mohammad abbasi",
+			"company":"",
+			"production":"mohammad abbasi",
+			"choregraphy":"mohammad abbasi",
+			"music":"mohammad abbasi"
+		},
+		{
+			"film":"instrument",
+			"realisation":"ruben van leer",
+			"company":"",
+			"production":"ruben van leer (westframe)",
+			"choregraphy":"lukas timulak",
+			"music":"dirk haubrich"
+		},
+		{
+			"film":"joudance2 in asakusa-stage1",
+			"realisation":"jou, masayuki hara",
+			"company":"",
+			"production":"kaoru matsumoto, hiroaki saito",
+			"choregraphy":"jou",
+			"music":"masahiro hiramoto"
+		},
+		{
+			"film":"sliced",
+			"realisation":"constantin georgescu",
+			"company":"",
+			"production":"constantin georgescu",
+			"choregraphy":"constantin georgescu",
+			"music":"jonas wiese"
+		},
+		{
+			"film":"stronger",
+			"realisation":"wilkie branson",
+			"company":"",
+			"production":"wilkie branson (champloo dance company)",
+			"choregraphy":"wilkie branson, joel daniel",
+			"music":"phil king"
+		},
+		{
+			"film":"vrtti",
+			"realisation":"ana cembrero coca and jorge piquer rodriguez",
+			"company":"",
+			"production":"ana cembrero coca and jorge piquer rodriguez",
+			"choregraphy":"ana cembrero coca",
+			"music":"asturias. by isaac albeniz"
+		},
+		{
+			"film":"aside",
+			"realisation":"lorenz huber",
+			"company":"",
+			"production":"tanzapartement clo huber and christen",
+			"choregraphy":"vanessa huber-christen",
+			"music":"lorenz huber"
+		},
+		{
+			"film":"new under the sun",
+			"realisation":"petri ruikka",
+			"company":"",
+			"production":"petri ruikka (woland)",
+			"choregraphy":"anniina jääskeläinen",
+			"music":"matti pentikäinen & niclas kristiansson"
+		},
+		{
+			"film":"nid de lune",
+			"realisation":"pauline rigot-muller",
+			"company":"",
+			"production":"pauline rigot-muller",
+			"choregraphy":"pauline rigot-muller",
+			"music":"laurent delforge"
+		},
+		{
+			"film":"respire",
+			"realisation":"pierre jodlowski, david coste",
+			"company":"",
+			"production":"éole-intergra",
+			"choregraphy":"",
+			"music":"pierre jodlowski"
+		},
+		{
+			"film":"patria",
+			"realisation":"karin idelson, gabriela goldberg",
+			"company":"",
+			"production":"florence arguello (raymond)",
+			"choregraphy":"andrea servera",
+			"music":"leonardo martinelli"
+		},
+		{
+			"film":"the rat",
+			"realisation":"dieu hao do",
+			"company":"",
+			"production":"dieu hao do",
+			"choregraphy":"dieu hao do",
+			"music":"kava-the gambler"
+		}
+	]
+}
\ No newline at end of file
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/front_idill/src/gestures.json	Tue Sep 18 23:45:16 2012 +0200
@@ -0,0 +1,50 @@
+"gesture_list":[
+	{
+		"codename":"no-motion",
+		"img":"arret"
+	},
+	{
+		"codename":"fall",
+		"img":"chute"
+	},
+	{
+		"codename":"contact",
+		"img":"contact"
+	},
+	{
+		"codename":"group_spin",
+		"img":"group_spin"
+	},
+	{
+		"codename":"bend",
+		"img":"bend"
+	},
+	{
+		"codename":"knee_up",
+		"img":"knee_up"
+	},
+	{
+		"codename":"arm_carriage",
+		"img":"port_de_bras"
+	},
+	{
+		"codename":"lift",
+		"img":"grandjete"
+	},
+	{
+		"codename":"jump",
+		"img":"jump"
+	},
+	{
+		"codename":"spin",
+		"img":"circle"
+	},
+	{
+		"codename":"up_down",
+		"img":"up_down"
+	},
+	{
+		"codename":"wave",
+		"img":"wave"
+	}
+]
\ No newline at end of file
--- a/front_idill/src/lang/en.json	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/lang/en.json	Tue Sep 18 23:45:16 2012 +0200
@@ -58,6 +58,86 @@
 	"production":"production",
 	"choregraphy":"choregraphy",
 	"music":"music",
-	"footer":"<b>browsebymotion</b> is a contactless video interface that permits you to browse in dance films (<b>idill</b> festival editions 2011 and 2009) using gestures. Select a video and search by dancing or by using a gesture that is part of the grammar."
-	}
+	"footer_line1":"<b>browsebymotion</b> is a contactless video interface that permits you to browse in dance films (<b>idill</b> festival editions 2011 and 2009) using gestures. Select a video and search by dancing or by using a gesture that is part of the grammar.",
+	"footer_line2":"Project developped with the support of the Culture and Communication Ministery – General Direction of Artistic Creation."
+	},
+	"gestures_help_metadata":{
+	"name":"name",
+	"usage":"usage",
+	"desc":"description"
+	},
+	"gestures_help":[
+		{
+			"codename":"no_motion",
+			"name":"no motion",
+			"usage":"draw a cross from the top",
+			"desc":"this gesture represents a stopped or paused movement in the choregraphy"
+		},
+		{
+			"codename":"fall",
+			"name":"fall",
+			"usage":"simulate a fall by crouching",
+			"desc":"this gesture represents falls in the choregraphy"
+		},
+		{
+			"codename":"contact",
+			"name":"contact",
+			"usage":"draw twho horizontal lines that meet",
+			"desc":"this gesture represents contact points between dancers or a dancer body parts"
+		},
+		{
+			"codename":"group_spin",
+			"name":"group spin",
+			"usage":"draw two inverted circles",
+			"desc":"this gesture represents two or more dancers spinning around themselves or moving synchroneously in circles"
+		},
+		{
+			"codename":"bend",
+			"name":"bend",
+			"usage":"bend forward",
+			"desc":"this gesture represents bend movements of body parts"
+		},
+		{
+			"codename":"knee_up",
+			"name":"knee up",
+			"usage":"just raise a knee",
+			"desc":"this gesture represents raising knees or legs"
+		},
+		{
+			"codename":"arm_carriage",
+			"name":"arm carriage",
+			"usage":"draw two circle arcs symetrically opposed from the center",
+			"desc":"this gesture represents arm carriages"
+		},
+		{
+			"codename":"lift",
+			"name":"lift",
+			"usage":"raise your hands and join them like you would do to lift an object",
+			"desc":"this gesture represents a lift, which is a dancer lifting another dancer"
+		},
+		{
+			"codename":"jump",
+			"name":"jump",
+			"usage":"jump vertically",
+			"desc":"this gesture represents jumps"
+		},
+		{
+			"codename":"spin",
+			"name":"spin",
+			"usage":"draw a circle with your hands joined",
+			"desc":"this gesture represents a spin or a circle performed by a dancer"
+		},
+		{
+			"codename":"up_down",
+			"name":"up and down",
+			"usage":"draw a vertical line from the bottom to the up side of the window then go back down toward each side of the line",
+			"desc":"this gesture represents a body that goes up then down"
+		},
+		{
+			"codename":"wave",
+			"name":"wave",
+			"usage":"draw two sinuzoides that get away from each other",
+			"desc":"this gesture represents aquatic movements"
+		}
+	]
 }
\ No newline at end of file
--- a/front_idill/src/lang/fr.json	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/lang/fr.json	Tue Sep 18 23:45:16 2012 +0200
@@ -58,6 +58,86 @@
 	"production":"production",
 	"choregraphy":"chorégraphie",
 	"music":"musique",
-	"footer":"<b>browsebymotion</b> est une installation vidéo vous permettant de naviguer par le geste et sans aucun contact dans des films de danse (festival <b>idill</b> éditions 2011 et 2009). Sélectionnez une vidéo et lancez une recherche en dansant ou en reproduisant un geste de la grammaire."
-	}
+	"footer_line1":"<b>browsebymotion</b> est une installation vidéo vous permettant de naviguer par le geste et sans aucun contact dans des films de danse (festival <b>idill</b> éditions 2011 et 2009). Sélectionnez une vidéo et lancez une recherche en dansant ou en reproduisant un geste de la grammaire.",
+	"footer_line2":"Projet réalisé avec le soutien du Ministère de la Culture et de la communication – Direction générale à la Création artistique."
+	},
+	"gestures_help_metadata":{
+	"name":"nom",
+	"usage":"usage",
+	"desc":"description"
+	},
+	"gestures_help":[
+		{
+			"codename":"no_motion",
+			"name":"arrêt",
+			"usage":"tracer une croix en partant du haut",
+			"desc":"ce geste symbolise un temps d'arrêt ou un geste suspendu dans la chorégraphie"
+		},
+		{
+			"codename":"fall",
+			"name":"chute",
+			"usage":"simuler une chute en s'accroupissant",
+			"desc":"ce geste marque des chutes dans la chorégraphie"
+		},
+		{
+			"codename":"contact",
+			"name":"contact",
+			"usage":"tracer deux lignes horizontales qui se rencontrent",
+			"desc":"ce geste symbolise des points de contact entre danseurs ou même entre les membres d'un même danseur"
+		},
+		{
+			"codename":"group_spin",
+			"name":"rotation de groupe",
+			"usage":"tracer deux cercles inversés",
+			"desc":"ce geste symbolise deux ou plusieurs danseurs tournant sur eux-mêmes ou se déplaçant synchronisés en cercle"
+		},
+		{
+			"codename":"bend",
+			"name":"inclinaison",
+			"usage":"se pencher en avant",
+			"desc":"ce geste marque des mouvements d'inclinaison de membres (bras, jambe, buste, etc.)"
+		},
+		{
+			"codename":"knee_up",
+			"name":"levé de jambe",
+			"usage":"lever simplement un genou",
+			"desc":"ce geste indique les levés de jambe"
+		},
+		{
+			"codename":"arm_carriage",
+			"name":"port de bras",
+			"usage":"tracer deux arcs de cercle symétriquement opposés depuis le centre",
+			"desc":"ce geste symbolise les mouvements de bras"
+		},
+		{
+			"codename":"lift",
+			"name":"porté",
+			"usage":"lever les mains en les joignant comme pour soulever un objet",
+			"desc":"ce geste symbolise un porté, c'est-à-dire un danseur portant un autre danseur"
+		},
+		{
+			"codename":"jump",
+			"name":"saut",
+			"usage":"sauter sur place",
+			"desc":"ce geste marque les sauts"
+		},
+		{
+			"codename":"spin",
+			"name":"rotation",
+			"usage":"tracer un cercle avec les deux mains jointes",
+			"desc":"ce geste symbolise un tour ou un cercle effectué par un danseur"
+		},
+		{
+			"codename":"up_down",
+			"name":"up et down",
+			"usage":"tracer une verticale de bas en haut qui se termine par une descente de chaque côté",
+			"desc":"ce geste indique un corps qui se dresse puis qui se baisse"
+		},
+		{
+			"codename":"wave",
+			"name":"vague",
+			"usage":"tracer deux sinusoïdes qui s'éloignent l'une de l'autre",
+			"desc":"ce geste symbolise des mouvements aquatiques"
+		}
+	]
 }
\ No newline at end of file
--- a/front_idill/src/mosaic/css/mosaic.less	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/mosaic/css/mosaic.less	Tue Sep 18 23:45:16 2012 +0200
@@ -324,7 +324,7 @@
 /*
  * Flèches pour naviguer dans les crédits.
 */
-.credits_arrows
+.credits_arrows, .help_details_arrows
 {
 	position: absolute;
 	width: 50px;
@@ -351,6 +351,22 @@
 }
 
 /*
+ * Flèche du haut pour naviguer dans les détails du panneau d'aide.
+*/
+#help_details_upArrow
+{
+	background-image: url('../../img/upArrow.png');
+}
+
+/*
+ * Flèche du bas pour naviguer dans les détails du panneau d'aide.
+*/
+#help_details_downArrow
+{
+	background-image: url('../../img/downArrow.png');
+}
+
+/*
  * Colonne de recherche du panneau d'aide.
 */
 #help_search
--- a/front_idill/src/mosaic/js/mosaic.js	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js	Tue Sep 18 23:45:16 2012 +0200
@@ -108,6 +108,14 @@
 	//Dimensions des colonnes pour le texte des crédits.
 	this.column_gap = 30;
 	this.column_width = 0;
+	
+	//Nombre de pages pour les détails de l'aide.
+	this.helpDetailsPageNumber = 0;
+	//Nombre de pages des détails de l'aide.
+	this.helpDetailsPageLength = 0;
+	//Dimensions des colonnes pour les détails de l'aide.
+	this.column_gap = 0;
+	this.column_width = 0;
     
     //Dernières positions des pointeurs.
     this.mainPointerLastX = null;
--- a/front_idill/src/mosaic/js/notifications.js	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js	Tue Sep 18 23:45:16 2012 +0200
@@ -31,6 +31,12 @@
         return;
     }
 	
+	//Tous les noms d'images des gestes de recherche.
+	var all_gestures_img = ['arret', 'chute', 'contact', 'group_spin', 'bend', 'knee_up', 'port_de_bras', 'grandjete', 'jump', 'spin', 'up_down', 'wave'];
+	
+	//Emplacement des images pour l'aide.
+	var imgPath = './pictos/help/';
+	
     //On enlève les autres notifications.
     this.removeNotifications();
     
@@ -174,7 +180,16 @@
     
     //On les ajoute à la mosaïque.
     $('body').append(notification_help);
+	
+	var notify_help = $('#notify_help');
     
+	var notify_imgs_width = $('#notify_imgs_small').css('margin-leftf')
+	
+	$('.notify_imgs').css(
+	{
+		width: $('#notify_imgs_small')
+	});
+	
 	if(this.isTablet)
 	{
 		//On rétrécit certaines images si on est sur une tablette.
@@ -198,10 +213,10 @@
     //On calcule leurs coordonnées et dimensions.
     var notify_width = $(window).width(), notify_height = $(window).height();
     var notify_margin = parseInt($('#notify_help').css('margin-left'));
-    var notify_ = 10;
+    //var notify_ = 10;
     
     //On les positionne.
-    $('#notify_help').css(
+    notify_help.css(
     {
         left: "0px",
         top: "0px",
@@ -210,19 +225,29 @@
         'z-index': 1000
     });
     
+    //Position horizontale du séparateur de colonnes.
+    var sep_left = $('#help_sep').position().left;
+    //Marge du panneau d'aide.
+    var help_margin = parseInt(notify_help.css('margin-left'));
+    //On calcule la taille d'une zone de recherche (une des deux parties).
+    var help_column_width = sep_left - help_margin;
+	
     //Taille des marges des images.
     var margins = parseInt($('.notify_imgs_small').css('margin-left'));
     //Largeur des images.
-    var widths = $('.notify_imgs_small').width();
+    var widths = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width();
     //Hauteur des images.
-    var heights = $('.notify_imgs_small').height();
-    //Position horizontale du séparateur de colonnes.
-    var sep_left = $('#help_sep').position().left;
-    //Marge du panneau d'aide.
-    var help_margin = parseInt($('#notify_help').css('margin-left'));
+    var heights = widths;//$('.notify_imgs_small').height();
     
-    //On calcule la taille d'une zone de recherche (une des deux parties).
-    var help_column_width = sep_left - help_margin;
+	$('.notify_imgs_small').css(
+	{
+		width: widths,
+		height: heights,
+		'background-size': widths + 'px ' + heights + 'px',
+		'font-size': widths / 5 + 'px',
+		'padding-left': '0px'
+	});
+	
     //Longueur d'une image.
     var img_width = (margins * 2 + widths);
     
@@ -330,9 +355,9 @@
 		$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')");
 		$("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]);
 	}
-    
+	
     //On les fait apparaître.
-    $('#notify_help').css(
+    notify_help.css(
     {
         opacity: "1"
     });
@@ -341,6 +366,63 @@
     {
         opacity: "1"
     });
+	
+	//Si on est en mode d'interaction souris, on rajoute les détails.
+	if(this.config.mouseInteractions)
+	{
+		//Dimensions des flèches.
+		var arrowWidth = 50, arrowHeight = 50;
+		
+		//On ajoute les flèches pour accéder aux détails du panneau d'aide.
+		var help_details_arrows = "<div id='help_details_upArrow' class='help_details_arrows'></div><div id='help_details_downArrow' class='help_details_arrows'></div>";
+		
+		//On ajoute les gestes des détails de l'aide.
+		//On remplit le div des détails par les éléments.
+		var help_details_gestures = "<div id='help_details_container'>";
+		
+		for(var i = 0 ; i < this.helpDetailsGestures.length ; i++)
+		{
+			help_details_gestures += "<table border='0'><tr><td rowspan='4'><img class='helpDetailsImgs' src='" + imgPath + MI + all_gestures_img[i] + ".png' /></td><td><b>" +
+			this.helpDetailsGesturesMetadata.name + '</b> : ' + this.helpDetailsGestures[i].name + "</td></tr><tr><td><b>" +
+			this.helpDetailsGesturesMetadata.usage + '</b> : ' + this.helpDetailsGestures[i].usage + "</td></tr><tr><td><b>" +
+			this.helpDetailsGesturesMetadata.desc + '</b> : ' + this.helpDetailsGestures[i].desc + "</td></tr></table><br /><br />";
+		}
+		
+		help_details_gestures += "</div>";
+		
+		notify_help.append(help_details_arrows + help_details_gestures);
+		
+		//On positionne les flèches même si elles sont invisibles pour l'instant.
+		$('#help_details_upArrow').css(
+		{
+			top: 0,
+			left: notify_help.width() / 2 - arrowWidth / 2
+		});
+		$('#help_details_downArrow').css(
+		{
+			top: notify_help.height() - arrowHeight,
+			left: notify_help.width() / 2 - arrowWidth / 2
+		});
+		
+		$('.helpDetailsImg').css(
+		{
+			
+		});
+		
+		var helpDetailsColumnWidth = (notify_help.width() - 2 * notify_margin) / 2 - 100;
+		
+		//On spécifie les colonnes.
+		$('#help_details_container').css(
+		{
+			position: 'absolute',
+			'-moz-column-width': helpDetailsColumnWidth,
+			'-webkit-column-width': helpDetailsColumnWidth,
+			'-moz-column-gap': 0,
+			'-webkit-column-gap': 0,
+			'-moz-column-rule': '1px solid #ddccb5',
+			'-webkit-column-rule': '1px solid #ddccb5'
+	    });
+	}
 }
 
 /*
@@ -2049,7 +2131,7 @@
 	var credits = "<div id='notify_credits'><div id='credits_upArrow' class='credits_arrows'></div><div id='credits_container'></div><div id='credits_downArrow' class='credits_arrows'></div></div>";
 	
 	//Pied de page des crédits.
-	var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer + "</div><div id='credits_footer_partners'></div></div>";
+	var credits_footer = "<div id='credits_footer'><div id='credits_footer_BBM'></div><div id='credits_footer_text'>" + this.creditsMetadata.footer_line1 + "<br />" + this.creditsMetadata.footer_line2 + "</div><div id='credits_footer_partners'></div></div>";
 	
 	$('body').append(credits);
 	
--- a/front_idill/src/mosaic/js/search.js	Sun Sep 09 15:20:11 2012 +0200
+++ b/front_idill/src/mosaic/js/search.js	Tue Sep 18 23:45:16 2012 +0200
@@ -100,10 +100,28 @@
 		_this.notificationStrings = data.notificationStrings;
 		_this.helpText = data.helpText;
 		_this.creditsMetadata = data.credits_lang;
+		_this.helpDetailsGesturesMetadata = data.gestures_help_metadata;
+		_this.helpDetailsGestures = data.gestures_help;
     });
 }
 
 /*
+ * Récupère le nom de code de chaque gesture ainsi que son nom de fichier de pictogramme pour l'aide.
+*/
+/*Mosaic.prototype.getGestures = function()
+{
+	//Chemion du fichier où sont stockées les noms de codes et noms d'images d'aide des gestures.
+    var path = 'gestures.json';
+    
+    var _this = this;
+    
+    $.getJSON(path, function(data)
+    {
+        _this.gesturesImg = data.gesture_list.img;
+    });
+}*/
+
+/*
  * Ecoute la position des pointeurs si les deux sont détectés afin de tracer des courbes de recherche.
 */
 Mosaic.prototype.listenToPointers = function()