- +

mousemove problems - var rect = getElementRect(picElem); + var picRect = getElementRect(scalerImg); // FIX ME: is there a way to query the border width from CSS info? // rect.x -= 2; // account for overlay borders // rect.y -= 2; - moveElement(overlay, rect); + moveElement(overlay, picRect); showElement(overlay, true); // start event capturing registerEvent("mousedown", overlay, zoomStart); - registerEvent("mousedown", elemScaler, zoomStart); + registerEvent("mousedown", scalerImg, zoomStart); window.focus(); // mousedown handler: start moving function zoomStart(evt) { pt1 = evtPosition(evt); unregisterEvent("mousedown", overlay, zoomStart); - unregisterEvent("mousedown", elemScaler, zoomStart); - // unregisterEvent("mousedown", zoomdiv, zoomStart); + unregisterEvent("mousedown", scalerImg, zoomStart); // setup and show zoom div moveElement(zoomdiv, Rectangle(pt1.x, pt1.y, 0, 0)); showElement(zoomdiv, true); - // register move events - registerEvent("mousemove", overlay, zoomMove); - registerEvent("mousemove", zoomdiv, zoomMove); - registerEvent("mousemove", elemScaler, zoomMove); - // register up events for drag end - registerEvent("mouseup", overlay, zoomEnd); - registerEvent("mouseup", zoomdiv, zoomEnd); - registerEvent("mouseup", elemScaler, zoomEnd); + // register events + registerEvent("mousemove", document, zoomMove); + registerEvent("mouseup", document, zoomEnd); return stopEvent(evt); } @@ -481,24 +481,20 @@ function zoomEnd(evt) { pt2 = evtPosition(evt); // assume a click if the area is too small (up to 3 x 3 pixel) - var clickArea = getRect(pt1, pt2).getArea(); - if (clickArea <= MIN_AREA_SIZE) return stopEvent(evt); + var clickRect = getRect(pt1, pt2); + if (clickRect.getArea() <= MIN_AREA_SIZE) return stopEvent(evt); // hide zoom div showElement(zoomdiv, false); showElement(overlay, false); - // unregister move events - unregisterEvent("mousemove", overlay, zoomMove); - unregisterEvent("mousemove", zoomdiv, zoomMove); - unregisterEvent("mousemove", elemScaler, zoomMove); - // unregister drag events - unregisterEvent("mouseup", overlay, zoomEnd); - unregisterEvent("mouseup", zoomdiv, zoomEnd); - unregisterEvent("mouseup", elemScaler, zoomMove); + // unregister events + unregisterEvent("mousemove", document, zoomMove); + unregisterEvent("mouseup", document, zoomMove); // calc offsets + clickRect.clipTo(picRect); var area = getRect( // FIX ME: liefert negative x/y Werte, wenn hmir/vmir=1 - dlTrafo.invtransform(pt1), - dlTrafo.invtransform(pt2) + dlTrafo.invtransform(clickRect.getPt1()), + dlTrafo.invtransform(clickRect.getPt2()) ); setParameter("wx", cropFloat(area.x)); setParameter("wy", cropFloat(area.y)); @@ -514,8 +510,10 @@ // mouse move handler function zoomMove(evt) { pt2 = evtPosition(evt); + var rect = getRect(pt1, pt2); + rect.clipTo(picRect); // update zoom div - moveElement(zoomdiv, getRect(pt1, pt2)); + moveElement(zoomdiv, rect); return stopEvent(evt); } @@ -553,52 +551,51 @@ } -function moveCenter() { +function moveCenter(on) { // move visible area so that it's centered around the clicked point - if ( (dlArea.width == 1.0) && (dlArea.height == 1.0) ) { - // nothing to do - return; - } + if (isFullArea()) return; // nothing to do + // starting event capture + if (on) registerEvent("mousedown", scalerImg, moveCenterEvent); + else unregisterEvent("mousedown", scalerImg, moveCenterEvent); window.focus(); +} - function moveCenterEvent(evt) { - // move to handler - var pt = dlTrafo.invtransform(evtPosition(evt)); - var newarea = new Rectangle( - pt.x - 0.5 * dlArea.width, - pt.y - 0.5 * dlArea.height, - dlArea.width, - dlArea.height - ); - newarea.stayInside(dlMaxArea); - // newarea = dlMaxArea.fit(newarea); - // debugProps(newarea, "newarea"); - // debugProps(dlArea, "dlArea"); - if (newarea.equals(dlArea)) return; // keep event handler - unregisterEvent("mousedown", elemScaler, moveCenterEvent); - // set parameters - setParamFromArea(newarea); - parseArea(); - display(); - } - - // starting event capture - registerEvent("mousedown", elemScaler, moveCenterEvent); +function moveCenterEvent(evt) { + // move to handler + var pt = dlTrafo.invtransform(evtPosition(evt)); + var newarea = new Rectangle( + pt.x - 0.5 * dlArea.width, + pt.y - 0.5 * dlArea.height, + dlArea.width, + dlArea.height + ); + newarea.stayInside(dlMaxArea); + // newarea = dlMaxArea.fit(newarea); + // debugProps(newarea, "newarea"); + // debugProps(dlArea, "dlArea"); + if (newarea.equals(dlArea)) return; // keep event handler + unregisterEvent("mousedown", scalerImg, moveCenterEvent); + // set parameters + setParamFromArea(newarea); + parseArea(); + display(); } function isFullArea(area) { if (!area) area = dlArea; return ((area.width == 1.0) && (area.height == 1.0)); - } +} function canMove(movx, movy) { if (isFullArea()) return false; + var x2 = dlArea.x + dlArea.width; + var y2 = dlArea.y + dlArea.height; // debugProps(dlArea); return ((movx < 0) && (dlArea.x > 0)) - || ((movy < 0) && (dlArea.y > 0)) - || ((movx > 0) && (dlArea.x + dlArea.width < 1.0)) - || ((movy > 0) && (dlArea.y + dlArea.height < 1.0)) - } + || ((movx > 0) && (x2 < 1.0)) + || ((movy < 0) && (dlArea.y > 0)) + || ((movy > 0) && (y2 < 1.0)) +} function moveBy(movx, movy) { // move visible area by movx and movy (in units of ww, wh) @@ -725,11 +722,13 @@ if (!show) return; alert("About Digilib - dialog missing in HTML code!" + "\nDigilib Version: " + digilibVersion + + "\JSP Version: " + jspVersion + "\ndlLib Version: " + dllibVersion + "\nbaseLib Version: " + baseLibVersion); return; } document.getElementById("digilib-version").innerHTML = "Digilib Version: " + digilibVersion; + document.getElementById("jsp-version").innerHTML = "JSP Version: " + jspVersion; document.getElementById("baselib-version").innerHTML = "baseLib Version: " + baseLibVersion; document.getElementById("dllib-version").innerHTML = "dlLib Version: " + dllibVersion; showElement(elem, show); @@ -738,7 +737,7 @@ function loadBirdImage() { var img = getElement("bird-image"); var src = "../servlet/Scaler?" - + getQueryString(PARAM_FILE | PARAM_MODE) + + getQueryString(PARAM_FILE) + "&dw=" + BIRD_MAXX + "&dh=" + BIRD_MAXY; img.src = src; @@ -749,12 +748,14 @@ var startPos; // anchor for dragging var newRect; // position after drag var birdImg = getElement("bird-image"); + var birdArea = getElement("bird-area"); + var overlay = getElement("overlay"); showElement(birdImg, show); - var birdArea = getElement("bird-area"); - // dont show selector if area is full size + // dont show selector if area has full size if (!show || isFullArea()) { // hide area showElement(birdArea, false); + showElement(overlay, false); return; }; var birdImgRect = getElementRect(birdImg); @@ -768,17 +769,19 @@ birdImgRect.height * area.height ); moveElement(birdArea, birdAreaRect); - showElement(birdArea, show); - registerEvent("mousedown", birdArea, birdAreaStartDrag); + showElement(birdArea, true); + moveElement(overlay, birdImgRect); + showElement(overlay, true); + registerEvent("mousedown", overlay, birdAreaStartDrag); + registerEvent("mousedown", birdImg, birdAreaStartDrag); function birdAreaStartDrag(evt) { // mousedown handler: start drag startPos = evtPosition(evt); - registerEvent("mousemove", birdArea, birdAreaMove); - registerEvent("mousemove", birdImg, birdAreaMove); - registerEvent("mouseup", birdArea, birdAreaEndDrag); - registerEvent("mouseup", birdImg, birdAreaEndDrag); - + unregisterEvent("mousedown", overlay, birdAreaStartDrag); + unregisterEvent("mousedown", birdImg, birdAreaStartDrag); + registerEvent("mousemove", document, birdAreaMove); + registerEvent("mouseup", document, birdAreaEndDrag); // debugProps(getElementRect(bird)) return stopEvent(evt); } @@ -803,16 +806,15 @@ function birdAreaEndDrag(evt) { // mouseup handler: reload page - unregisterEvent("mousemove", birdArea, birdAreaMove); - unregisterEvent("mouseup", birdArea, birdAreaEndDrag); - unregisterEvent("mousemove", birdImg, birdAreaMove); - unregisterEvent("mouseup", birdImg, birdAreaEndDrag); + unregisterEvent("mousemove", document, birdAreaMove); + unregisterEvent("mouseup", document, birdAreaEndDrag); + showElement(overlay, false); + if (newRect == null) { // no movement happened + startPos = birdAreaRect.getCenter(); + birdAreaMove(evt); // set center to click position + } setParameter("wx", cropFloat((newRect.x - birdImgRect.x) / birdImgRect.width)); setParameter("wy", cropFloat((newRect.y - birdImgRect.y) / birdImgRect.height)); - // width and height parameters remain the same - // setParameter("ww", cropFloat(newRect.width / birdImgRect.width)); - // setParameter("ww", cropFloat(newRect.height / birdImgRect.height)); - // parseArea(); // why? // zoomed is always fit setParameter("ws", 1); display(); @@ -827,11 +829,11 @@ } function showArrows() { - if (defined(picElem.complete) && !picElem.complete && !browserType.isN4 ) { + if (defined(scalerImg.complete) && !scalerImg.complete && !browserType.isN4 ) { setTimeout("showArrows()", 100); return; } - var r = getElementRect(picElem); + var r = getElementRect(scalerImg); showArrow('up', new Rectangle(r.x, r.y, r.width, ARROW_WIDTH), canMove(0, -1) @@ -850,3 +852,66 @@ ); } +function calibrate(direction) { + // calibrate screen + var startPos; // anchor for dragging + var newRect; // position after drag + var calDiv = getElement("calibration"); + var overlay = getElement("overlay"); + moveElement(overlay, getWinRect()); + showElement(overlay, true); + var xDir = direction == "x"; + moveCenter(false); + registerEvent("mousedown", document, calibrationStartDrag); + + function calibrationStartDrag(evt) { + // mousedown handler: start drag + startPos = evtPosition(evt); + unregisterEvent("mousedown", document, calibrationStartDrag); + registerEvent("mousemove", document, calibrationMove); + registerEvent("mouseup", document, calibrationEndDrag); + registerEvent("mousemove", calDiv, calibrationMove); + registerEvent("mouseup", calDiv, calibrationEndDrag); + newRect = new Rectangle( + startPos.x, + startPos.y, + xDir ? 1 : CALIBRATION_WIDTH, + xDir ? CALIBRATION_WIDTH : 1 + ); + // stay within image + moveElement(calDiv, newRect); + showElement(calDiv, true); + // debugProps(getElementRect(bird)) + return stopEvent(evt); + } + + function calibrationMove(evt) { + // mousemove handler: drag + var pos = evtPosition(evt); + var dx = (xDir) ? pos.x - startPos.x : CALIBRATION_WIDTH; + var dy = (xDir) ? CALIBRATION_WIDTH : pos.y - startPos.y; + // move birdArea div, keeping size + newRect = new Rectangle(startPos.x, startPos.y, dx, dy); + // stay within image + moveElement(calDiv, newRect); + showElement(calDiv, true); + return stopEvent(evt); + } + + function calibrationEndDrag(evt) { + // mouseup handler: calibrate + unregisterEvent("mousemove", document, calibrationMove); + unregisterEvent("mouseup", document, calibrationEndDrag); + unregisterEvent("mousemove", calDiv, calibrationMove); + unregisterEvent("mouseup", calDiv, calibrationEndDrag); + showElement(calDiv, false); + showElement(overlay, false); + moveCenter(true); + + // TODO: calculate ... + return stopEvent(evt); + } + } + +// :tabSize=4:indentSize=4:noTabs=true: +