Mercurial > hg > digilib
comparison client/digitallibrary/jquery/jquery.digilib.js @ 640:3f23600c96e5 jquery
set mark works now
setup of image transformation fixed
author | robcast |
---|---|
date | Thu, 20 Jan 2011 12:41:14 +0100 |
parents | 904a722c2149 |
children | 1da6fc6f0bbb |
comparison
equal
deleted
inserted
replaced
638:904a722c2149 | 640:3f23600c96e5 |
---|---|
33 onclick : "javascript:zoomArea()", | 33 onclick : "javascript:zoomArea()", |
34 tooltip : "zoom area", | 34 tooltip : "zoom area", |
35 img : "zoom-area.png" | 35 img : "zoom-area.png" |
36 }, | 36 }, |
37 zoomfull : { | 37 zoomfull : { |
38 onclick : "javascript:zoomFullpage()", | 38 onclick : "zoomFullpage", |
39 tooltip : "view the whole image", | 39 tooltip : "view the whole image", |
40 img : "zoom-full.png" | 40 img : "zoom-full.png" |
41 }, | 41 }, |
42 pagewidth : { | 42 pagewidth : { |
43 onclick : "javascript:zoomFullpage('width')", | 43 onclick : "javascript:zoomFullpage('width')", |
73 onclick : "javascript:resetImage()", | 73 onclick : "javascript:resetImage()", |
74 tooltip : "reset image", | 74 tooltip : "reset image", |
75 img : "reset.png" | 75 img : "reset.png" |
76 }, | 76 }, |
77 mark : { | 77 mark : { |
78 onclick : "javascript:setMark()", | 78 onclick : "setMark", |
79 tooltip : "set a mark", | 79 tooltip : "set a mark", |
80 img : "mark.png" | 80 img : "mark.png" |
81 }, | 81 }, |
82 delmark : { | 82 delmark : { |
83 onclick : "javascript:removeMark()", | 83 onclick : "javascript:removeMark()", |
186 // actions | 186 // actions |
187 'actions' : actions, | 187 'actions' : actions, |
188 // path to button images (must end with a slash) | 188 // path to button images (must end with a slash) |
189 'buttonsImagePath' : '../greyskin/', | 189 'buttonsImagePath' : '../greyskin/', |
190 // actions groups | 190 // actions groups |
191 'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","back","fwd","page","bird","SEP","help","reset","options"], | 191 'actionsStandard' : ["reference","zoomin","zoomout","zoomarea","zoomfull","pagewidth","mark","back","fwd","page","bird","SEP","help","reset","options"], |
192 'actionsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], | 192 'actionsSpecial' : ["mark","delmark","hmir","vmir","rot","brgt","cont","rgb","quality","size","calibrationx","scale","SEP","options"], |
193 'actionsCustom' : [], | 193 'actionsCustom' : [], |
194 // is birdView shown? | 194 // is birdView shown? |
195 'isBirdDivVisible' : false, | 195 'isBirdDivVisible' : false, |
196 // dimensions of bird's eye window | 196 // dimensions of bird's eye window |
226 elemSettings = $.extend({}, settings, queryParams); | 226 elemSettings = $.extend({}, settings, queryParams); |
227 } else { | 227 } else { |
228 elemSettings = $.extend({}, settings, parseImgParams($elem)); | 228 elemSettings = $.extend({}, settings, parseImgParams($elem)); |
229 } | 229 } |
230 // store $(this) element in the settings | 230 // store $(this) element in the settings |
231 elemSettings.digilibRoot = $elem; | |
232 data = { | 231 data = { |
233 target : $elem, | 232 $elem : $elem, |
234 settings : elemSettings, | 233 settings : elemSettings, |
235 queryParams : queryParams | 234 queryParams : queryParams |
236 }; | 235 }; |
237 // store in data element | 236 // store in data element |
238 $elem.data('digilib', data); | 237 $elem.data('digilib', data); |
310 // zoom by a given factor | 309 // zoom by a given factor |
311 zoomBy : function (factor) { | 310 zoomBy : function (factor) { |
312 var $elem = $(this); | 311 var $elem = $(this); |
313 var data = $elem.data('digilib'); | 312 var data = $elem.data('digilib'); |
314 zoomBy(data, factor); | 313 zoomBy(data, factor); |
314 }, | |
315 | |
316 // zoom out to full page | |
317 zoomFullpage : function () { | |
318 var $elem = $(this); | |
319 var data = $elem.data('digilib'); | |
320 data.zoomArea = MAX_ZOOMAREA; | |
321 redisplay(data); | |
322 }, | |
323 | |
324 // set a mark by clicking (or giving a position) | |
325 setMark : function (mpos) { | |
326 var $elem = $(this); | |
327 var data = $elem.data('digilib'); | |
328 if (mpos == null) { | |
329 // interactive | |
330 setMark(data); | |
331 } else { | |
332 // use position | |
333 data.marks.push(pos); | |
334 redisplay(data); | |
335 } | |
315 } | 336 } |
316 }; | 337 }; |
317 | 338 |
318 // sets a key to a value (relative values with +/- if relative=true) | 339 // sets a key to a value (relative values with +/- if relative=true) |
319 var setNumValue = function(settings, key, value) { | 340 var setNumValue = function(settings, key, value) { |
429 // put objects back into parameters | 450 // put objects back into parameters |
430 var packParams = function (data) { | 451 var packParams = function (data) { |
431 var settings = data.settings; | 452 var settings = data.settings; |
432 // zoom area | 453 // zoom area |
433 if (data.zoomArea) { | 454 if (data.zoomArea) { |
434 settings.wx = data.zoomArea.x; | 455 settings.wx = cropFloat(data.zoomArea.x); |
435 settings.wy = data.zoomArea.y; | 456 settings.wy = cropFloat(data.zoomArea.y); |
436 settings.ww = data.zoomArea.width; | 457 settings.ww = cropFloat(data.zoomArea.width); |
437 settings.wh = data.zoomArea.height; | 458 settings.wh = cropFloat(data.zoomArea.height); |
438 } | 459 } |
439 // marks | 460 // marks |
440 if (data.marks) { | 461 if (data.marks) { |
441 var ma = []; | 462 var ma = []; |
442 for (var i = 0; i < data.marks.length; i++) { | 463 for (var i = 0; i < data.marks.length; i++) { |
473 }; | 494 }; |
474 | 495 |
475 // creates HTML structure for digilib in elem | 496 // creates HTML structure for digilib in elem |
476 var setupScalerDiv = function (data) { | 497 var setupScalerDiv = function (data) { |
477 var settings = data.settings; | 498 var settings = data.settings; |
478 var $elem = data.target; | 499 var $elem = data.$elem; |
479 var $img; | 500 var $img; |
480 if (settings.interactionMode === 'fullscreen') { | 501 if (settings.interactionMode === 'fullscreen') { |
481 // fullscreen | 502 // fullscreen |
482 var imgSize = getFullscreenImgSize($elem); | 503 var imgSize = getFullscreenImgSize($elem); |
483 settings.dw = imgSize.width; | 504 settings.dw = imgSize.width; |
507 $img.load(scalerImgLoadedHandler(data)); | 528 $img.load(scalerImgLoadedHandler(data)); |
508 }; | 529 }; |
509 | 530 |
510 // creates HTML structure for buttons in elem | 531 // creates HTML structure for buttons in elem |
511 var setupButtons = function (data, actionGroup) { | 532 var setupButtons = function (data, actionGroup) { |
512 var $elem = data.target; | 533 var $elem = data.$elem; |
513 var settings = data.settings; | 534 var settings = data.settings; |
514 if (settings.interactionMode === 'fullscreen') { | 535 if (settings.interactionMode === 'fullscreen') { |
515 // fullscreen -- create new | 536 // fullscreen -- create new |
516 var $buttonsDiv = $('<div class="buttons"></div>'); | 537 var $buttonsDiv = $('<div class="buttons"></div>'); |
517 $elem.append($buttonsDiv); | 538 $elem.append($buttonsDiv); |
553 return $buttonsDiv; | 574 return $buttonsDiv; |
554 }; | 575 }; |
555 | 576 |
556 // creates HTML structure for the bird's eye view in elem | 577 // creates HTML structure for the bird's eye view in elem |
557 var setupBirdDiv = function (data) { | 578 var setupBirdDiv = function (data) { |
558 var $elem = data.target; | 579 var $elem = data.$elem; |
559 var settings = data.settings; | 580 var settings = data.settings; |
560 // use only the relevant parameters | 581 // use only the relevant parameters |
561 var keys = ['fn','pn','dw','dh']; | 582 var keys = ['fn','pn','dw','dh']; |
562 var birdSettings = $.extend({}, settings, settings.birdDivOptions); | 583 var birdSettings = $.extend({}, settings, settings.birdDivOptions); |
563 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); | 584 var birdUrl = settings.scalerBaseUrl + '?' + getParamString(birdSettings, keys); |
577 data.$birdDiv = $birdviewDiv; | 598 data.$birdDiv = $birdviewDiv; |
578 }; | 599 }; |
579 | 600 |
580 // creates HTML structure for the about view in elem | 601 // creates HTML structure for the about view in elem |
581 var setupAboutDiv = function (data) { | 602 var setupAboutDiv = function (data) { |
582 var $elem = data.target; | 603 var $elem = data.$elem; |
583 var settings = data.settings; | 604 var settings = data.settings; |
584 var $aboutDiv = $('<div class="about" style="display:none"/>'); | 605 var $aboutDiv = $('<div class="about" style="display:none"/>'); |
585 var $header = $('<p>Digilib Graphic Viewer</p>'); | 606 var $header = $('<p>Digilib Graphic Viewer</p>'); |
586 var $link = $('<a/>'); | 607 var $link = $('<a/>'); |
587 var $logo = $('<img class="logo" title="digilib"/>'); | 608 var $logo = $('<img class="logo" title="digilib"/>'); |
617 }; | 638 }; |
618 | 639 |
619 // returns function for load event of scaler img | 640 // returns function for load event of scaler img |
620 var scalerImgLoadedHandler = function (data) { | 641 var scalerImgLoadedHandler = function (data) { |
621 var settings = data.settings; | 642 var settings = data.settings; |
622 var $elem = data.target; | 643 var $elem = data.$elem; |
623 var $img = data.$img; | 644 var $img = data.$img; |
624 | 645 |
625 return function () { | 646 return function () { |
626 console.debug("img loaded! this=", this, " data=", data); | 647 console.debug("img loaded! this=", this, " data=", data); |
627 var area = data.zoomArea; | 648 var area = data.zoomArea; |
628 // create Transform from current area and picsize | 649 // create Transform from current area and picsize |
629 var picpos = $img.offset(); | 650 var picpos = $img.offset(); |
630 var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height()); | 651 var picrect = geom.rectangle(picpos.left, picpos.top, $img.width(), $img.height()); |
631 var trafo = geom.transform(); | 652 var trafo = geom.transform(); |
632 // subtract area offset and size | 653 // subtract area offset and size |
633 trafo.concat(trafo.getTranslation(geom.position(area.x, area.y))); | 654 trafo.concat(trafo.getTranslation(geom.position(- area.x, - area.y))); |
634 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); | 655 trafo.concat(trafo.getScale(geom.size(1/area.width, 1/area.height))); |
635 // scale to screen size | 656 // scale to screen size |
636 trafo.concat(trafo.getScale(picrect)); | 657 trafo.concat(trafo.getScale(picrect)); |
637 trafo.concat(trafo.getTranslation(picrect)); | 658 trafo.concat(trafo.getTranslation(picrect)); |
638 data.imgTrafo = trafo; | 659 data.imgTrafo = trafo; |
645 }; | 666 }; |
646 }; | 667 }; |
647 | 668 |
648 // place marks on the image | 669 // place marks on the image |
649 var renderMarks = function (data) { | 670 var renderMarks = function (data) { |
650 var $elem = data.target; | 671 var $elem = data.$elem; |
651 var marks = data.marks; | 672 var marks = data.marks; |
652 for (var i = 0; i < marks.length; i++) { | 673 for (var i = 0; i < marks.length; i++) { |
653 var mark = marks[i]; | 674 var mark = marks[i]; |
654 if (data.zoomArea.containsPosition(mark)) { | 675 if (data.zoomArea.containsPosition(mark)) { |
655 var mpos = data.imgTrafo.transform(mark); | 676 var mpos = data.imgTrafo.transform(mark); |
660 $mark.offset({ left : mpos.x, top : mpos.y}); | 681 $mark.offset({ left : mpos.x, top : mpos.y}); |
661 } | 682 } |
662 } | 683 } |
663 }; | 684 }; |
664 | 685 |
686 // zooms by the given factor | |
665 var zoomBy = function(data, factor) { | 687 var zoomBy = function(data, factor) { |
666 // zooms by the given factor | |
667 var area = data.zoomArea; | 688 var area = data.zoomArea; |
668 var newarea = area.copy(); | 689 var newarea = area.copy(); |
669 // scale | 690 // scale |
670 newarea.width /= factor; | 691 newarea.width /= factor; |
671 newarea.height /= factor; | 692 newarea.height /= factor; |
675 newarea = MAX_ZOOMAREA.fit(newarea); | 696 newarea = MAX_ZOOMAREA.fit(newarea); |
676 data.zoomArea = newarea; | 697 data.zoomArea = newarea; |
677 redisplay(data); | 698 redisplay(data); |
678 }; | 699 }; |
679 | 700 |
701 // add a mark where clicked | |
702 var setMark = function (data) { | |
703 var $div = data.$elem; | |
704 var $img = data.$img; | |
705 console.debug("setmark"); | |
706 // start event capturing | |
707 $img.one('click.digilib', function (evt) { | |
708 // event handler adding a new mark | |
709 console.debug("setmark.click evt=",evt); | |
710 var mpos = geom.position(evt.pageX, evt.pageY); | |
711 var pos = data.imgTrafo.invtransform(mpos); | |
712 data.marks.push(pos); | |
713 redisplay(data); | |
714 //return stopEvent(evt); | |
715 }); | |
716 }; | |
717 | |
680 // auxiliary function (from Douglas Crockford, A.10) | 718 // auxiliary function (from Douglas Crockford, A.10) |
681 var isNumber = function isNumber(value) { | 719 var isNumber = function isNumber(value) { |
682 return typeof value === 'number' && isFinite(value); | 720 return typeof value === 'number' && isFinite(value); |
683 }; | 721 }; |
684 | 722 |