diff -r d1ddacf71b9e -r 6070a596014e front_idill/src/mosaic/js/mosaic.js --- a/front_idill/src/mosaic/js/mosaic.js Sat Aug 18 02:52:01 2012 +0200 +++ b/front_idill/src/mosaic/js/mosaic.js Mon Aug 27 14:40:10 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; @@ -189,25 +189,25 @@ 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 à 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,17 +307,20 @@ */ 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é. - $(window).resize(function() - { - // _.debounce(window.location.reload(), _this.config.timeReloadAfterResize); - }); - + $('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); + }); + } + var initPanel = '
'; var mp = $('#mainPanel'); mp.append(initPanel); @@ -380,8 +383,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; @@ -437,8 +440,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. @@ -468,110 +471,110 @@ */ 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(); + + //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(); + } + }); + } } /* @@ -630,16 +633,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; + } } } @@ -847,13 +850,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) @@ -871,33 +874,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() @@ -981,53 +984,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; + }) + } } /* @@ -1037,56 +1040,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]); + } + } } /* @@ -1111,30 +1114,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, @@ -1157,7 +1160,7 @@ width: newSnWidth, autostart: true }, - isTablet: this.isTablet + isTablet: this.isTablet }; //On positionne le player. @@ -1167,7 +1170,7 @@ 'background-color': '#000000', top: newZoomTop, left: newZoomLeft, - 'z-index': 500 + 'z-index': 500 }); //On démarre le player.