27 //On n'affiche pas les pointeurs en mode d'interaction souris. |
27 //On n'affiche pas les pointeurs en mode d'interaction souris. |
28 if(this.config.mouseInteractions) |
28 if(this.config.mouseInteractions) |
29 { |
29 { |
30 return; |
30 return; |
31 } |
31 } |
|
32 |
|
33 this.minX = $(window).width(); |
|
34 this.minY = $(window).height(); |
|
35 this.maxX = 0; |
|
36 this.maxY = 0; |
32 |
37 |
33 //On crée et ajoute les pointeurs. |
38 //On crée et ajoute les pointeurs. |
34 var mainPointer = '<div id="mainPointer" class="pointers"></div>'; |
39 var mainPointer = '<div id="mainPointer" class="pointers"></div>'; |
35 var secondPointer = '<div id="secondPointer" class="pointers"></div>'; |
40 var secondPointer = '<div id="secondPointer" class="pointers"></div>'; |
36 $('body').append(mainPointer + secondPointer); |
41 $('body').append(mainPointer + secondPointer); |
152 |
157 |
153 if(isMainPointer) |
158 if(isMainPointer) |
154 { |
159 { |
155 isOtherPointerDisplayed = this.isSecondPointerDisplayed; |
160 isOtherPointerDisplayed = this.isSecondPointerDisplayed; |
156 pointer = $('#mainPointer'); |
161 pointer = $('#mainPointer'); |
157 pointerImg = 'url(./img/cursors/pointer.png)'; |
162 |
|
163 if(!this.isSearchByCurvesOn) |
|
164 { |
|
165 pointerImg = 'url(./img/cursors/pointer.png)'; |
|
166 } |
158 } |
167 } |
159 else |
168 else |
160 { |
169 { |
161 isOtherPointerDisplayed = this.isMainPointerDisplayed; |
170 isOtherPointerDisplayed = this.isMainPointerDisplayed; |
162 pointer = $('#secondPointer'); |
171 pointer = $('#secondPointer'); |
163 pointerImg = 'url(./img/cursors/pointer2.png)'; |
172 |
|
173 if(!this.isSearchByCurvesOn) |
|
174 { |
|
175 pointerImg = 'url(./img/cursors/pointer2.png)'; |
|
176 } |
164 } |
177 } |
165 |
178 |
166 //On regarde si on est sur un snapshot. |
179 //On regarde si on est sur un snapshot. |
167 snapshot = this.pointerPositionToSN(pointerX, pointerY, true); |
180 snapshot = this.pointerPositionToSN(pointerX, pointerY, true); |
168 |
181 |
215 |
228 |
216 if(isMainPointer) |
229 if(isMainPointer) |
217 { |
230 { |
218 pointer = $('#mainPointer'); |
231 pointer = $('#mainPointer'); |
219 thisPointerNeighbourSelectedId = this.mainPointerNeighbourSelectedId; |
232 thisPointerNeighbourSelectedId = this.mainPointerNeighbourSelectedId; |
220 pointerImg = 'url(./img/cursors/pointer.png)'; |
|
221 thisPointerExitBorder = this.mainPointerExitBorder; |
233 thisPointerExitBorder = this.mainPointerExitBorder; |
222 otherPointerExitBorder = this.secondPointerExitBorder; |
234 otherPointerExitBorder = this.secondPointerExitBorder; |
|
235 |
|
236 if(!this.isSearchByCurvesOn) |
|
237 { |
|
238 pointerImg = 'url(./img/cursors/pointer.png)'; |
|
239 } |
223 } |
240 } |
224 else |
241 else |
225 { |
242 { |
226 pointer = $('#secondPointer'); |
243 pointer = $('#secondPointer'); |
227 thisPointerNeighbourSelectedId = this.secondPointerNeighbourSelectedId; |
244 thisPointerNeighbourSelectedId = this.secondPointerNeighbourSelectedId; |
228 pointerImg = 'url(./img/cursors/pointer2.png)'; |
|
229 thisPointerExitBorder = this.secondPointerExitBorder; |
245 thisPointerExitBorder = this.secondPointerExitBorder; |
230 otherPointerExitBorder = this.mainPointerExitBorder; |
246 otherPointerExitBorder = this.mainPointerExitBorder; |
|
247 |
|
248 if(!this.isSearchByCurvesOn) |
|
249 { |
|
250 pointerImg = 'url(./img/cursors/pointer2.png)'; |
|
251 } |
231 } |
252 } |
232 |
253 |
233 var zoomX = pointerX - this.notifyLeftVideo, zoomY = pointerY - this.notifyTopVideo; |
254 var zoomX = pointerX - this.notifyLeftVideo, zoomY = pointerY - this.notifyTopVideo; |
234 |
255 |
235 //On calcule les interactions du pointeur avec la timeline. |
256 //On calcule les interactions du pointeur avec la timeline. |
236 this.pointersTimelineSelection(pointerX, pointerY, isMainPointer); |
257 this.pointersTimelineSelection(pointerX, pointerY, isMainPointer); |
237 |
258 |
238 //Si on se trouve actuellement dans une recherche par gestures. |
259 //Si on se trouve actuellement dans une recherche par gestures. |
239 if(this.isCurrentlyInASearchByGesture) |
260 if(this.currentSearchGesture[this.centerId]) |
240 { |
261 { |
241 this.checkIfPointerIsOnSearchNotification(pointerX, pointerY, pointer); |
262 this.checkIfPointerIsOnSearchNotification(pointerX, pointerY, pointer); |
242 } |
263 } |
243 |
264 |
244 //on vérifie si le pointeur est sur un snapshot zoomé. |
265 //on vérifie si le pointeur est sur un snapshot zoomé. |
407 pointer.css('background-image', 'url(./img/cursors/selector_gray.png)'); |
428 pointer.css('background-image', 'url(./img/cursors/selector_gray.png)'); |
408 |
429 |
409 //Si on est en mode d'interaction Kinect. |
430 //Si on est en mode d'interaction Kinect. |
410 if(!this.config.mouseInteractions) |
431 if(!this.config.mouseInteractions) |
411 { |
432 { |
412 //On met le spinner gif sur le pointeur. |
433 //On met le spinner gif sur le pointeur s'il existe. |
413 var spinner = "<img id='spinner'></div>"; |
434 if(pointer.length > 0) |
414 $('body').append(spinner); |
|
415 $('#spinner').css( |
|
416 { |
435 { |
417 position: 'absolute', |
436 var spinner = "<img id='spinner'></div>"; |
418 top: pointer.position().top, |
437 $('body').append(spinner); |
419 left: pointer.position().left, |
438 $('#spinner').css( |
420 width: 85, |
439 { |
421 height: 85, |
440 position: 'absolute', |
422 'z-index': 600 |
441 top: pointer.position().top, |
423 }); |
442 left: pointer.position().left, |
424 $('#spinner').attr('src', './img/cursors/selector_anim.gif'); |
443 width: 85, |
|
444 height: 85, |
|
445 'z-index': 600 |
|
446 }); |
|
447 $('#spinner').attr('src', './img/cursors/selector_anim.gif'); |
|
448 } |
425 } |
449 } |
426 |
450 |
427 this.selectTLTimeout = setTimeout(function() |
451 this.selectTLTimeout = setTimeout(function() |
428 { |
452 { |
429 //On permet l'interaction après un laps de temps. |
453 //On permet l'interaction après un laps de temps. |
488 } |
512 } |
489 |
513 |
490 //Si on est en mode d'interaction Kinect, on effectue un réhaussement de la position. |
514 //Si on est en mode d'interaction Kinect, on effectue un réhaussement de la position. |
491 if(!this.config.mouseInteractions) |
515 if(!this.config.mouseInteractions) |
492 { |
516 { |
493 x *= 7; |
517 this.minMax(x, y); |
|
518 x = this.scaleIntervals(this.config.kinectMinCoordX, this.config.kinectMaxCoordX, 0, $(window).width(), x); |
|
519 y = this.scaleIntervals(this.config.kinectMinCoordY, this.config.kinectMaxCoordY, 0, $(window).height(), y); |
|
520 /*x *= 7; |
494 y *= 7; |
521 y *= 7; |
495 x -= $(window).width() * 3 / 4; |
522 x -= $(window).width() * 3 / 4; |
496 y -= $(window).height() * 2 / 4; |
523 y -= $(window).height() * 2 / 4;*/ |
497 } |
524 } |
498 |
525 |
499 var pointer; |
526 var pointer; |
500 |
527 |
501 //S'il s'agit du pointeur principal. |
528 //S'il s'agit du pointeur principal. |
623 this.removeIdlePointers(); |
650 this.removeIdlePointers(); |
624 this.pointersIdleNeedLaunch = true; |
651 this.pointersIdleNeedLaunch = true; |
625 } |
652 } |
626 |
653 |
627 //Si l'aide est affichée, on la masque. |
654 //Si l'aide est affichée, on la masque. |
628 if(this.helpDisplayed) |
655 if(this.helpDisplayed && !this.mustTakeOutHands) |
629 { |
656 { |
630 this.removeHelp(); |
657 this.removeHelp(); |
631 } |
658 } |
632 |
659 |
633 if((this.currentMode == 'SEARCH' || this.currentMode == 'FILTER') && !this.isSearchByCurvesOn) |
660 if((this.currentMode == 'SEARCH' || this.currentMode == 'FILTER') && !this.isSearchByCurvesOn) |
766 */ |
793 */ |
767 Mosaic.prototype.checkIfPointerIsOnSearchNotification = function(x, y, pointer) |
794 Mosaic.prototype.checkIfPointerIsOnSearchNotification = function(x, y, pointer) |
768 { |
795 { |
769 var _this = this; |
796 var _this = this; |
770 var notification_search = $('#notify_search_1gesture'); |
797 var notification_search = $('#notify_search_1gesture'); |
771 |
798 |
772 //Si la notification de recherche existe (dans le player). |
799 //Si la notification de recherche existe (dans le player). |
773 if(notification_search.length > 0) |
800 if(notification_search.length > 0) |
774 { |
801 { |
775 //Pictogramme actuel de la notification. |
802 //Pictogramme actuel de la notification. |
776 var currentPicto = notification_search.css('background-image'); |
803 var currentPicto = notification_search.css('background-image'); |
777 |
804 |
778 //Si le pointeur est sur la notification. |
805 //Si le pointeur est sur la notification. |
779 if(x > notification_search.position().left && x < (+notification_search.position().left + notification_search.width()) && y > notification_search.position().top && y < (+notification_search.position().top + notification_search.height())) |
806 if(x > notification_search.position().left && x < (+notification_search.position().left + notification_search.width()) && y > notification_search.position().top && y < (+notification_search.position().top + notification_search.height())) |
780 { |
807 { |
781 if(!this.alreadyOnNotification && ($('#spinner').length == 0 && !this.config.mouseInteractions || this.config.mouseInteractions)) |
808 if(!this.alreadyOnNotification && ($('#spinner').length == 0 && !this.config.mouseInteractions || this.config.mouseInteractions)) |
782 { |
809 { |
787 |
814 |
788 //Si on est en interaction Kinect. |
815 //Si on est en interaction Kinect. |
789 if(!this.config.mouseInteractions) |
816 if(!this.config.mouseInteractions) |
790 { |
817 { |
791 //On met le spinner gif sur le pointeur. |
818 //On met le spinner gif sur le pointeur. |
792 var spinner = "<img id='spinner'></div>"; |
819 if(pointer != null && pointer.length > 0) |
793 $('body').append(spinner); |
820 { |
794 $('#spinner').css( |
821 //On modifie l'apparence du pointeur. |
795 { |
822 pointer.css('background-image', 'url(./img/cursors/selector_gray.png)'); |
796 position: 'absolute', |
823 var spinner = "<img id='spinner'></div>"; |
797 top: pointer.position().top, |
824 $('body').append(spinner); |
798 left: pointer.position().left, |
825 $('#spinner').css( |
799 width: 85, |
826 { |
800 height: 85, |
827 position: 'absolute', |
801 'z-index': 600 |
828 top: pointer.position().top, |
802 }); |
829 left: pointer.position().left, |
803 $('#spinner').attr('src', './img/cursors/selector_anim.gif'); |
830 width: 85, |
|
831 height: 85, |
|
832 'z-index': 600 |
|
833 }); |
|
834 $('#spinner').attr('src', './img/cursors/selector_anim.gif'); |
|
835 } |
804 |
836 |
805 //Après un laps de temps sur la notification, on supprime la recherche et on revient au mode précédent. |
837 //Après un laps de temps sur la notification, on supprime la recherche et on revient au mode précédent. |
806 this.removeNotificationByGestureTimeout = setTimeout(function() |
838 this.removeNotificationByGestureTimeout = setTimeout(function() |
807 { |
839 { |
|
840 if(pointer.attr('id') == 'mainPanel') |
|
841 { |
|
842 pointer.css('background-image', 'url(./img/cursors/pointer.png)'); |
|
843 } |
|
844 else |
|
845 { |
|
846 pointer.css('background-image', 'url(./img/cursors/pointer2.png)'); |
|
847 } |
|
848 |
808 //Si on est en recherche, on revient en video. |
849 //Si on est en recherche, on revient en video. |
809 if(_this.currentMode == 'SEARCH') |
850 if(_this.currentMode == 'SEARCH') |
810 { |
851 { |
811 _this.player.widgets[0].removeSearchByGesture(); |
852 _this.player.widgets[0].removeSearchByGesture(); |
812 _this.currentMode = 'VIDEO'; |
853 _this.currentMode = 'VIDEO'; |
823 _this.removeFilter(); |
864 _this.removeFilter(); |
824 } |
865 } |
825 |
866 |
826 _this.alreadyOnNotification = false; |
867 _this.alreadyOnNotification = false; |
827 _this.isCurrentlyInASearchByGesture = false; |
868 _this.isCurrentlyInASearchByGesture = false; |
|
869 _this.gestureDelRequested = false; |
828 |
870 |
829 //Si on n'est ni en recherche, ni en filtrage, on enlève la gesture de recherche. |
871 //Si on n'est ni en recherche, ni en filtrage, on enlève la gesture de recherche. |
830 if(_this.currentMode != 'MOSAIC' && _this.currentMode != 'FILTER') |
872 if(_this.currentMode != 'MOSAIC' && _this.currentMode != 'FILTER') |
831 { |
873 { |
832 _this.currentSearchGesture[_this.centerId] = ''; |
874 _this.currentSearchGesture[_this.centerId] = ''; |
934 return true; |
976 return true; |
935 } |
977 } |
936 |
978 |
937 return false; |
979 return false; |
938 } |
980 } |
|
981 |
|
982 /* |
|
983 * Change la couleur des pointeurs pendant le tracé d'une courbe. |
|
984 */ |
|
985 Mosaic.prototype.pointersGreen = function() |
|
986 { |
|
987 $('#mainPointer').css('background-image', 'url(./img/cursors/pointerC.png)'); |
|
988 $('#secondPointer').css('background-image', 'url(./img/cursors/pointer2C.png)'); |
|
989 } |
|
990 |
|
991 Mosaic.prototype.minMax = function(x, y) |
|
992 { |
|
993 if(x < this.minX) {this.minX = x;} |
|
994 if(x > this.maxX) {this.maxX = x;} |
|
995 if(y < this.minY) {this.minY = y;} |
|
996 if(y > this.maxY) {this.maxY = y;} |
|
997 } |