Front IDILL :
search by curves added
search by type added
notifications added
timeline improved
<!--
/*
* This file is part of the TraKERS\Front IDILL package.
*
* (c) IRI <http://www.iri.centrepompidou.fr/>
*
* For the full copyright and license information, please view the LICENSE
* file that was distributed with this source code.
*/
/*
* Projet : TraKERS
* Module : Front IDILL
* Fichier : index.html
*
* Auteur : alexandre.bastien@iri.centrepompidou.fr
*
* Fonctionnalités : Centralise les différents éléments du Front IDILL, tels que les classes javascript, les fonctions jQuery, les css.
*/
-->
<!doctype html>
<html>
<head>
<!-- On inclut les styles et les scripts utilisés. -->
<title>IDILL</title>
<meta charset="UTF-8" />
<link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" />
<link rel="stylesheet/less" type="text/css" href="./mosaic/css/mosaic.less" />
<script type="text/javascript" src="../lib/less-1.3.0.min.js"></script>
<script type="text/javascript" src="../lib/underscore-min.js"></script>
<script type="text/javascript" src="../lib/jquery.min.js"></script>
<script type="text/javascript" src="./mosaic/js/mosaic.js"></script>
<script type="text/javascript" src="./mosaic/js/localMosaic.js"></script>
<script type="text/javascript" src="./player/metadataplayer/LdtPlayer-core.js"></script>
<script type="text/javascript" src="../lib/paper.js"></script>
<link rel="stylesheet" type="text/css" href="./search/css/searchCanvas.css" />
<script type="text/javascript" src="./search/js/searchCanvas.js"></script>
</head>
<body>
<!-- Ce div stocke la mosaïque. -->
<div id="mainPanel"></div>
<div class="player" id="video"></div>
<div class="LdtPlayer" id="LdtPlayer"></div>
<!-- SET AN EMPTY DIV TO BE POPULATED WITH CONTENT VIA JQUERY -->
<div class="test" style="color: #FFFFFF"></div>
<!-- Scripts principaux. -->
<script type="text/javascript">
//Longueur de la mosaïques et nombre d'images à afficher (seront importés des paramètres du Middleware).
var length = 5, imagesToShow = 20, totalImages = 23;
//Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware).
var timePrezoom = 500, timePreUnzoom = 200, timeZoom = 500, timeUnzoom = 400;
var timeNeighbourGlowing = 1000, timeNeighbourUnglowing = 1000, timeMovingToNeighbour = 1000;
var timeSearchFade = 2000;
var timeNotifyFade = 2000;
var zoomPercentage = 0.80, prezoomPercentage = 0.25;
var zoomedMargin = 42;
//On instancie la mosaïque.
var mos = new mosaic(length, imagesToShow, totalImages, zoomPercentage, prezoomPercentage, zoomedMargin);
//On spécifie les attributs de temps.
mos.zoomTime = timeZoom;
mos.unzoomTime = timeUnzoom;
mos.preZoomTime = timePrezoom;
mos.preUnzoomTime = timePreUnzoom;
mos.timeNeighbourGlowing = timeNeighbourGlowing;
mos.timeNeighbourUnglowing = timeNeighbourUnglowing;
mos.timeMovingToNeighbour = timeMovingToNeighbour;
mos.timeSearchFade = timeSearchFade;
mos.timeNotifyFade = timeNotifyFade;
//On instancie une mosaïque locale pour le zoom total (pas encore implémenté).
//var lMos = new localMosaic(length, imagesToShow, zoomedMargin);
//mos.localMos = lMos;
//Tableau d'images de test pour peupler la mosaïque.
/*var imgs = [];
for(var i = 0 ; i < 42 ; i++)
{
imgs[i] = i + '.jpg';
}*/
//Si on a changé les dimensions de la fenêtre, on raffraichit la mosaïque.
$(window).resize(function ()
{
mos.loadMosaic();
});
//Si la page a chargé, on raffraichit la mosaïque.
$(document).ready(function ()
{
mos.loadMosaic();
//mos.newSearch();
$('.snapshotDivs').mouseenter(function ()
{
//On effectue un prézoom dès qu'on va sur une image.
mos.preZoom($(this));
});
$('body').keypress(function (event)
{
//Sinon si on a appuyé sur 's' ou 'S'.
if(event.which == 103 || event.which == 71)
{
//Si on est déjà en recherche par courbes.
if(mos.currentMode == "SEARCH" || mos.currentMode == "FILTER")
{
//On quitte cette recherche.
mos.leaveSearch();
//Si on était en mode recherche.
if(mos.currentMode == "SEARCH")
{
//On revient dans la vidéo.
mos.currentMode = "VIDEO";
}
else
{
//Sinon c'est qu'on était dans la mosaïque.
mos.currentMode = "MOSAIC";
}
}
else
{
//Si on est en plein écran.
if(mos.fullscreen)
{
//On entre en mode recherche.
mos.currentMode = "SEARCH";
}
//Sinon.
else
{
//On entre en mode filtrage.
mos.currentMode = "FILTER";
}
mos.startSearch();
}
}
//Si c'est a ou A.
else if(event.which == 65 || event.which == 97)
{
if(!mos.helpDisplayed)
{
mos.notifyHelp();
}
else
{
mos.removeHelp();
}
}
});
});
</script>
</body>
</html>