comparison src/de/mpg/mpiwg/itgroup/digilib/icons/greyskin/diginew.jsp @ 1:83c58ea33792

first release (continued)
author dwinter
date Mon, 03 Jan 2011 09:11:25 +0100
parents
children
comparison
equal deleted inserted replaced
0:6829553d2378 1:83c58ea33792
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 NG</title>
37
38 <link rel="stylesheet" type="text/css" href="diginew.css" />
39
40 <!-- <script type="text/javascript" src="debug.js"></script> -->
41
42 <script type="text/javascript" src="baselib.js"></script>
43
44 <script type="text/javascript" src="dllib.js"></script>
45
46 <script language="JavaScript">
47
48 var jspVersion = "diginew.jsp 1.023";
49 var cookie = new Cookie();
50 // alert(strObject(cookie));
51
52 var isOptionDivVisible = cookie.getbool("isOptionDivVisible");
53 var isBirdDivVisible = cookie.getbool("isBirdDivVisible");
54 var isAboutDivVisible = false;
55 var isSizeMenuVisible = false;
56 var isScaleMenuVisible = false;
57 var isOriginalSize = false;
58 var isPixelByPixel = false;
59 var dlTarget = window.name;
60 var baseUrl = '<%= dlRequest.getAsString("base.url") %>';
61 var toolbarEnabledURL = window.location.href;
62 var waited = 0;
63
64 function toggleOptionDiv() {
65 isOptionDivVisible = !isOptionDivVisible;
66 cookie.addbool("isOptionDivVisible", isOptionDivVisible);
67 showOptions(isOptionDivVisible);
68 }
69
70 function toggleBirdDiv() {
71 isBirdDivVisible = !isBirdDivVisible;
72 cookie.addbool("isBirdDivVisible", isBirdDivVisible);
73 showBirdDiv(isBirdDivVisible);
74 }
75
76 function toggleAboutDiv() {
77 isAboutDivVisible = !isAboutDivVisible;
78 showAboutDiv(isAboutDivVisible);
79 }
80
81 function toggleSizeMenu() {
82 isSizeMenuVisible = !isSizeMenuVisible;
83 showMenu("size-menu", "size", isSizeMenuVisible);
84 }
85
86 function toggleScaleMenu() {
87 isScaleMenuVisible = !isScaleMenuVisible;
88 showMenu("scale-menu", "scale", isScaleMenuVisible);
89 }
90
91 function setOnImage(id, src, value) {
92 // replace img src and display "on" status
93 var elem = getElement(id);
94 elem.src = src;
95 if (value)
96 elem.title += ": " + value;
97 else
98 elem.title += ": on";
99 }
100
101 // change icons if image functions are on
102 function reflectImageStatus() {
103 if (hasFlag("hmir")) setOnImage("hmir", "mirror-horizontal-on.png");
104 if (hasFlag("vmir")) setOnImage("vmir", "mirror-vertical-on.png");
105 if (hasParameter("brgt"))
106 setOnImage("brgt", "brightness-on.png", getParameter("brgt"));
107 if (hasParameter("cont"))
108 setOnImage("cont", "contrast-on.png", getParameter("cont"));
109 if (hasParameter("rot"))
110 setOnImage("rot", "rotate-on.png", getParameter("rot"));
111 if (hasParameter("rgb"))
112 setOnImage("rgb", "rgb-on.png", getParameter("rgb"));
113 }
114
115
116 // initialize digilib; called by body.onload
117 function onBodyLoad() {
118 document.id = 'digilib';
119 dl.onLoad();
120 dl.showOptions(isOptionDivVisible);
121 reflectImageStatus(); // adjust icons
122 }
123
124 function onBodyUnload() {
125 // alert(strObject(cookie));
126 cookie.store();
127 }
128
129 </script>
130 </head>
131
132 <body onload="onBodyLoad();" onunload="onBodyUnload();">
133 <!-- slot for the scaled image -->
134
135 <div id="bg"></div>
136
137 <div id="scaler">
138 <img id="pic"></img>
139 </div>
140
141 <!-- sensitive overlay for zoom area etc -->
142 <div id="overlay"></div>
143 <div id="bird-overlay"></div>
144
145 <!-- the zoom area selection rectangle -->
146 <div id="zoom"></div>
147
148 <!-- the bird's eye overview image -->
149 <img id="bird-image"></img>
150
151 <!-- the bird's eye select area -->
152 <div id="bird-area"></div>
153
154 <!-- the arrows -->
155 <a class="arrow" id="up" href="javascript:moveBy(0, -0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
156 <a class="arrow" id="down" href="javascript:moveBy(0, 0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
157 <a class="arrow" id="left" href="javascript:moveBy(-0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
158 <a class="arrow" id="right" href="javascript:moveBy(0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
159
160 <!-- the about window -->
161 <div id="about" class="about" onclick="toggleAboutDiv()">
162 <p>Digilib Graphic Viewer</p>
163 <a href="http://digilib.berlios.de" target="_blank" >
164 <img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img>
165 </a>
166 <p id="digilib-version"></p>
167 <p id="jsp-version"></p>
168 <p id="baselib-version"></p>
169 <p id="dllib-version"></p>
170 </div>
171
172 <!-- the calibration div -->
173 <div id="calibration">
174 <div>
175 <p class="cm">measure the length of this scale on your screen</p>
176 </div>
177 </div>
178
179 <!-- the size menu -->
180 <div id="size-menu" class="popup-menu">
181 <p><a href="javascript:setSize(1)">1 x</a></p>
182 <p><a href="javascript:setSize(1.41)">1.41 x</a></p>
183 <p><a href="javascript:setSize(2)">2 x</a></p>
184 <p><a href="javascript:setSize(3)">3 x</a></p>
185 <div id="sizes-bar">
186 <div id="sizes-slider"></div>
187 </div>
188 <p id="sizes-value"></p>
189 </div>
190
191 <!-- the scale menu -->
192 <div id="scale-menu" class="popup-menu">
193 <p><a href="javascript:setScale('fit')">fit to screen</a></p>
194 <p><a href="javascript:setScale('pixel')">pixel by pixel</a></p>
195 <p><a href="javascript:setScale('original')">original size</a></p>
196 </div>
197
198 <!-- the buttons -->
199 <div id="buttons">
200 <div class="separator">
201 </div>
202
203 <div class="button">
204 <a
205 class="icon"
206 href="javascript:getRefWin()"
207 >
208
209 <img
210 class="png"
211 id="reference"
212 title="get a reference URL"
213 src="reference.png"
214 >
215 </a>
216 </div>
217
218 <div class="button">
219 <a
220 class="icon"
221 href="javascript:dl.zoomBy(1.4)"
222 >
223
224 <img
225 class="png"
226 id="zoom-in"
227 title="zoom in"
228 src="zoom-in.png"
229 >
230 </a>
231 </div>
232
233 <div class="button">
234 <a
235 class="icon"
236 href="javascript:zoomBy(0.7)"
237 >
238
239 <img
240 class="png"
241 id="zoom-out"
242 title="zoom out"
243 src="zoom-out.png"
244 >
245 </a>
246 </div>
247
248 <div class="button">
249 <a
250 class="icon"
251 href="javascript:zoomArea()"
252 >
253
254 <img
255 class="png"
256 id="zoom-area"
257 title="zoom area"
258 src="zoom-area.png"
259 >
260 </a>
261 </div>
262
263 <div class="button">
264 <a
265 class="icon"
266 href="javascript:zoomFullpage()"
267 >
268
269 <img
270 class="png"
271 id="zoom-full"
272 title="view the whole image"
273 src="zoom-full.png"
274 >
275 </a>
276 </div>
277
278 <div class="button">
279 <a
280 class="icon"
281 href="javascript:zoomFullpage('width')"
282 >
283
284 <img
285 class="png"
286 id="page-width"
287 title="page width"
288 src="pagewidth.png"
289 >
290 </a>
291 </div>
292
293 <div class="button">
294 <a
295 class="icon"
296 href="javascript:gotoPage('-1')"
297 >
298
299 <img
300 class="png"
301 id="back"
302 title="goto previous image"
303 src="back.png"
304 >
305 </a>
306 </div>
307
308 <div class="button">
309 <a
310 class="icon"
311 href="javascript:gotoPage('+1')"
312 >
313
314 <img
315 class="png"
316 id="fwd"
317 title="goto next image"
318 src="fwd.png"
319 >
320 </a>
321 </div>
322
323 <div class="button">
324 <a
325 class="icon"
326 href="javascript:gotoPageWin()"
327 >
328
329 <img
330 class="png"
331 id="page"
332 title="specify image"
333 src="page.png"
334 >
335 </a>
336 </div>
337
338 <div class="button">
339 <a
340 class="icon"
341 href="javascript:toggleBirdDiv()"
342 >
343
344 <img
345 class="png"
346 id="bird"
347 title="show bird's eye view"
348 src="birds-eye.png"
349 >
350 </a>
351 </div>
352
353 <div class="separator">
354 </div>
355
356 <div class="button">
357 <a
358 class="icon"
359 href="javascript:toggleAboutDiv()"
360 >
361
362 <img
363 class="png"
364 id="help"
365 title="about Digilib"
366 src="help.png"
367 >
368 </a>
369 </div>
370
371 <div class="button">
372 <a
373 class="icon"
374 href="javascript:resetImage()"
375 >
376
377 <img
378 class="png"
379 id="help"
380 title="reset image"
381 src="reset.png"
382 >
383 </a>
384 </div>
385
386 <div class="button">
387 <a
388 class="icon"
389 href="javascript:toggleOptionDiv()"
390 >
391
392 <img
393 class="png"
394 id="options"
395 title="more options"
396 src="options.png"
397 >
398 </a>
399 </div>
400
401 <div class="separator">
402 </div>
403 </div>
404
405 <!-- options div -->
406
407 <div id="dloptions">
408 <div class="separator">
409 </div>
410
411 <div class="button">
412 <a
413 class="icon"
414 href="javascript:setMark();"
415 >
416
417 <img
418 class="png"
419 id="mark"
420 title="set a mark"
421 src="mark.png"
422 >
423 </a>
424 </div>
425
426 <div class="button">
427 <a
428 class="icon"
429 href="javascript:removeMark()"
430 >
431
432 <img
433 class="png"
434 id="delmark"
435 title="delete the last mark"
436 src="delmark.png"
437 >
438 </a>
439 </div>
440
441 <div class="button">
442 <a
443 class="icon"
444 href="javascript:mirror('h')"
445 >
446
447 <img
448 class="png"
449 id="hmir"
450 title="mirror horizontally"
451 src="mirror-horizontal.png"
452 >
453 </a>
454 </div>
455
456 <div class="button">
457 <a
458 class="icon"
459 href="javascript:mirror('v')"
460 >
461
462 <img
463 class="png"
464 id="vmir"
465 title="mirror vertically"
466 src="mirror-vertical.png"
467 >
468 </a>
469 </div>
470
471 <div class="button">
472 <a
473 class="icon"
474 href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
475 >
476
477 <img
478 class="png"
479 id="rot"
480 title="rotate image"
481 src="rotate.png"
482 >
483 </a>
484 </div>
485
486 <div class="button">
487 <a
488 class="icon"
489 href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
490 >
491
492 <img
493 class="png"
494 id="brgt"
495 title="set brightness"
496 src="brightness.png"
497 >
498 </a>
499 </div>
500
501 <div class="button">
502 <a
503 class="icon"
504 href="javascript:setParamWin('cont', 'Contrast (0..8)')"
505 >
506
507 <img
508 class="png"
509 id="cont"
510 title="set contrast"
511 src="contrast.png"
512 >
513 </a>
514 </div>
515
516 <div class="button">
517 <a
518 class="icon"
519 href="javascript:setParamWin('rgb', '...')"
520 >
521
522 <img
523 class="png"
524 id="rgb"
525 title="set rgb values"
526 src="rgb.png"
527 >
528 </a>
529 </div>
530
531 <div class="button">
532 <a
533 class="icon"
534 href="javascript:setQualityWin('Quality (0..2)')"
535 >
536
537 <img
538 class="png"
539 id="quality"
540 title="set image quality"
541 src="quality.png"
542 >
543 </a>
544 </div>
545
546 <div class="button">
547 <a
548 class="icon"
549 href="javascript:toggleSizeMenu()"
550 >
551
552 <img
553 class="png"
554 id="size"
555 title="set page size"
556 src="size.png"
557 >
558 </a>
559 </div>
560
561 <div class="button">
562 <a
563 class="icon"
564 href="javascript:calibrate('x')"
565 >
566
567 <img
568 class="png"
569 id="calibration-x"
570 title="calibrate screen x-ratio"
571 src="calibration-x.png"
572 >
573 </a>
574 </div>
575
576 <div class="button">
577 <a
578 class="icon"
579 href="javascript:toggleScaleMenu()"
580 >
581
582 <img
583 class="png"
584 id="scale"
585 title="change image scale"
586 src="original-size.png"
587 >
588 </a>
589 </div>
590
591 <div class="separator">
592 </div>
593
594 <div class="button">
595 <a
596 class="icon"
597 href="javascript:toggleOptionDiv()"
598 >
599
600 <img
601 class="png"
602 id="options-1"
603 title="hide options"
604 src="options.png"
605 >
606 </a>
607 </div>
608
609 <div class="separator">
610 </div>
611
612 </div>
613
614 <div class="debug" id="debug"><p class="debug">Debug</p></div>
615
616 </body>
617
618 </html>