--- a/front_idill/src/mosaic/js/notifications.js Tue Jul 24 16:35:10 2012 +0200
+++ b/front_idill/src/mosaic/js/notifications.js Thu Jul 26 14:34:02 2012 +0200
@@ -20,7 +20,7 @@
/*
* Affiche l'aide.
* Est appelé dans les fichiers :
- * mosaic > fonction manageControlEvents.
+ * mosaic > fonctions manageControlEvents et onMouseDown.
* curvesDetector > fonction updateDists.
*/
Mosaic.prototype.notifyHelp = function(inMosaic)
@@ -30,7 +30,7 @@
{
return;
}
-
+
//On enlève les autres notifications.
this.removeNotifications();
@@ -39,10 +39,13 @@
//Section des courbes de recherche.
var search_2hands_tab;
+ var search_2hands_tab_text;
//Section des recherches corporelles.
var search_body_tab;
+ var search_body_tab_text;
//Section des actions de contrôle sur l'interface.
var controls_1hand_tab;
+ var controls_1hand_tab_text;
//Opacités (indique si elles sont actuellement implémentées).
var search_2hands_tab_opacities;
var search_body_tab_opacities;
@@ -56,12 +59,15 @@
if(this.config.mouseInteractions)
{
search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave', 'chute', 'knee_up', 'jump', 'bend'];
+ search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave', 'fall', 'knee-up', 'jump', 'bend'];
search_2hands_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
}
else
{
search_2hands_tab = ['arret', 'contact', 'grandjete', 'group_spin', 'port_de_bras', 'spin', 'up_down', 'wave'];
+ search_2hands_tab_text = ['no-motion', 'contact', 'grand-jete', 'screw', 'arc', 'circle', 'up-down', 'wave'];
search_body_tab = ['chute', 'knee_up', 'jump', 'bend'];
+ search_body_tab_text = ['fall', 'knee-up', 'jump', 'bend'];
search_2hands_tab_opacities = [0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5, 0.5];
search_body_tab_opacities = [1, 1, 1, 1];
}
@@ -70,13 +76,24 @@
if(inMosaic)
{
controls_1hand_tab = ['selection'];
+ controls_1hand_tab_text = ['controls_selection'];
controls_1hand_tab_opacities = [1];
}
//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.
else
{
- controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];
- controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+ if(this.config.mouseInteractions)
+ {
+ controls_1hand_tab = ['deplacer', 'move_down', 'move_up', 'move_right', 'move_left'];
+ controls_1hand_tab_text = ['controls_timeline', 'controls_move_down', 'controls_move_up', 'controls_move_right', 'controls_move_left'];
+ controls_1hand_tab_opacities = [1, 1, 1, 1, 1];
+ }
+ else
+ {
+ controls_1hand_tab = ['deplacer', 'precedent', 'suivant', 'mosaique_horizontal', 'mosaique_vertical', 'move_down', 'move_up', 'move_right', 'move_left'];
+ 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'];
+ controls_1hand_tab_opacities = [1, 1, 1, 1, 1, 1, 1, 1, 1];
+ }
}
//Colonne de recherche.
@@ -225,45 +242,48 @@
//Longueur de la colonne de recherche.
var search_width = $('#help_search').width();
- $('#search_title').html('Recherche');
+ $('#search_title').html(this.helpText.search_title);
var MI = '';
//Le texte de recherche et les images changent en fonction du mode d'intéraction (souris/Kinect).
if(this.config.mouseInteractions)
{
- $('#search_2hands_text').html('Courbes à effectuer avec la souris');
+ $('#search_2hands_text').html(this.helpText.search_2hands_text);
MI = 'MI/';
}
else
{
- $('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
+ $('#search_2hands_text').html(this.helpText.search_2hands_text);
}
//On affecte les images pour la recherche par courbes.
for(var i = 0 ; i < search_2hands_tab.length ; i++)
{
$("#2hands_" + search_2hands_tab[i]).css("background-image", "url('" + img_directory + MI + search_2hands_tab[i] + ".png')");
+ $("#2hands_" + search_2hands_tab[i]).html(this.notificationStrings[search_2hands_tab_text[i]]);
}
//Si on est en mode Kinect, on affecte les images de recherche corporelle.
if(!this.config.mouseInteractions)
{
- $('#search_body_text').html('Gestes à effectuer avec le corps entier');
+ $('#search_body_text').html(this.helpText.search_body_text);
for(var i = 0 ; i < search_body_tab.length ; i++)
{
$("#body_" + search_body_tab[i]).css("background-image", "url('" + img_directory + search_body_tab[i] + ".png')");
+ $("#body_" + search_body_tab[i]).html(this.notificationStrings[search_body_tab_text[i]]);
}
}
//Actions de contrôle de l'interface.
- $('#controls_title').html('Contrôles');
- $('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
+ $('#controls_title').html(this.helpText.controls_title);
+ $('#controls_1hand_text').html(this.helpText.controls_1hand_text);
//On affecte les images des actions de contrôle de l'interface.
for(var i = 0 ; i < controls_1hand_tab.length ; i++)
{
$("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('" + img_directory + controls_1hand_tab[i] + ".png')");
+ $("#1hand_" + controls_1hand_tab[i]).html(this.helpText[controls_1hand_tab_text[i]]);
}
//On les fait apparaître.
@@ -323,20 +343,44 @@
var notification_selection = "<div id='notify_selection' class='notifications'></div>";
var notification_search = "<div id='notify_search' class='notifications'></div>";
- //On les ajoute à la mosaïque.
- $('body').append(notification_selection + notification_search);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
- var search_left = selection_left + notify_width + notify_margin;
+ //On calcule leurs dimensions.
+ var notify_width, notify_height, notify_margin;
+ var selection_left, search_left;
+
+ if(this.config.mouseInteractions)
+ {
+ //On ajoute à la mosaïque seulement la recherche.
+ $('body').append(notification_search);
+ notify_margin = parseInt($('.notifications').css('margin'));
+ notify_width = $('.notifications').width();
+ notify_height = $('.notifications').height();
+ //On calcule leurs coordonnées.
+ search_left = ($(window).width() / 2 - notify_width / 2 - notify_margin);
+ var img = $('#notify_search').css('background-image');
+ $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ }
+ else
+ {
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_selection + notification_search);
+ notify_margin = parseInt($('.notifications').css('margin'));
+ notify_width = $('.notifications').width();
+ notify_height = $('.notifications').height();
+ //On calcule leurs coordonnées.
+ selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+ search_left = selection_left + notify_width + notify_margin;
+
+ this.putText($('#notify_selection'), this.notificationStrings.select);
+
+ $('#notify_selection').css(
+ {
+ left: selection_left
+ });
+ }
+
+ this.putText($('#notify_search'), this.notificationStrings.search);
//On les positionne.
- $('#notify_selection').css(
- {
- left: selection_left
- });
$('#notify_search').css(
{
left: search_left
@@ -373,6 +417,14 @@
var notify_margin = parseInt($('.notifications').css('margin'));
var selection_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
+ if(this.config.mouseInteractions)
+ {
+ var img = $('#notify_selection').css('background-image');
+ $('#notify_selection').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ }
+
+ this.putText($('#notify_selection'), this.notificationStrings.confirm);
+
//On les positionne.
$('#notify_selection').css(
{
@@ -411,6 +463,14 @@
var notify_margin = parseInt($('.notifications').css('margin'));
var search_left = $(window).width() / 2 - notify_width / 2 - notify_margin;
+ if(this.config.mouseInteractions)
+ {
+ var img = $('#notify_search').css('background-image');
+ $('#notify_search').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ }
+
+ this.putText($('#notify_search'), this.notificationStrings.search);
+
//On la positionne.
$('#notify_search').css(
{
@@ -440,16 +500,28 @@
//On spécifie les notifications en div.
var notification_selection = "<div id='notify_selection' class='notifications'></div>";
var notification_search = "<div id='notify_search' class='notifications'></div>";
-
- //On les ajoute à la mosaïque.
- $('body').append(notification_selection + notification_search);
-
- //On calcule leurs coordonnées et dimensions.
- var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
- var notify_margin = parseInt($('.notifications').css('margin'));
- var search_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
- var selection_left = search_left + notify_width + notify_margin;
-
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_selection + notification_search);
+
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height(), notify_margin = parseInt($('.notifications').css('margin'));
+
+ //On calcule leurs coordonnées.
+ var selection_left = $(window).width() / 2 - (notify_width * 2 + notify_margin * 3) / 2;
+ var search_left = selection_left + notify_width + notify_margin;
+
+ if(this.config.mouseInteractions)
+ {
+ var imgSel = $('#notify_selection').css('background-image');
+ $('#notify_selection').css('background-image', imgSel.replace('notifications/', 'notifications/MI/'));
+
+ var imgSearch = $('#notify_search').css('background-image');
+ $('#notify_search').css('background-image', imgSearch.replace('notifications/', 'notifications/MI/'));
+ }
+
+ this.putText($('#notify_selection'), this.notificationStrings.confirm);
+ this.putText($('#notify_search'), this.notificationStrings.search);
+
//On les positionne.
$('#notify_selection').css(
{
@@ -504,6 +576,8 @@
$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
}
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -552,7 +626,16 @@
{
$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
}
-
+
+ if(this.config.mouseInteractions)
+ {
+ var img = $('#notify_selection').css('background-image');
+ $('#notify_selection').css('background-image', img.replace('notifications/', 'notifications/MI/'));
+ }
+
+ this.putText($('#notify_selection'), this.notificationStrings.confirm);
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -599,6 +682,15 @@
var notifyTop = 0, notifyLeft = 0;
+ if(direction.equals("left"))
+ {
+ this.putText($('#notify_swipe'), this.notificationStrings.next);
+ }
+ else
+ {
+ this.putText($('#notify_swipe'), this.notificationStrings.previous);
+ }
+
//On les positionne.
$('#notify_swipe').css(
{
@@ -606,7 +698,7 @@
left: -notifyLeft + ($(window).width() - notify_width - notify_margin) / 2,
'background-image': 'url(./pictos/notifications/swipe_' + direction + '.png)'
});
-
+
//On les fait apparaître.
$('.notifications').css(
{
@@ -651,6 +743,8 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_move'), this.notificationStrings.move);
+
//On les positionne.
$('#notify_move').css(
{
@@ -706,6 +800,9 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_move'), this.notificationStrings.move);
+ this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+
//On les positionne.
$('#notify_move').css(
{
@@ -764,6 +861,8 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+
//On la positionne.
$('#notify_unzoom').css(
{
@@ -807,6 +906,8 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_timeline'), this.notificationStrings.timeline);
+
//On la positionne.
$('#notify_timeline').css(
{
@@ -851,6 +952,8 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_search'), this.notificationStrings.search);
+
//On la positionne.
$('#notify_search').css(
{
@@ -895,6 +998,16 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_search'), this.notificationStrings.search);
+ if(direction.equals("left"))
+ {
+ this.putText($('#notify_swipe'), this.notificationStrings.next);
+ }
+ else
+ {
+ this.putText($('#notify_swipe'), this.notificationStrings.previous);
+ }
+
//On les positionne.
$('#notify_search').css(
{
@@ -952,6 +1065,9 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_search'), this.notificationStrings.search);
+ this.putText($('#notify_move'), this.notificationStrings.move);
+
//On les positionne.
$('#notify_search').css(
{
@@ -1012,6 +1128,10 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_search'), this.notificationStrings.search);
+ this.putText($('#notify_move'), this.notificationStrings.move);
+ this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+
//On les positionne.
$('#notify_search').css(
{
@@ -1076,6 +1196,9 @@
var notifyTop = 0, notifyLeft = 0;
+ this.putText($('#notify_search'), this.notificationStrings.search);
+ this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+
//On les positionne.
$('#notify_move').css(
{
@@ -1136,6 +1259,8 @@
$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
}
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -1186,7 +1311,18 @@
{
$('#notify_search_1gesture').css('background-image', 'url("./pictos/big/normal/inconnu.png")');
}
+
+ if(direction.equals("left"))
+ {
+ this.putText($('#notify_swipe'), this.notificationStrings.next);
+ }
+ else
+ {
+ this.putText($('#notify_swipe'), this.notificationStrings.previous);
+ }
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -1251,6 +1387,9 @@
var sides = ['left', 'right', 'up', 'down'];
+ this.putText($('#notify_move'), this.notificationStrings.move);
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -1318,6 +1457,10 @@
var sides = ['left', 'right', 'up', 'down'];
var unzooms = ['horizontal', 'vertical'];
+ this.putText($('#notify_move'), this.notificationStrings.move);
+ this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -1386,6 +1529,9 @@
var unzooms = ['horizontal', 'vertical'];
+ this.putText($('#notify_unzoom'), this.notificationStrings.unzoom);
+ this.putText($('#notify_search_1gesture'), this.notificationStrings[gestureName]);
+
//On les positionne.
$('#notify_search_1gesture').css(
{
@@ -1429,6 +1575,9 @@
'background-image': 'url("./pictos/big/normal/inconnu.png")',
opacity: '0.9'
});
+
+ this.putText($('#notify_curves'), this.notificationStrings["unknown"]);
+
return;
}
@@ -1467,6 +1616,7 @@
//On les place.
$('#notify_curves_' + gestures_tab[i]).css('left', curves_gestures_left[i]);
+ this.putText($('#notify_curves_' + gestures_tab[i]), this.notificationStrings[gestures_tab[i]]);
}
//On les fait apparaître.
@@ -1491,4 +1641,107 @@
Mosaic.prototype.removeNotifications = function()
{
$('.notifications').remove();
+}
+
+/*
+ * Place un texte sur la notification.
+ * Est appelé dans chaque fonction servant à notifier dans le fichier de notification.
+*/
+Mosaic.prototype.putText = function(notification, text)
+{
+ notification.html(text);
+}
+
+/*
+ * Affiche l'icone d'aide.
+ * Est appelé dans les fichiers :
+ * mosaic > fonction loadMosaic.
+ * zoomInteractions > fonctions zoom et unzoom.
+*/
+Mosaic.prototype.helpIcon = function()
+{
+ this.removeHelpIcon();
+ //On construit le div.
+ var helpIcon = "<img id='helpIcon' src='./img/helpIcon.png' />";
+ //On l'ajoute.
+ $('body').append(helpIcon);
+ //On spécifie ses coordonnées.
+ $('#helpIcon').css(
+ {
+ top: 0,
+ left: $(window).width() - $('#helpIcon').width() - 2 * parseInt($('#helpIcon').css('margin'))
+ });
+}
+
+/*
+ * Supprime l'icone d'aide.
+ * Est appelé dans les fichiers :
+ * zoomInteractions > fonctions zoom et unzoom.
+ * notifications > fonction helpIcon.
+*/
+Mosaic.prototype.removeHelpIcon = function()
+{
+ this.isHelpIconZooming = false;
+ this.isHelpIconZoomed = false;
+ $('#helpIcon').remove();
+}
+
+/*
+ * Agrandit l'icone d'aide.
+ * Est appelé dans le fichier :
+ * mosaic > fonction onMouseMove.
+*/
+Mosaic.prototype.showBigHelp = function()
+{
+ //Si on a déjà zoomé on quitte.
+ if(this.isHelpIconZoomed || this.isHelpIconZooming)
+ {
+ return;
+ }
+
+ this.isHelpIconZooming = true;
+
+ var _this = this;
+
+ $('#helpIcon').animate(
+ {
+ width: 100,
+ height: 100,
+ left: $(window).width() - 100 - 2 * parseInt($('#helpIcon').css('margin'))
+ }, this.config.timeShowBigHelp, function()
+ {
+ _this.isHelpIconZoomed = true;
+ _this.isHelpIconZooming = false;
+ });
+}
+
+/*
+ * Rétrecit l'icone d'aide.
+ * Est appelé dans le fichier :
+ * mosaic > fonction onMouseMove.
+*/
+Mosaic.prototype.showSmallHelp = function()
+{
+ //Si on n'a pas zoomé on quitte.
+ if(!this.isHelpIconZoomed || this.isHelpIconZooming)
+ {
+ return;
+ }
+
+ this.isHelpIconZooming = true;
+
+ var _this = this;
+
+ var helpIconWidth = $('#helpIcon').width();
+
+ $('#helpIcon').animate(
+ {
+ width: 50,
+ height: 50,
+ left: $(window).width() - 50 - 2 * parseInt($('#helpIcon').css('margin'))
+ }, this.config.timeShowBigHelp, function()
+ {
+ _this.isHelpIconZoomed = false;
+ _this.isHelpIconZooming = false;
+ });
}
\ No newline at end of file