--- a/front_idill/src/mosaic/js/mosaic.js Mon May 14 17:20:35 2012 +0200
+++ b/front_idill/src/mosaic/js/mosaic.js Thu May 24 10:30:05 2012 +0200
@@ -22,7 +22,7 @@
* Elle contient sa longueur, le nombre d'images total, une liste d'urls pour les vidéos, leurs snapshots principaux et leur position.
* Contient également les dimensions en px de la mosaïque.
*/
-function mosaic(len, imgToShow, zoomPercentage, prezoomPercentage, zoomedMargin)
+function mosaic(len, imgToShow, imgTotal, zoomPercentage, prezoomPercentage, zoomedMargin)
{
//S'il s'agit d'un rectangle.
if(imgToShow % len == 0)
@@ -30,12 +30,24 @@
//Longueur horizontale.
this.length = len;
//Nombre d'images dans la mosaïque.
- this.imagesToShow = imgToShow;
+ this.imagesToShow = imgToShow;
+ this.imagesTotal = imgTotal;
//Tableaux des urls des vidéos, des snapshots et de leur position dans la mosaïque.
this.videos = [];
this.urls = [];
this.imgs = [];
- this.ids = [];
+ this.ids = [];
+ //On remplit le tableau d'ids.
+ for(var i = 0 ; i < this.imagesTotal ; i++)
+ this.ids.push(i);
+ //On les mélange.
+ this.ids.sort(function()
+ {
+ return 0.5 - Math.random()
+ });
+
+ console.log(this.ids);
+
//Dimensions de la mosaïque en pixels.
this.width;
this.height;
@@ -53,11 +65,14 @@
this.timeNeighbourGlowing;
this.timeNeighbourUnglowing;
this.timeMovingToNeighbour;
+ this.timeSearchFade;
+ this.timeNotifyFade;
//Booléens permettant ou non certaines intéractions selon le contexte.
this.zoomed;
this.fullscreen;
this.canMoveToNeighbour;
+ this.helpDisplayed;
//Mode actuel.
this.currentMode;
@@ -80,8 +95,17 @@
//ID du snapshot du milieu lors d'un zoom.
this.centerId;
+ //Lecteur.
this.player;
+ //Coordonnées et dimensions d'un snapshot zoomé.
+ this.snTop = 0;
+ this.snLeft = 0;
+ this.snWidth = 0;
+ this.snHeight = 0;
+
+ this.searchCanvas;
+
this.loadFromJson('./player/json/videos.json');
}
else
@@ -100,6 +124,7 @@
this.previousPrezoomDiv = '';
this.fullscreen = false;
this.canMoveToNeighbour = false;
+ this.helpDisplayed = false;
var str = '';
if(this.imgs.length >= this.imagesToShow)
@@ -150,6 +175,9 @@
this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
$('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
+ //On affiche les notifications.
+ this.notifySelectionSearchMosaicFull();
+
$('.snapshotDivs').mouseenter(function ()
{
//On effectue un prézoom dès qu'on va sur une image.
@@ -175,6 +203,10 @@
{
return;
}
+
+ //On enlève les notifications initiales si elles existent.
+ this.removeSelectionSearchMosaicFull();
+
//Mosaïque.
var mosaic = this;
//Dimensions de la mosaïque.
@@ -272,7 +304,10 @@
height: finalDivHeight - margin,
top: finalDivTop + margin,
left: finalDivLeft
- }, this.preZoomTime);
+ }, this.preZoomTime, function()
+ {
+ mosaic.notifyPointMosaicPrezoom();
+ });
});
//Si on clique sur le snapshot prézoomé, on enclenche un zoom total sur ce snapshot.
@@ -295,6 +330,8 @@
{
return;
}
+
+ this.removePointMosaicPrezoom();
//On spécifie la marge afin de centrer le prédézoom.
var margin = this.marginWidth;
@@ -332,6 +369,8 @@
{
return;
}
+
+ this.removePointMosaicPrezoom();
//On prend les attributs nécessaires au calculs.
var margin = this.marginWidth, len = this.length, imgs = this.imagesToShow;
@@ -389,8 +428,11 @@
mos.currentMode = 'VIDEO';
console.log('h : ' + -newZoomLeft + " " + zoomedImg.position().left);
+
+ mos.snTop = (zoomedImg.position().top + newZoomTop + mos.MPTop_margin), mos.snLeft = (zoomedImg.position().left + newZoomLeft);
+ mos.snWidth = newSnWidth + 1, mos.snHeight = newSnHeight + 1;
- mos.loadPlayer((zoomedImg.position().top + newZoomTop + mos.MPTop_margin), (zoomedImg.position().left + newZoomLeft), newSnWidth + 1, newSnHeight + 1);
+ mos.loadPlayer(mos.snTop, mos.snLeft, mos.snWidth, mos.snHeight, newZoomTop, newZoomLeft);
/*mos.unload();
mos.localMos.loadLocalMosaic(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, mos.imgs, tab[1]);*/
@@ -400,7 +442,7 @@
/*
* Chargement du player basé sur le metadataplayer.
*/
-mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight)
+mosaic.prototype.loadPlayer = function(newZoomTop, newZoomLeft, newSnWidth, newSnHeight, zoomTop, zoomLeft)
{
//On configure les options de lancement.
IriSP.libFiles.defaultDir = "../lib/";
@@ -411,14 +453,15 @@
console.log('VIDEO[' + this.centerId + '] : ' + videoToPlay);
console.log('MD[' + this.centerId + '] : ' + currentMetadata);
- console.log(newZoomTop + " " + newZoomLeft);
-
var _metadata = {
url: currentMetadata,
format: 'ldt'
};
+ console.log(zoomTop + " m" + this.marginWidth);
var _config = {
gui: {
+ zoomTop: zoomTop - this.marginWidth*2,
+ zoomLeft: zoomLeft,
width: newSnWidth,
height: newSnHeight,
container: 'LdtPlayer',
@@ -467,6 +510,11 @@
{
return;
}
+
+ this.snTop = 0;
+ this.snLeft = 0;
+ this.Width = 0;
+ this.snHeight = 0;
//On charge les attributs nécessaires aux calculs.
var sWidth = this.snapshotWidth, sHeight = this.snapshotHeight;
@@ -478,7 +526,8 @@
var src = zoomedImg.attr('src');
zoomedImg.attr('src', src.replace('snapshots/', 'snapshots-little/'));
- $('div').remove('.LdtPlayer');
+ mos.player.widgets[0].freePlayer();
+ $('.LdtPlayer').remove();
$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
//On rend leur opacité aux snapshots. Qui ne sont alors plus grisés.
@@ -505,6 +554,8 @@
mos.currentMode = 'MOSAIC';
//On ne permet plus le déplacement vers les voisins.
$('.snapshotDivs').unbind('mouseenter', mos.selectNeighbour);
+ //On remet les notifications initiales.
+ mos.notifySelectionSearchMosaicFull();
});
}
@@ -691,7 +742,8 @@
$(this).css('opacity', '0');
neighbourFrame.remove();
- $('div').remove('.LdtPlayer');
+ mos.player.widgets[0].freePlayer();
+ $('.LdtPlayer').remove();
$('body').append('<div class="LdtPlayer" id="LdtPlayer"></div>');
//On grise le snapshot qu'on vient de quitter.
@@ -718,7 +770,7 @@
mos.previousZoomedSN = $('#snapshotDiv-' + mos.centerId);
mos.listenToNeighbours();
- mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height());
+ mos.loadPlayer((destinationImg.position().top + MPCurrentTop + mos.MPTop_margin), (destinationImg.position().left + MPCurrentLeft), destinationImg.width(), destinationImg.height(), MPCurrentTop, MPCurrentLeft);
});
});
}
@@ -776,6 +828,7 @@
mosaic.prototype.loadFromJson = function(path)
{
var _this = this;
+ var i = 0;
$.getJSON(path, function(data)
{
@@ -786,12 +839,15 @@
{
$.getJSON(val_video.metadata, function(meta)
{
- _this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+ _this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/').replace('mp4:', '').replace('.m4v', '.mp4'));
//console.log(meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
});
- _this.imgs.push(val_video.snapshot);
- _this.urls.push(val_video.metadata);
+ // _this.imgs.push(val_video.snapshot);
+ // _this.urls.push(val_video.metadata);
+ _this.imgs[_this.ids[i]] = val_video.snapshot;
+ _this.urls[_this.ids[i]] = val_video.metadata;
+ i++;
});
});
console.log('rdy');
@@ -812,4 +868,267 @@
break;
}
}
+}
+
+/*
+ * Lance une recherche par courbes.
+ */
+mosaic.prototype.startSearch = function()
+{
+ var top, left, width, height, margin_top, inMosaic;
+ //Si on est dans le cas d'un filtrage de mosaïque.
+ if(this.currentMode == "FILTER")
+ {
+ var mainPanel = $('#mainPanel');
+ top = mainPanel.position().top;
+ left = mainPanel.position().left;
+ width = mainPanel.width();
+ height = mainPanel.height();
+ margin_top = this.MPTop_margin;
+ inMosaic = true;
+ }
+ //Sinon si c'est une recherche dans la vidéo.
+ else if(this.currentMode == "SEARCH")
+ {
+ top = this.snTop;
+ left = this.snLeft;
+ width = this.snWidth;
+ height = this.snHeight;
+ margin_top = '0px';
+ inMosaic = false;
+ }
+
+ this.searchCanvas = new searchCanvas(top, left, width, height, margin_top, this.timeSearchFade, inMosaic);
+ this.searchCanvas.create();
+}
+
+/*
+ * Quitte une recherche par courbes.
+ */
+mosaic.prototype.leaveSearch = function()
+{
+ this.searchCanvas.leaveSearch();
+}
+
+/* ===============================================
+ * *
+ * ZONE DES NOTIFICATIONS *
+ * *
+ =============================================== */
+
+/*
+ * Affiche la notification de sélection/recherche lorsque la mosaique est complète.
+*/
+mosaic.prototype.notifySelectionSearchMosaicFull = function()
+{
+ //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.
+ $('#mainPanel').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 les positionne.
+ $('#notify_selection').css(
+ {
+ left: selection_left
+ });
+ $('#notify_search').css(
+ {
+ left: search_left
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
+}
+
+/*
+ * Supprime la notification de sélection/recherche lorsque la mosaique est complète.
+*/
+mosaic.prototype.removeSelectionSearchMosaicFull = function()
+{
+ $('#notify_selection, #notify_search').remove();
+}
+
+/*
+ * Affiche la notification de maintient du pointage lors d'une phase de prézoom.
+*/
+mosaic.prototype.notifyPointMosaicPrezoom = function()
+{
+ if($('#notify_point').length > 0)
+ {
+ return;
+ }
+
+ //On spécifie les notifications en div.
+ var notification_point = "<div id='notify_point' class='notifications'></div>";
+
+ //On les ajoute à la mosaïque.
+ $('#mainPanel').append(notification_point);
+ console.log('Append');
+ //On calcule leurs coordonnées et dimensions.
+ var notify_width = $('.notifications').width(), notify_height = $('.notifications').height();
+ var notify_margin = parseInt($('.notifications').css('margin'));
+ var point_left = $(window).width() / 2 - (notify_width) / 2 - notify_margin;
+
+ //On les positionne.
+ $('#notify_point').css(
+ {
+ left: point_left
+ });
+
+ //On les fait apparaître.
+ $('.notifications').css(
+ {
+ opacity: "0.9"
+ });
+}
+
+/*
+ * Supprime la notification de maintient du pointage.
+*/
+mosaic.prototype.removePointMosaicPrezoom = function()
+{
+ $('#notify_point').remove();
+}
+
+/*
+ * Affiche l'aide.
+*/
+mosaic.prototype.notifyHelp = function()
+{
+ if(this.helpDisplayed)
+ {
+ return;
+ }
+
+ this.removeSelectionSearchMosaicFull();
+ this.removePointMosaicPrezoom();
+
+ this.helpDisplayed = true;
+
+ var search_2hands_tab = ['no_motion', 'right_angle', 'contact', 'grand_jete', 'circle', 'screw', 'arc', 'rythme', 'slow', 'up_down', 'wave', 'wheel'];
+ var search_body_tab = ['bend', 'fall', 'jump', 'hello', 'knee_up'];
+ var controls_1hand_tab = ['selection'];
+
+ //On spécifie les notifications en div.
+ var search_title = "<div id='search_title'></div>";
+ var search_img = "<div id='search_img' class='notify_imgs'></div>";
+ var search_2hands_text = "<div id='search_2hands_text'></div>";
+ var search_2hands_imgs = "<div id='search_2hands_imgs' class='notify_imgs_big'>";
+
+ for(var i = 0 ; i < search_2hands_tab.length ; i++)
+ {
+ search_2hands_imgs += "<div id='2hands_" + search_2hands_tab[i] + "' class='notify_imgs_small'></div>";
+ }
+ search_2hands_imgs += "</div>";
+
+ var search_body_text = "<div id='search_body_text'></div>";
+ var search_body_imgs = "<div id='search_2hands_imgs' class='notify_imgs'>"
+
+ for(var i = 0 ; i < search_body_tab.length ; i++)
+ {
+ search_body_imgs += "<div id='body_" + search_body_tab[i] + "' class='notify_imgs_small'></div>";
+ }
+ search_body_imgs += "</div>";
+
+ var controls_title = "<div id='controls_title'></div>";
+ var controls_img = "<div id='controls_img' class='notify_imgs'></div>";
+ var controls_1hand_text = "<div id='controls_1hand_text'></div>";
+ var controls_1hand_imgs = "<div id='controls_1hand_imgs' class='notify_imgs'>";
+
+ for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+ {
+ controls_1hand_imgs += "<div id='1hand_" + controls_1hand_tab[i] + "' class='notify_imgs_small'></div>";
+ }
+ controls_1hand_imgs += "</div>";
+
+ var help_search = "<div id='help_search'>" + search_title + search_img + search_2hands_text + search_2hands_imgs + search_body_text + search_body_imgs + "</div>";
+ var help_controls = "<div id='help_controls'>" + controls_title + controls_img + controls_1hand_text + controls_1hand_imgs + "</div>";
+
+ var notification_help = "<div id='notify_help'>" + help_search + "<div id='help_sep'></div>" + help_controls + "</div>";
+
+ //On les ajoute à la mosaïque.
+ $('body').append(notification_help);
+
+ //On calcule leurs coordonnées et dimensions.
+ var notify_width = $(window).width(), notify_height = $(window).height();
+ var notify_margin = parseInt($('#notify_help').css('margin'));
+ var notify_ = 10;
+
+ //On les positionne.
+ $('#notify_help').css(
+ {
+ left: "0px",
+ top: "0px",
+ width: notify_width - notify_margin * 2,
+ height: notify_height - notify_margin * 2,
+ "margin-top": notify_margin_top
+ });
+
+ var search_width = $('#help_search').width();
+
+ $('#search_title').html('Recherche');
+ $('#search_2hands_text').html('Gestes à effectuer avec les deux mains');
+ $('#search_body_text').html('Gestes à effectuer avec le corps entier');
+
+ for(var i = 0 ; i < search_2hands_tab.length ; i++)
+ {
+ $("#2hands_" + search_2hands_tab[i]).css("background-image", "url('./pictos/help/" + search_2hands_tab[i] + ".png')");
+ //console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+ }
+
+ for(var i = 0 ; i < search_body_tab.length ; i++)
+ {
+ $("#body_" + search_body_tab[i]).css("background-image", "url('./pictos/help/" + search_body_tab[i] + ".png')");
+ //console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+ }
+
+ $('#controls_title').html('Contrôles');
+ $('#controls_1hand_text').html('Gestes à effectuer avec une seule main');
+
+ for(var i = 0 ; i < controls_1hand_tab.length ; i++)
+ {
+ $("#1hand_" + controls_1hand_tab[i]).css("background-image", "url('./pictos/help/" + controls_1hand_tab[i] + ".png')");
+ //console.log("url('../../pictos/help/" + search_2hands_tab[i] + ".png')");
+ }
+
+ //On les fait apparaître.
+ $('#notify_help').css(
+ {
+ opacity: "1"
+ });
+
+ $('.notify_imgs_big').css(
+ {
+ opacity: "1"
+ });
+}
+
+/*
+ * Supprime l'aide.
+*/
+mosaic.prototype.removeHelp = function()
+{
+ if(!this.helpDisplayed)
+ {
+ return;
+ }
+
+ var _this = this;
+
+ $('#notify_help').fadeOut(this.timeNotifyFade, function()
+ {
+ _this.helpDisplayed = false;
+ $('#notify_help').remove();
+ });
}
\ No newline at end of file