|
792
|
1 /** optional digilib regions plugin
|
|
|
2
|
|
|
3 markup a digilib image with rectangular regions
|
|
|
4
|
|
|
5 TODO:
|
|
|
6 - store region in params/cookie, regarding zoom, mirror, rotation (like marks)
|
|
|
7 - set regions programmatically
|
|
|
8 - read regions from params/cookie and display
|
|
|
9 - backlink mechanism
|
|
|
10 - don't write to data.settings?
|
|
|
11 */
|
|
|
12
|
|
|
13 (function($) {
|
|
|
14 // the data object passed by digilib
|
|
|
15 var data;
|
|
|
16 var buttons;
|
|
|
17 var fn;
|
|
|
18 var geom;
|
|
|
19
|
|
|
20 var buttons = {
|
|
|
21 addregion : {
|
|
|
22 onclick : "setRegion",
|
|
|
23 tooltip : "set a region",
|
|
|
24 icon : "addregion.png"
|
|
|
25 },
|
|
|
26 delregion : {
|
|
|
27 onclick : "removeRegion",
|
|
|
28 tooltip : "delete the last region",
|
|
|
29 icon : "delregion.png"
|
|
|
30 },
|
|
|
31 regions : {
|
|
|
32 onclick : "toggleRegions",
|
|
|
33 tooltip : "show or hide regions",
|
|
|
34 icon : "regions.png"
|
|
|
35 },
|
|
|
36 regioninfo : {
|
|
|
37 onclick : "infoRegions",
|
|
|
38 tooltip : "information about regions",
|
|
|
39 icon : "regioninfo.png"
|
|
|
40 }
|
|
|
41 };
|
|
|
42 var regionSet = ['addregion', 'delregion', 'regions', 'regioninfo', 'lessoptions'];
|
|
|
43
|
|
|
44 var actions = {
|
|
|
45 // define a region interactively with two clicked points
|
|
|
46 "setRegion" : function(data) {
|
|
|
47 $elem = data.$elem;
|
|
|
48 $scaler = data.$scaler;
|
|
|
49 var pt1, pt2;
|
|
|
50 var $regionDiv = $('<div class="region" style="display:none"/>');
|
|
|
51 $regionDiv.attr("id", "region" + data.regions.length);
|
|
|
52 $elem.append($regionDiv);
|
|
|
53 var picRect = geom.rectangle($scaler);
|
|
|
54
|
|
|
55 var regionStart = function (evt) {
|
|
|
56 pt1 = geom.position(evt);
|
|
|
57 // setup and show zoom div
|
|
|
58 pt1.adjustDiv($regionDiv);
|
|
|
59 $regionDiv.width(0).height(0);
|
|
|
60 $regionDiv.show();
|
|
|
61 // register events
|
|
|
62 $elem.bind("mousemove.dlRegion", regionMove);
|
|
|
63 $elem.bind("mouseup.dlRegion", regionEnd);
|
|
|
64 return false;
|
|
|
65 };
|
|
|
66
|
|
|
67 // mouse move handler
|
|
|
68 var regionMove = function (evt) {
|
|
|
69 pt2 = geom.position(evt);
|
|
|
70 var rect = geom.rectangle(pt1, pt2);
|
|
|
71 rect.clipTo(picRect);
|
|
|
72 // update zoom div
|
|
|
73 rect.adjustDiv($regionDiv);
|
|
|
74 return false;
|
|
|
75 };
|
|
|
76
|
|
|
77 // mouseup handler: end moving
|
|
|
78 var regionEnd = function (evt) {
|
|
|
79 pt2 = geom.position(evt);
|
|
|
80 // assume a click and continue if the area is too small
|
|
|
81 var clickRect = geom.rectangle(pt1, pt2);
|
|
|
82 if (clickRect.getArea() <= 5) return false;
|
|
|
83 // unregister events
|
|
|
84 $elem.unbind("mousemove.dlRegion", regionMove);
|
|
|
85 $elem.unbind("mouseup.dlRegion", regionEnd);
|
|
|
86 // clip and transform
|
|
|
87 clickRect.clipTo(picRect);
|
|
|
88 clickRect.adjustDiv($regionDiv);
|
|
|
89 data.regions.push($regionDiv);
|
|
|
90 // fn.redisplay(data);
|
|
|
91 return false;
|
|
|
92 };
|
|
|
93
|
|
|
94 // clear old handler (also ZoomDrag)
|
|
|
95 $scaler.unbind('.dlRegion');
|
|
|
96 $elem.unbind('.dlRegion');
|
|
|
97 // bind start zoom handler
|
|
|
98 $scaler.one('mousedown.dlRegion', regionStart);
|
|
|
99 },
|
|
|
100
|
|
|
101 // remove the last added region
|
|
|
102 "removeRegion" : function (data) {
|
|
|
103 var $regionDiv = data.regions.pop();
|
|
|
104 $regionDiv.remove();
|
|
|
105 // fn.redisplay(data);
|
|
|
106 },
|
|
|
107
|
|
|
108 // add a region programmatically
|
|
|
109 "addRegion" : function(data, pos, url) {
|
|
|
110 // TODO: backlink mechanism
|
|
|
111 if (pos.length === 4) {
|
|
|
112 // TODO: trafo
|
|
|
113 var $regionDiv = $('<div class="region" style="display:none"/>');
|
|
|
114 $regionDiv.attr("id", "region" + i);
|
|
|
115 var regionRect = geom.rectangle(pos[0], pos[1], pos[2], pos[3]);
|
|
|
116 regionRect.adjustDiv($regionDiv);
|
|
|
117 if (!data.regions) {
|
|
|
118 data.regions = [];
|
|
|
119 }
|
|
|
120 data.regions.push($regionDiv);
|
|
|
121 }
|
|
|
122 }
|
|
|
123 };
|
|
|
124
|
|
|
125 var addRegion = actions.addRegion;
|
|
|
126
|
|
|
127 var realizeRegions = function (data) {
|
|
|
128 // create regions from parameters
|
|
|
129 var settings = data.settings;
|
|
|
130 var rg = settings.rg;
|
|
|
131 var regions = rg.split(",");
|
|
|
132 for (var i = 0; i < regions.length ; i++) {
|
|
|
133 var pos = regions.split("/", 4);
|
|
|
134 // TODO: backlink mechanism
|
|
|
135 var url = paramString.match(/http.*$/);
|
|
|
136 addRegion(data, pos, url);
|
|
|
137 }
|
|
|
138 };
|
|
|
139
|
|
|
140 // display current regions
|
|
|
141 var renderRegions = function (data) {
|
|
|
142 var regions = data.regions;
|
|
|
143 for (var i = 0; i < regions.length; i++) {
|
|
|
144 var region = regions[i];
|
|
|
145 if (data.zoomArea.containsPosition(region)) {
|
|
|
146 var rpos = data.imgTrafo.transform(region);
|
|
|
147 console.debug("renderRegions: rpos=", rpos);
|
|
|
148 // create region
|
|
|
149 var $regionDiv = $('<div class="region" style="display:none"/>');
|
|
|
150 $regionDiv.attr("id", "region" + data.regions.length);
|
|
|
151 $elem.append($regionDiv);
|
|
|
152 rpos.adjustDiv($regionDiv);
|
|
|
153 }
|
|
|
154 }
|
|
|
155 };
|
|
|
156
|
|
|
157 var serializeRegions = function (data) {
|
|
|
158 if (data.regions) {
|
|
|
159 settings.rg = '';
|
|
|
160 for (var i = 0; i < data.regions.length; i++) {
|
|
|
161 if (i) {
|
|
|
162 settings.rg += ',';
|
|
|
163 }
|
|
|
164 settings.rg +=
|
|
|
165 cropFloat(data.regions[i].x).toString() + '/' +
|
|
|
166 cropFloat(data.regions[i].y).toString() + '/' +
|
|
|
167 cropFloat(data.regions[i].width).toString() + '/' +
|
|
|
168 cropFloat(data.regions[i].height).toString();
|
|
|
169 }
|
|
|
170 }
|
|
|
171 };
|
|
|
172
|
|
|
173 // export constructor functions to digilib plugin
|
|
|
174 var init = function (digilibdata) {
|
|
|
175 console.log('initialising regions plugin. data:', digilibdata);
|
|
|
176 data = digilibdata;
|
|
|
177 data.regions = [];
|
|
|
178 // setup geometry object
|
|
|
179 geom = data.plugins.geometry.init();
|
|
|
180 // add buttons and actions from this plugin
|
|
|
181 $.extend(this.buttons, buttons);
|
|
|
182 $.extend(this.actions, actions);
|
|
|
183 var buttonSettings = data.settings.buttonSettings.fullscreen;
|
|
|
184 // configure buttons through digilib "regionSet" option
|
|
|
185 var buttonSet = data.settings.regionSet || regionSet;
|
|
|
186 // set regionSet to [] or '' for no buttons (when showing regions only)
|
|
|
187 if (buttonSet.length && buttonSet.length > 0) {
|
|
|
188 buttonSettings['regionSet'] = buttonSet;
|
|
|
189 buttonSettings.buttonSets.push('regionSet');
|
|
|
190 }
|
|
|
191 fn = this.fn;
|
|
|
192 // console.log(data.settings.buttonSettings.fullscreen.buttonSets);
|
|
|
193 return {
|
|
|
194 };
|
|
|
195 };
|
|
|
196 if ($.fn.digilib == null) {
|
|
|
197 $.error("jquery.digilib.regions must be loaded after jquery.digilib!");
|
|
|
198 } else {
|
|
|
199 $.fn.digilib('plugin', {name : 'regions', init : init});
|
|
|
200 }
|
|
|
201 })(jQuery);
|
