|
519
|
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
|
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
|
3 <%@ page language="java" pageEncoding="UTF-8"%><%!
|
|
|
4 // -- JSP init -------------
|
|
|
5
|
|
|
6 // create DocumentBean instance for all JSP requests
|
|
|
7 digilib.servlet.DocumentBean docBean = new digilib.servlet.DocumentBean();
|
|
|
8
|
|
|
9 // initialize DocumentBean instance in JSP init
|
|
|
10 public void jspInit() {
|
|
|
11 try {
|
|
|
12 // set servlet init-parameter
|
|
|
13 docBean.setConfig(getServletConfig());
|
|
|
14 } catch (javax.servlet.ServletException e) {
|
|
|
15 System.out.println(e);
|
|
|
16 }
|
|
|
17 }
|
|
|
18 // -- end of JSP init -------------
|
|
|
19 %><%
|
|
|
20 // -- JSP request -------------
|
|
|
21
|
|
|
22 // parsing the query
|
|
|
23 // -----------------
|
|
|
24 digilib.servlet.DigilibRequest dlRequest = new digilib.servlet.DigilibRequest(request);
|
|
|
25 docBean.setRequest(dlRequest);
|
|
|
26 // check if authentication is needed and redirect if necessary
|
|
|
27 docBean.doAuthentication(response);
|
|
|
28 // add number of pages
|
|
|
29 dlRequest.setValue("pt", docBean.getNumPages());
|
|
|
30 // store objects for jsp:include
|
|
|
31 pageContext.setAttribute("docBean", docBean, pageContext.REQUEST_SCOPE);
|
|
|
32
|
|
|
33 %><html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
34 <head>
|
|
|
35 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
|
36 <title>Digital Document Library JQ</title>
|
|
|
37 <link rel="stylesheet" type="text/css" href="diginew.css"/>
|
|
|
38 <script type="text/javascript" src="jquery.js"></script>
|
|
|
39 <script type="text/javascript" src="dl-baselib.js"></script>
|
|
|
40 <script type="text/javascript" src="dllib.js"></script>
|
|
|
41
|
|
|
42 <script type="text/javascript">
|
|
|
43 // we will add our javascript code here
|
|
|
44 $(document).ready(function() {
|
|
|
45 // do stuff when DOM is ready
|
|
|
46 window.dl.onLoad();
|
|
|
47 });
|
|
|
48
|
|
|
49 </script>
|
|
|
50 </head>
|
|
|
51 <body>
|
|
|
52 <!-- slot for the scaled image -->
|
|
|
53 <div id="scaler">
|
|
|
54 huhu!<img id="pic"></img>
|
|
|
55 </div>
|
|
|
56
|
|
|
57 <!-- sensitive overlay for zoom area etc -->
|
|
|
58 <div id="overlay"></div>
|
|
|
59 <div id="bird-overlay"></div>
|
|
|
60
|
|
|
61 <!-- the zoom area selection rectangle -->
|
|
|
62 <div id="zoom"></div>
|
|
|
63
|
|
|
64 <!-- the bird's eye overview image -->
|
|
|
65 <img id="bird-image"></img>
|
|
|
66
|
|
|
67 <!-- the bird's eye select area -->
|
|
|
68 <div id="bird-area"></div>
|
|
|
69
|
|
|
70 <!-- the arrows -->
|
|
|
71 <a class="arrow" id="up" href="javascript:moveBy(0, -0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
|
|
|
72 <a class="arrow" id="down" href="javascript:moveBy(0, 0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
|
|
|
73 <a class="arrow" id="left" href="javascript:moveBy(-0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
|
|
|
74 <a class="arrow" id="right" href="javascript:moveBy(0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
|
|
|
75
|
|
|
76 <!-- the about window -->
|
|
|
77 <div id="about" class="about" onclick="toggleAboutDiv()">
|
|
|
78 <p>Digilib Graphic Viewer</p>
|
|
|
79 <a href="http://digilib.berlios.de" target="_blank" >
|
|
|
80 <img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img>
|
|
|
81 </a>
|
|
|
82 <p id="digilib-version"></p>
|
|
|
83 <p id="jsp-version"></p>
|
|
|
84 <p id="baselib-version"></p>
|
|
|
85 <p id="dllib-version"></p>
|
|
|
86 </div>
|
|
|
87
|
|
|
88 <!-- the calibration div -->
|
|
|
89 <div id="calibration">
|
|
|
90 <div>
|
|
|
91 <p class="cm">measure the length of this scale on your screen</p>
|
|
|
92 </div>
|
|
|
93 </div>
|
|
|
94
|
|
|
95 <!-- the size menu -->
|
|
|
96 <div id="size-menu" class="popup-menu">
|
|
|
97 <p><a href="javascript:setSize(1)">1 x</a></p>
|
|
|
98 <p><a href="javascript:setSize(1.41)">1.41 x</a></p>
|
|
|
99 <p><a href="javascript:setSize(2)">2 x</a></p>
|
|
|
100 <p><a href="javascript:setSize(3)">3 x</a></p>
|
|
|
101 <div id="sizes-bar">
|
|
|
102 <div id="sizes-slider"></div>
|
|
|
103 </div>
|
|
|
104 <p id="sizes-value"></p>
|
|
|
105 </div>
|
|
|
106
|
|
|
107 <!-- the scale menu -->
|
|
|
108 <div id="scale-menu" class="popup-menu">
|
|
|
109 <p><a href="javascript:setScale('fit')">fit to screen</a></p>
|
|
|
110 <p><a href="javascript:setScale('pixel')">pixel by pixel</a></p>
|
|
|
111 <p><a href="javascript:setScale('original')">original size</a></p>
|
|
|
112 </div>
|
|
|
113
|
|
|
114 <!-- the buttons -->
|
|
|
115 <div id="buttons">
|
|
|
116 <div class="separator">
|
|
|
117 </div>
|
|
|
118
|
|
|
119 <div class="button">
|
|
|
120 <a
|
|
|
121 class="icon"
|
|
|
122 href="javascript:getRefWin()"
|
|
|
123 >
|
|
|
124
|
|
|
125 <img
|
|
|
126 class="png"
|
|
|
127 id="reference"
|
|
|
128 title="get a reference URL"
|
|
|
129 src="reference.png"
|
|
|
130 >
|
|
|
131 </a>
|
|
|
132 </div>
|
|
|
133
|
|
|
134 <div class="button">
|
|
|
135 <a
|
|
|
136 class="icon"
|
|
|
137 href="javascript:dl.zoomBy(1.4)"
|
|
|
138 >
|
|
|
139
|
|
|
140 <img
|
|
|
141 class="png"
|
|
|
142 id="zoom-in"
|
|
|
143 title="zoom in"
|
|
|
144 src="zoom-in.png"
|
|
|
145 >
|
|
|
146 </a>
|
|
|
147 </div>
|
|
|
148
|
|
|
149 <div class="button">
|
|
|
150 <a
|
|
|
151 class="icon"
|
|
|
152 href="javascript:zoomBy(0.7)"
|
|
|
153 >
|
|
|
154
|
|
|
155 <img
|
|
|
156 class="png"
|
|
|
157 id="zoom-out"
|
|
|
158 title="zoom out"
|
|
|
159 src="zoom-out.png"
|
|
|
160 >
|
|
|
161 </a>
|
|
|
162 </div>
|
|
|
163
|
|
|
164 <div class="button">
|
|
|
165 <a
|
|
|
166 class="icon"
|
|
|
167 href="javascript:zoomArea()"
|
|
|
168 >
|
|
|
169
|
|
|
170 <img
|
|
|
171 class="png"
|
|
|
172 id="zoom-area"
|
|
|
173 title="zoom area"
|
|
|
174 src="zoom-area.png"
|
|
|
175 >
|
|
|
176 </a>
|
|
|
177 </div>
|
|
|
178
|
|
|
179 <div class="button">
|
|
|
180 <a
|
|
|
181 class="icon"
|
|
|
182 href="javascript:zoomFullpage()"
|
|
|
183 >
|
|
|
184
|
|
|
185 <img
|
|
|
186 class="png"
|
|
|
187 id="zoom-full"
|
|
|
188 title="view the whole image"
|
|
|
189 src="zoom-full.png"
|
|
|
190 >
|
|
|
191 </a>
|
|
|
192 </div>
|
|
|
193
|
|
|
194 <div class="button">
|
|
|
195 <a
|
|
|
196 class="icon"
|
|
|
197 href="javascript:zoomFullpage('width')"
|
|
|
198 >
|
|
|
199
|
|
|
200 <img
|
|
|
201 class="png"
|
|
|
202 id="page-width"
|
|
|
203 title="page width"
|
|
|
204 src="pagewidth.png"
|
|
|
205 >
|
|
|
206 </a>
|
|
|
207 </div>
|
|
|
208
|
|
|
209 <div class="button">
|
|
|
210 <a
|
|
|
211 class="icon"
|
|
|
212 href="javascript:gotoPage('-1')"
|
|
|
213 >
|
|
|
214
|
|
|
215 <img
|
|
|
216 class="png"
|
|
|
217 id="back"
|
|
|
218 title="goto previous image"
|
|
|
219 src="back.png"
|
|
|
220 >
|
|
|
221 </a>
|
|
|
222 </div>
|
|
|
223
|
|
|
224 <div class="button">
|
|
|
225 <a
|
|
|
226 class="icon"
|
|
|
227 href="javascript:gotoPage('+1')"
|
|
|
228 >
|
|
|
229
|
|
|
230 <img
|
|
|
231 class="png"
|
|
|
232 id="fwd"
|
|
|
233 title="goto next image"
|
|
|
234 src="fwd.png"
|
|
|
235 >
|
|
|
236 </a>
|
|
|
237 </div>
|
|
|
238
|
|
|
239 <div class="button">
|
|
|
240 <a
|
|
|
241 class="icon"
|
|
|
242 href="javascript:gotoPageWin()"
|
|
|
243 >
|
|
|
244
|
|
|
245 <img
|
|
|
246 class="png"
|
|
|
247 id="page"
|
|
|
248 title="specify image"
|
|
|
249 src="page.png"
|
|
|
250 >
|
|
|
251 </a>
|
|
|
252 </div>
|
|
|
253
|
|
|
254 <div class="button">
|
|
|
255 <a
|
|
|
256 class="icon"
|
|
|
257 href="javascript:toggleBirdDiv()"
|
|
|
258 >
|
|
|
259
|
|
|
260 <img
|
|
|
261 class="png"
|
|
|
262 id="bird"
|
|
|
263 title="show bird's eye view"
|
|
|
264 src="birds-eye.png"
|
|
|
265 >
|
|
|
266 </a>
|
|
|
267 </div>
|
|
|
268
|
|
|
269 <div class="separator">
|
|
|
270 </div>
|
|
|
271
|
|
|
272 <div class="button">
|
|
|
273 <a
|
|
|
274 class="icon"
|
|
|
275 href="javascript:toggleAboutDiv()"
|
|
|
276 >
|
|
|
277
|
|
|
278 <img
|
|
|
279 class="png"
|
|
|
280 id="help"
|
|
|
281 title="about Digilib"
|
|
|
282 src="help.png"
|
|
|
283 >
|
|
|
284 </a>
|
|
|
285 </div>
|
|
|
286
|
|
|
287 <div class="button">
|
|
|
288 <a
|
|
|
289 class="icon"
|
|
|
290 href="javascript:toggleOptionDiv()"
|
|
|
291 >
|
|
|
292
|
|
|
293 <img
|
|
|
294 class="png"
|
|
|
295 id="options"
|
|
|
296 title="more options"
|
|
|
297 src="options.png"
|
|
|
298 >
|
|
|
299 </a>
|
|
|
300 </div>
|
|
|
301
|
|
|
302 <div class="separator">
|
|
|
303 </div>
|
|
|
304 </div>
|
|
|
305
|
|
|
306 <!-- options div -->
|
|
|
307
|
|
|
308 <div id="dloptions">
|
|
|
309 <div class="separator">
|
|
|
310 </div>
|
|
|
311
|
|
|
312 <div class="button">
|
|
|
313 <a
|
|
|
314 class="icon"
|
|
|
315 href="javascript:setMark();"
|
|
|
316 >
|
|
|
317
|
|
|
318 <img
|
|
|
319 class="png"
|
|
|
320 id="mark"
|
|
|
321 title="set a mark"
|
|
|
322 src="mark.png"
|
|
|
323 >
|
|
|
324 </a>
|
|
|
325 </div>
|
|
|
326
|
|
|
327 <div class="button">
|
|
|
328 <a
|
|
|
329 class="icon"
|
|
|
330 href="javascript:removeMark()"
|
|
|
331 >
|
|
|
332
|
|
|
333 <img
|
|
|
334 class="png"
|
|
|
335 id="delmark"
|
|
|
336 title="delete the last mark"
|
|
|
337 src="delmark.png"
|
|
|
338 >
|
|
|
339 </a>
|
|
|
340 </div>
|
|
|
341
|
|
|
342 <div class="button">
|
|
|
343 <a
|
|
|
344 class="icon"
|
|
|
345 href="javascript:mirror('h')"
|
|
|
346 >
|
|
|
347
|
|
|
348 <img
|
|
|
349 class="png"
|
|
|
350 id="hmir"
|
|
|
351 title="mirror horizontally"
|
|
|
352 src="mirror-horizontal.png"
|
|
|
353 >
|
|
|
354 </a>
|
|
|
355 </div>
|
|
|
356
|
|
|
357 <div class="button">
|
|
|
358 <a
|
|
|
359 class="icon"
|
|
|
360 href="javascript:mirror('v')"
|
|
|
361 >
|
|
|
362
|
|
|
363 <img
|
|
|
364 class="png"
|
|
|
365 id="vmir"
|
|
|
366 title="mirror vertically"
|
|
|
367 src="mirror-vertical.png"
|
|
|
368 >
|
|
|
369 </a>
|
|
|
370 </div>
|
|
|
371
|
|
|
372 <div class="button">
|
|
|
373 <a
|
|
|
374 class="icon"
|
|
|
375 href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
|
|
|
376 >
|
|
|
377
|
|
|
378 <img
|
|
|
379 class="png"
|
|
|
380 id="rot"
|
|
|
381 title="rotate image"
|
|
|
382 src="rotate.png"
|
|
|
383 >
|
|
|
384 </a>
|
|
|
385 </div>
|
|
|
386
|
|
|
387 <div class="button">
|
|
|
388 <a
|
|
|
389 class="icon"
|
|
|
390 href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
|
|
|
391 >
|
|
|
392
|
|
|
393 <img
|
|
|
394 class="png"
|
|
|
395 id="brgt"
|
|
|
396 title="set brightness"
|
|
|
397 src="brightness.png"
|
|
|
398 >
|
|
|
399 </a>
|
|
|
400 </div>
|
|
|
401
|
|
|
402 <div class="button">
|
|
|
403 <a
|
|
|
404 class="icon"
|
|
|
405 href="javascript:setParamWin('cont', 'Contrast (0..8)')"
|
|
|
406 >
|
|
|
407
|
|
|
408 <img
|
|
|
409 class="png"
|
|
|
410 id="cont"
|
|
|
411 title="set contrast"
|
|
|
412 src="contrast.png"
|
|
|
413 >
|
|
|
414 </a>
|
|
|
415 </div>
|
|
|
416
|
|
|
417 <div class="button">
|
|
|
418 <a
|
|
|
419 class="icon"
|
|
|
420 href="javascript:setParamWin('rgb', '...')"
|
|
|
421 >
|
|
|
422
|
|
|
423 <img
|
|
|
424 class="png"
|
|
|
425 id="rgb"
|
|
|
426 title="set rgb values"
|
|
|
427 src="rgb.png"
|
|
|
428 >
|
|
|
429 </a>
|
|
|
430 </div>
|
|
|
431
|
|
|
432 <div class="button">
|
|
|
433 <a
|
|
|
434 class="icon"
|
|
|
435 href="javascript:setQualityWin('Quality (0..2)')"
|
|
|
436 >
|
|
|
437
|
|
|
438 <img
|
|
|
439 class="png"
|
|
|
440 id="quality"
|
|
|
441 title="set image quality"
|
|
|
442 src="quality.png"
|
|
|
443 >
|
|
|
444 </a>
|
|
|
445 </div>
|
|
|
446
|
|
|
447 <div class="button">
|
|
|
448 <a
|
|
|
449 class="icon"
|
|
|
450 href="javascript:toggleSizeMenu()"
|
|
|
451 >
|
|
|
452
|
|
|
453 <img
|
|
|
454 class="png"
|
|
|
455 id="size"
|
|
|
456 title="set page size"
|
|
|
457 src="size.png"
|
|
|
458 >
|
|
|
459 </a>
|
|
|
460 </div>
|
|
|
461
|
|
|
462 <div class="button">
|
|
|
463 <a
|
|
|
464 class="icon"
|
|
|
465 href="javascript:calibrate('x')"
|
|
|
466 >
|
|
|
467
|
|
|
468 <img
|
|
|
469 class="png"
|
|
|
470 id="calibration-x"
|
|
|
471 title="calibrate screen x-ratio"
|
|
|
472 src="calibration-x.png"
|
|
|
473 >
|
|
|
474 </a>
|
|
|
475 </div>
|
|
|
476
|
|
|
477 <div class="button">
|
|
|
478 <a
|
|
|
479 class="icon"
|
|
|
480 href="javascript:toggleScaleMenu()"
|
|
|
481 >
|
|
|
482
|
|
|
483 <img
|
|
|
484 class="png"
|
|
|
485 id="scale"
|
|
|
486 title="change image scale"
|
|
|
487 src="original-size.png"
|
|
|
488 >
|
|
|
489 </a>
|
|
|
490 </div>
|
|
|
491
|
|
|
492 <div class="separator">
|
|
|
493 </div>
|
|
|
494
|
|
|
495 <div class="button">
|
|
|
496 <a
|
|
|
497 class="icon"
|
|
|
498 href="javascript:toggleOptionDiv()"
|
|
|
499 >
|
|
|
500
|
|
|
501 <img
|
|
|
502 class="png"
|
|
|
503 id="options-1"
|
|
|
504 title="hide options"
|
|
|
505 src="options.png"
|
|
|
506 >
|
|
|
507 </a>
|
|
|
508 </div>
|
|
|
509
|
|
|
510 <div class="separator">
|
|
|
511 </div>
|
|
|
512
|
|
|
513 </div>
|
|
|
514
|
|
|
515 </body>
|
|
|
516
|
|
|
517 </html>
|
