Mercurial > hg > digilib-old

comparison client/digitallibrary/greyskin/diginew.jsp @ 455:9c16290e6f44

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
ongoing experimental intermediary release - calibration and scale modes are working
author robcast
date Mon, 30 Jan 2006 16:02:04 +0100
parents a6c83fa262b2
children f0fb0d781548
comparison
equal deleted inserted replaced
454:96bf096d9ab3 455:9c16290e6f44
48 48
49 var isOptionDivVisible = cookie.getbool("isOptionDivVisible"); 49 var isOptionDivVisible = cookie.getbool("isOptionDivVisible");
50 var isBirdDivVisible = cookie.getbool("isBirdDivVisible"); 50 var isBirdDivVisible = cookie.getbool("isBirdDivVisible");
51 var isAboutDivVisible = false; 51 var isAboutDivVisible = false;
52 var isSizeMenuVisible = false; 52 var isSizeMenuVisible = false;
53 var isScaleMenuVisible = false;
53 var isOriginalSize = false; 54 var isOriginalSize = false;
54 var isPixelByPixel = false; 55 var isPixelByPixel = false;
55 var dlTarget = window.name; 56 var dlTarget = window.name;
56 var baseUrl = '<%= dlRequest.getAsString("base.url") %>'; 57 var baseUrl = '<%= dlRequest.getAsString("base.url") %>';
57 var toolbarEnabledURL = window.location.href; 58 var toolbarEnabledURL = window.location.href;
74 showAboutDiv(isAboutDivVisible); 75 showAboutDiv(isAboutDivVisible);
75 } 76 }
76 77
77 function toggleSizeMenu() { 78 function toggleSizeMenu() {
78 isSizeMenuVisible = !isSizeMenuVisible; 79 isSizeMenuVisible = !isSizeMenuVisible;
79 showSizeMenu(isSizeMenuVisible); 80 showMenu("size-menu", "size", isSizeMenuVisible);
80 } 81 }
81 82
82 function toggleOriginalSize(on) { 83 function toggleScaleMenu() {
83 isOriginalSize = (arguments.length == 1) 84 isScaleMenuVisible = !isScaleMenuVisible;
84 ? on 85 showMenu("scale-menu", "scale", isScaleMenuVisible);
85 : !isOriginalSize; 86 }
86 togglePixelByPixel(false);
87 originalSize(isOriginalSize);
88 }
89
90 function togglePixelByPixel(on) {
91 isPixelByPixel = (arguments.length == 1)
92 ? on
93 : !isPixelByPixel;
94 toggleOriginalSize(false);
95 pixelByPixel(isPixelByPixel);
96 }
97 87
98 function setOnImage(id, src, value) { 88 function setOnImage(id, src, value) {
99 // replace img src and display "on" status 89 // replace img src and display "on" status
100 var elem = getElement(id); 90 var elem = getElement(id);
101 elem.src = src; 91 elem.src = src;
135 125
136 </script> 126 </script>
137 </head> 127 </head>
138 128
139 <body onload="onBodyLoad();" onunload="onBodyUnload();"> 129 <body onload="onBodyLoad();" onunload="onBodyUnload();">
140
141 <!-- slot for the scaled image --> 130 <!-- slot for the scaled image -->
142 <div id="scaler"> 131 <div id="scaler">
143 <img id="pic"></img> 132 <img id="pic"></img>
144 </div> 133 </div>
145 134
146 <!-- sensitive overlay for zoom area etc --> 135 <!-- sensitive overlay for zoom area etc -->
147 <div id="overlay"> 136 <div id="overlay"></div>
148 </div>
149 137
150 <!-- the zoom area selection rectangle --> 138 <!-- the zoom area selection rectangle -->
151 <div id="zoom"> 139 <div id="zoom"></div>
152 </div>
153 140
154 <!-- the bird's eye overview image --> 141 <!-- the bird's eye overview image -->
155 <img id="bird-image"></img> 142 <img id="bird-image"></img>
156 143
157 <!-- the bird's eye select area --> 144 <!-- the bird's eye select area -->
158 <div id="bird-area"> 145 <div id="bird-area"></div>
159 </div>
160 146
161 <!-- the arrows --> 147 <!-- the arrows -->
162 <a class="arrow" id="up" href="javascript:moveBy(0, -0.5)"></a> 148 <a class="arrow" id="up" href="javascript:moveBy(0, -0.5)"></a>
163 <a class="arrow" id="down" href="javascript:moveBy(0, 0.5)"></a> 149 <a class="arrow" id="down" href="javascript:moveBy(0, 0.5)"></a>
164 <a class="arrow" id="left" href="javascript:moveBy(-0.5, 0)"></a> 150 <a class="arrow" id="left" href="javascript:moveBy(-0.5, 0)"></a>
177 </div> 163 </div>
178 164
179 <!-- the calibration div --> 165 <!-- the calibration div -->
180 <div id="calibration"> 166 <div id="calibration">
181 <div> 167 <div>
182 <p>0 px</p> 168 <p class="cm">measure the length of this scale on your screen</p>
183 <p class="cm">10 cm</p>
184 </div> 169 </div>
185 </div> 170 </div>
186 171
187 <!-- the size menu --> 172 <!-- the size menu -->
188 <div id="sizes"> 173 <div id="size-menu" class="popup-menu">
189 <p><a href="javascript:resize(1)">1 x</a></p> 174 <p><a href="javascript:setSize(1)">1 x</a></p>
190 <p><a href="javascript:resize(1.41)">1.41 x</a></p> 175 <p><a href="javascript:setSize(1.41)">1.41 x</a></p>
191 <p><a href="javascript:resize(2)">2 x</a></p> 176 <p><a href="javascript:setSize(2)">2 x</a></p>
192 <p><a href="javascript:resize(3)">3 x</a></p> 177 <p><a href="javascript:setSize(3)">3 x</a></p>
193 <div id="sizes-bar"> 178 <div id="sizes-bar">
194 <div id="sizes-slider"></div> 179 <div id="sizes-slider"></div>
195 </div> 180 </div>
196 <p id="sizes-value"></p> 181 <p id="sizes-value"></p>
182 </div>
183
184 <!-- the scale menu -->
185 <div id="scale-menu" class="popup-menu">
186 <p><a href="javascript:setScale('fit')">fit to screen</a></p>
187 <p><a href="javascript:setScale('pixel')">pixel by pixel</a></p>
188 <p><a href="javascript:setScale('original')">original size</a></p>
197 </div> 189 </div>
198 190
199 <!-- the buttons --> 191 <!-- the buttons -->
200 <div id="buttons"> 192 <div id="buttons">
201 <div class="separator"> 193 <div class="separator">
277 </div> 269 </div>
278 270
279 <div class="button"> 271 <div class="button">
280 <a 272 <a
281 class="icon" 273 class="icon"
282 href="javascript:pageWidth()" 274 href="javascript:zoomFullpage('width')"
283 > 275 >
284 276
285 <img 277 <img
286 class="png" 278 class="png"
287 id="page-width" 279 id="page-width"
288 title="page width" 280 title="page width"
289 src="pagewidth.png" 281 src="pagewidth.png"
290 > 282 >
291 </a> 283 </a>
292 </div>
293
294 <div class="button">
295 <a
296 class="icon"
297 href="javascript:toggleSizeMenu()"
298 >
299
300 <img
301 class="png"
302 id="size"
303 title="resize page"
304 src="size.png"
305 >
306 </a>
307 </div> 284 </div>
308 285
309 <div class="button"> 286 <div class="button">
310 <a 287 <a
311 class="icon" 288 class="icon"
542 src="quality.png" 519 src="quality.png"
543 > 520 >
544 </a> 521 </a>
545 </div> 522 </div>
546 523
524 <div class="button">
525 <a
526 class="icon"
527 href="javascript:toggleSizeMenu()"
528 >
529
530 <img
531 class="png"
532 id="size"
533 title="set page size"
534 src="size.png"
535 >
536 </a>
537 </div>
538
547 <div class="button"> 539 <div class="button">
548 <a 540 <a
549 class="icon" 541 class="icon"
550 href="javascript:calibrate('x')" 542 href="javascript:calibrate('x')"
551 > 543 >
556 title="calibrate screen x-ratio" 548 title="calibrate screen x-ratio"
557 src="calibration-x.png" 549 src="calibration-x.png"
558 > 550 >
559 </a> 551 </a>
560 </div> 552 </div>
561 553
562 <div class="button"> 554 <div class="button">
563 <a 555 <a
564 class="icon" 556 class="icon"
565 href="javascript:calibrate('y')" 557 href="javascript:toggleScaleMenu()"
566 > 558 >
567 559
568 <img 560 <img
569 class="png" 561 class="png"
570 id="calibration-y" 562 id="scale"
571 title="calibrate screen y-ratio" 563 title="change image scale"
572 src="calibration-y.png"
573 >
574 </a>
575 </div>
576
577 <div class="button">
578 <a
579 class="icon"
580 href="javascript:pixelByPixel()"
581 >
582
583 <img
584 class="png"
585 id="pixel-by-pixel"
586 title="view image pixel by pixel"
587 src="pixel-by-pixel.png"
588 >
589 </a>
590 </div>
591
592 <div class="button">
593 <a
594 class="icon"
595 href="javascript:originalSize()"
596 >
597
598 <img
599 class="png"
600 id="original-size"
601 title="view image in original size"
602 src="original-size.png" 564 src="original-size.png"
603 > 565 >
604 </a> 566 </a>
605 </div> 567 </div>
606 568