# HG changeset patch # User bastiena # Date 1348004716 -7200 # Node ID be87091be54e474427758b5453dbf228876d9b00 # Parent 9927cbd5ec653c630fa6a8a134a98aa905313655 Front IDILL: credits & gestures files added diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/credits.json --- /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 diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/gestures.json --- /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 diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/lang/en.json --- 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":"browsebymotion is a contactless video interface that permits you to browse in dance films (idill 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":"browsebymotion is a contactless video interface that permits you to browse in dance films (idill 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 diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/lang/fr.json --- 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":"browsebymotion est une installation vidéo vous permettant de naviguer par le geste et sans aucun contact dans des films de danse (festival idill é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":"browsebymotion est une installation vidéo vous permettant de naviguer par le geste et sans aucun contact dans des films de danse (festival idill é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 diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/mosaic/css/mosaic.less --- 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 diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/mosaic/js/mosaic.js --- 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; diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/mosaic/js/notifications.js --- 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 = "
"; + + //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 = "
"; + + for(var i = 0 ; i < this.helpDetailsGestures.length ; i++) + { + help_details_gestures += "
" + + this.helpDetailsGesturesMetadata.name + ' : ' + this.helpDetailsGestures[i].name + "
" + + this.helpDetailsGesturesMetadata.usage + ' : ' + this.helpDetailsGestures[i].usage + "
" + + this.helpDetailsGesturesMetadata.desc + ' : ' + this.helpDetailsGestures[i].desc + "


"; + } + + help_details_gestures += "
"; + + 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 = "
"; //Pied de page des crédits. - var credits_footer = ""; + var credits_footer = ""; $('body').append(credits); diff -r 9927cbd5ec65 -r be87091be54e front_idill/src/mosaic/js/search.js --- 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()