| changeset 55 | afd60399a7b5 |
| parent 52 | 277c94533395 |
| child 58 | a28488078053 |
| 54:eb52a12370a3 | 55:afd60399a7b5 |
|---|---|
18 */ |
18 */ |
19 |
19 |
20 /* |
20 /* |
21 * Affiche l'aide. |
21 * Affiche l'aide. |
22 * Est appelé dans les fichiers : |
22 * Est appelé dans les fichiers : |
23 * mosaic > fonction manageControlEvents. |
23 * mosaic > fonctions manageControlEvents et onMouseDown. |
24 * curvesDetector > fonction updateDists. |
24 * curvesDetector > fonction updateDists. |
25 */ |
25 */ |
26 Mosaic.prototype.notifyHelp = function(inMosaic) |
26 Mosaic.prototype.notifyHelp = function(inMosaic) |
27 { |
27 { |
28 //Si elle est déjà affichée on quitte. |
28 //Si elle est déjà affichée on quitte. |
29 if(this.helpDisplayed) |
29 if(this.helpDisplayed) |
30 { |
30 { |
31 return; |
31 return; |
32 } |
32 } |
33 |
33 |
34 //On enlève les autres notifications. |
34 //On enlève les autres notifications. |
35 this.removeNotifications(); |
35 this.removeNotifications(); |
36 |
36 |
37 //On indique qu'elle est affiché. |
37 //On indique qu'elle est affiché. |
38 this.helpDisplayed = true; |
38 this.helpDisplayed = true; |
39 |
39 |
40 //Section des courbes de recherche. |
40 //Section des courbes de recherche. |
41 var search_2hands_tab; |
41 var search_2hands_tab; |
42 var search_2hands_tab_text; |
|
42 //Section des recherches corporelles. |
43 //Section des recherches corporelles. |
43 var search_body_tab; |
44 var search_body_tab; |
45 var search_body_tab_text; |
|
44 //Section des actions de contrôle sur l'interface. |
46 //Section des actions de contrôle sur l'interface. |
45 var controls_1hand_tab; |
47 var controls_1hand_tab; |
48 var controls_1hand_tab_text; |
|
46 //Opacités (indique si elles sont actuellement implémentées). |
49 //Opacités (indique si elles sont actuellement implémentées). |
47 var search_2hands_tab_opacities; |
50 var search_2hands_tab_opacities; |
48 var search_body_tab_opacities; |
51 var search_body_tab_opacities; |
49 var controls_1hand_tab_opacities; |
52 var controls_1hand_tab_opacities; |
50 var controls_1hand_tab_opacities; |
53 var controls_1hand_tab_opacities; |
54 |
57 |
55 //Si on est en mode d'intéraction souris, la recherche corporelle se fait par des courbes. On les regroupes donc dans la section des courbes. |
58 //Si on est en mode d'intéraction souris, la recherche corporelle se fait par des courbes. On les regroupes donc dans la section des courbes. |
56 if(this.config.mouseInteractions) |
59 if(this.config.mouseInteractions) |
57 { |
60 { |
58 search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend']; |
61 search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend']; |
62 search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave', 'fall', 'knee-up', 'jump', 'bend']; |
|
59 search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; |
63 search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]; |
60 } |
64 } |
61 else |
65 else |
62 { |
66 { |
63 search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave']; |
67 search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave']; |
68 search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave']; |
|
64 search_body_tab = ['chute', 'knee_up', 'jump', 'bend']; |
69 search_body_tab = ['chute', 'knee_up', 'jump', 'bend']; |
70 search_body_tab_text = ['fall', 'knee-up', 'jump', 'bend']; |
|
65 search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5]; |
71 search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5]; |
66 search_body_tab_opacities = [1, 1, 1, 1]; |
72 search_body_tab_opacities = [1, 1, 1, 1]; |
67 } |
73 } |
68 |
74 |
69 //Dans la mosaique, on ne peut que sélectionner un snapshot. |
75 //Dans la mosaique, on ne peut que sélectionner un snapshot. |
70 if(inMosaic) |
76 if(inMosaic) |
71 { |
77 { |
72 controls_1hand_tab = ['selection']; |
78 controls_1hand_tab = ['selection']; |
79 controls_1hand_tab_text = ['controls_selection']; |
|
73 controls_1hand_tab_opacities = [1]; |
80 controls_1hand_tab_opacities = [1]; |
74 } |
81 } |
75 //Dans une vidéo, on peut aller d'un voisin à l'autre, bouger dans la timeline, dézoomer et swiper d'un marqueur à l'autre. |
82 //Dans une vidéo, on peut aller d'un voisin à l'autre, bouger dans la timeline, dézoomer et swiper d'un marqueur à l'autre. |
76 else |
83 else |
77 { |
84 { |
78 controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left']; |
85 if(this.config.mouseInteractions) |
79 controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1]; |
86 { |
87 controls_1hand_tab = ['deplacer', 'move_down', 'move_up', 'move_right', 'move_left']; |
|
88 controls_1hand_tab_text = ['controls_timeline', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left']; |
|
89 controls_1hand_tab_opacities = [1, 1, 1, 1, 1]; |
|
90 } |
|
91 else |
|
92 { |
|
93 controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left']; |
|
94 controls_1hand_tab = ['controls_timeline', 'controls_previous', 'controls_next', 'controls_mos_horizontal', 'controls_mos_vertical', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left']; |
|
95 controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1]; |
|
96 } |
|
80 } |
97 } |
81 |
98 |
82 //Colonne de recherche. |
99 //Colonne de recherche. |
83 //Titre de la colonne de recherche. |
100 //Titre de la colonne de recherche. |
84 var search_title = "<div id='search_title'></div>"; |
101 var search_title = "<div id='search_title'></div>"; |
223 }); |
240 }); |
224 |
241 |
225 //Longueur de la colonne de recherche. |
242 //Longueur de la colonne de recherche. |
226 var search_width = $('#help_search').width(); |
243 var search_width = $('#help_search').width(); |
227 |
244 |
228 $('#search_title').html('Recherche'); |
245 $('#search_title').html(this.helpText.search_title); |
229 var MI = ''; |
246 var MI = ''; |
230 |
247 |
231 //Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect). |
248 //Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect). |
232 if(this.config.mouseInteractions) |
249 if(this.config.mouseInteractions) |
233 { |
250 { |
234 $('#search_2hands_text').html('Courbes à effectuer avec la souris'); |
251 $('#search_2hands_text').html(this.helpText.search_2hands_text); |
235 MI = 'MI/'; |
252 MI = 'MI/'; |
236 } |
253 } |
237 else |
254 else |
238 { |
255 { |
239 $('#search_2hands_text').html('Gestes à effectuer avec les deux mains'); |
256 $('#search_2hands_text').html(this.helpText.search_2hands_text); |
240 } |
257 } |
241 |
258 |
242 //On affecte les images pour la recherche par courbes. |
259 //On affecte les images pour la recherche par courbes. |
243 for(var i = 0 ; i < search_2hands_tab.length ; i++) |
260 for(var i = 0 ; i < search_2hands_tab.length ; i++) |
244 { |
261 { |
245 $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + MI + search_2hands_tab[i] + ".png')"); |
262 $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + MI + search_2hands_tab[i] + ".png')"); |
263 $("#2hands_" + search_2hands_tab[i]).html(this.notificationStrings[search_2hands_tab_text[i]]); |
|
246 } |
264 } |
247 |
265 |
248 //Si on est en mode Kinect, on affecte les images de recherche corporelle. |
266 //Si on est en mode Kinect, on affecte les images de recherche corporelle. |
249 if(!this.config.mouseInteractions) |
267 if(!this.config.mouseInteractions) |
250 { |
268 { |
251 $('#search_body_text').html('Gestes à effectuer avec le corps entier'); |
269 $('#search_body_text').html(this.helpText.search_body_text); |
252 |
270 |
253 for(var i = 0 ; i < search_body_tab.length ; i++) |
271 for(var i = 0 ; i < search_body_tab.length ; i++) |
254 { |
272 { |
255 $("#body_" + search_body_tab[i]).css("background-image", "url('" + img_directory + search_body_tab[i] + ".png')"); |
273 $("#body_" + search_body_tab[i]).css("background-image", "url('" + img_directory + search_body_tab[i] + ".png')"); |
274 $("#body_" + search_body_tab[i]).html(this.notificationStrings[search_body_tab_text[i]]); |
|
256 } |
275 } |
257 } |
276 } |
258 |
277 |
259 //Actions de contrôle de l'interface. |
278 //Actions de contrôle de l'interface. |
260 $('#controls_title').html('Contrôles'); |
279 $('#controls_title').html(this.helpText.controls_title); |
261 $('#controls_1hand_text').html('Gestes à effectuer avec une seule main'); |
280 $('#controls_1hand_text').html(this.helpText.controls_1hand_text); |
262 |
281 |
263 //On affecte les images des actions de contrôle de l'interface. |
282 //On affecte les images des actions de contrôle de l'interface. |
264 for(var i = 0 ; i < controls_1hand_tab.length ; i++) |
283 for(var i = 0 ; i < controls_1hand_tab.length ; i++) |
265 { |
284 { |
266 $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')"); |
285 $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')"); |
286 $("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]); |
|
267 } |
287 } |
268 |
288 |
269 //On les fait apparaître. |
289 //On les fait apparaître. |
270 $('#notify_help').css( |
290 $('#notify_help').css( |
271 { |
291 { |
321 |
341 |
322 //On spécifie les notifications en div. |
342 //On spécifie les notifications en div. |
323 var notification_selection = "<div id='notify_selection' class='notifications'></div>"; |
343 var notification_selection = "<div id='notify_selection' class='notifications'></div>"; |
324 var notification_search = "<div id='notify_search' class='notifications'></div>"; |
344 var notification_search = "<div id='notify_search' class='notifications'></div>"; |
325 |
345 |
326 //On les ajoute à la mosaïque. |
346 //On calcule leurs dimensions. |
327 $('body').append(notification_selection + notification_search); |
347 var notify_width, notify_height, notify_margin; |
328 |
348 var selection_left, search_left; |
329 //On calcule leurs coordonnées et dimensions. |
349 |
330 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(); |
350 if(this.config.mouseInteractions) |
331 var notify_margin = parseInt($('.notifications').css('margin')); |
351 { |
332 var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2; |
352 //On ajoute à la mosaïque seulement la recherche. |
333 var search_left = selection_left + notify_width + notify_margin; |
353 $('body').append(notification_search); |
354 notify_margin = parseInt($('.notifications').css('margin')); |
|
355 notify_width = $('.notifications').width(); |
|
356 notify_height = $('.notifications').height(); |
|
357 //On calcule leurs coordonnées. |
|
358 search_left = ($(window).width() / 2 - notify_width / 2 - notify_margin); |
|
359 var img = $('#notify_search').css('background-image'); |
|
360 $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/')); |
|
361 } |
|
362 else |
|
363 { |
|
364 //On les ajoute à la mosaïque. |
|
365 $('body').append(notification_selection + notification_search); |
|
366 notify_margin = parseInt($('.notifications').css('margin')); |
|
367 notify_width = $('.notifications').width(); |
|
368 notify_height = $('.notifications').height(); |
|
369 //On calcule leurs coordonnées. |
|
370 selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2; |
|
371 search_left = selection_left + notify_width + notify_margin; |
|
372 |
|
373 this.putText($('#notify_selection'), this.notificationStrings.select); |
|
374 |
|
375 $('#notify_selection').css( |
|
376 { |
|
377 left: selection_left |
|
378 }); |
|
379 } |
|
380 |
|
381 this.putText($('#notify_search'), this.notificationStrings.search); |
|
334 |
382 |
335 //On les positionne. |
383 //On les positionne. |
336 $('#notify_selection').css( |
|
337 { |
|
338 left: selection_left |
|
339 }); |
|
340 $('#notify_search').css( |
384 $('#notify_search').css( |
341 { |
385 { |
342 left: search_left |
386 left: search_left |
343 }); |
387 }); |
344 |
388 |
371 //On calcule ses coordonnées et dimensions. |
415 //On calcule ses coordonnées et dimensions. |
372 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(); |
416 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(); |
373 var notify_margin = parseInt($('.notifications').css('margin')); |
417 var notify_margin = parseInt($('.notifications').css('margin')); |
374 var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin; |
418 var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin; |
375 |
419 |
420 if(this.config.mouseInteractions) |
|
421 { |
|
422 var img = $('#notify_selection').css('background-image'); |
|
423 $('#notify_selection').css('background-image', img.replace('notifications/', 'notifications/MI/')); |
|
424 } |
|
425 |
|
426 this.putText($('#notify_selection'), this.notificationStrings.confirm); |
|
427 |
|
376 //On les positionne. |
428 //On les positionne. |
377 $('#notify_selection').css( |
429 $('#notify_selection').css( |
378 { |
430 { |
379 left: selection_left |
431 left: selection_left |
380 }); |
432 }); |
409 //On calcule ses coordonnées et dimensions. |
461 //On calcule ses coordonnées et dimensions. |
410 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(); |
462 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(); |
411 var notify_margin = parseInt($('.notifications').css('margin')); |
463 var notify_margin = parseInt($('.notifications').css('margin')); |
412 var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin; |
464 var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin; |
413 |
465 |
466 if(this.config.mouseInteractions) |
|
467 { |
|
468 var img = $('#notify_search').css('background-image'); |
|
469 $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/')); |
|
470 } |
|
471 |
|
472 this.putText($('#notify_search'), this.notificationStrings.search); |
|
473 |
|
414 //On la positionne. |
474 //On la positionne. |
415 $('#notify_search').css( |
475 $('#notify_search').css( |
416 { |
476 { |
417 left: search_left |
477 left: search_left |
418 }); |
478 }); |
438 } |
498 } |
439 |
499 |
440 //On spécifie les notifications en div. |
500 //On spécifie les notifications en div. |
441 var notification_selection = "<div id='notify_selection' class='notifications'></div>"; |
501 var notification_selection = "<div id='notify_selection' class='notifications'></div>"; |
442 var notification_search = "<div id='notify_search' class='notifications'></div>"; |
502 var notification_search = "<div id='notify_search' class='notifications'></div>"; |
443 |
503 |
444 //On les ajoute à la mosaïque. |
504 //On les ajoute à la mosaïque. |
445 $('body').append(notification_selection + notification_search); |
505 $('body').append(notification_selection + notification_search); |
446 |
506 |
447 //On calcule leurs coordonnées et dimensions. |
507 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(), notify_margin = parseInt($('.notifications').css('margin')); |
448 var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(); |
508 |
449 var notify_margin = parseInt($('.notifications').css('margin')); |
509 //On calcule leurs coordonnées. |
450 var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2; |
510 var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2; |
451 var selection_left = search_left + notify_width + notify_margin; |
511 var search_left = selection_left + notify_width + notify_margin; |
452 |
512 |
513 if(this.config.mouseInteractions) |
|
514 { |
|
515 var imgSel = $('#notify_selection').css('background-image'); |
|
516 $('#notify_selection').css('background-image', imgSel.replace('notifications/', 'notifications/MI/')); |
|
517 |
|
518 var imgSearch = $('#notify_search').css('background-image'); |
|
519 $('#notify_search').css('background-image', imgSearch.replace('notifications/', 'notifications/MI/')); |
|
520 } |
|
521 |
|
522 this.putText($('#notify_selection'), this.notificationStrings.confirm); |
|
523 this.putText($('#notify_search'), this.notificationStrings.search); |
|
524 |
|
453 //On les positionne. |
525 //On les positionne. |
454 $('#notify_selection').css( |
526 $('#notify_selection').css( |
455 { |
527 { |
456 left: selection_left |
528 left: selection_left |
457 }); |
529 }); |
502 else if(mode == 'none') |
574 else if(mode == 'none') |
503 { |
575 { |
504 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
576 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
505 } |
577 } |
506 |
578 |
579 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
580 |
|
507 //On les positionne. |
581 //On les positionne. |
508 $('#notify_search_1gesture').css( |
582 $('#notify_search_1gesture').css( |
509 { |
583 { |
510 top: 0, |
584 top: 0, |
511 left: ($(window).width() - notify_width) / 2 |
585 left: ($(window).width() - notify_width) / 2 |
550 } |
624 } |
551 else if(mode == 'none') |
625 else if(mode == 'none') |
552 { |
626 { |
553 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
627 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
554 } |
628 } |
555 |
629 |
630 if(this.config.mouseInteractions) |
|
631 { |
|
632 var img = $('#notify_selection').css('background-image'); |
|
633 $('#notify_selection').css('background-image', img.replace('notifications/', 'notifications/MI/')); |
|
634 } |
|
635 |
|
636 this.putText($('#notify_selection'), this.notificationStrings.confirm); |
|
637 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
638 |
|
556 //On les positionne. |
639 //On les positionne. |
557 $('#notify_search_1gesture').css( |
640 $('#notify_search_1gesture').css( |
558 { |
641 { |
559 left: search_1gesture_left |
642 left: search_1gesture_left |
560 }); |
643 }); |
597 var notify_margin = parseInt($('.notifications').css('margin')); |
680 var notify_margin = parseInt($('.notifications').css('margin')); |
598 var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin; |
681 var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin; |
599 |
682 |
600 var notifyTop = 0, notifyLeft = 0; |
683 var notifyTop = 0, notifyLeft = 0; |
601 |
684 |
685 if(direction.equals("left")) |
|
686 { |
|
687 this.putText($('#notify_swipe'), this.notificationStrings.next); |
|
688 } |
|
689 else |
|
690 { |
|
691 this.putText($('#notify_swipe'), this.notificationStrings.previous); |
|
692 } |
|
693 |
|
602 //On les positionne. |
694 //On les positionne. |
603 $('#notify_swipe').css( |
695 $('#notify_swipe').css( |
604 { |
696 { |
605 top: -notifyTop, |
697 top: -notifyTop, |
606 left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2, |
698 left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2, |
607 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)' |
699 'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)' |
608 }); |
700 }); |
609 |
701 |
610 //On les fait apparaître. |
702 //On les fait apparaître. |
611 $('.notifications').css( |
703 $('.notifications').css( |
612 { |
704 { |
613 opacity: "0.9" |
705 opacity: "0.9" |
614 }); |
706 }); |
649 |
741 |
650 var sides = ['left', 'right', 'up', 'down']; |
742 var sides = ['left', 'right', 'up', 'down']; |
651 |
743 |
652 var notifyTop = 0, notifyLeft = 0; |
744 var notifyTop = 0, notifyLeft = 0; |
653 |
745 |
746 this.putText($('#notify_move'), this.notificationStrings.move); |
|
747 |
|
654 //On les positionne. |
748 //On les positionne. |
655 $('#notify_move').css( |
749 $('#notify_move').css( |
656 { |
750 { |
657 top: -notifyTop, |
751 top: -notifyTop, |
658 left: -notifyLeft + move_left, |
752 left: -notifyLeft + move_left, |
704 var sides = ['left', 'right', 'up', 'down']; |
798 var sides = ['left', 'right', 'up', 'down']; |
705 var unzooms = ['horizontal', 'vertical']; |
799 var unzooms = ['horizontal', 'vertical']; |
706 |
800 |
707 var notifyTop = 0, notifyLeft = 0; |
801 var notifyTop = 0, notifyLeft = 0; |
708 |
802 |
803 this.putText($('#notify_move'), this.notificationStrings.move); |
|
804 this.putText($('#notify_unzoom'), this.notificationStrings.unzoom); |
|
805 |
|
709 //On les positionne. |
806 //On les positionne. |
710 $('#notify_move').css( |
807 $('#notify_move').css( |
711 { |
808 { |
712 top: -notifyTop, |
809 top: -notifyTop, |
713 left: -notifyLeft + move_left, |
810 left: -notifyLeft + move_left, |
762 |
859 |
763 var unzooms = ['horizontal', 'vertical']; |
860 var unzooms = ['horizontal', 'vertical']; |
764 |
861 |
765 var notifyTop = 0, notifyLeft = 0; |
862 var notifyTop = 0, notifyLeft = 0; |
766 |
863 |
864 this.putText($('#notify_unzoom'), this.notificationStrings.unzoom); |
|
865 |
|
767 //On la positionne. |
866 //On la positionne. |
768 $('#notify_unzoom').css( |
867 $('#notify_unzoom').css( |
769 { |
868 { |
770 top: -notifyTop, |
869 top: -notifyTop, |
771 left: -notifyLeft + unzoom_left, |
870 left: -notifyLeft + unzoom_left, |
805 var notify_margin = parseInt($('.notifications').css('margin')); |
904 var notify_margin = parseInt($('.notifications').css('margin')); |
806 var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin; |
905 var timeline_left = $(window).width() / 2 - notify_width / 2 - notify_margin; |
807 |
906 |
808 var notifyTop = 0, notifyLeft = 0; |
907 var notifyTop = 0, notifyLeft = 0; |
809 |
908 |
909 this.putText($('#notify_timeline'), this.notificationStrings.timeline); |
|
910 |
|
810 //On la positionne. |
911 //On la positionne. |
811 $('#notify_timeline').css( |
912 $('#notify_timeline').css( |
812 { |
913 { |
813 top: -notifyTop, |
914 top: -notifyTop, |
814 left: -notifyLeft + timeline_left |
915 left: -notifyLeft + timeline_left |
849 var notify_margin = parseInt($('.notifications').css('margin')); |
950 var notify_margin = parseInt($('.notifications').css('margin')); |
850 var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin; |
951 var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin; |
851 |
952 |
852 var notifyTop = 0, notifyLeft = 0; |
953 var notifyTop = 0, notifyLeft = 0; |
853 |
954 |
955 this.putText($('#notify_search'), this.notificationStrings.search); |
|
956 |
|
854 //On la positionne. |
957 //On la positionne. |
855 $('#notify_search').css( |
958 $('#notify_search').css( |
856 { |
959 { |
857 top: -notifyTop, |
960 top: -notifyTop, |
858 left: -notifyLeft + search_left |
961 left: -notifyLeft + search_left |
893 var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2; |
996 var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2; |
894 var swipe_left = search_left + notify_width + notify_margin; |
997 var swipe_left = search_left + notify_width + notify_margin; |
895 |
998 |
896 var notifyTop = 0, notifyLeft = 0; |
999 var notifyTop = 0, notifyLeft = 0; |
897 |
1000 |
1001 this.putText($('#notify_search'), this.notificationStrings.search); |
|
1002 if(direction.equals("left")) |
|
1003 { |
|
1004 this.putText($('#notify_swipe'), this.notificationStrings.next); |
|
1005 } |
|
1006 else |
|
1007 { |
|
1008 this.putText($('#notify_swipe'), this.notificationStrings.previous); |
|
1009 } |
|
1010 |
|
898 //On les positionne. |
1011 //On les positionne. |
899 $('#notify_search').css( |
1012 $('#notify_search').css( |
900 { |
1013 { |
901 top: -notifyTop, |
1014 top: -notifyTop, |
902 left: -notifyLeft + search_left |
1015 left: -notifyLeft + search_left |
950 |
1063 |
951 var sides = ['left', 'right', 'up', 'down']; |
1064 var sides = ['left', 'right', 'up', 'down']; |
952 |
1065 |
953 var notifyTop = 0, notifyLeft = 0; |
1066 var notifyTop = 0, notifyLeft = 0; |
954 |
1067 |
1068 this.putText($('#notify_search'), this.notificationStrings.search); |
|
1069 this.putText($('#notify_move'), this.notificationStrings.move); |
|
1070 |
|
955 //On les positionne. |
1071 //On les positionne. |
956 $('#notify_search').css( |
1072 $('#notify_search').css( |
957 { |
1073 { |
958 top: -notifyTop, |
1074 top: -notifyTop, |
959 left: -notifyLeft + search_left |
1075 left: -notifyLeft + search_left |
1010 var sides = ['left', 'right', 'up', 'down']; |
1126 var sides = ['left', 'right', 'up', 'down']; |
1011 var unzooms = ['horizontal', 'vertical']; |
1127 var unzooms = ['horizontal', 'vertical']; |
1012 |
1128 |
1013 var notifyTop = 0, notifyLeft = 0; |
1129 var notifyTop = 0, notifyLeft = 0; |
1014 |
1130 |
1131 this.putText($('#notify_search'), this.notificationStrings.search); |
|
1132 this.putText($('#notify_move'), this.notificationStrings.move); |
|
1133 this.putText($('#notify_unzoom'), this.notificationStrings.unzoom); |
|
1134 |
|
1015 //On les positionne. |
1135 //On les positionne. |
1016 $('#notify_search').css( |
1136 $('#notify_search').css( |
1017 { |
1137 { |
1018 top: -notifyTop, |
1138 top: -notifyTop, |
1019 left: -notifyLeft + search_left |
1139 left: -notifyLeft + search_left |
1074 |
1194 |
1075 var unzooms = ['horizontal', 'vertical']; |
1195 var unzooms = ['horizontal', 'vertical']; |
1076 |
1196 |
1077 var notifyTop = 0, notifyLeft = 0; |
1197 var notifyTop = 0, notifyLeft = 0; |
1078 |
1198 |
1199 this.putText($('#notify_search'), this.notificationStrings.search); |
|
1200 this.putText($('#notify_unzoom'), this.notificationStrings.unzoom); |
|
1201 |
|
1079 //On les positionne. |
1202 //On les positionne. |
1080 $('#notify_move').css( |
1203 $('#notify_move').css( |
1081 { |
1204 { |
1082 top: -notifyTop, |
1205 top: -notifyTop, |
1083 left: -notifyLeft + search_left |
1206 left: -notifyLeft + search_left |
1134 else if(mode == 'none') |
1257 else if(mode == 'none') |
1135 { |
1258 { |
1136 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
1259 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
1137 } |
1260 } |
1138 |
1261 |
1262 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
1263 |
|
1139 //On les positionne. |
1264 //On les positionne. |
1140 $('#notify_search_1gesture').css( |
1265 $('#notify_search_1gesture').css( |
1141 { |
1266 { |
1142 top: 0, |
1267 top: 0, |
1143 left: ($(window).width() - notify_width) / 2 |
1268 left: ($(window).width() - notify_width) / 2 |
1184 } |
1309 } |
1185 else if(mode == 'none') |
1310 else if(mode == 'none') |
1186 { |
1311 { |
1187 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
1312 $('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")'); |
1188 } |
1313 } |
1189 |
1314 |
1315 if(direction.equals("left")) |
|
1316 { |
|
1317 this.putText($('#notify_swipe'), this.notificationStrings.next); |
|
1318 } |
|
1319 else |
|
1320 { |
|
1321 this.putText($('#notify_swipe'), this.notificationStrings.previous); |
|
1322 } |
|
1323 |
|
1324 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
1325 |
|
1190 //On les positionne. |
1326 //On les positionne. |
1191 $('#notify_search_1gesture').css( |
1327 $('#notify_search_1gesture').css( |
1192 { |
1328 { |
1193 left: search_1gesture_left |
1329 left: search_1gesture_left |
1194 }); |
1330 }); |
1249 return; |
1385 return; |
1250 } |
1386 } |
1251 |
1387 |
1252 var sides = ['left', 'right', 'up', 'down']; |
1388 var sides = ['left', 'right', 'up', 'down']; |
1253 |
1389 |
1390 this.putText($('#notify_move'), this.notificationStrings.move); |
|
1391 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
1392 |
|
1254 //On les positionne. |
1393 //On les positionne. |
1255 $('#notify_search_1gesture').css( |
1394 $('#notify_search_1gesture').css( |
1256 { |
1395 { |
1257 left: search_1gesture_left |
1396 left: search_1gesture_left |
1258 }); |
1397 }); |
1316 } |
1455 } |
1317 |
1456 |
1318 var sides = ['left', 'right', 'up', 'down']; |
1457 var sides = ['left', 'right', 'up', 'down']; |
1319 var unzooms = ['horizontal', 'vertical']; |
1458 var unzooms = ['horizontal', 'vertical']; |
1320 |
1459 |
1460 this.putText($('#notify_move'), this.notificationStrings.move); |
|
1461 this.putText($('#notify_unzoom'), this.notificationStrings.unzoom); |
|
1462 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
1463 |
|
1321 //On les positionne. |
1464 //On les positionne. |
1322 $('#notify_search_1gesture').css( |
1465 $('#notify_search_1gesture').css( |
1323 { |
1466 { |
1324 left: search_1gesture_left |
1467 left: search_1gesture_left |
1325 }); |
1468 }); |
1384 return; |
1527 return; |
1385 } |
1528 } |
1386 |
1529 |
1387 var unzooms = ['horizontal', 'vertical']; |
1530 var unzooms = ['horizontal', 'vertical']; |
1388 |
1531 |
1532 this.putText($('#notify_unzoom'), this.notificationStrings.unzoom); |
|
1533 this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]); |
|
1534 |
|
1389 //On les positionne. |
1535 //On les positionne. |
1390 $('#notify_search_1gesture').css( |
1536 $('#notify_search_1gesture').css( |
1391 { |
1537 { |
1392 left: search_1gesture_left |
1538 left: search_1gesture_left |
1393 }); |
1539 }); |
1427 { |
1573 { |
1428 left: curves_left, |
1574 left: curves_left, |
1429 'background-image': 'url("./pictos/big/normal/inconnu.png")', |
1575 'background-image': 'url("./pictos/big/normal/inconnu.png")', |
1430 opacity: '0.9' |
1576 opacity: '0.9' |
1431 }); |
1577 }); |
1578 |
|
1579 this.putText($('#notify_curves'), this.notificationStrings["unknown"]); |
|
1580 |
|
1432 return; |
1581 return; |
1433 } |
1582 } |
1434 |
1583 |
1435 //Sinon, on les met dans un tableau. |
1584 //Sinon, on les met dans un tableau. |
1436 var gestures_tab = gestures.split(';'); |
1585 var gestures_tab = gestures.split(';'); |
1465 curves_gestures_left[i+1] = curves_gestures_left[i] + notify_width + notify_margin * 2; |
1614 curves_gestures_left[i+1] = curves_gestures_left[i] + notify_width + notify_margin * 2; |
1466 } |
1615 } |
1467 |
1616 |
1468 //On les place. |
1617 //On les place. |
1469 $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]); |
1618 $('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]); |
1619 this.putText($('#notify_curves_' + gestures_tab[i]), this.notificationStrings[gestures_tab[i]]); |
|
1470 } |
1620 } |
1471 |
1621 |
1472 //On les fait apparaître. |
1622 //On les fait apparaître. |
1473 $('.notifications').css( |
1623 $('.notifications').css( |
1474 { |
1624 { |
1490 */ |
1640 */ |
1491 Mosaic.prototype.removeNotifications = function() |
1641 Mosaic.prototype.removeNotifications = function() |
1492 { |
1642 { |
1493 $('.notifications').remove(); |
1643 $('.notifications').remove(); |
1494 } |
1644 } |
1645 |
|
1646 /* |
|
1647 * Place un texte sur la notification. |
|
1648 * Est appelé dans chaque fonction servant à notifier dans le fichier de notification. |
|
1649 */ |
|
1650 Mosaic.prototype.putText = function(notification, text) |
|
1651 { |
|
1652 notification.html(text); |
|
1653 } |
|
1654 |
|
1655 /* |
|
1656 * Affiche l'icone d'aide. |
|
1657 * Est appelé dans les fichiers : |
|
1658 * mosaic > fonction loadMosaic. |
|
1659 * zoomInteractions > fonctions zoom et unzoom. |
|
1660 */ |
|
1661 Mosaic.prototype.helpIcon = function() |
|
1662 { |
|
1663 this.removeHelpIcon(); |
|
1664 //On construit le div. |
|
1665 var helpIcon = "<img id='helpIcon' src='./img/helpIcon.png' />"; |
|
1666 //On l'ajoute. |
|
1667 $('body').append(helpIcon); |
|
1668 //On spécifie ses coordonnées. |
|
1669 $('#helpIcon').css( |
|
1670 { |
|
1671 top: 0, |
|
1672 left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin')) |
|
1673 }); |
|
1674 } |
|
1675 |
|
1676 /* |
|
1677 * Supprime l'icone d'aide. |
|
1678 * Est appelé dans les fichiers : |
|
1679 * zoomInteractions > fonctions zoom et unzoom. |
|
1680 * notifications > fonction helpIcon. |
|
1681 */ |
|
1682 Mosaic.prototype.removeHelpIcon = function() |
|
1683 { |
|
1684 this.isHelpIconZooming = false; |
|
1685 this.isHelpIconZoomed = false; |
|
1686 $('#helpIcon').remove(); |
|
1687 } |
|
1688 |
|
1689 /* |
|
1690 * Agrandit l'icone d'aide. |
|
1691 * Est appelé dans le fichier : |
|
1692 * mosaic > fonction onMouseMove. |
|
1693 */ |
|
1694 Mosaic.prototype.showBigHelp = function() |
|
1695 { |
|
1696 //Si on a déjà zoomé on quitte. |
|
1697 if(this.isHelpIconZoomed || this.isHelpIconZooming) |
|
1698 { |
|
1699 return; |
|
1700 } |
|
1701 |
|
1702 this.isHelpIconZooming = true; |
|
1703 |
|
1704 var _this = this; |
|
1705 |
|
1706 $('#helpIcon').animate( |
|
1707 { |
|
1708 width: 100, |
|
1709 height: 100, |
|
1710 left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin')) |
|
1711 }, this.config.timeShowBigHelp, function() |
|
1712 { |
|
1713 _this.isHelpIconZoomed = true; |
|
1714 _this.isHelpIconZooming = false; |
|
1715 }); |
|
1716 } |
|
1717 |
|
1718 /* |
|
1719 * Rétrecit l'icone d'aide. |
|
1720 * Est appelé dans le fichier : |
|
1721 * mosaic > fonction onMouseMove. |
|
1722 */ |
|
1723 Mosaic.prototype.showSmallHelp = function() |
|
1724 { |
|
1725 //Si on n'a pas zoomé on quitte. |
|
1726 if(!this.isHelpIconZoomed || this.isHelpIconZooming) |
|
1727 { |
|
1728 return; |
|
1729 } |
|
1730 |
|
1731 this.isHelpIconZooming = true; |
|
1732 |
|
1733 var _this = this; |
|
1734 |
|
1735 var helpIconWidth = $('#helpIcon').width(); |
|
1736 |
|
1737 $('#helpIcon').animate( |
|
1738 { |
|
1739 width: 50, |
|
1740 height: 50, |
|
1741 left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin')) |
|
1742 }, this.config.timeShowBigHelp, function() |
|
1743 { |
|
1744 _this.isHelpIconZoomed = false; |
|
1745 _this.isHelpIconZooming = false; |
|
1746 }); |
|
1747 } |