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/underscore-min.js"></script> |
32 <script type="text/javascript" src="../lib/jquery.min.js"></script> |
32 <script type="text/javascript" src="../lib/jquery.min.js"></script> |
|
33 <script type="text/javascript" src="../lib/jquery-ui.min.js"></script> |
33 <script type="text/javascript" src="./mosaic/js/mosaic.js"></script> |
34 <script type="text/javascript" src="./mosaic/js/mosaic.js"></script> |
34 <script type="text/javascript" src="./mosaic/js/localMosaic.js"></script> |
35 <script type="text/javascript" src="./mosaic/js/localMosaic.js"></script> |
35 <script type="text/javascript" src="./player/metadataplayer/LdtPlayer-core.js"></script> |
36 <script type="text/javascript" src="./player/metadataplayer/LdtPlayer-core.js"></script> |
36 <script type="text/javascript" src="../lib/paper.js"></script> |
37 <script type="text/javascript" src="../lib/paper.js"></script> |
37 <link rel="stylesheet" type="text/css" href="./search/css/searchCanvas.css" /> |
38 <link rel="stylesheet" type="text/css" href="./search/css/searchCanvas.css" /> |
48 <div class="test" style="color: #FFFFFF"></div> |
49 <div class="test" style="color: #FFFFFF"></div> |
49 |
50 |
50 <!-- Scripts principaux. --> |
51 <!-- Scripts principaux. --> |
51 <script type="text/javascript"> |
52 <script type="text/javascript"> |
52 //Longueur de la mosaïques et nombre d'images à afficher (seront importés des paramètres du Middleware). |
53 //Longueur de la mosaïques et nombre d'images à afficher (seront importés des paramètres du Middleware). |
53 var length = 5, imagesToShow = 20, totalImages = 23; |
54 var default_parameters = new Object(); |
|
55 default_parameters['local'] = true; |
|
56 default_parameters['length'] = 5; |
|
57 default_parameters['imagesToShow'] = 20; |
|
58 default_parameters['totalImages'] = 23; |
|
59 default_parameters['timePrezoom'] = 500; |
|
60 default_parameters['timePreUnzoom'] = 200; |
|
61 default_parameters['timeZoom'] = 500; |
|
62 default_parameters['timeUnzoom'] = 400; |
|
63 default_parameters['timeNeighbourGlowing'] = 1000; |
|
64 default_parameters['timeNeighbourUnglowing'] = 1000; |
|
65 default_parameters['timeMovingToNeighbour'] = 1000; |
|
66 default_parameters['timeSearchFade'] = 2000; |
|
67 default_parameters['timeNotifyFade'] = 2000; |
|
68 default_parameters['timeFilterFade'] = 2000; |
|
69 default_parameters['timeFilling'] = 500; |
|
70 default_parameters['zoomPercentage'] = 0.80; |
|
71 default_parameters['prezoomPercentage'] = 0.25; |
|
72 default_parameters['zoomedMargin'] = 42; |
|
73 |
|
74 /*var length = 5, imagesToShow = 20, totalImages = 23; |
54 //Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware). |
75 //Temps de chargement du prezoom en ms (seront importés des paramètres du Middleware). |
55 var timePrezoom = 500, timePreUnzoom = 200, timeZoom = 500, timeUnzoom = 400; |
76 var timePrezoom = 500, timePreUnzoom = 200, timeZoom = 500, timeUnzoom = 400; |
56 var timeNeighbourGlowing = 1000, timeNeighbourUnglowing = 1000, timeMovingToNeighbour = 1000; |
77 var timeNeighbourGlowing = 1000, timeNeighbourUnglowing = 1000, timeMovingToNeighbour = 1000; |
57 var timeSearchFade = 2000; |
78 var timeSearchFade = 2000; |
58 var timeNotifyFade = 2000; |
79 var timeNotifyFade = 2000; |
59 var zoomPercentage = 0.80, prezoomPercentage = 0.25; |
80 var zoomPercentage = 0.80, prezoomPercentage = 0.25; |
60 var zoomedMargin = 42; |
81 var zoomedMargin = 42;*/ |
61 //On instancie la mosaïque. |
82 //On instancie la mosaïque. |
62 var mos = new mosaic(length, imagesToShow, totalImages, zoomPercentage, prezoomPercentage, zoomedMargin); |
83 |
63 //On spécifie les attributs de temps. |
84 //On spécifie les attributs de temps. |
64 mos.zoomTime = timeZoom; |
85 /*mos.zoomTime = timeZoom; |
65 mos.unzoomTime = timeUnzoom; |
86 mos.unzoomTime = timeUnzoom; |
66 mos.preZoomTime = timePrezoom; |
87 mos.preZoomTime = timePrezoom; |
67 mos.preUnzoomTime = timePreUnzoom; |
88 mos.preUnzoomTime = timePreUnzoom; |
68 mos.timeNeighbourGlowing = timeNeighbourGlowing; |
89 mos.timeNeighbourGlowing = timeNeighbourGlowing; |
69 mos.timeNeighbourUnglowing = timeNeighbourUnglowing; |
90 mos.timeNeighbourUnglowing = timeNeighbourUnglowing; |
70 mos.timeMovingToNeighbour = timeMovingToNeighbour; |
91 mos.timeMovingToNeighbour = timeMovingToNeighbour; |
71 mos.timeSearchFade = timeSearchFade; |
92 mos.timeSearchFade = timeSearchFade; |
72 mos.timeNotifyFade = timeNotifyFade; |
93 mos.timeNotifyFade = timeNotifyFade;*/ |
73 //On instancie une mosaïque locale pour le zoom total (pas encore implémenté). |
94 //On instancie une mosaïque locale pour le zoom total (pas encore implémenté). |
74 //var lMos = new localMosaic(length, imagesToShow, zoomedMargin); |
95 //var lMos = new localMosaic(length, imagesToShow, zoomedMargin); |
75 //mos.localMos = lMos; |
96 //mos.localMos = lMos; |
76 //Tableau d'images de test pour peupler la mosaïque. |
97 //Tableau d'images de test pour peupler la mosaïque. |
77 /*var imgs = []; |
98 /*var imgs = []; |
78 for(var i = 0 ; i < 42 ; i++) |
99 for(var i = 0 ; i < 42 ; i++) |
79 { |
100 { |
80 imgs[i] = i + '.jpg'; |
101 imgs[i] = i + '.jpg'; |
81 }*/ |
102 }*/ |
82 |
103 |
83 //Si on a changé les dimensions de la fenêtre, on raffraichit la mosaïque. |
|
84 $(window).resize(function () |
|
85 { |
|
86 mos.loadMosaic(); |
|
87 }); |
|
88 |
|
89 //Si la page a chargé, on raffraichit la mosaïque. |
104 //Si la page a chargé, on raffraichit la mosaïque. |
90 $(document).ready(function () |
105 $(document).ready(function () |
91 { |
106 { |
92 mos.loadMosaic(); |
107 var mos = new mosaic('./config.json', default_parameters); |
93 //mos.newSearch(); |
108 //mos.loadMosaic(); |
94 |
109 |
95 $('.snapshotDivs').mouseenter(function () |
110 $('.snapshotDivs').mouseenter(function () |
96 { |
111 { |
97 //On effectue un prézoom dès qu'on va sur une image. |
112 //On effectue un prézoom dès qu'on va sur une image. |
98 mos.preZoom($(this)); |
113 mos.preZoom($(this)); |
99 }); |
114 }); |
100 $('body').keypress(function (event) |
115 $('body').keypress(function (event) |
101 { |
116 { |
102 //Sinon si on a appuyé sur 's' ou 'S'. |
117 mos.manageControlEvents(event); |
103 if(event.which == 103 || event.which == 71) |
|
104 { |
|
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 } |
|
151 } |
|
152 }); |
118 }); |
153 }); |
119 }); |
154 </script> |
120 </script> |
155 </body> |
121 </body> |
156 </html> |
122 </html> |