trakers: comparison front_idill/src/mosaic/js/mosaic.js

Mercurial Mercurial > trakers / comparison

summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | comparison | raw | help

front_idill/src/mosaic/js/mosaic.js

changeset 32	4003f84cd349
parent 31	2c7fc855eba8
child 33	2d9b15f99b4e

equal deleted inserted replaced

-:2c7fc855eba8
+:4003f84cd349
 //Longueur horizontale.
 this.length = len;
 //Nombre d'images dans la mosaïque.
 this.imagesToShow = imgToShow;
 //Tableaux des urls des vidéos, des snapshots et de leur position dans la mosaïque.
+this.videos = [];
 this.urls = [];
 this.imgs = [];
 this.ids = [];
 //Dimensions de la mosaïque en pixels.
 this.width;
 this.localMos;
 //Position des voisins lors d'un zoom.
 this.neighboursIds = [];
 //ID du snapshot du milieu lors d'un zoom.
 this.centerId;
+		this.player;
+		this.loadFromJson('./player/json/videos.json');
 }
 else
 {
 //Affiche un message d'erreur.
 }
 //On charge les images de petite taille pour ne pas surcharger la mosaïque lors de l'affichage global.
 str += '<div id="snapshotDiv-' + i + '" class="snapshotDivs"><img id="snapshot-' + i + '" class="snapshots" src="snapshots-little/' + this.imgs[i] + '" /></div>';
 }
 }
+	console.log(this.imagesToShow);
 return str;
 }
 /*
 * Permet de raffraichir la mosaïque.
 */
-mosaic.prototype.loadMosaic = function(imgsTab)
+mosaic.prototype.loadMosaic = function()
 {
+	var createMosaic = this.createMosaic();
+	if(createMosaic == '')
+	{
+		return;
+	}
+	var _this = this;
 //On affecte les chemins vers les images à la mosaïque.
-this.imgs = imgsTab;
 this.previousZoomedSN;
 //this.width =
 //On met à jour la mosaïque.
-$('#mainPanel').html(this.createMosaic());
+$('#mainPanel').html(createMosaic);
 //On récupère la taille des bordures.
 this.marginWidth = $('.snapshotDivs').css('margin-bottom');
 this.marginWidth = parseFloat(mos.marginWidth)*2;
 //On calcule la taille des divs contenant les snapshots.
 this.width = $('#mainPanel').innerWidth();
 this.height = $('#mainPanel').innerHeight();
 //On centre verticalement la mosaïque.
 this.MPTop_margin = ($(document).height() - $('#mainPanel').height())/2;
 $('#mainPanel').css('margin-top', this.MPTop_margin).css('margin-bottom', this.MPTop_margin);
+	$('.snapshotDivs').mouseenter(function ()
+	{
+		//On effectue un prézoom dès qu'on va sur une image.
+		_this.preZoom($(this));
+	});
+	$('body').keypress(function (event)
+	{
+		//Si on a appuié sur la touche 'q' ou 'Q';
+		if(event.which == 113 || event.which == 81)
+		{
+		   _this.unzoom();
+		}
+	});
 }
 /*
 * Zoom sur la position d'une image, 1ère partie. Durant le laps de temps de time ms, l'utilisateur a le choix de zoomer sur une autre image.
 * Après ce laps de temps, l'image zoom complétement et il n'est plus possible de sélectionner une autre image par pointage.
 {
 	//On configure les options de lancement.
 	IriSP.libFiles.defaultDir = "../lib/";
 	IriSP.widgetsDir = "./player/metadataplayer/"
+	var videoToPlay = this.videos[this.centerId];
+	var currentMetadata = this.urls[this.centerId];
+	console.log('VIDEO[' + this.centerId + '] : ' + videoToPlay);
+	console.log('MD[' + this.centerId + '] : ' + currentMetadata);
 	console.log(newZoomTop + " " + newZoomLeft);
 	var _metadata = {
-		url: 'http://ldt.iri.centrepompidou.fr/ldtplatform/ldt/cljson/id/7c912bce-66b8-11e1-80f6-00145ea4a2be?callback=?',
+		url: currentMetadata,
 		format: 'ldt'
 	};
 	var _config = {
 		gui: {
 			width: newSnWidth,
 				}
 			]
 		},
 		player:{
 			type: 'html5', // player type
-			video: 'http://media.iri.centrepompidou.fr/video/ldtplatform/body_trail_cctv.mp4',
+			video: videoToPlay,
 			live: true,
 			height: newSnHeight,
 			width: newSnWidth,
 			autostart: true
 		}
 		top: newZoomTop,
 		left: newZoomLeft
 	});
 	//On démarre le player.
-	var _myPlayer = new IriSP.Metadataplayer(_config, _metadata);
+	this.player = null;
-	console.log(_myPlayer);
+	this.player = new IriSP.Metadataplayer(_config, _metadata);
 }
 /*
 * Retour à la taille normale de la mosaïque.
 */
 		{
 			'top': 0,
 			'left': 0,
 			'width': $(this).width() - marginValue*2,
 			'height': $(this).height() - marginValue*2,
-			'background-image': 'url(' + $('img', $(this)).attr('src') + ')',
+			'background-image': 'url("' + $('img', $(this)).attr('src') + '")',
 			'background-size': $(this).width() + 'px ' + $(this).height() + 'px',
 			'background-position': -marginValue + 'px ' + -marginValue + 'px',
 			'opacity': '0.4'
 		});
 return false;
 }
 }
 return true;
 }
+/*
+* Charge les vidéos, les snapshots et les annotations depuis un fichier json.
+*/
+mosaic.prototype.loadFromJson = function(path)
+{
+	var _this = this;
+	$.getJSON(path, function(data)
+	{
+		$.each(data, function(key, val)
+		{
+			// console.log(val);
+			$.each(val, function(key_video, val_video)
+			{
+				$.getJSON(val_video.metadata, function(meta)
+				{
+					_this.affectVideoById(val_video.metadata, meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+					//console.log(meta.medias[0].url.replace('rtmp://', 'http://').replace('/ddc_player/', '/'));
+				});
+				_this.imgs.push(val_video.snapshot);
+				_this.urls.push(val_video.metadata);
+			});
+		});
+		console.log('rdy');
+		_this.loadMosaic();
+	});
+}
+/*
+* Affecte une vidéo au tableau des vidéos selon son id
+*/
+mosaic.prototype.affectVideoById = function(metadata_id, video)
+{
+	for (i = 0 ; i < this.urls.length ; i++)
+	{
+		if(this.urls[i] == metadata_id)
+		{
+			this.videos[i] = video;
+			break;
+		}
+	}
+}

trakers