--- a/front_idill/src/lang/en.json Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/lang/en.json Fri Sep 14 11:06:53 2012 +0200
@@ -1,50 +1,126 @@
{
- "gesturesText":["fall", "jump", "spin", "group spin", "bend", "arm carriage", "knee up", "breakdance", "wave", "no motion", "contact", "up-down", "large cast"],
- "notificationStrings":{
- "select":"Select",
- "confirm":"Confirm",
- "timeline":"Timeline move",
- "move":"Move",
- "search":"Search",
- "next":"Next",
- "previous":"Previous",
- "unzoom":"Unzoom",
- "unknown":"Unknown gesture",
- "fall":"Fall",
- "jump":"Jump",
- "circle":"Spin",
- "screw":"Screw",
- "bend":"Bend",
- "arc":"Arc",
- "knee-up":"Knee up",
- "right-angle":"Breakdance",
- "wave":"Wave",
- "no-motion":"No motion",
- "contact":"Contact",
- "grand-jete":"Grand jeté",
- "up-down":"Up down"
+ "gesturesText":["fall", "jump", "spin", "group spin", "bend", "arm carriage", "knee up", "breakdance", "wave", "no motion", "contact", "up-down", "large cast"],
+ "notificationStrings":{
+ "select":"Select",
+ "confirm":"Confirm",
+ "timeline":"Timeline move",
+ "move":"Move",
+ "search":"Search",
+ "next":"Next",
+ "previous":"Previous",
+ "unzoom":"Unzoom",
+ "unknown":"Unknown gesture",
+ "fall":"Fall",
+ "jump":"Jump",
+ "circle":"Spin",
+ "screw":"Screw",
+ "bend":"Bend",
+ "arc":"Arc",
+ "knee-up":"Knee up",
+ "right-angle":"Breakdance",
+ "wave":"Wave",
+ "no-motion":"No motion",
+ "contact":"Contact",
+ "grand-jete":"Grand jeté",
+ "up-down":"Up down"
+ },
+ "helpText":{
+ "search_title":"Search",
+ "search_2hands_text":"Curves to be drawn with both hands",
+ "search_mouse_text":"Curves to be mouse-drawn",
+ "search_touch_text":"Curves to be finger-drawn",
+ "search_body_text":"Gestures to be performed with your body",
+ "controls_title":"Controls",
+ "controls_1hand_text":"Controls to be performed with your hands",
+ "controls_mouse_text":"Controls to be performed with your mouse",
+ "controls_touch_text":"Controls to be performed with your finger",
+ "controls_timeline":"Move in timeline",
+ "controls_mos_horizontal":"Unzoom",
+ "controls_mos_vertical":"Unzoom",
+ "controls_move_down":"Move",
+ "controls_move_left":"Move",
+ "controls_move_right":"Move",
+ "controls_move_up":"Move",
+ "controls_next":"Next",
+ "controls_previous":"Previous",
+ "controls_selection":"Selection"
+ },
+ "choice":{
+ "caution":"Warning. This prototype was designed to be launched on Google Chrome 20 or greater.",
+ "mouse":"Mouse interaction mode",
+ "kinect":"Kinect interaction mode"
+ },
+ "credits_lang":{
+ "title":"Presented films credits",
+ "subtitle":"idill festival / idill.eu (2011 and 2009 ed.)",
+ "realisation":"realisation",
+ "company":"company",
+ "production":"production",
+ "choregraphy":"choregraphy",
+ "music":"music",
+ "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."
},
- "helpText":{
- "search_title":"Search",
- "search_2hands_text":"Curves to be drawn with both hands",
- "search_mouse_text":"Curves to be mouse-drawn",
- "search_body_text":"Gestures to be performed with your body",
- "controls_title":"Controls",
- "controls_1hand_text":"Gestures to be performed with your hand",
- "controls_timeline":"Move in timeline",
- "controls_mos_horizontal":"Unzoom",
- "controls_mos_vertical":"Unzoom",
- "controls_move_down":"Move",
- "controls_move_left":"Move",
- "controls_move_right":"Move",
- "controls_move_up":"Move",
- "controls_next":"Next",
- "controls_previous":"Previous",
- "controls_selection":"Selection"
- },
- "choice":{
- "caution":"Warning. This prototype was designed to be launched on Google Chrome 20 or greater.",
- "mouse":"Mouse interaction mode",
- "kinect":"Kinect interaction mode"
- }
+ "gestures_help":[
+ {
+ "name":"no motion",
+ "usage":"draw a cross from the top",
+ "desc":"this gesture represents a stopped or paused movement in the choregraphy"
+ },
+ {
+ "name":"fall",
+ "usage":"simulate a fall by crouching",
+ "desc":"this gesture represents falls in the choregraphy"
+ },
+ {
+ "name":"contact",
+ "usage":"draw twho horizontal lines that meet",
+ "desc":"this gesture represents contact points between dancers or a dancer body parts"
+ },
+ {
+ "name":"group spin",
+ "usage":"draw two inverted circles",
+ "desc":"this gesture represents two or more dancers spinning around themselves or moving synchroneously in circles"
+ },
+ {
+ "name":"bend",
+ "usage":"bend forward",
+ "desc":"this gesture represents bend movements of body parts"
+ },
+ {
+ "name":"knee up",
+ "usage":"just raise a knee",
+ "desc":"this gesture represents raising knees or legs"
+ },
+ {
+ "name":"arm carriage",
+ "usage":"draw two circle arcs symetrically opposed from the center",
+ "desc":"this gesture represents arm carriages"
+ },
+ {
+ "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"
+ },
+ {
+ "name":"jump",
+ "usage":"jump vertically",
+ "desc":"this gesture represents jumps"
+ },
+ {
+ "name":"spin",
+ "usage":"draw a circle with your hands joined",
+ "desc":"this gesture represents a spin or a circle performed by a dancer"
+ },
+ {
+ "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"
+ },
+ {
+ "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 Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/lang/fr.json Fri Sep 14 11:06:53 2012 +0200
@@ -1,50 +1,126 @@
{
- "gesturesText":["chute", "saut", "rotation", "rotation de groupe", "penché", "port de bras", "levé de genou", "breakdance", "ondulations", "immobilité", "contact", "de haut en bas", "grand-jeté"],
- "notificationStrings":{
- "select":"Sélectionner",
- "confirm":"Confirmer",
- "timeline":"Déplacer",
- "move":"Changer vidéo",
- "search":"Recherche",
- "next":"Suivant",
- "previous":"Précédent",
- "unzoom":"Retour mosaïque",
- "unknown":"Geste inconnu",
- "fall":"Chute",
- "jump":"Saut",
- "circle":"Rotation",
- "screw":"Rotation de groupe",
- "bend":"Penché",
- "arc":"Port de bras",
- "knee-up":"Levé de genou",
- "right-angle":"Breakdance",
- "wave":"Ondulations",
- "no-motion":"Immobilité",
- "contact":"Contact",
- "grand-jete":"Grand jeté",
- "up-down":"De haut en bas"
+ "gesturesText":["chute", "saut", "rotation", "rotation de groupe", "penché", "port de bras", "levé de genou", "breakdance", "ondulations", "immobilité", "contact", "de haut en bas", "grand-jeté"],
+ "notificationStrings":{
+ "select":"Sélectionner",
+ "confirm":"Confirmer",
+ "timeline":"Déplacer",
+ "move":"Changer vidéo",
+ "search":"Recherche",
+ "next":"Suivant",
+ "previous":"Précédent",
+ "unzoom":"Retour mosaïque",
+ "unknown":"Geste inconnu",
+ "fall":"Chute",
+ "jump":"Saut",
+ "circle":"Rotation",
+ "screw":"Rotation de groupe",
+ "bend":"Penché",
+ "arc":"Port de bras",
+ "knee-up":"Levé de genou",
+ "right-angle":"Breakdance",
+ "wave":"Ondulations",
+ "no-motion":"Immobilité",
+ "contact":"Contact",
+ "grand-jete":"Grand jeté",
+ "up-down":"De haut en bas"
+ },
+ "helpText":{
+ "search_title":"Recherche",
+ "search_2hands_text":"Courbes à effectuer avec les deux mains",
+ "search_mouse_text":"Courbes à effectuer avec la souris",
+ "search_touch_text":"Courbes à effectuer avec le doigt",
+ "search_body_text":"Gestes à effectuer avec le corps",
+ "controls_title":"Contrôles",
+ "controls_1hand_text":"Actions de contrôle à effectuer avec les mains",
+ "controls_mouse_text":"Actions de contrôle à effectuer avec la souris",
+ "controls_touch_text":"Actions de contrôle à effectuer avec le doigt",
+ "controls_timeline":"Déplacer",
+ "controls_mos_horizontal":"Retour mosaïque",
+ "controls_mos_vertical":"Retour mosaïque",
+ "controls_move_down":"Changer vidéo",
+ "controls_move_left":"Changer vidéo",
+ "controls_move_right":"Changer vidéo",
+ "controls_move_up":"Changer vidéo",
+ "controls_next":"Suivant",
+ "controls_previous":"Précédent",
+ "controls_selection":"Sélection"
+ },
+ "choice":{
+ "caution":"Attention. Ce prototype est conçu pour fonctionner sous Google Chrome 20 ou supérieur.",
+ "mouse":"Mode d'interaction souris",
+ "kinect":"Mode d'interaction kinect"
+ },
+ "credits_lang":{
+ "title":"Crédits des films présentés",
+ "subtitle":"festival idill / idill.eu (ed. 2011 et 2009)",
+ "realisation":"réalisation",
+ "company":"compagnie",
+ "production":"production",
+ "choregraphy":"chorégraphie",
+ "music":"musique",
+ "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."
},
- "helpText":{
- "search_title":"Recherche",
- "search_2hands_text":"Courbes à effectuer avec les deux mains",
- "search_mouse_text":"Courbes à effectuer avec la souris",
- "search_body_text":"Gestes à effectuer avec le corps",
- "controls_title":"Contrôles",
- "controls_1hand_text":"Gestes à effectuer avec une seule main",
- "controls_timeline":"Déplacer",
- "controls_mos_horizontal":"Retour mosaïque",
- "controls_mos_vertical":"Retour mosaïque",
- "controls_move_down":"Changer vidéo",
- "controls_move_left":"Changer vidéo",
- "controls_move_right":"Changer vidéo",
- "controls_move_up":"Changer vidéo",
- "controls_next":"Suivant",
- "controls_previous":"Précédent",
- "controls_selection":"Sélection"
- },
- "choice":{
- "caution":"Attention. Ce prototype est conçu pour fonctionner sous Google Chrome 20 ou supérieur.",
- "mouse":"Mode d'interaction souris",
- "kinect":"Mode d'interaction kinect"
- }
+ "gestures_help":[
+ {
+ "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"
+ },
+ {
+ "name":"chute",
+ "usage":"simuler une chute en s'accroupissant",
+ "desc":"ce geste marque des chutes dans la chorégraphie"
+ },
+ {
+ "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"
+ },
+ {
+ "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"
+ },
+ {
+ "name":"inclinaison",
+ "usage":"se pencher en avant",
+ "desc":"ce geste marque des mouvements d'inclinaison de membres (bras, jambe, buste, etc.)"
+ },
+ {
+ "name":"levé de jambe",
+ "usage":"lever simplement un genou",
+ "desc":"ce geste indique les levés de jambe"
+ },
+ {
+ "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"
+ },
+ {
+ "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"
+ },
+ {
+ "name":"saut",
+ "usage":"sauter sur place",
+ "desc":"ce geste marque les sauts"
+ },
+ {
+ "name":"spin",
+ "usage":"tracer un cercle avec les deux mains jointes",
+ "desc":"ce geste symbolise un tour ou un cercle effectué par un danseur"
+ },
+ {
+ "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"
+ },
+ {
+ "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 Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/css/mosaic.less Fri Sep 14 11:06:53 2012 +0200
@@ -297,7 +297,7 @@
/*
* Panneau d'aide
*/
-#notify_help, #notify_credits
+#notify_help
{
position: absolute;
margin: @notify-help-margin;
@@ -308,6 +308,65 @@
}
/*
+ * Crédits
+ */
+#notify_credits
+{
+ position: absolute;
+ margin: @notify-help-margin;
+ padding: @notify-help-margin;
+ border-style: solid;
+ border-width: @notify-help-border-width;
+ border-color: #fff;
+ background-color: #D1D2D4;
+}
+
+/*
+ * Flèches pour naviguer dans les crédits.
+*/
+.credits_arrows, .help_details_arrows
+{
+ position: absolute;
+ width: 50px;
+ height: 50px;
+ background-size: 50px 50px;
+ background-repeat: no-repeat;
+ opacity: 0;
+}
+
+/*
+ * Flèche du haut pour naviguer dans les crédits.
+*/
+#credits_upArrow
+{
+ background-image: url('../../img/upArrow.png');
+}
+
+/*
+ * Flèche du bas pour naviguer dans les crédits.
+*/
+#credits_downArrow
+{
+ background-image: url('../../img/downArrow.png');
+}
+
+/*
+ * 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
@@ -481,4 +540,31 @@
height: 50px;
position: absolute;
margin: 20px;
+}
+
+#credits_title
+{
+ font-weight: bold;
+ font-size: 30px;
+}
+
+#credits_subtitle
+{
+ font-size: 25px;
+}
+
+.credits_film
+{
+ font-weight: bold;
+ font-size: 22px;
+}
+
+.credits_body
+{
+ font-size: 20px;
+}
+
+.credits_text
+{
+ color: #000000;
}
\ No newline at end of file
--- a/front_idill/src/mosaic/js/mosaic.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js Fri Sep 14 11:06:53 2012 +0200
@@ -88,6 +88,26 @@
"controls_previous":"Previous",
"controls_selection":"Selection"
}
+
+ this.creditsMetadata = {
+ "title":"Presented films credits",
+ "subtitle":"idill festival / idill.eu (2011 and 2009 ed.)",
+ "realisation":"realisation",
+ "company":"company",
+ "production":"production",
+ "choregraphy":"choregraphy",
+ "music":"music"
+ }
+
+ //Tableau contenant les données des crédits.
+ this.tabCredits = [];
+ //Page actuelle des crédits (en cas de dépassement du texte des crédits).
+ this.creditsPageNumber = 0;
+ //Nombre de pages des crédits.
+ this.creditsPageLength = 0;
+ //Dimensions des colonnes pour le texte des crédits.
+ this.column_gap = 30;
+ this.column_width = 0;
//Dernières positions des pointeurs.
this.mainPointerLastX = null;
@@ -682,6 +702,8 @@
_this.getDictionary();
//On charge le fichier des langues.
_this.getLang();
+ //On récupère les crédits.
+ _this.getCredits();
});
}
--- a/front_idill/src/mosaic/js/mouseInteractions.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/mouseInteractions.js Fri Sep 14 11:06:53 2012 +0200
@@ -41,7 +41,7 @@
}
//Si on se trouve sur l'icone des crédits et qu'elle est zoomée.
- if(this.isCredtisIconZoomed)
+ if(this.isCreditsIconZoomed)
{
//On affiche les crédits.
this.notifyCredits();
@@ -292,8 +292,8 @@
return;
}
- //Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide, on part.
- if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed)
+ //Si on est dans un mode autre qu'un mode zoomé et qu'on n'affiche pas l'aide ou les crédits, on part.
+ if(this.currentMode != "VIDEO" && this.currentMode != "SEARCH" && this.currentMode != "TIMELINE" && !this.helpDisplayed && !this.creditsDisplayed)
{
return;
}
@@ -344,8 +344,18 @@
}
//Si les crédits sont affichés, un clic les ferme.
- if(this.creditsDisplayed && !this.isCreditsIconZoomed && !this.isCreditsIconZooming)
+ if(this.creditsDisplayed && !this.isCreditsIconZoomed && !this.isCreditsIconZooming && !this.isOnCreditsArrow(this.mousePosX, this.mousePosY))
{
this.removeCredits();
}
+
+ //Si les crédits sont affichés et qu'on est sur une flèche, on change de page.
+ if(this.isOnCreditsUpArrow(this.mousePosX, this.mousePosY))
+ {
+ this.goToPreviousCreditsPage();
+ }
+ else if(this.isOnCreditsDownArrow(this.mousePosX, this.mousePosY))
+ {
+ this.goToNextCreditsPage();
+ }
}
\ No newline at end of file
--- a/front_idill/src/mosaic/js/notifications.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Fri Sep 14 11:06:53 2012 +0200
@@ -175,6 +175,13 @@
//On les ajoute à la mosaïque.
$('body').append(notification_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.
@@ -210,19 +217,29 @@
'z-index': 1000
});
- //Taille des marges des images.
- var margins = parseInt($('.notify_imgs_small').css('margin-left'));
- //Largeur des images.
- var widths = $('.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'));
-
//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 = help_column_width / 5 - 4 * margins * 2;// $('.notify_imgs_small').width();
+ //Hauteur des images.
+ var heights = widths;//$('.notify_imgs_small').height();
+
+ $('.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,7 +347,7 @@
$("#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(
{
@@ -341,6 +358,29 @@
{
opacity: "1"
});
+
+ //Si on est en mode d'interaction souris, on rajoute les détails.
+ /*if(this.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>";
+
+ notify_help.append(help_details_arrows);
+
+ $('#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
+ });
+ }*/
}
/*
@@ -2030,16 +2070,193 @@
/*
* Affiche les crédits.
*/
-Mosaic.prototype.notifyCredits = function()
+Mosaic.prototype.notifyCredits = function(tabCredits)
{
- if($('#notify_credits').length())
+ //Si ils sont déjà affichés on quitte.
+ if(this.creditsDisplayed)
+ {
+ return;
+ }
+
+ //On enlève les autres notifications.
+ this.removeNotifications();
+
+ //On indique qu'ils sont affichés.
+ this.creditsDisplayed = true;
+
+ //Panneau des crédits.
+ //On crée les flèches au niveau du container en cas d'overflow du texte.
+ 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_line1 + "<br />" + this.creditsMetadata.footer_line2 + "</div><div id='credits_footer_partners'></div></div>";
+
+ $('body').append(credits);
+
+ //On récupère les éléments css du div des crédits.
+ var notify_credits = $('#notify_credits'), window_width = $(window).width(), window_height = $(window).height(), notify_margin = parseInt(notify_credits.css('margin-left')), notify_padding = parseInt(notify_credits.css('padding-left'));
+
+ //On ajoute le pied de page aux crédits.
+ notify_credits.append(credits_footer);
+
+ //Elements html contenant les crédits.
+ var credits_elements = "<div id='credits_content'><div id='credits_title' class='credits_text'>" + this.creditsMetadata.title + "<br /></div><div id='credits_subtitle' class='credits_text'><i>" + this.creditsMetadata.subtitle + "</i><br /><br /></div>";
+
+ for(var i = 0 ; i < this.tabCredits.length ; i++)
{
- return;
+ credits_elements += "<div class='credits_film credits_text'>" + this.tabCredits[i].film + "</div><div class='credits_body credits_text'>";
+ if(this.tabCredits[i].realisation)
+ {
+ credits_elements += this.creditsMetadata.realisation + " : " + this.tabCredits[i].realisation + "<br />";
+ }
+ if(this.tabCredits[i].company)
+ {
+ credits_elements += this.creditsMetadata.company + " : " + this.tabCredits[i].company + "<br />";
+ }
+ if(this.tabCredits[i].production)
+ {
+ credits_elements += this.creditsMetadata.production + " : " + this.tabCredits[i].production + "<br />";
+ }
+ if(this.tabCredits[i].choregraphy)
+ {
+ credits_elements += this.creditsMetadata.choregraphy + " : " + this.tabCredits[i].choregraphy + "<br />";
+ }
+ if(this.tabCredits[i].music)
+ {
+ credits_elements += this.creditsMetadata.music + " : " + this.tabCredits[i].music + "<br />";
+ }
+
+ credits_elements += "<br /></div>"
}
- var credits = "<div id='notify_credits'></div>";
+ credits_elements += "</div>";
+
+ $('#credits_container').append(credits_elements);
+
+ //On le positionne
+ notify_credits.css(
+ {
+ left: "0px",
+ top: "0px",
+ width: window_width - notify_margin * 2 - notify_padding * 2,
+ height: window_height - notify_margin * 2 - notify_padding * 2,
+ 'z-index': 1000
+ });
+
+ //$('#credits_content').css('background-color', '#0000FF');
+
+ this.column_gap = 30;
+ // this.column_width = (notify_credits.width() - notify_margin * 2 - notify_padding * 2) / 3 - this.column_gap * 3;
+ this.column_width = 150;//Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2);
+ //console.log(Math.ceil((notify_credits.width() - this.column_gap) / 3 - notify_margin * 2));
+ //Dimensions des flèches.
+ var arrowWidth = 50, arrowHeight = 50;
+ //Dimensions du footer.
+ var footer_height = 100;
+
+ //On spécifie les colonnes.
+ $('#credits_container').css(
+ {
+ position: 'absolute',
+ '-moz-column-width': this.column_width,
+ '-webkit-column-width': this.column_width,
+ '-moz-column-gap': this.column_gap,
+ '-webkit-column-gap': this.column_gap,
+ '-moz-column-rule': '1px solid #ddccb5',
+ '-webkit-column-rule': '1px solid #ddccb5'
+ });
- $('body').append(credits);
+ //CSS du pied de page.
+ $('#credits_footer').css(
+ {
+ position: 'absolute',
+ 'background-color': '#FFF',
+ width: +notify_credits.width() + notify_margin + notify_padding,
+ height: footer_height,
+ top: +notify_credits.height() - 100 + notify_margin + notify_padding,
+ left: '0px'
+ });
+ $('#credits_footer_BBM').css(
+ {
+ position: 'absolute',
+ 'background-image': 'url(./img/creditsBBM.png)',
+ 'background-repeat': 'no-repeat',
+ 'background-size': '300px 40px',
+ width: '300px',
+ height: '40px',
+ top: '0px',
+ left: '0px'
+ });
+ $('#credits_footer_partners').css(
+ {
+ position: 'absolute',
+ 'background-image': 'url(./img/creditsPartners.png)',
+ 'background-repeat': 'no-repeat',
+ width: '386px',
+ height: '41px',
+ top: $('#credits_footer').height() - 41,
+ left: +notify_credits.width() - 386 + notify_margin + notify_padding
+ });
+ $('#credits_footer_text').css(
+ {
+ position: 'absolute',
+ width: notify_credits.width() - $('#credits_footer_partners').width(),
+ top: '40px',
+ left: '0px',
+ });
+
+ //On ajoute les flèches à l'interface, bien qu'elles soient invisibles s'il n'y a pas d'overflow du texte.
+ $('#credits_upArrow').css(
+ {
+ top: 0,
+ left: notify_credits.width() / 2 - arrowWidth / 2
+ });
+ $('#credits_downArrow').css(
+ {
+ top: $('#credits_footer').position().top - arrowHeight,
+ left: notify_credits.width() / 2 - arrowWidth / 2
+ });
+
+ //Hauteur totale du texte des crédits.
+ var credits_total_height = $('#credits_content').height();
+ //Nombre de pages de crédits.
+ this.creditsPageLength = Math.ceil(credits_total_height / (notify_credits.height() * 3));
+
+ //On suppose qu'il n'y a pas d'overflow du texte des crédits.
+ this.isCreditsTextOverflow = false;
+
+ //Si la taille totale des crédits excède celle de la hauteur du panneau des crédits x 3, alors le panneau sera en plusieurs parties.
+ if(credits_total_height > notify_credits.height() * 3)
+ {
+ //Si on est arrivé là, on a constaté un overflow du texte des crédits.
+ this.isCreditsTextOverflow = true;
+
+ //Si on est sur la première page des crédits.
+ if(this.creditsPageNumber == 0)
+ {
+ //On ne laisse pas la place du haut pour la flèche haut puisqu'on est sur la première page.
+ $('#credits_container').css(
+ {
+ //top: 0,
+ height: notify_credits.height() - footer_height - arrowHeight
+ });
+ $('#credits_downArrow').css('opacity', '1');
+ }
+ //Sinon si on est sur la dernière page des crédits.
+ else if(this.creditsPageNumber + 1 == creditsPageLength)
+ {
+ $('#credits_downArrow').css('opacity', '0');
+ }
+ //Sinon on laisse la place pour revenir en arrière ou en avant.
+ else
+ {
+ $('#credits_container').css(
+ {
+ //top: arrowHeight,
+ height: notify_credits.height() - footer_height - arrowHeight * 2,
+ });
+ }
+ }
}
/*
@@ -2047,5 +2264,8 @@
*/
Mosaic.prototype.removeCredits = function()
{
+ //On indique qu'ils ne sont plus affichés.
+ this.creditsDisplayed = false;
+ this.creditsPageNumber = 0;
$('#notify_credits').remove();
}
\ No newline at end of file
--- a/front_idill/src/mosaic/js/pointers.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/pointers.js Fri Sep 14 11:06:53 2012 +0200
@@ -1099,6 +1099,196 @@
}
/*
+ * Retourne vrai si la souris est sur la flèche haute dans le panneau des crédits.
+*/
+Mosaic.prototype.isOnCreditsUpArrow = function(x, y)
+{
+ var creditsNotification = $('#notify_credits'), upArrow = $('#credits_upArrow');
+ //Si les crédits ne sont pas affichés, on retourne faux.
+ if(creditsNotification.length <= 0)
+ {
+ return false;
+ }
+
+ var margin = parseInt(creditsNotification.css('margin-left'));
+
+ /*if($('#aa').length <= 0)
+ {
+ var a = '<div id="aa"></div>';
+ $('body').append(a);
+ $('#aa').css(
+ {
+ position: 'absolute',
+ 'background-color': '#0000FF',
+ top: +upArrow.position().top + 2 * margin,
+ left: upArrow.position().left + 2 * margin,
+ width: upArrow.width(),
+ height: upArrow.height()
+ });
+ }
+
+ console.log('---------------UP----------------------');
+ console.log(x + ' > ' + (+upArrow.position().left + 2 * margin));
+ console.log(x + ' < ' + (+upArrow.position().left + upArrow.width() + 2 * margin));
+ console.log(y + ' > ' + (+upArrow.position().top + 2 * margin));
+ console.log(y + ' < ' + (+upArrow.position().top + upArrow.height() + 2 * margin));
+ console.log('---------------------------------------');*/
+
+ //Si la flèche est visible et si la souris est dessus, on retourne true.
+ if(upArrow.length > 0 && upArrow.css('opacity') == '1' && x > (+upArrow.position().left + margin) && x < (+upArrow.position().left + upArrow.width() + margin) && y > (+upArrow.position().top + margin) && y < (+upArrow.position().top + upArrow.height() + margin))
+ {
+ return true;
+ }
+
+ return false;
+}
+
+/*
+ * Retourne vrai si la souris est sur la flèche basse dans le panneau des crédits.
+*/
+Mosaic.prototype.isOnCreditsDownArrow = function(x, y)
+{
+ var creditsNotification = $('#notify_credits'), downArrow = $('#credits_downArrow');
+ //Si les crédits ne sont pas affichés, on retourne faux.
+ if(creditsNotification.length <= 0)
+ {
+ return false;
+ }
+
+ //$('#aa').remove();
+
+ var margin = parseInt(creditsNotification.css('margin-left'));
+
+ /*console.log('--------------DOWN---------------------');
+ console.log(x + ' > ' + (+downArrow.position().left + margin));
+ console.log(x + ' < ' + (+downArrow.position().left + downArrow.width() + margin));
+ console.log(y + ' > ' + (+downArrow.position().top + margin));
+ console.log(y + ' < ' + (+downArrow.position().top + downArrow.height() + margin));
+ console.log('---------------------------------------');*/
+
+ //Si la flèche est visible et si la souris est dessus, on retourne true.
+ if(downArrow.length > 0 && downArrow.css('opacity') == '1' && x > (+downArrow.position().left + margin) && x < (+downArrow.position().left + downArrow.width() + margin) && y > (+downArrow.position().top + margin) && y < (+downArrow.position().top + downArrow.height() + margin))
+ {
+ return true;
+ }
+
+ return false;
+}
+
+/*
+ * Retourne vrai si la souris est sur une des flèches du panneau des crédits.
+*/
+Mosaic.prototype.isOnCreditsArrow = function(x, y)
+{
+ //Si la souris est sur une flèche des crédits, on retourne vrai.
+ if(this.isOnCreditsUpArrow(x, y) || this.isOnCreditsDownArrow(x, y))
+ {
+ return true;
+ }
+
+ return false;
+}
+
+/*
+ * Va a la page des crédits suivante.
+*/
+Mosaic.prototype.goToNextCreditsPage = function()
+{
+ console.log(this.creditsPageLength);
+ //Si on est sur la dernière page, on quitte.
+ if(this.creditsPageNumber + 1 >= this.creditsPageLength)
+ {
+ return;
+ }
+
+ this.creditsPageNumber++;
+ this.goToCreditsPageN(this.creditsPageNumber);
+}
+
+/*
+ * Va a la page des crédits précédente.
+*/
+Mosaic.prototype.goToPreviousCreditsPage = function()
+{
+ //Si on est sur la première page, on quitte.
+ if(this.creditsPageNumber == 0)
+ {
+ return;
+ }
+
+ this.creditsPageNumber--;
+ this.goToCreditsPageN(this.creditsPageNumber);
+}
+
+/*
+ * Va à la page N des crédits.
+*/
+Mosaic.prototype.goToCreditsPageN = function(N)
+{
+ var notify_credits = $('#notify_credits'), arrowHeight = $('#credits_upArrow').height(), footer_height = $('#credits_footer').height(), margin = parseInt($('#notify_credits').css('margin-left'));
+
+ //Si on est sur la première page, on cache la flèche haut.
+ if(this.creditsPageNumber == 0)
+ {
+ $('#credits_upArrow').css(
+ {
+ opacity: 0
+ });
+ $('#credits_downArrow').css(
+ {
+ opacity: 1
+ });
+ $('#credits_container').css(
+ {
+ top: margin,
+ height: notify_credits.height() - footer_height - arrowHeight
+ });
+ }
+ //Si on est sur la dernière page, on cache la flèche bas.
+ else if(this.creditsPageNumber + 1 >= this.creditsPageLength)
+ {
+ $('#credits_upArrow').css(
+ {
+ opacity: 1
+ });
+ $('#credits_downArrow').css(
+ {
+ opacity: 0
+ });
+ $('#credits_container').css(
+ {
+ top: +arrowHeight + margin,
+ height: notify_credits.height() - footer_height - arrowHeight - margin
+ });
+ }
+ //Si on est dans les autres pages, on affiche les deux flèches.
+ else
+ {
+ $('#credits_upArrow').css(
+ {
+ opacity: 1
+ });
+ $('#credits_downArrow').css(
+ {
+ opacity: 1
+ });
+ $('#credits_container').css(
+ {
+ top: +arrowHeight + margin,
+ height: notify_credits.height() - footer_height - 2 * arrowHeight - margin
+ });
+ }
+
+ //On déplace le texte des crédits.
+ $('#credits_container').css(
+ {
+ left: -($('#credits_container').width() * N - parseInt(notify_credits.css('margin-left')))// + this.column_gap)
+ });
+}
+
+
+
+/*
* Retourne vrai si le doigt est sur le bouton de lecture de video dans le mode d'interaction tablettes.
*/
Mosaic.prototype.isOnPlayButton = function(x, y)
--- a/front_idill/src/mosaic/js/search.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/search.js Fri Sep 14 11:06:53 2012 +0200
@@ -99,6 +99,7 @@
_this.gesturesText = data.gesturesText;
_this.notificationStrings = data.notificationStrings;
_this.helpText = data.helpText;
+ _this.creditsMetadata = data.credits_lang;
});
}
@@ -364,4 +365,21 @@
}
return '';
+}
+
+/*
+ * Extrait les données des crédits.
+*/
+Mosaic.prototype.getCredits = function()
+{
+ var _this = this;
+
+ $.getJSON(this.config.creditsPath, function(data)
+ {
+ //On récupère les données des crédits et on les place dans un tableau avant de le retourner.
+ for(var i = 0 ; i < data.creditsData.length ; i++)
+ {
+ _this.tabCredits[i] = data.creditsData[i];
+ }
+ });
}
\ No newline at end of file
--- a/front_idill/src/mosaic/js/zoomInteractions.js Wed Aug 29 11:29:14 2012 +0200
+++ b/front_idill/src/mosaic/js/zoomInteractions.js Fri Sep 14 11:06:53 2012 +0200
@@ -25,7 +25,7 @@
*/
Mosaic.prototype.preZoom = function(snapshot)
{
- if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested)
+ if(this.currentMode == "NO-USER" || this.currentMode.indexOf("INCOMING") > -1 || snapshot == null || this.helpDisplayed || this.creditsDisplayed || this.isMosaicFiltering || this.isSearchByCurvesOn || this.gestureDelRequested)
{
return;
}
@@ -273,7 +273,7 @@
var _this = this;
//Si la mosaïque est en pleine écran, pas la peine de zoomer.
- if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed || this.isMosaicFiltering)
+ if(this.currentMode == "VIDEO" || this.currentMode == "SEARCH" || this.currentMode.indexOf("INCOMING") > -1 || this.helpDisplayed || this.creditsDisplayed || this.isMosaicFiltering)
{
return;
}