Mercurial > hg > digilib-old

view 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
line wrap: on
line source

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@ page language="java" pageEncoding="UTF-8"%><%!
	// -- JSP init -------------
	
	// create DocumentBean instance for all JSP requests
	digilib.servlet.DocumentBean docBean = new digilib.servlet.DocumentBean();
	
	// initialize DocumentBean instance in JSP init
	public void jspInit() {
	    try {
            // set servlet init-parameter
		    docBean.setConfig(getServletConfig());
	    } catch (javax.servlet.ServletException e) {
		    System.out.println(e);
	    }
	}
	// -- end of JSP init -------------
%><%
	// -- JSP request -------------
	
	// parsing the query
	// -----------------
	digilib.servlet.DigilibRequest dlRequest = new digilib.servlet.DigilibRequest(request);
	docBean.setRequest(dlRequest);
	// check if authentication is needed and redirect if necessary
	docBean.doAuthentication(response);
	// add number of pages
	dlRequest.setValue("pt", docBean.getNumPages());
	// store objects for jsp:include
	pageContext.setAttribute("docBean", docBean, pageContext.REQUEST_SCOPE);

%><html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
	<title>Digital Document Library JQ</title>
    <link rel="stylesheet" type="text/css" href="diginew.css"/>
 <script type="text/javascript" src="jquery.js"></script>        
 <script type="text/javascript" src="dl-baselib.js"></script>
 <script type="text/javascript" src="dllib.js"></script>

 <script type="text/javascript">                                         
   // we will add our javascript code here                                     
$(document).ready(function() {
    // do stuff when DOM is ready
    window.dl.onLoad();
});

	</script>
</head>
<body>
 <!-- slot for the scaled image -->
 <div id="scaler">
	huhu!<img id="pic"></img>
 </div>

 <!-- sensitive overlay for zoom area etc -->
 <div id="overlay"></div>
 <div id="bird-overlay"></div>
 
 <!-- the zoom area selection rectangle -->
 <div id="zoom"></div>
 
 <!-- the bird's eye overview image -->
 <img id="bird-image"></img>

 <!-- the bird's eye select area -->
 <div id="bird-area"></div>

 <!-- the arrows -->
 <a class="arrow" id="up"    href="javascript:moveBy(0, -0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
 <a class="arrow" id="down"  href="javascript:moveBy(0, 0.5)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
 <a class="arrow" id="left"  href="javascript:moveBy(-0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>
 <a class="arrow" id="right" href="javascript:moveBy(0.5, 0)"><img style="border: 0px; width: 100%; height: 100%;" src="trans.gif"/></a>

 <!-- the about window -->
 <div id="about" class="about" onclick="toggleAboutDiv()">
 	<p>Digilib Graphic Viewer</p>
 	<a href="http://digilib.berlios.de" target="_blank" >
 		<img class="logo" src="../img/digilib-logo-text1.png" title="digilib"></img>
	</a>
	<p id="digilib-version"></p>
	<p id="jsp-version"></p>
	<p id="baselib-version"></p>
	<p id="dllib-version"></p>
 </div>

 <!-- the calibration div -->
 <div id="calibration">
 	<div>
 	<p class="cm">measure the length of this scale on your screen</p>
	</div>
 </div>

 <!-- the size menu -->
 <div id="size-menu" class="popup-menu">
	<p><a href="javascript:setSize(1)">1 x</a></p>
	<p><a href="javascript:setSize(1.41)">1.41 x</a></p>
	<p><a href="javascript:setSize(2)">2 x</a></p>
	<p><a href="javascript:setSize(3)">3 x</a></p>
	<div id="sizes-bar">
		<div id="sizes-slider"></div>
	</div>
	<p id="sizes-value"></p>
 </div>

<!-- the scale menu -->
 <div id="scale-menu" class="popup-menu">
  <p><a href="javascript:setScale('fit')">fit to screen</a></p>
  <p><a href="javascript:setScale('pixel')">pixel by pixel</a></p>
  <p><a href="javascript:setScale('original')">original size</a></p>
 </div>

 <!-- the buttons -->
 <div id="buttons">
	<div class="separator">
	</div>

	<div class="button">
		<a
			class="icon"
			href="javascript:getRefWin()"
			>

			<img
				class="png"
				id="reference"
				title="get a reference URL"
				src="reference.png"
			>
		</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:dl.zoomBy(1.4)"
			>

			<img
				class="png"
				id="zoom-in"
				title="zoom in"
				src="zoom-in.png"
			>
	</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:zoomBy(0.7)"
			>

			<img
				class="png"
				id="zoom-out"
				title="zoom out"
				src="zoom-out.png"
			>
	</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:zoomArea()"
			>

			<img
				class="png"
				id="zoom-area"
				title="zoom area"
				src="zoom-area.png"
			>
		</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:zoomFullpage()"
			>

			<img
				class="png"
				id="zoom-full"
				title="view the whole image"
				src="zoom-full.png"
			>
	</a> 
	</div>

	<div class="button">
		<a
			class="icon"
			href="javascript:zoomFullpage('width')"
			>

			<img
				class="png"
				id="page-width"
				title="page width"
				src="pagewidth.png"
			>
		</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:gotoPage('-1')"
			>

			<img
				class="png"
				id="back"
				title="goto previous image"
				src="back.png"
			>
	</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:gotoPage('+1')"
			>

			<img
				class="png"
				id="fwd"
				title="goto next image"
				src="fwd.png"
			>
	</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:gotoPageWin()"
			>

			<img
				class="png"
				id="page"
				title="specify image"
				src="page.png"
			>
	</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:toggleBirdDiv()"
			>

			<img
				class="png"
				id="bird"
				title="show bird's eye view"
				src="birds-eye.png"
			>
		</a>
	</div>
	
	<div class="separator">
	</div>

	<div class="button">
		<a
			class="icon"
			href="javascript:toggleAboutDiv()"
			>

			<img
				class="png"
				id="help"
				title="about Digilib"
				src="help.png"
			>
		</a>
	</div>

	<div class="button">
		<a
			class="icon"
			href="javascript:toggleOptionDiv()"
			>

			<img
				class="png"
				id="options"
				title="more options"
				src="options.png"
			>
		</a>
	</div>

	<div class="separator">
	</div>
</div>

<!-- options div -->

<div id="dloptions">
	<div class="separator">
	</div>

	<div class="button">
		<a
			class="icon"
			href="javascript:setMark();"
			>

			<img
				class="png"
				id="mark"
				title="set a mark"
				src="mark.png"
			>
		</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:removeMark()"
			>

			<img
				class="png"
				id="delmark"
				title="delete the last mark"
				src="delmark.png"
				>
		</a> 
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:mirror('h')"
			>

			<img
				class="png"
				id="hmir"
				title="mirror horizontally"
				src="mirror-horizontal.png"
			>
		</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:mirror('v')"
			>

			<img
				class="png"
				id="vmir"
				title="mirror vertically"
				src="mirror-vertical.png"
			>
		</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:setParamWin('rot', 'Rotate (0..360) clockwise')"
			>

			<img
				class="png"
				id="rot"
				title="rotate image"
				src="rotate.png"
			>
		</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:setParamWin('brgt', 'Brightness (-255..255)')"
			>

			<img
				class="png"
				id="brgt"
				title="set brightness"
				src="brightness.png"
			>
		</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:setParamWin('cont', 'Contrast (0..8)')"
			>

			<img
				class="png"
				id="cont"
				title="set contrast"
				src="contrast.png"
			>
		</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:setParamWin('rgb', '...')"
			>

			<img
				class="png"
				id="rgb"
				title="set rgb values"
				src="rgb.png"
			>
		</a>
	</div>
	
	<div class="button">
		<a
			class="icon"
			href="javascript:setQualityWin('Quality (0..2)')"
			>

			<img
				class="png"
				id="quality"
				title="set image quality"
				src="quality.png"
			>
		</a>
	</div>
	
  <div class="button">
    <a
      class="icon"
      href="javascript:toggleSizeMenu()"
      >

      <img
        class="png"
        id="size"
        title="set page size"
        src="size.png"
      >
    </a>
  </div>

	<div class="button">
		<a
			class="icon"
			href="javascript:calibrate('x')"
			>

			<img
				class="png"
				id="calibration-x"
				title="calibrate screen x-ratio"
				src="calibration-x.png"
			>
		</a>
	</div>
  
	<div class="button">
		<a
			class="icon"
			href="javascript:toggleScaleMenu()"
			>

			<img
				class="png"
				id="scale"
				title="change image scale"
				src="original-size.png"
			>
		</a>
	</div>

	<div class="separator">
	</div>

	<div class="button">
		<a
			class="icon"
			href="javascript:toggleOptionDiv()"
			>

			<img
				class="png"
				id="options-1"
				title="hide options"
				src="options.png"
			>
		</a>
	</div>

	<div class="separator">
	</div>

</div>

</body>

</html>