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