26 <title>IDILL</title> |
26 <title>IDILL</title> |
27 <meta charset="UTF-8" /> |
27 <meta charset="UTF-8" /> |
28 <link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" /> |
28 <link rel="stylesheet" type="text/css" href="./mosaic/css/reset.css" /> |
29 <link rel="stylesheet/less" type="text/css" href="./mosaic/css/mosaic.less" /> |
29 <link rel="stylesheet/less" type="text/css" href="./mosaic/css/mosaic.less" /> |
30 <script type="text/javascript" src="../lib/less-1.3.0.min.js"></script> |
30 <script type="text/javascript" src="../lib/less-1.3.0.min.js"></script> |
|
31 <script type="text/javascript" src="../lib/underscore-min.js"></script> |
31 <script type="text/javascript" src="../lib/jquery.min.js"></script> |
32 <script type="text/javascript" src="../lib/jquery.min.js"></script> |
32 <script type="text/javascript" src="./mosaic/js/mosaic.js"></script> |
33 <script type="text/javascript" src="./mosaic/js/mosaic.js"></script> |
33 <script type="text/javascript" src="./mosaic/js/localMosaic.js"></script> |
34 <script type="text/javascript" src="./mosaic/js/localMosaic.js"></script> |
34 <script type="text/javascript" src="./player/metadataplayer/LdtPlayer-core.js"></script> |
35 <script type="text/javascript" src="./player/metadataplayer/LdtPlayer-core.js"></script> |
|
36 <script type="text/javascript" src="../lib/paper.js"></script> |
|
37 <link rel="stylesheet" type="text/css" href="./search/css/searchCanvas.css" /> |
|
38 <script type="text/javascript" src="./search/js/searchCanvas.js"></script> |
35 </head> |
39 </head> |
36 |
40 |
37 <body> |
41 <body> |
38 <!-- Ce div stocke la mosaïque. --> |
42 <!-- Ce div stocke la mosaïque. --> |
39 <div id="mainPanel"></div> |
43 <div id="mainPanel"></div> |
44 <div class="test" style="color: #FFFFFF"></div> |
48 <div class="test" style="color: #FFFFFF"></div> |
45 |
49 |
46 <!-- Scripts principaux. --> |
50 <!-- Scripts principaux. --> |
47 <script type="text/javascript"> |
51 <script type="text/javascript"> |
48 //Longueur de la mosaïques et nombre d'images à afficher (seront importés des paramètres du Middleware). |
52 //Longueur de la mosaïques et nombre d'images à afficher (seront importés des paramètres du Middleware). |
49 var length = 7, imagesToShow = 42; |
53 var length = 5, imagesToShow = 20, totalImages = 23; |
50 //Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware). |
54 //Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware). |
51 var timePrezoom = 500, timePreUnzoom = 200, timeZoom = 500, timeUnzoom = 400; |
55 var timePrezoom = 500, timePreUnzoom = 200, timeZoom = 500, timeUnzoom = 400; |
52 var timeNeighbourGlowing = 1000, timeNeighbourUnglowing = 1000, timeMovingToNeighbour = 1000; |
56 var timeNeighbourGlowing = 1000, timeNeighbourUnglowing = 1000, timeMovingToNeighbour = 1000; |
|
57 var timeSearchFade = 2000; |
|
58 var timeNotifyFade = 2000; |
53 var zoomPercentage = 0.80, prezoomPercentage = 0.25; |
59 var zoomPercentage = 0.80, prezoomPercentage = 0.25; |
54 var zoomedMargin = 42; |
60 var zoomedMargin = 42; |
55 //On instancie la mosaïque. |
61 //On instancie la mosaïque. |
56 var mos = new mosaic(length, imagesToShow, zoomPercentage, prezoomPercentage, zoomedMargin); |
62 var mos = new mosaic(length, imagesToShow, totalImages, zoomPercentage, prezoomPercentage, zoomedMargin); |
57 //On spécifie les attributs de temps. |
63 //On spécifie les attributs de temps. |
58 mos.zoomTime = timeZoom; |
64 mos.zoomTime = timeZoom; |
59 mos.unzoomTime = timeUnzoom; |
65 mos.unzoomTime = timeUnzoom; |
60 mos.preZoomTime = timePrezoom; |
66 mos.preZoomTime = timePrezoom; |
61 mos.preUnzoomTime = timePreUnzoom; |
67 mos.preUnzoomTime = timePreUnzoom; |
62 mos.timeNeighbourGlowing = timeNeighbourGlowing; |
68 mos.timeNeighbourGlowing = timeNeighbourGlowing; |
63 mos.timeNeighbourUnglowing = timeNeighbourUnglowing; |
69 mos.timeNeighbourUnglowing = timeNeighbourUnglowing; |
64 mos.timeMovingToNeighbour = timeMovingToNeighbour; |
70 mos.timeMovingToNeighbour = timeMovingToNeighbour; |
|
71 mos.timeSearchFade = timeSearchFade; |
|
72 mos.timeNotifyFade = timeNotifyFade; |
65 //On instancie une mosaïque locale pour le zoom total (pas encore implémenté). |
73 //On instancie une mosaïque locale pour le zoom total (pas encore implémenté). |
66 var lMos = new localMosaic(length, imagesToShow, zoomedMargin); |
74 //var lMos = new localMosaic(length, imagesToShow, zoomedMargin); |
67 mos.localMos = lMos; |
75 //mos.localMos = lMos; |
68 //Tableau d'images de test pour peupler la mosaïque. |
76 //Tableau d'images de test pour peupler la mosaïque. |
69 /*var imgs = []; |
77 /*var imgs = []; |
70 for(var i = 0 ; i < 42 ; i++) |
78 for(var i = 0 ; i < 42 ; i++) |
71 { |
79 { |
72 imgs[i] = i + '.jpg'; |
80 imgs[i] = i + '.jpg'; |
80 |
88 |
81 //Si la page a chargé, on raffraichit la mosaïque. |
89 //Si la page a chargé, on raffraichit la mosaïque. |
82 $(document).ready(function () |
90 $(document).ready(function () |
83 { |
91 { |
84 mos.loadMosaic(); |
92 mos.loadMosaic(); |
|
93 //mos.newSearch(); |
85 |
94 |
86 $('.snapshotDivs').mouseenter(function () |
95 $('.snapshotDivs').mouseenter(function () |
87 { |
96 { |
88 //On effectue un prézoom dès qu'on va sur une image. |
97 //On effectue un prézoom dès qu'on va sur une image. |
89 mos.preZoom($(this)); |
98 mos.preZoom($(this)); |
90 }); |
99 }); |
91 $('body').keypress(function (event) |
100 $('body').keypress(function (event) |
92 { |
101 { |
93 //Si on a appuié sur la touche 'q' ou 'Q'; |
102 //Sinon si on a appuyé sur 's' ou 'S'. |
94 if(event.which == 113 || event.which == 81) |
103 if(event.which == 103 || event.which == 71) |
95 { |
104 { |
96 mos.unzoom(); |
105 //Si on est déjà en recherche par courbes. |
|
106 if(mos.currentMode == "SEARCH" || mos.currentMode == "FILTER") |
|
107 { |
|
108 //On quitte cette recherche. |
|
109 mos.leaveSearch(); |
|
110 //Si on était en mode recherche. |
|
111 if(mos.currentMode == "SEARCH") |
|
112 { |
|
113 //On revient dans la vidéo. |
|
114 mos.currentMode = "VIDEO"; |
|
115 } |
|
116 else |
|
117 { |
|
118 //Sinon c'est qu'on était dans la mosaïque. |
|
119 mos.currentMode = "MOSAIC"; |
|
120 } |
|
121 } |
|
122 else |
|
123 { |
|
124 //Si on est en plein écran. |
|
125 if(mos.fullscreen) |
|
126 { |
|
127 //On entre en mode recherche. |
|
128 mos.currentMode = "SEARCH"; |
|
129 } |
|
130 //Sinon. |
|
131 else |
|
132 { |
|
133 //On entre en mode filtrage. |
|
134 mos.currentMode = "FILTER"; |
|
135 } |
|
136 |
|
137 mos.startSearch(); |
|
138 } |
|
139 } |
|
140 //Si c'est a ou A. |
|
141 else if(event.which == 65 || event.which == 97) |
|
142 { |
|
143 if(!mos.helpDisplayed) |
|
144 { |
|
145 mos.notifyHelp(); |
|
146 } |
|
147 else |
|
148 { |
|
149 mos.removeHelp(); |
|
150 } |
97 } |
151 } |
98 }); |
152 }); |
99 }); |
153 }); |
100 </script> |
154 </script> |
101 </body> |
155 </body> |