version 1.2, 2004/03/26 14:19:50
|
version 1.3, 2004/04/16 14:07:08
|
Line 1
|
Line 1
|
/* |
/* |
|
|
Copyright (C) 2003 WTWG, Uni Bern |
Copyright (C) 2003 WTWG, Uni Bern |
|
|
This program is free software; you can redistribute it and/or |
This program is free software; you can redistribute it and/or |
Line 17 along with this program; if not, write t
|
Line 16 along with this program; if not, write t
|
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA |
Foundation, Inc., 59 Temple Place - Suite 330, Boston, MA 02111-1307, USA |
|
|
Author: Christian Luginbuehl, 01.05.2003 , Version Alcatraz 0.4 |
Author: Christian Luginbuehl, 01.05.2003 , Version Alcatraz 0.4 |
Changed for digiLib in Zope by DW 24.03.2004 |
Changed for digiLib in Zope by DW 24.03.2004, ROC 09.04.2004 |
*/ |
*/ |
|
|
var ZOOMFACTOR = Math.sqrt(2); |
var ZOOMFACTOR = Math.sqrt(2); |
|
|
dlParams = new Object(); |
var dlParams = new Object(); |
|
var dlMarks = new Array(); |
|
var dlArea = new Rectangle(0.0, 0.0, 1.0, 1.0); |
|
var dlMaxArea = new Rectangle(0.0, 0.0, 1.0, 1.0); |
|
var dlFlags = new Object(); |
|
var dlTrafo = new Transform(); |
|
|
function newParameter(name, value, defaultValue, detail) { |
// fixes for silly browsers |
|
if (! Array.prototype.push) { |
|
Array.prototype.push = function(val) { |
|
this[this.length] = val; |
|
} |
|
} |
|
|
if ( !dlParams[name] ) { |
// auxiliary function to crop senseless precision |
|
function cropFloat(x) { |
|
return parseInt(10000*x)/10000; |
|
} |
|
|
|
function newParameter(name, defaultValue, detail) { |
|
// create a new parameter with a name and a default value |
|
if ( !dlParams[name] ) { |
dlParams[name] = new Object(); |
dlParams[name] = new Object(); |
|
|
dlParams[name].value = value; |
|
dlParams[name].defaultValue = defaultValue; |
dlParams[name].defaultValue = defaultValue; |
|
dlParams[name].hasValue = false; |
|
dlParams[name].value = defaultValue; |
dlParams[name].detail = detail; |
dlParams[name].detail = detail; |
|
|
return dlParams[name]; |
return dlParams[name]; |
|
|
} else { |
} else { |
|
|
alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!"); |
alert("Fatal: An object with name '" + name + "' already exists - cannot recreate!"); |
return false; |
return false; |
|
|
} |
} |
} |
} |
|
|
function getParameter(name) { |
function getParameter(name) { |
|
// returns the named parameter value or its default value |
if ( dlParams[name] ) { |
if ( dlParams[name] ) { |
|
if (dlParams[name].hasValue) { |
return dlParams[name].value; |
return dlParams[name].value; |
} else { |
} else { |
|
return dlParams[name].defaultValue; |
|
} |
|
} else { |
return false; |
return false; |
} |
} |
} |
} |
|
|
|
function setParameter(name, value) { |
|
// sets parameter value |
|
if (dlParams[name]) { |
|
dlParams[name].value = value; |
|
dlParams[name].hasValue = true; |
|
} |
|
} |
|
|
|
function getAllParameters(detail) { |
|
// returns a string of all parameters in query format |
|
var params = new Array(); |
|
for ( param in dlParams ) { |
|
if ((dlParams[param].detail <= detail)&&(dlParams[param].hasValue)) { |
|
var val = getParameter(param); |
|
if (val != "") { |
|
params.push(param + "=" + val); |
|
} |
|
} |
|
} |
|
return params.join("&"); |
|
} |
|
|
function listParametersAsString() { |
function parseParameters(query) { |
|
// gets parameter values from query format string |
|
var params = query.split("&"); |
|
for (var i = 0; i < params.length; i++) { |
|
var keyval = params[i].split("="); |
|
if (keyval.length == 2) { |
|
setParameter(keyval[0], keyval[1]); |
|
} |
|
} |
|
} |
|
|
var params = new Array(); |
function parseArea() { |
|
// returns area Rectangle from current parameters |
|
return new Rectangle(getParameter("wx"), getParameter("wy"), getParameter("ww"), getParameter("wh")); |
|
} |
|
|
for ( param in dlParams ) { |
function setParamFromRect(rect) { |
params.push(param); |
// sets digilib wx etc. from rect |
|
setParameter("wx", cropFloat(rect.x)); |
|
setParameter("wy", cropFloat(rect.y)); |
|
setParameter("ww", cropFloat(rect.width)); |
|
setParameter("wh", cropFloat(rect.height)); |
} |
} |
|
|
return params.join(","); |
function parseTrafo() { |
|
// returns Transform from current dlArea and picsize |
|
var picsize = getElementSize("scaler"); |
|
var trafo = new Transform(); |
|
// subtract area offset and size |
|
trafo.concat(getTranslation(new Position(-dlArea.x, -dlArea.y))); |
|
trafo.concat(getScale(new Size(1/dlArea.width, 1/dlArea.height))); |
|
// scale to screen size |
|
trafo.concat(getScale(picsize)); |
|
// rotate |
|
//trafo.concat(getRotation(- getParameter("rot"), new Position(0.5*picsize.width, 0.5*picsize.height))); |
|
// mirror |
|
//if (hasFlag("hmir")) { |
|
//trafo.m00 = - trafo.m00; |
|
//} |
|
//if (hasFlag("vmir")) { |
|
//trafo.m11 = - trafo.m11; |
|
//} |
|
return trafo; |
|
} |
|
|
|
function parseMarks() { |
|
// returns marks array from current parameters |
|
var marks = new Array(); |
|
var ma = getParameter("mk").split(";"); |
|
for (var i = 0; i < ma.length ; i++) { |
|
var pos = ma[i].split("/"); |
|
if (pos.length > 1) { |
|
marks.push(new Position(pos[0], pos[1])); |
|
} |
|
} |
|
return marks; |
} |
} |
|
|
|
function getAllMarks() { |
|
// returns a string with all marks in query format |
|
var marks = new Array(); |
|
for (var i = 0; i < dlMarks.length; i++) { |
|
marks.push(cropFloat(dlMarks[i].x) + "/" + cropFloat(dlMarks[i].y)); |
|
} |
|
return marks.join(";"); |
|
} |
|
|
function listParameters() { |
function addMark(x, y) { |
|
// add a mark |
|
dlMarks.push(new Position(x, y)); |
|
setParameter("mk", getAllMarks()); |
|
} |
|
|
var params = new Array(); |
function deleteMark() { |
|
// delete the last mark |
|
dlMarks.pop(); |
|
setParameter("mk", getAllMarks()); |
|
} |
|
|
for ( param in dlParams ) { |
function hasFlag(mode) { |
params.push(param); |
// returns if mode flag is set |
|
return (dlFlags[mode] && (dlFlags[mode] != null)); |
} |
} |
|
|
return params; |
function addFlag(mode) { |
|
// add a mode flag |
|
dlFlags[mode] = mode; |
|
} |
|
|
|
function removeFlag(mode) { |
|
// remove a mode flag |
|
if (dlFlags[mode]) { |
|
dlFlags[mode] = null; |
|
} |
} |
} |
|
|
|
function toggleFlag(mode) { |
|
// change a mode flag |
|
if (dlFlags[mode]) { |
|
dlFlags[mode] = null; |
|
} else { |
|
dlFlags[mode] = mode; |
|
} |
|
} |
|
|
function init() { |
function getAllFlags() { |
|
// returns a string with all flags in query format |
|
var fa = new Array(); |
|
for (var f in dlFlags) { |
|
if ((f != "")&&(dlFlags[f] != null)) { |
|
fa.push(f); |
|
} |
|
} |
|
return fa.join(","); |
|
} |
|
|
// give a name to the window containing digilib - this way one can test if there is already a |
function parseFlags() { |
// digilib-window open and replace the contents of it (ex. digicat) |
// sets dlFlags from the current parameters |
top.window.name = "digilib"; |
var flags = new Object(); |
|
var fa = getParameter("mo").split(","); |
|
for (var i = 0; i < fa.length ; i++) { |
|
var f = fa[i]; |
|
if (f != "") { |
|
flags[f] = f; |
|
} |
|
} |
|
return flags; |
|
} |
|
|
|
/* |
|
* Size class |
|
*/ |
|
function Size(w, h) { |
|
this.width = parseFloat(w); |
|
this.height = parseFloat(h); |
|
} |
|
|
|
/* |
|
* Position class |
|
*/ |
|
function Position(x, y) { |
|
this.x = parseFloat(x); |
|
this.y = parseFloat(y); |
|
} |
|
|
placeMarks(); |
/* |
|
* Rectangle class |
|
*/ |
|
function Rectangle(x, y, w, h) { |
|
this.x = parseFloat(x); |
|
this.y = parseFloat(y); |
|
this.width = parseFloat(w); |
|
this.height = parseFloat(h); |
|
} |
|
Rectangle.prototype.copy = function() { |
|
// returns a copy of this Rectangle |
|
return new Rectangle(this.x, this.y, this.width, this.height); |
|
} |
|
Rectangle.prototype.containsPosition = function(pos) { |
|
// returns if the given Position lies in this Rectangle |
|
return ((pos.x >= this.x)&&(pos.y >= this.y)&&(pos.x <= this.x+this.width)&&(pos.y <= this.y+this.width)); |
|
} |
|
Rectangle.prototype.intersect = function(rect) { |
|
// returns the intersection of the given Rectangle and this one |
|
var sec = rect.copy(); |
|
if (sec.x < this.x) { |
|
sec.width = sec.width - (this.x - sec.x); |
|
sec.x = this.x; |
|
} |
|
if (sec.y < this.y) { |
|
sec.height = sec.height - (this.y - sec.y); |
|
sec.y = this.y; |
|
} |
|
if (sec.x + sec.width > this.x + this.width) { |
|
sec.width = (this.x + this.width) - sec.x; |
|
} |
|
if (sec.y + sec.height > this.y + this.height) { |
|
sec.height = (this.y + this.height) - sec.y; |
|
} |
|
return sec; |
|
} |
|
Rectangle.prototype.fit = function(rect) { |
|
// returns a Rectangle that fits into this one (by moving first) |
|
var sec = rect.copy(); |
|
sec.x = Math.max(sec.x, this.x); |
|
sec.x = Math.max(sec.x, this.x); |
|
if (sec.x + sec.width > this.x + this.width) { |
|
sec.x = this.x + this.width - sec.width; |
|
} |
|
if (sec.y + sec.height > this.y + this.height) { |
|
sec.y = this.y + this.height - sec.height; |
|
} |
|
return sec.intersect(this); |
|
} |
|
|
|
/* |
|
* Transform class |
|
*/ |
|
function Transform() { |
|
this.m00 = 1.0; |
|
this.m01 = 0.0; |
|
this.m02 = 0.0; |
|
this.m10 = 0.0; |
|
this.m11 = 1.0; |
|
this.m12 = 0.0; |
|
this.m20 = 0.0; |
|
this.m21 = 0.0; |
|
this.m22 = 1.0; |
|
} |
|
Transform.prototype.concat = function(traf) { |
|
for (var i = 0; i < 3; i++) { |
|
for (var j = 0; j < 3; j++) { |
|
var c = 0.0; |
|
for (var k = 0; k < 3; k++) { |
|
c += traf["m"+i+k] * this["m"+k+j]; |
|
} |
|
this["m"+i+j] = c; |
|
} |
|
} |
|
} |
|
Transform.prototype.transform = function(pos) { |
|
var x = this.m00 * pos.x + this.m01 * pos.y + this.m02; |
|
var y = this.m10 * pos.x + this.m11 * pos.y + this.m12; |
|
return new Position(x, y); |
|
} |
|
Transform.prototype.invtransform = function(pos) { |
|
var det = this.m00 * this.m11 - this.m01 * this.m10; |
|
var x = (this.m11 * pos.x - this.m01 * pos.y - this.m11 * this.m02 + this.m01 * this.m12) / det; |
|
var y = (- this.m10 * pos.x + this.m00 * pos.y + this.m10 * this.m02 - this.m00 * this.m12) / det; |
|
return new Position(x, y); |
|
} |
|
function getRotation(angle, pos) { |
|
var traf = new Transform(); |
|
if (angle != 0) { |
|
var t = 2.0 * Math.PI * parseFloat(angle) / 360.0; |
|
traf.m00 = Math.cos(t); |
|
traf.m01 = - Math.sin(t); |
|
traf.m10 = Math.sin(t); |
|
traf.m11 = Math.cos(t); |
|
traf.m02 = pos.x - pos.x * Math.cos(t) + pos.y * Math.sin(t); |
|
traf.m12 = pos.y - pos.x * Math.sin(t) - pos.y * Math.cos(t); |
|
} |
|
return traf; |
|
} |
|
function getTranslation(pos) { |
|
var traf = new Transform(); |
|
traf.m02 = pos.x; |
|
traf.m12 = pos.y; |
|
return traf; |
|
} |
|
function getScale(size) { |
|
var traf = new Transform(); |
|
traf.m00 = size.width; |
|
traf.m11 = size.height; |
|
return traf; |
|
} |
|
|
|
function getElement(tagid) { |
|
// returns the named element object |
if ( document.all ) { |
if ( document.all ) { |
this.document.onkeypress = parseKeypress; |
return document.all[tagid]; |
} else if ( typeof(document.addEventListener) == "function" ) { |
} else if (document.getElementById) { |
this.document.addEventListener('keypress', parseKeypress, true); |
return document.getElementById(tagid); |
} else { |
} else { |
window.captureEvents(Event.KEYDOWN); |
return document[tagid]; |
window.onkeydown = parseKeypress; |
} |
} |
} |
|
|
focus(); |
function getElementSize(tagid) { |
|
// returns a Rectangle with the size and position of the named element |
|
var x = 0; |
|
var y = 0; |
|
var width = 0; |
|
var height = 0; |
|
var elem = getElement(tagid); |
|
if (elem.offsetWidth) { |
|
x = parseInt(elem.offsetLeft); |
|
y = parseInt(elem.offsetTop); |
|
width = parseInt(elem.offsetWidth); |
|
height = parseInt(elem.offsetHeight); |
|
} else { |
|
x = parseInt(elem.left); |
|
y = parseInt(elem.top); |
|
width = parseInt(elem.clip.width); |
|
height = parseInt(elem.clip.height); |
|
} |
|
return new Rectangle(x, y, width, height); |
} |
} |
|
|
|
function moveElement(tagid, pos) { |
|
// moves the named element to the indicated position |
|
var elem = getElement(tagid); |
|
if (elem.style) { |
|
elem.style.left = pos.x; |
|
elem.style.top = pos.y; |
|
} else { |
|
alert("moveelement: no style property!"); |
|
} |
|
} |
|
|
function display(detail) { |
function showElement(tagid, show) { |
|
// shows or hides the named element |
|
var elem = getElement(tagid); |
|
if (elem.style) { |
|
if (show) { |
|
elem.style.visibility = "visible"; |
|
} else { |
|
elem.style.visibility = "hidden"; |
|
} |
|
} else { |
|
alert("showelement: no style property!"); |
|
} |
|
} |
|
|
var queryString = ''; |
function registerMouseDown(tagid, handler) { |
|
// register a mouse down event handler on the indicated element |
|
if ( document.all ) { |
|
document.all[tagid].onmousedown = handler; |
|
} else if (document.getElementById) { |
|
document.getElementById(tagid).addEventListener("mousedown", handler, true); |
|
} else { |
|
document[tagid].captureEvents(Event.MOUSEDOWN); |
|
document[tagid].onmousedown = handler; |
|
} |
|
} |
|
|
for ( param in dlParams ) { |
function unregisterMouseDown(tagid, handler) { |
|
// unregister the mouse down event handler |
|
if ( document.all ) { |
|
document.all[tagid].onmousedown = null; |
|
} else if (document.getElementById) { |
|
document.getElementById(tagid).removeEventListener("mousedown", handler, true); |
|
} else { |
|
document[tagid].releaseEvents(Event.MOUSEDOWN); |
|
} |
|
} |
|
|
if ( dlParams[param].defaultValue != dlParams[param].value ) { |
function registerMouseMove(tagid, handler) { |
if ( dlParams[param].detail <= detail ) { |
// register a mouse move event handler on the indicated element |
queryString += "&" + param + "=" + dlParams[param].value; |
if ( document.all ) { |
|
document.all[tagid].onmousemove = handler; |
|
} else if (document.getElementById) { |
|
document.getElementById(tagid).addEventListener("mousemove", handler, true); |
} else { |
} else { |
queryString += "&" + param + "=" + dlParams[param].defaultValue; |
document[tagid].captureEvents(Event.MOUSEMOVE); |
|
document[tagid].onmousemove = handler; |
} |
} |
} |
} |
|
|
|
function unregisterMouseMove(tagid, handler) { |
|
// unregister the mouse move event handler |
|
if ( document.all ) { |
|
document.all[tagid].onmousemove = null; |
|
} else if (document.getElementById) { |
|
document.getElementById(tagid).removeEventListener("mousemove", handler, true); |
|
} else { |
|
document[tagid].releaseEvents(Event.MOUSEMOVE); |
|
} |
} |
} |
|
|
// window size |
function registerKeyDown(handler) { |
var wwidth, wheight; |
// register a key down handler |
if (self.innerHeight) // all except Explorer |
if ( document.all ) { |
{ |
this.document.onkeypress = handler |
wwidth = self.innerWidth; |
} else if ( typeof(document.addEventListener) == "function" ) { |
wheight = self.innerHeight; |
this.document.addEventListener('keypress', handler, true); |
|
} else { |
|
window.captureEvents(Event.KEYDOWN); |
|
window.onkeydown = handler; |
} |
} |
else if (document.documentElement && document.documentElement.clientHeight) |
|
// Explorer 6 Strict Mode |
|
{ |
|
wwidth = document.documentElement.clientWidth; |
|
wheight = document.documentElement.clientHeight; |
|
} |
} |
else if (document.body) // other Explorers |
|
{ |
function getWinSize() { |
wwidth = document.body.clientWidth; |
// returns a Size with the current window size (from www.quirksmode.org) |
wheight = document.body.clientHeight; |
var wsize = new Size(100, 100); |
|
if (self.innerHeight) { |
|
// all except Explorer |
|
wsize.width = self.innerWidth; |
|
wsize.height = self.innerHeight; |
|
} else if (document.documentElement && document.documentElement.clientHeight) { |
|
// Explorer 6 Strict Mode |
|
wsize.width = document.documentElement.clientWidth; |
|
wsize.height = document.documentElement.clientHeight; |
|
} else if (document.body) { |
|
// other Explorers |
|
wsize.width = document.body.clientWidth; |
|
wsize.height = document.body.clientHeight; |
|
} |
|
return wsize; |
|
} |
|
|
|
function bestPicSize(tagid) { |
|
// returns a Size with the best image size for the given tagid |
|
var inset = 5; |
|
var ps = getWinSize(); |
|
var scaler = document.getElementById(tagid); |
|
ps.width = ps.width - scaler.offsetLeft - inset; |
|
ps.height = ps.height - scaler.offsetTop - inset; |
|
return ps; |
} |
} |
//queryString += "&dw=" + (wwidth-30) + "&dh=" + (wheight-30); # not needed DW |
|
|
|
queryString += "&lv=1"; |
|
|
|
queryString = queryString.slice(1); |
|
|
|
location.href = location.protocol + "//" + location.host + location.pathname + "?" + queryString; |
function init() { |
|
// give a name to the window containing digilib - this way one can test if there is already a |
|
// digilib-window open and replace the contents of it (ex. digicat) |
|
top.window.name = "digilib"; |
|
// put the query parameters (sans "&") in the parameters array |
|
parseParameters(location.search.slice(1)); |
|
// treat special parameters |
|
dlMarks = parseMarks(); |
|
dlArea = parseArea(); |
|
dlFlags = parseFlags(); |
|
|
|
//registerKeyDown(parseKeypress); |
|
|
|
placeMarks(); |
|
|
|
focus(); |
|
return true; |
} |
} |
|
|
|
|
// constructor holding different values of a point |
function display(detail) { |
function Point(evt) { |
// redisplay the page |
|
var queryString = getAllParameters(detail); |
|
location.href = location.protocol + "//" + location.host + location.pathname + "?" + queryString; |
|
} |
|
|
|
|
|
/* |
|
* Point class |
|
*/ |
|
function Point() { |
|
} |
|
Point.prototype.setWithEvent = function(evt) { |
|
// set point values from event |
|
|
if ( document.all ) { |
if ( document.all ) { |
|
|
Line 219 function page(page, details) {
|
Line 596 function page(page, details) {
|
} |
} |
|
|
|
|
function digicat() { |
|
|
|
var url = baseUrl + "/digicat.jsp?" + dlParams.fn.value + "+" + dlParams.pn.value; |
|
win = window.open(url, "digicat"); |
|
win.focus(); |
|
|
|
} |
|
|
|
|
|
function ref(select) { |
function ref(select) { |
|
// open a dialog with a reference to the current digilib set |
var hyperlinkRef = baseUrl + "?"; |
var hyperlinkRef = baseUrl + "?" + getAllParameters(9); |
hyperlinkRef += "fn="+dlParams.fn.value + "&pn=" + dlParams.pn.value + "&ws=" + dlParams.ws.value + "&mo="; |
|
hyperlinkRef += dlParams.mo.value + "&mk=" + dlParams.mk.value; |
|
|
|
if ( (dlParams.wx.value != 0) || (dlParams.wy.value != 0) || (dlParams.ww.value != 1) || (dlParams.wh.value != 1) ) { |
|
hyperlinkRef += "&wx=" + dlParams.wx.value + "&wy=" + dlParams.wy.value + "&ww=" + dlParams.ww.value; |
|
hyperlinkRef += "&wh=" + dlParams.wh.value; |
|
} |
|
|
|
if ( select == 0 ) { |
if ( select == 0 ) { |
prompt("Link for LaTeX-documents", "\\href{" + hyperlinkRef + "}{TEXT}"); |
prompt("Link for LaTeX-documents", "\\href{" + hyperlinkRef + "}{TEXT}"); |
} else if ( select == 1 ) { |
} else if ( select == 1 ) { |
Line 248 function ref(select) {
|
Line 609 function ref(select) {
|
|
|
|
|
function mark() { |
function mark() { |
|
// add a mark where clicked |
if ( dlParams.mk.value.split(";").length > 7 ) { |
if ( dlMarks.length > 7 ) { |
alert("Only 8 marks are possible at the moment!"); |
alert("Only 8 marks are possible at the moment!"); |
return; |
return; |
} |
} |
|
|
function markEvent(evt) { |
function markEvent(evt) { |
|
// event handler adding a new mark |
var point = new Point(evt); |
unregisterMouseDown("scaler", markEvent); |
|
var point = new Point(); |
if ( dlParams.mk.value != '' ) { |
point.setWithEvent(evt); |
dlParams.mk.value += ';'; |
var point2 = dlTrafo.invtransform(new Position(point.x, point.y)); |
} |
//alert("p0: "+point.x+", "+point.y); |
|
//alert("p1: "+point.relX+", "+point.relY+" p2: "+point2.x+", "+point2.y); |
dlParams.mk.value += point.relX + '/' + point.relY; |
var point3 = dlTrafo.transform(point2); |
|
//alert("p3: "+point3.x+", "+point3.y); |
// stopping event capture |
//addMark(point.relX, point.relY); |
if ( document.all ) { |
addMark(point2.x, point2.y); |
document.all.scaler.onmousedown = null; |
|
} else if ( typeof(document.removeEventListener) == "function" ) { |
|
document.getElementById("scaler").removeEventListener("mousedown", markEvent, true); |
|
} else { |
|
document.scaler.releaseEvents(Event.MOUSEDOWN); |
|
} |
|
|
|
placeMarks(); |
placeMarks(); |
|
|
} |
} |
|
|
// starting event capture |
// starting event capture |
if ( document.all ) { |
registerMouseDown("scaler", markEvent); |
document.all.scaler.onmousedown = markEvent; |
|
} else if ( typeof(document.addEventListener) == "function" ) { |
|
document.getElementById("scaler").addEventListener("mousedown", markEvent, true); |
|
} else { |
|
document.scaler.captureEvents(Event.MOUSEDOWN); |
|
document.scaler.onmousedown = markEvent; |
|
} |
|
} |
} |
|
|
|
function unmark() { |
|
// remove the last mark |
|
deleteMark(); |
|
placeMarks(); |
|
} |
|
|
function placeMarks() { |
function placeMarks() { |
|
// put the visible marks on the image |
if ( dlParams.mk.value != '' ) { |
var mark_count = dlMarks.length; |
|
var picelem = getElement("pic"); |
var mark = dlParams.mk.value.split(";"); |
// make shure the image is loaded so we know its size |
var mark_count = mark.length; |
if (picelem && picelem.complete == false) { |
|
setTimeout("placeMarks()", 100); |
// maximum of marks is 8 |
|
// we do not report this error because this is already done in function 'mark' |
|
if ( mark_count > 8 ) mark_count = 8; |
|
|
|
var picWidth = (document.all) ? parseInt(document.all.scaler.offsetWidth) : (typeof(document.getElementById) == "function") ? parseInt(document.pic.offsetWidth) : parseInt(document.pic.clip.width); |
|
var picHeight = (document.all) ? parseInt(document.all.scaler.offsetHeight) : (typeof(document.getElementById) == "function") ? parseInt(document.pic.offsetHeight) : parseInt(document.pic.clip.height); |
|
|
|
// catch the s where the picture had not been loaded already and |
|
// make a timeout so that the coordinates are calculated with the real dimensions |
|
//if ( (document.pic.complete) || (picWidth > 30) ) { |
|
if ( (picWidth > 30) ) { |
|
|
|
var xOffset = (document.all) ? parseInt(document.all.scaler.offsetLeft) : (typeof(document.getElementById) == "function") ? parseInt(document.getElementById('scaler').offsetLeft) : document.scaler.left; |
|
var yOffset = (document.all) ? parseInt(document.all.scaler.offsetTop) : (typeof(document.getElementById) == "function") ? parseInt(document.getElementById('scaler').offsetTop) : document.scaler.top; |
|
|
|
for (var i = 0; i < mark_count; i++) { |
|
mark[i] = mark[i].split("/"); |
|
|
|
if ( (mark[i][0] >= dlParams.wx.value) && (mark[i][1] >= dlParams.wy.value) && (mark[i][0] <= (parseFloat(dlParams.wx.value) + parseFloat(dlParams.ww.value))) && (mark[i][1] <= (parseFloat(dlParams.wy.value) + parseFloat(dlParams.wh.value))) ) { |
|
|
|
mark[i][0] = parseInt(xOffset + picWidth * (mark[i][0] - dlParams.wx.value)/dlParams.ww.value); |
|
mark[i][1] = parseInt(yOffset + picHeight * (mark[i][1] - dlParams.wy.value)/dlParams.wh.value); |
|
|
|
if ( (document.all) || (typeof(document.getElementById) == "function") ) { |
|
// suboptimal to place -5 pixels and not half size of mark-image |
|
// should be changed in the future |
|
document.getElementById("dot" + i).style.left = mark[i][0]-5; |
|
document.getElementById("dot" + i).style.top = mark[i][1]-5; |
|
document.getElementById("dot" + i).style.visibility = "visible"; |
|
} else { |
} else { |
document.layers[i+1].moveTo(mark[i][0]-5, mark[i][1]-5); |
var picsize = getElementSize("scaler"); |
document.layers[i+1].visibility = "show"; |
dlTrafo = parseTrafo(); |
} |
for (var i = 0; i < 8; i++) { |
} |
if (i < mark_count) { |
|
if (dlArea.containsPosition(dlMarks[i])) { |
|
var mpos = dlTrafo.transform(dlMarks[i]); |
|
//alert("mark: "+mpos.x+" "+mpos.y); |
|
// suboptimal to place -5 pixels and not half size of mark-image |
|
mpos.x = mpos.x + picsize.x -5; |
|
mpos.y = mpos.y + picsize.y -5; |
|
moveElement("dot"+i, mpos); |
|
showElement("dot"+i, true); |
} |
} |
|
|
} else { |
} else { |
setTimeout("placeMarks()", 100); |
// hide the other marks |
|
showElement("dot"+i, false); |
} |
} |
} |
} |
} |
} |
|
|
|
|
function zoomPoint() { |
|
window.focus() |
|
function zoomPointEvent(evt) { |
|
|
|
var point = new Point(evt); |
|
|
|
dlParams.wx.value = cropFloat(point.relX-0.5*dlParams.ww.value*(1/ZOOMFACTOR)); |
|
dlParams.wy.value = cropFloat(point.relY-0.5*dlParams.wh.value*(1/ZOOMFACTOR)); |
|
|
|
dlParams.ww.value = cropFloat(dlParams.ww.value*(1/ZOOMFACTOR)); |
|
dlParams.wh.value = cropFloat(dlParams.wh.value*(1/ZOOMFACTOR)); |
|
|
|
if ( dlParams.wx.value < 0 ) { |
|
dlParams.wx.value = 0; |
|
} |
|
if ( dlParams.wy.value < 0 ) { |
|
dlParams.wy.value = 0; |
|
} |
|
if ( dlParams.wx.value + dlParams.ww.value > 1 ) { |
|
dlParams.wx.value = 1 - dlParams.ww.value; |
|
} |
|
if ( dlParams.wy.value + dlParams.wh.value > 1 ) { |
|
dlParams.wy.value = 1 - dlParams.wh.value; |
|
} |
} |
|
|
// stopping event capture |
|
if ( document.all ) { |
function zoomPoint(inout) { |
document.all.scaler.onmousedown = null; |
// zoom image in or out around the clicked point |
} else if ( typeof(document.removeEventListener) == "function" ) { |
window.focus(); |
document.getElementById("scaler").removeEventListener("mousedown", zoomPointEvent, true); |
var zoom = ZOOMFACTOR; |
} else { |
if (inout < 0) { |
document.scaler.releaseEvents(Event.MOUSEDOWN); |
zoom = 1/ZOOMFACTOR; |
} |
} |
|
|
|
function zoomPointEvent(evt) { |
|
// take new center and set zoom parameters |
|
var point = new Point(); |
|
point.setWithEvent(evt); |
|
var neww = Math.min(dlArea.width * (1/zoom), 1.0); |
|
var newh = Math.min(dlArea.height * (1/zoom), 1.0); |
|
var newx = point.relX - 0.5 * neww; |
|
var newy = point.relY - 0.5 * newh; |
|
var zoomarea = new Rectangle(newx, newy, neww, newh); |
|
//alert("za1: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height); |
|
// check bounds |
|
zoomarea = dlMaxArea.fit(zoomarea); |
|
//alert("za2: "+zoomarea.x+","+zoomarea.y+" "+zoomarea.width+","+zoomarea.height); |
|
// set parameters |
|
setParameter("wx", cropFloat(zoomarea.x)); |
|
setParameter("wy", cropFloat(zoomarea.y)); |
|
setParameter("ww", cropFloat(zoomarea.width)); |
|
setParameter("wh", cropFloat(zoomarea.height)); |
|
parseArea(); |
display(3); |
display(3); |
} |
} |
|
|
// starting event capture |
// starting event capture |
if ( document.all ) { |
registerMouseDown("scaler", zoomPointEvent); |
document.all.scaler.onmousedown = zoomPointEvent; |
|
} else if ( typeof(document.addEventListener) == "function" ) { |
|
document.getElementById("scaler").addEventListener("mousedown", zoomPointEvent, true); |
|
} else { |
|
document.scaler.captureEvents(Event.MOUSEDOWN); |
|
document.scaler.onmousedown = zoomPointEvent; |
|
} |
|
} |
} |
|
|
|
|
function zoomArea() { |
function zoomArea() { |
var state = 0; |
var click = 1; |
var pt1, pt2; |
var pt1, pt2; |
window.focus() |
var eck1pos, eck2pos, eck3pos, eck4pos; |
|
window.focus(); |
function click(evt) { |
|
|
|
if (state == 0) { |
|
state = 1; |
|
|
|
pt1 = new Point(evt); |
|
|
|
|
function zoomClick(evt) { |
|
// mouse click handler |
|
if (click == 1) { |
|
// first click -- start moving |
|
click = 2; |
|
pt1 = new Point(); |
|
pt1.setWithEvent(evt); |
pt2 = pt1; |
pt2 = pt1; |
|
eck1pos = new Position(pt1.pageX, pt1.pageY); |
if ( document.all ) { |
eck2pos = new Position(pt1.pageX - 12, pt1.pageY); |
|
eck3pos = new Position(pt1.pageX, pt1.pageY - 12); |
document.all.eck1.style.left = pt1.pageX; |
eck4pos = new Position(pt1.pageX- 12, pt1.pageY - 12); |
document.all.eck1.style.top = pt1.pageY; |
moveElement("eck1", eck1pos); |
document.all.eck2.style.left = pt2.pageX-12; |
moveElement("eck2", eck2pos); |
document.all.eck2.style.top = pt1.pageY; |
moveElement("eck3", eck3pos); |
document.all.eck3.style.left = pt1.pageX; |
moveElement("eck4", eck4pos); |
document.all.eck3.style.top = pt2.pageY-12; |
showElement("eck1", true); |
document.all.eck4.style.left = pt2.pageX-12; |
showElement("eck2", true); |
document.all.eck4.style.top = pt2.pageY-12; |
showElement("eck3", true); |
|
showElement("eck4", true); |
document.all.eck1.style.visibility="visible"; |
registerMouseMove("scaler", zoomMove); |
document.all.eck2.style.visibility="visible"; |
registerMouseMove("eck4", zoomMove); |
document.all.eck3.style.visibility="visible"; |
} else { |
document.all.eck4.style.visibility="visible"; |
// second click -- end moving |
|
pt2 = new Point(); |
document.all.scaler.onmousemove = move; |
pt2.setWithEvent(evt); |
document.all.eck4.onmousemove = move; |
showElement("eck1", false); |
|
showElement("eck2", false); |
} else if ( typeof(document.addEventListener) == "function" ) { |
showElement("eck3", false); |
|
showElement("eck4", false); |
document.getElementById("eck1").style.left = pt1.pageX; |
unregisterMouseMove("scaler", zoomMove); |
document.getElementById("eck1").style.top = pt1.pageY; |
unregisterMouseMove("eck4", zoomMove); |
document.getElementById("eck2").style.left = pt2.pageX-12; |
unregisterMouseDown("scaler", zoomClick); |
document.getElementById("eck2").style.top = pt1.pageY; |
unregisterMouseDown("eck4", zoomClick); |
document.getElementById("eck3").style.left = pt1.pageX; |
var ww = pt2.relX-pt1.relX; |
document.getElementById("eck3").style.top = pt2.pageY-12; |
var wh = pt2.relY-pt1.relY; |
document.getElementById("eck4").style.left = pt2.pageX-12; |
if ((ww > 0)&&(wh > 0)) { |
document.getElementById("eck4").style.top = pt2.pageY-12; |
setParameter("wx", cropFloat(pt1.relX)); |
|
setParameter("wy", cropFloat(pt1.relY)); |
document.getElementById("eck1").style.visibility="visible"; |
setParameter("ww", cropFloat(ww)); |
document.getElementById("eck2").style.visibility="visible"; |
setParameter("wh", cropFloat(wh)); |
document.getElementById("eck3").style.visibility="visible"; |
parseArea(); |
document.getElementById("eck4").style.visibility="visible"; |
|
|
|
document.getElementById("scaler").addEventListener("mousemove", move, true); |
|
document.getElementById("eck4").addEventListener("mousemove", move, true); |
|
|
|
} else { |
|
|
|
document.eck1.moveTo(pt1.pageX, pt1.pageY); |
|
document.eck2.moveTo(pt2.pageX-12, pt1.pageY); |
|
document.eck3.moveTo(pt1.pageX, pt2.pageY-12); |
|
document.eck4.moveTo(pt2.pageX-12, pt2.pageY-12); |
|
|
|
document.eck1.visibility="show"; |
|
document.eck2.visibility="show"; |
|
document.eck3.visibility="show"; |
|
document.eck4.visibility="show"; |
|
|
|
document.scaler.captureEvents(Event.MOUSEMOVE); |
|
document.eck4.captureEvents(Event.MOUSEMOVE); |
|
document.scaler.onmousemove = move; |
|
document.eck4.onmousemove = move; |
|
|
|
} |
|
|
|
} else { |
|
|
|
pt2 = new Point(evt); |
|
|
|
if ( document.all ) { |
|
|
|
document.all.eck1.visibility="hidden"; |
|
document.all.eck2.visibility="hidden"; |
|
document.all.eck3.visibility="hidden"; |
|
document.all.eck4.visibility="hidden"; |
|
|
|
document.all.scaler.onmousedown = null; |
|
document.all.eck4.onmousedown = null; |
|
document.all.scaler.onmousemove = null; |
|
document.all.eck4.onmousemove = null; |
|
|
|
} else if ( typeof(document.removeEventListener) == "function" ) { |
|
|
|
document.getElementById("eck1").style.visibility="hidden"; |
|
document.getElementById("eck2").style.visibility="hidden"; |
|
document.getElementById("eck3").style.visibility="hidden"; |
|
document.getElementById("eck4").style.visibility="hidden"; |
|
|
|
document.getElementById("scaler").removeEventListener("mousedown", click, true); |
|
document.getElementById("eck4").removeEventListener("mousedown", click, true); |
|
document.getElementById("scaler").removeEventListener("mousemove", move, true); |
|
document.getElementById("eck4").removeEventListener("mousemove", move, true); |
|
|
|
} else { |
|
|
|
document.eck1.visibility="hide"; |
|
document.eck2.visibility="hide"; |
|
document.eck3.visibility="hide"; |
|
document.eck4.visibility="hide"; |
|
|
|
document.scaler.releaseEvents(Event.MOUSEDOWN); |
|
document.eck4.releaseEvents(Event.MOUSEDOWN); |
|
document.scaler.releaseEvents(Event.MOUSEMOVE); |
|
document.eck4.releaseEvents(Event.MOUSEMOVE); |
|
|
|
} |
|
|
|
dlParams.wx.value = cropFloat(parseFloat(Math.min(pt1.relX, pt2.relX))); |
|
|
|
dlParams.wy.value = cropFloat(parseFloat(Math.min(pt1.relY, pt2.relY))); |
|
|
|
dlParams.ww.value = cropFloat(parseFloat(Math.abs(pt1.relX-pt2.relX))); |
|
dlParams.wh.value = cropFloat(parseFloat(Math.abs(pt1.relY-pt2.relY))); |
|
|
|
if ( (dlParams.ww.value != 0) && (dlParams.wh.value != 0) ) { |
|
display(3); |
display(3); |
} |
} |
} |
} |
} |
} |
|
|
function move(evt) { |
function zoomMove(evt) { |
|
// mouse move handler |
pt2 = new Point(evt); |
pt2 = new Point(); |
|
pt2.setWithEvent(evt); |
var eck1_left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX); |
// restrict marks to move right and down |
var eck1_top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY); |
eck1pos = new Position(pt1.pageX, pt1.pageY); |
var eck2_left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12;; |
eck2pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, pt1.pageY); |
var eck2_top = ((pt1.pageY < pt2.pageY) ? pt1.pageY : pt2.pageY); |
eck3pos = new Position(pt1.pageX, Math.max(pt1.pageY, pt2.pageY)-12); |
var eck3_left = ((pt1.pageX < pt2.pageX) ? pt1.pageX : pt2.pageX); |
eck4pos = new Position(Math.max(pt1.pageX, pt2.pageX)-12, Math.max(pt1.pageY, pt2.pageY)-12); |
var eck3_top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12; |
moveElement("eck1", eck1pos); |
var eck4_left = ((pt1.pageX < pt2.pageX) ? pt2.pageX : pt1.pageX)-12; |
moveElement("eck2", eck2pos); |
var eck4_top = ((pt1.pageY < pt2.pageY) ? pt2.pageY : pt1.pageY)-12; |
moveElement("eck3", eck3pos); |
|
moveElement("eck4", eck4pos); |
if ( document.all ) { |
|
|
|
document.all.eck1.style.left = eck1_left; |
|
document.all.eck1.style.top = eck1_top; |
|
document.all.eck2.style.left = eck2_left; |
|
document.all.eck2.style.top = eck2_top; |
|
document.all.eck3.style.left = eck3_left; |
|
document.all.eck3.style.top = eck3_top; |
|
document.all.eck4.style.left = eck4_left; |
|
document.all.eck4.style.top = eck4_top; |
|
|
|
} else if ( typeof(document.getElementById) == "function" ) { |
|
|
|
document.getElementById("eck1").style.left = eck1_left; |
|
document.getElementById("eck1").style.top = eck1_top; |
|
document.getElementById("eck2").style.left = eck2_left; |
|
document.getElementById("eck2").style.top = eck2_top; |
|
document.getElementById("eck3").style.left = eck3_left; |
|
document.getElementById("eck3").style.top = eck3_top; |
|
document.getElementById("eck4").style.left = eck4_left; |
|
document.getElementById("eck4").style.top = eck4_top; |
|
|
|
} else { |
|
|
|
document.eck1.moveTo(eck1_left, eck1_top); |
|
document.eck2.moveTo(eck2_left, eck2_top); |
|
document.eck3.moveTo(eck3_left, eck3_top); |
|
document.eck4.moveTo(eck4_left, eck4_top); |
|
|
|
} |
|
} |
} |
|
|
// starting event capture |
// starting event capture |
if ( document.all ) { |
registerMouseDown("scaler", zoomClick); |
document.all.scaler.onmousedown = click; |
registerMouseDown("eck4", zoomClick); |
document.all.eck4.onmousedown = click; |
|
} else if ( typeof(document.addEventListener) == "function" ) { |
|
document.getElementById("scaler").addEventListener("mousedown", click, true); |
|
document.getElementById("eck4").addEventListener("mousedown", click, true); |
|
} else { |
|
document.scaler.captureEvents(Event.MOUSEDOWN); |
|
document.eck4.captureEvents(Event.MOUSEDOWN); |
|
document.scaler.onmousedown = click; |
|
document.eck4.onmousedown = click; |
|
} |
|
} |
|
|
|
|
|
function zoomExtends() { |
|
|
|
dlParams.wx.value = 0.0; |
|
dlParams.wy.value = 0.0; |
|
|
|
dlParams.ww.value = 1.0; |
|
dlParams.wh.value = 1.0; |
|
|
|
display(3); |
|
|
|
} |
|
|
|
|
|
function zoomOut() { |
|
|
|
dlParams.wx.value = cropFloat(dlParams.wx.value-0.5*(dlParams.ww.value*(ZOOMFACTOR)-dlParams.ww.value)); |
|
dlParams.wy.value = cropFloat(dlParams.wy.value-0.5*(dlParams.wh.value*(ZOOMFACTOR)-dlParams.wh.value)); |
|
|
|
dlParams.ww.value = cropFloat(dlParams.ww.value*(ZOOMFACTOR)); |
|
dlParams.wh.value = cropFloat(dlParams.wh.value*(ZOOMFACTOR)); |
|
|
|
if ( dlParams.wx.value < 0 ) { |
|
dlParams.wx.value = 0; |
|
} |
|
if ( dlParams.wy.value < 0 ) { |
|
dlParams.wy.value = 0; |
|
} |
|
if ( dlParams.ww.value > 1 ) { |
|
dlParams.ww.value = 1; |
|
} |
|
if ( dlParams.wh.value > 1 ) { |
|
dlParams.wh.value = 1; |
|
} |
|
if ( dlParams.wx.value + dlParams.ww.value > 1 ) { |
|
dlParams.wx.value = 1 - dlParams.ww.value; |
|
} |
|
if ( dlParams.wy.value + dlParams.wh.value > 1 ) { |
|
dlParams.wy.value = 1 - dlParams.wh.value; |
|
} |
} |
|
|
|
function zoomFullpage() { |
|
// zooms out to show the whole image |
|
setParameter("wx", 0.0); |
|
setParameter("wy", 0.0); |
|
setParameter("ww", 1.0); |
|
setParameter("wh", 1.0); |
|
parseArea(); |
display(3); |
display(3); |
} |
} |
|
|
Line 627 function moveTo() {
|
Line 795 function moveTo() {
|
} |
} |
|
|
function moveToEvent(event) { |
function moveToEvent(event) { |
|
// move to handler |
var point = new Point(event); |
var point = new Point(); |
|
point.setWithEvent(eventt); |
dlParams.wx.value = cropFloat(point.relX-0.5*dlParams.ww.value); |
var newarea = new Rectangle(point.relX-0.5*dlParams.ww.value, point.relY-0.5*dlParams.wh.value, dlArea.width, dlArea.height); |
dlParams.wy.value = cropFloat(point.relY-0.5*dlParams.wh.value); |
newarea = dlMaxArea.intersect(newarea); |
|
// stopping event capture |
if ( dlParams.wx.value < 0 ) { |
unregisterMouseDown("scaler", moveToEvent); |
dlParams.wx.value = 0; |
// set parameters |
} |
setParameter("wx", cropFloat(newarea.x)); |
if ( dlParams.wy.value < 0 ) { |
setParameter("wy", cropFloat(newarea.y)); |
dlParams.wy.value = 0; |
setParameter("ww", cropFloat(newarea.width)); |
} |
setParameter("wh", cropFloat(newarea.height)); |
if ( dlParams.wx.value + dlParams.ww.value > 1 ) { |
display(3); |
dlParams.wx.value = 1 - dlParams.ww.value; |
|
} |
} |
if ( dlParams.wy.value + dlParams.wh.value > 1 ) { |
// starting event capture |
dlParams.wy.value = 1 - dlParams.wh.value; |
registerMouseDown("scaler", moveToEvent); |
} |
} |
|
|
// stopping event capture |
function setSize(factor) { |
if ( document.all ) { |
// change the size of the image |
document.all.scaler.onmousedown = null; |
setParameter("ws", cropFloat(factor)); |
} else if ( typeof(document.removeEventListener) == "function" ) { |
display(3); |
document.getElementById("scaler").removeEventListener("mousedown", moveToEvent, true); |
|
} else { |
|
document.scaler.releaseEvents(Event.MOUSEDOWN) |
|
} |
} |
|
|
|
function setQuality(qual) { |
|
// set the image quality |
|
for (var i = 0; i < 3; i++) { |
|
removeFlag("q"+i); |
|
if (i == qual) { |
|
addFlag("q"+i); |
|
} |
|
} |
|
setParameter("mo", getAllFlags()); |
display(3); |
display(3); |
} |
} |
|
|
// starting event capture |
function mirror(dir) { |
if ( document.all ) { |
// mirror the image horizontally or vertically |
document.all.scaler.onmousedown = moveToEvent; |
if (dir == "h") { |
} else if ( typeof(document.addEventListener) == "function" ) { |
toggleFlag("hmir"); |
document.getElementById("scaler").addEventListener("mousedown", moveToEvent, true); |
|
} else { |
} else { |
document.scaler.captureEvents(Event.MOUSEDOWN); |
toggleFlag("vmir"); |
document.scaler.onmousedown = moveToEvent; |
|
} |
|
} |
} |
|
setParameter("mo", getAllFlags()); |
|
|
function scale(factor) { |
|
|
|
dlParams.ws.value = cropFloat(factor); |
|
display(3); |
display(3); |
|
|
} |
} |
|
|
|
|
// capturing keypresses for next and previous page |
|
function parseKeypress(evt) { |
function parseKeypress(evt) { |
|
// capturing keypresses for next and previous page |
if ( document.all ) { |
if ( document.all ) { |
|
|
if ( event.keyCode == 110 ) { |
if ( event.keyCode == 110 ) { |
page('+1'); |
page('+1'); |
} |
} |
if ( event.keyCode == 98 ) { |
if ( event.keyCode == 98 ) { |
page('-1'); |
page('-1'); |
} |
} |
|
document.cancelBubble = true; |
document.cancleBubble = true; |
|
|
|
} else { |
} else { |
|
|
if ( evt.charCode == 110 ) { |
if ( evt.charCode == 110 ) { |
page('+1'); |
page('+1'); |
} else if ( evt.charCode == 98 ) { |
} else if ( evt.charCode == 98 ) { |
Line 705 function parseKeypress(evt) {
|
Line 864 function parseKeypress(evt) {
|
// have to change the key or find another way - luginbuehl |
// have to change the key or find another way - luginbuehl |
page('-1'); |
page('-1'); |
} |
} |
|
|
} |
|
} |
} |
|
|
|
|
// auxiliary function to crop senseless precicsion |
|
function cropFloat(tmp) { |
|
return parseInt(10000*tmp)/10000; |
|
} |
} |