# HG changeset patch # User bastiena # Date 1346232554 -7200 # Node ID 34afef0f9e189ffac61e6c5ff4ac5ef05262ad43 # Parent 158f7637e32f0d8d5c8ebc691f68aae2ac05de86# Parent 246fa369cc9a410f717aff44873e87ab2686f0dc Merge of the two differents mosaic files diff -r 246fa369cc9a -r 34afef0f9e18 .hgtags --- a/.hgtags Mon Aug 27 14:40:35 2012 +0200 +++ b/.hgtags Wed Aug 29 11:29:14 2012 +0200 @@ -3,5 +3,4 @@ e08755d3182d2ebf61c1acbe9c2817beebca7371 V00.03 205409da0f32f4e5c9403460de007df035a80c2d V00.04 9eff851668683fd3d5741010206659726210f797 V00.05 -52d9859fd94c66a57b57cd0c1beda2cc8297755d V00.06 -6070a596014e88d0f013f603f183328e8109de33 V00.07 +b244a7bc08445bc655a7c0adbfdab5c54ad1e7b7 V00.07 diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/img/creditsIcon.png Binary file front_idill/src/img/creditsIcon.png has changed diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/img/creditsIcon2.png Binary file front_idill/src/img/creditsIcon2.png has changed diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/mosaic/css/mosaic.less --- a/front_idill/src/mosaic/css/mosaic.less Mon Aug 27 14:40:35 2012 +0200 +++ b/front_idill/src/mosaic/css/mosaic.less Wed Aug 29 11:29:14 2012 +0200 @@ -297,7 +297,7 @@ /* * Panneau d'aide */ -#notify_help +#notify_help, #notify_credits { position: absolute; margin: @notify-help-margin; @@ -475,7 +475,7 @@ /* * Icone permettant d'afficher l'aide dans le mode d'interaction souris. */ -#helpIcon, #exitIcon, #homeIcon, #searchExitIcon +#helpIcon, #creditsIcon, #exitIcon, #homeIcon, #searchExitIcon { width: 50px; height: 50px; diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/mosaic/js/mosaic.js --- a/front_idill/src/mosaic/js/mosaic.js Mon Aug 27 14:40:35 2012 +0200 +++ b/front_idill/src/mosaic/js/mosaic.js Wed Aug 29 11:29:14 2012 +0200 @@ -46,48 +46,48 @@ //Dictionnaire pour les courbes de recherche. this.dictionary = []; - - //Strings des notifications. - this.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", - "spin":"Spin", - "screw":"Screw", - "bend":"Bend", - "arc":"Arc", - "knee_up":"Knee up", - "breakdance":"Breakdance", - "wave":"Wave", - "no_motion":"No motion", - "contact":"Contact"}; - - this.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" - } + + //Strings des notifications. + this.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", + "spin":"Spin", + "screw":"Screw", + "bend":"Bend", + "arc":"Arc", + "knee_up":"Knee up", + "breakdance":"Breakdance", + "wave":"Wave", + "no_motion":"No motion", + "contact":"Contact"}; + + this.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" + } //Dernières positions des pointeurs. this.mainPointerLastX = null; @@ -110,9 +110,9 @@ this.mouseUpDownDelta = 0; //Valeur du déplacement entre un touch start et un touch end. this.touchUpDownDelta = 0; - //Coordonnées de la souris au dernier mouse down. - this.mouseDownPosX = null; - this.mouseDownPosY = null; + //Coordonnées de la souris au dernier mouse down. + this.mouseDownPosX = null; + this.mouseDownPosY = null; //Dimensions de la mosaïque en pixels. this.width = null; @@ -132,6 +132,7 @@ this.isMainPointerDisplayed = false; this.isSecondPointerDisplayed = false; this.helpDisplayed = false; + this.creditsDisplayed = false; //Indique si l'utilisateur a manuellement pausé la vidéo. this.userPaused = false; //Indique si on est en train de se déplacer vers un voisin. @@ -189,25 +190,29 @@ this.actualCode = ''; //Indique si l'utilisateur est entré dans la zone de recherche. this.isUserInSearchZone = false; - //Indique si on a fait un mouse down. - this.isMouseDown = false; - //Indique si on a fait un touch start. - this.isTouchStart = false; - //Indique si on a fait un touch move. - this.isTouchMove = false; - //Indique si on est en train de prézoomer. - this.isPrezooming = false; - //Indique si l'icone d'aide a été agrandie. - this.isHelpIconZoomed = false; - //Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours. - this.isHelpIconZooming = false; - //Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes. - this.mustTakeOutHands = false; - //Indique qu'une vidéo est en lecture. - this.isVideoReading = false; - - //Indique si on est sur une tablette. - this.isTablet = ('ontouchstart' in document.documentElement); + //Indique si on a fait un mouse down. + this.isMouseDown = false; + //Indique si on a fait un touch start. + this.isTouchStart = false; + //Indique si on a fait un touch move. + this.isTouchMove = false; + //Indique si on est en train de prézoomer. + this.isPrezooming = false; + //Indique si l'icone d'aide a été agrandie. + this.isHelpIconZoomed = false; + //Indique si l'icone d'aide est dans une interaction de zoom/dezoom en cours. + this.isHelpIconZooming = false; + //Indique si l'icone des crédits a été agrandie. + this.isCreditsIconZoomed = false; + //Indique si l'icone des crédits est dans une interaction de zoom/dezoom en cours. + this.isCreditsIconZooming = false; + //Indique à l'utilisateur s'il doit retirer ses mains pour refaire une recherche par courbes. + this.mustTakeOutHands = false; + //Indique qu'une vidéo est en lecture. + this.isVideoReading = false; + + //Indique si on est sur une tablette. + this.isTablet = ('ontouchstart' in document.documentElement); //Timeout (attente) pour le zoom après un préZoom. this.zoomTimeout = null; @@ -307,20 +312,17 @@ */ Mosaic.prototype.createMosaic = function() { - var _this = this; - + var _this = this; + //On ajoute le player au body pour le lancer la première fois qu'on zoom. - $('body').append('
'); - - //On recharge la fenêtre si sa taille a changé si on n'est pas sur une tablette (car le resize est désactivé dans le mode d'interaction pour tablettes). - if(!this.isTablet) - { - $(window).resize(function() - { - _.debounce(window.location.reload(), _this.config.timeReloadAfterResize); - }); - } - + $('body').append('
'); + + //On recharge la fenêtre si sa taille a changé. + $(window).resize(function() + { + // _.debounce(window.location.reload(), _this.config.timeReloadAfterResize); + }); + var initPanel = '
'; var mp = $('#mainPanel'); mp.append(initPanel); @@ -383,8 +385,8 @@ this.previousZoomedSN; //On met à jour la mosaïque. $('#mainPanel').html(createMosaic); - //On ajoute le panneau de protection (principalement pour le mode tablettes). - $('body').append('
'); + //On ajoute le panneau de protection (principalement pour le mode tablettes). + $('body').append('
'); //On récupère la taille des bordures. this.marginWidth = $('.snapshotDivs').css('margin-bottom'); this.marginWidth = parseFloat(this.marginWidth)*2; @@ -440,8 +442,8 @@ //Si on gère les interactions à la souris. if(_this.config.mouseInteractions) { - //On bind les événements utiles. - _this.eventBinder(); + //On bind les événements utiles. + _this.eventBinder(); } //Si on a activé la préphase mais qu'on est en mode Kinect. @@ -471,110 +473,112 @@ */ Mosaic.prototype.eventBinder = function() { - var _this = this; - - //On affiche l'icone d'aide. - this.helpIcon(); - - //Si on est sur tablette, on utilise l'événement touch start. - if(this.isTablet) - { - document.addEventListener('touchstart', function(e) - { - if(e.touches.length == 1) - { - var touch = e.touches[0]; - _this.onTouchStart(touch); - } - e.preventDefault(); - }, false); - } - //Sinon souris. - else - { - //Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up. - $(window).mousedown(function (e) - { - _this.onMouseDown(e); - return false; - }); - } - - //Si on est sur tablette, on utilise l'événement touch start. - if(this.isTablet) - { - document.addEventListener('touchmove', function(e) - { - if(e.touches.length == 1) - { - var touch = e.touches[0]; - _this.refreshPointers(touch.pageX, touch.pageY, true); - _this.mousePosX = touch.pageX; - _this.mousePosY = touch.pageY; - _this.onTouchMove(touch); - } - e.preventDefault(); - }, false); - } - //Sinon souris. - else - { - //On écoute le déplacement de la souris. - $(window).mousemove(function(e) - { - _this.refreshPointers(e.pageX, e.pageY, true); - _this.mousePosX = e.pageX; - _this.mousePosY = e.pageY; - _this.onMouseMove(e); - return false; - }); - } - - //Si on est sur tablette, on utilise l'événement touch start. - if(this.isTablet) - { - document.addEventListener('touchend', function(e) - { - _this.onTouchEnd(e); - e.preventDefault(); - }, false); - } - //Sinon souris. - else - { - //Si on fait un mouse up après ce mouse down. - $(window).mouseup(function() - { - _this.onMouseUp(); - return false; - }); - } - - if(!this.isTablet) - { - //Si on fait un clic. - $(window).click(function(e) - { - _this.onClick(e.pageX, e.pageY); - _this.removeSearchNotificationIfOnIt(e.pageX, e.pageY); - return false; - }); - - $(window).on('mousewheel', function(event, delta, deltaX, deltaY) - { - //Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part. - if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed) - { - return; - } - - //Quand on "tire" la molette vers soi, on dezoom. - if (delta < 0) - { - _this.unzoom(); - } - }); - } + var _this = this; + + //On affiche l'icone d'aide. + this.helpIcon(); + //On affiche l'icone des crédits. + this.creditsIcon(); + + //Si on est sur tablette, on utilise l'événement touch start. + if(this.isTablet) + { + document.addEventListener('touchstart', function(e) + { + if(e.touches.length == 1) + { + var touch = e.touches[0]; + _this.onTouchStart(touch); + } + e.preventDefault(); + }, false); + } + //Sinon souris. + else + { + //Si on fait un mouse down sur le body, on vérifie enregistre le déplacement de la souris jusqu'au prochain mouse up. + $(window).mousedown(function (e) + { + _this.onMouseDown(e); + return false; + }); + } + + //Si on est sur tablette, on utilise l'événement touch start. + if(this.isTablet) + { + document.addEventListener('touchmove', function(e) + { + if(e.touches.length == 1) + { + var touch = e.touches[0]; + _this.refreshPointers(touch.pageX, touch.pageY, true); + _this.mousePosX = touch.pageX; + _this.mousePosY = touch.pageY; + _this.onTouchMove(touch); + } + e.preventDefault(); + }, false); + } + //Sinon souris. + else + { + //On écoute le déplacement de la souris. + $(window).mousemove(function(e) + { + _this.refreshPointers(e.pageX, e.pageY, true); + _this.mousePosX = e.pageX; + _this.mousePosY = e.pageY; + _this.onMouseMove(e); + return false; + }); + } + + //Si on est sur tablette, on utilise l'événement touch start. + if(this.isTablet) + { + document.addEventListener('touchend', function(e) + { + _this.onTouchEnd(e); + e.preventDefault(); + }, false); + } + //Sinon souris. + else + { + //Si on fait un mouse up après ce mouse down. + $(window).mouseup(function() + { + _this.onMouseUp(); + return false; + }); + } + + if(!this.isTablet) + { + //Si on fait un clic. + $(window).click(function(e) + { + _this.onClick(e.pageX, e.pageY); + _this.removeSearchNotificationIfOnIt(e.pageX, e.pageY); + return false; + }); + + $(window).on('mousewheel', function(event, delta, deltaX, deltaY) + { + //Si on est dans un mode autre qu'on mode zoomé ou que l'aide est affichée, on part. + if(_this.currentMode != "VIDEO" && _this.currentMode != "SEARCH" && _this.currentMode != "TIMELINE" || _this.helpDisplayed) + { + return; + } + + //Quand on "tire" la molette vers soi, on dezoom. + if (delta < 0) + { + _this.unzoom(); + } + }); + } } /* @@ -633,16 +637,16 @@ } else { - //S'il s'agit de la langue, on met par défaut si la valeur est nulle. - if(key == 'lang' && val == '') - { - _this.config[key] = _this.default_config[key]; - } + //S'il s'agit de la langue, on met par défaut si la valeur est nulle. + if(key == 'lang' && val == '') + { + _this.config[key] = _this.default_config[key]; + } //Sinon si c'est une string, on l'affecte. - else - { - _this.config[key] = val; - } + else + { + _this.config[key] = val; + } } } @@ -850,13 +854,13 @@ //Après un délai d'absence de l'utilisateur on redémarre. this.nouserTimeout = setTimeout(function() { - window.location.reload(); + // window.location.reload(); }, this.config.timeoutNouser); } //S'il n'y a qu'un snapshot à afficher et qu'on est en préphase, on redémarre. else if((event == "NO-USER" || event == "INCOMING-0" || event == "INCOMING-1") && this.config.noUserModeEnabled) { - window.location.reload(); + // window.location.reload(); } //Si on a fait un swipe. else if(event.indexOf("SWIPE") != -1) @@ -874,33 +878,33 @@ this.playNextVideo(); } - //On spécifie s'il s'agit d'un swipe left ou right. - var swipeType = ((event.indexOf("LEFT") != -1) ? 'left' : 'right'); - var isSwipeLeft = ((event.indexOf("LEFT") != -1) ? true : false); - - //On passe au marqueur suivant/précédent en fonction du type de swipe. - this.player.widgets[0].switchToMarker(isSwipeLeft, this.currentSearchGesture[this.centerId]); - //Si on est en mode vidéo. - if(this.currentMode == 'VIDEO') - { - //On affiche la notification. - this.removeNotifications(); - this.videoSwipe(swipeType); - } - //Si on est en mode recherche dans une vidéo et qu'on n'a pas de gesture de recherche. - else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] == '') - { - //On affiche la notification. - this.removeNotifications(); - this.searchSearchAndSwipe(swipeType); - } - //Si on est en mode recherche dans une vidéo et qu'on a une gesture de recherche. - else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] != '') - { - //On affiche la notification. - this.removeNotifications(); - this.searchGestureAndSwipe(this.currentSearchGesture[this.centerId], 'valid', swipeType); - } + //On spécifie s'il s'agit d'un swipe left ou right. + var swipeType = ((event.indexOf("LEFT") != -1) ? 'left' : 'right'); + var isSwipeLeft = ((event.indexOf("LEFT") != -1) ? true : false); + + //On passe au marqueur suivant/précédent en fonction du type de swipe. + this.player.widgets[0].switchToMarker(isSwipeLeft, this.currentSearchGesture[this.centerId]); + //Si on est en mode vidéo. + if(this.currentMode == 'VIDEO') + { + //On affiche la notification. + this.removeNotifications(); + this.videoSwipe(swipeType); + } + //Si on est en mode recherche dans une vidéo et qu'on n'a pas de gesture de recherche. + else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] == '') + { + //On affiche la notification. + this.removeNotifications(); + this.searchSearchAndSwipe(swipeType); + } + //Si on est en mode recherche dans une vidéo et qu'on a une gesture de recherche. + else if(this.currentMode == 'SEARCH' && this.currentSearchGesture[this.centerId] != '') + { + //On affiche la notification. + this.removeNotifications(); + this.searchGestureAndSwipe(this.currentSearchGesture[this.centerId], 'valid', swipeType); + } //On le fait disparaitre au bout d'un certain temps. this.notifySwipeTimeout = setTimeout(function() @@ -984,53 +988,53 @@ */ Mosaic.prototype.onPlayerLoad = function() { - var _this = this; - - if(this.currentMode == 'NO-USER') - { - //On peut s'approcher de la kinect. - this.canStart = true; - } - - //Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline). - if(this.player.popcorn) - { - // this.player.popcorn.listen('pause', function() - this.player.popcorn.listen('ended', function() - { - //Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin). - if(!_this.userPaused) - { - //Si c'est en mode sans utilisateur. - if(_this.currentMode == 'NO-USER') - { - //On dézoome. - _this.unzoom(); - } - //Sinon, si ce n'est pas causé par un déplacement ou un dézoom. - else if(!_this.currentlyMoving && !_this.currentlyUnzooming) - { - //Si on est en mode timeline et qu'on est en pause, c'est probablement que l'user a placé le curseur à la fin. - if(_this.currentMode != 'TIMELINE') - { - _this.playNextVideo(); - } - } - } - }); - - //Si les marqueurs ont été chargés. - this.player.popcorn.on("markersready", function() - { - _this.onMarkersReady(); - }); - - //On indique à la mosaïque qu'on est en train de lire. - this.player.popcorn.on("timeupdate", function() - { - _this.isVideoReading = true; - }) - } + var _this = this; + + if(this.currentMode == 'NO-USER') + { + //On peut s'approcher de la kinect. + this.canStart = true; + } + + //Lorsque le player est en pause (par exemple lorsque le curseur arrive à la fin de la timeline). + if(this.player.popcorn) + { + // this.player.popcorn.listen('pause', function() + this.player.popcorn.listen('ended', function() + { + //Si la pause est naturelle (fin de la timeline, dézoom, déplacement vers un voisin). + if(!_this.userPaused) + { + //Si c'est en mode sans utilisateur. + if(_this.currentMode == 'NO-USER') + { + //On dézoome. + _this.unzoom(); + } + //Sinon, si ce n'est pas causé par un déplacement ou un dézoom. + else if(!_this.currentlyMoving && !_this.currentlyUnzooming) + { + //Si on est en mode timeline et qu'on est en pause, c'est probablement que l'user a placé le curseur à la fin. + if(_this.currentMode != 'TIMELINE') + { + _this.playNextVideo(); + } + } + } + }); + + //Si les marqueurs ont été chargés. + this.player.popcorn.on("markersready", function() + { + _this.onMarkersReady(); + }); + + //On indique à la mosaïque qu'on est en train de lire. + this.player.popcorn.on("timeupdate", function() + { + _this.isVideoReading = true; + }) + } } /* @@ -1040,56 +1044,56 @@ */ Mosaic.prototype.onMarkersReady = function() { - var _this = this; - - //Le player est prêt. - this.playerIsReady = true; - - if(this.player.widgets[0]) - { - //On spécifie à la timeline dans quel mode d'intéraction on est. - this.player.widgets[0].setMouseInteractions(this.config.mouseInteractions); - //Idem pour la langue. - if(this.gesturesText.length > 0) - { - this.player.widgets[0].setLang(this.gesturesText); - } - } - - //Si on est en mode video ou recherche ou timeline. - if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE') - { - //On peut faire des swipes. - this.canSwipe = true; - } - - //Si aucune recherche par gesture n'est effectuée. - if(this.currentSearchGesture[this.centerId] == '') - { - //On enlève le filtre. - this.removeFilter(); - } - //Sinon. - else - { - //On entre en mode recherche dans une vidéo. - this.currentMode = 'SEARCH'; - //On recherche la gesture. - this.player.widgets[0].searchByGesture(this.currentSearchGesture[this.centerId]); - this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture; - - //On va au premier marqueur trouvé. - if(this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId])) - { - this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]); - } - //Si aucun marqueur n'est trouvé. - else - { - //On va juste là où on était la dernière fois qu'on a joué la vidéo. - this.player.popcorn.currentTime(this.timeToGoAt[this.centerId]); - } - } + var _this = this; + + //Le player est prêt. + this.playerIsReady = true; + + if(this.player.widgets[0]) + { + //On spécifie à la timeline dans quel mode d'intéraction on est. + this.player.widgets[0].setMouseInteractions(this.config.mouseInteractions); + //Idem pour la langue. + if(this.gesturesText.length > 0) + { + this.player.widgets[0].setLang(this.gesturesText); + } + } + + //Si on est en mode video ou recherche ou timeline. + if(this.currentMode == 'VIDEO' || this.currentMode == 'SEARCH' || this.currentMode == 'TIMELINE') + { + //On peut faire des swipes. + this.canSwipe = true; + } + + //Si aucune recherche par gesture n'est effectuée. + if(this.currentSearchGesture[this.centerId] == '') + { + //On enlève le filtre. + this.removeFilter(); + } + //Sinon. + else + { + //On entre en mode recherche dans une vidéo. + this.currentMode = 'SEARCH'; + //On recherche la gesture. + this.player.widgets[0].searchByGesture(this.currentSearchGesture[this.centerId]); + this.isCurrentlyInASearchByGesture = this.player.widgets[0].isCurrentlyInASearchByGesture; + + //On va au premier marqueur trouvé. + if(this.timeToGoAt[this.centerId] === 0 && this.player.widgets[0].atLeastOneSearchMarker(this.currentSearchGesture[this.centerId])) + { + this.player.widgets[0].goToFirstSearchedMarker(this.currentSearchGesture[this.centerId]); + } + //Si aucun marqueur n'est trouvé. + else + { + //On va juste là où on était la dernière fois qu'on a joué la vidéo. + this.player.popcorn.currentTime(this.timeToGoAt[this.centerId]); + } + } } /* @@ -1114,30 +1118,30 @@ format: 'ldt' }; - var loadedWidgets; - - if(this.isTablet) - { - loadedWidgets = - [ - { - type: "Timeline" - }, - { - type: "TabletPlayButton" - } - ]; - } - else - { - loadedWidgets = - [ - { - type: "Timeline" - } - ]; - } - + var loadedWidgets; + + if(this.isTablet) + { + loadedWidgets = + [ + { + type: "Timeline" + }, + { + type: "TabletPlayButton" + } + ]; + } + else + { + loadedWidgets = + [ + { + type: "Timeline" + } + ]; + } + var _config = { gui: { zoomTop: zoomTop - this.marginWidth*2, @@ -1160,7 +1164,7 @@ width: newSnWidth, autostart: true }, - isTablet: this.isTablet + isTablet: this.isTablet }; //On positionne le player. @@ -1170,7 +1174,7 @@ 'background-color': '#000000', top: newZoomTop, left: newZoomLeft, - 'z-index': 500 + 'z-index': 500 }); //On démarre le player. diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/mosaic/js/mouseInteractions.js --- a/front_idill/src/mosaic/js/mouseInteractions.js Mon Aug 27 14:40:35 2012 +0200 +++ b/front_idill/src/mosaic/js/mouseInteractions.js Wed Aug 29 11:29:14 2012 +0200 @@ -40,6 +40,13 @@ } } + //Si on se trouve sur l'icone des crédits et qu'elle est zoomée. + if(this.isCredtisIconZoomed) + { + //On affiche les crédits. + this.notifyCredits(); + } + //On met à jour les coordonnées de la souris au dernier mouse down. this.mouseDownPosX = e.pageX; this.mouseDownPosY = e.pageY; @@ -73,6 +80,18 @@ //On la rétrecit sinon. this.showSmallHelp(); } + + //On vérifie si la souris n'est pas sur l'icone des crédits. + if(this.isOnCreditsIcon(this.mousePosX, this.mousePosY)) + { + //On agrandit l'icone des crédits. + this.showBigCredits(); + } + else + { + //On la rétrecit sinon. + this.showSmallCredits(); + } //Si on n'a pas appuyé sur la souris avant, on part. if(!this.isMouseDown) @@ -323,4 +342,10 @@ { this.removeHelp(); } + + //Si les crédits sont affichés, un clic les ferme. + if(this.creditsDisplayed && !this.isCreditsIconZoomed && !this.isCreditsIconZooming) + { + this.removeCredits(); + } } \ No newline at end of file diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/mosaic/js/notifications.js --- a/front_idill/src/mosaic/js/notifications.js Mon Aug 27 14:40:35 2012 +0200 +++ b/front_idill/src/mosaic/js/notifications.js Wed Aug 29 11:29:14 2012 +0200 @@ -1929,4 +1929,123 @@ Mosaic.prototype.removeSearchExitIcon = function() { $('#searchExitIcon').remove(); +} + +/* + * Affiche l'icone des credits. + * Est appelé dans les fichiers : + * mosaic > fonction loadMosaic. + * zoomInteractions > fonctions zoom et unzoom. +*/ +Mosaic.prototype.creditsIcon = function() +{ + this.removeCreditsIcon(); + //On construit le div. + var creditsIcon = ""; + //On l'ajoute. + $('body').append(creditsIcon); + //On spécifie ses coordonnées. + $('#creditsIcon').css( + { + top: $(window).height() - $('#creditsIcon').height() - 2 * parseInt($('#creditsIcon').css('margin-left')), + left: $(window).width() - $('#creditsIcon').width() - 2 * parseInt($('#creditsIcon').css('margin-left')) + }); +} + +/* + * Supprime l'icone des credits. + * Est appelé dans les fichiers : + * zoomInteractions > fonctions zoom et unzoom. + * notifications > fonction helpIcon. +*/ +Mosaic.prototype.removeCreditsIcon = function() +{ + this.isCreditsIconZooming = false; + this.isCreditsIconZoomed = false; + $('#creditsIcon').remove(); +} + +/* + * Agrandit l'icone des credits. + * Est appelé dans le fichier : + * mosaic > fonction onMouseMove. +*/ +Mosaic.prototype.showBigCredits = function() +{ + //Si on a déjà zoomé on quitte. + if(this.isCreditsIconZoomed || this.isCreditsIconZooming) + { + return; + } + + this.isCreditsIconZooming = true; + + var _this = this; + + $('#creditsIcon').animate( + { + width: 100, + height: 100, + top: $(window).height() - 100 - 2 * parseInt($('#creditsIcon').css('margin-left')), + left: $(window).width() - 100 - 2 * parseInt($('#creditsIcon').css('margin-left')) + }, this.config.timeShowBigCredits, function() + { + _this.isCreditsIconZoomed = true; + _this.isCreditsIconZooming = false; + }); +} + +/* + * Rétrecit l'icone des credits. + * Est appelé dans le fichier : + * mosaic > fonction onMouseMove. +*/ +Mosaic.prototype.showSmallCredits = function() +{ + //Si on n'a pas zoomé on quitte. + if(!this.isCreditsIconZoomed || this.isCreditsIconZooming) + { + return; + } + + this.isCreditsIconZooming = true; + + var _this = this; + + var creditsIconWidth = $('#creditsIcon').width(); + + $('#creditsIcon').animate( + { + width: 50, + height: 50, + top: $(window).height() - 50 - 2 * parseInt($('#creditsIcon').css('margin-left')), + left: $(window).width() - 50 - 2 * parseInt($('#creditsIcon').css('margin-left')) + }, this.config.timeShowBigCredits, function() + { + _this.isCreditsIconZoomed = false; + _this.isCreditsIconZooming = false; + }); +} + +/* + * Affiche les crédits. +*/ +Mosaic.prototype.notifyCredits = function() +{ + if($('#notify_credits').length()) + { + return; + } + + var credits = "
"; + + $('body').append(credits); +} + +/* + * Supprime les crédits. +*/ +Mosaic.prototype.removeCredits = function() +{ + $('#notify_credits').remove(); } \ No newline at end of file diff -r 246fa369cc9a -r 34afef0f9e18 front_idill/src/mosaic/js/pointers.js --- a/front_idill/src/mosaic/js/pointers.js Mon Aug 27 14:40:35 2012 +0200 +++ b/front_idill/src/mosaic/js/pointers.js Wed Aug 29 11:29:14 2012 +0200 @@ -992,6 +992,29 @@ } /* + * Retourne vrai si la souris est sur la notification des crédits dans le mode d'interaction souris. + * Est appelé dans les fichiers : + * mosaic > onMouseMove. +*/ +Mosaic.prototype.isOnCreditsIcon = function(x, y) +{ + var creditsIcon = $('#creditsIcon'); + //S'il n'y a pas d'icone des crédits, on quitte. + if(creditsIcon.length <= 0) + { + return; + } + + //Si la souris est sur l'icone, on retourne true. + if(x > creditsIcon.position().left && x < +creditsIcon.position().left + creditsIcon.width() + 2 * parseInt(creditsIcon.css('margin-left')) && y > creditsIcon.position().top && y < +creditsIcon.position().top + creditsIcon.height() + 2 * parseInt(creditsIcon.css('margin-left'))) + { + return true; + } + + return false; +} + +/* * Retourne vrai si le doigt est sur la notification de sortie dans le mode d'interaction tablettes. */ Mosaic.prototype.isOnExitIcon = function(x, y)