Mercurial > hg > digilib-old

comparison client/digitallibrary/jskin/digilib.jsp @ 519:b21acdd1fa9d jquery

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
zeroth version of new js skin
author robcast
date Mon, 07 Sep 2009 18:22:54 +0200
parents
children
comparison
equal deleted inserted replaced
17:a256239970f8 519:b21acdd1fa9d
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>