1: javaScriptMain="""
2: //"
3: var Selection;
4: var Coords;
5: var Arrows;
6: var Red;
7: var Img;
8: var state, p1, p2;
9:
10: // fixing Array.push
11: if (! Array.prototype.push) {
12: Array.prototype.push = function(val) {
13: this[this.length] = val;
14: }
15: }
16:
17: function Init() {
18: Selection = -1;
19: state = 0;
20: Coords = new Array();
21: Red = new getObj("red");
22: Img = new getObj("overview");
23: installHandlers();
24: }
25:
26: function calcX(obj) {
27: if (!obj) { obj = this.obj };
28: var curleft = 0;
29: if (obj.offsetParent) {
30: while (obj.offsetParent) {
31: curleft += obj.offsetLeft;
32: obj = obj.offsetParent;
33: };
34: }
35: else if (obj.x) { curleft += obj.x; };
36: return curleft;
37: }
38:
39: function calcY(obj) {
40: if (!obj) { obj = this.obj };
41: var curtop = 0;
42: if (obj.offsetParent) {
43: while (obj.offsetParent) {
44: curtop += obj.offsetTop;
45: obj = obj.offsetParent;
46: };
47: }
48: else if (obj.y) { curtop += obj.y; };
49: return curtop;
50: }
51:
52: function getObj(name) {
53: if (document.getElementById) {
54: this.obj = document.getElementById(name);
55: this.style = document.getElementById(name).style;
56: }
57: else if (document.all) {
58: this.obj = document.all[name];
59: this.style = document.all[name].style;
60: }
61: else if (document.layers) {
62: this.obj = document.layers[name];
63: this.style = document.layers[name];
64: };
65: this.getX = calcX;
66: this.getY = calcY;
67: this.x = this.getX();
68: this.y = this.getY();
69: this.w = this.obj.offsetWidth;
70: this.h = this.obj.offsetHeight;
71: this.area = this.w * this.h;
72: }
73:
74: function ShowRedFrame(spot, img, fx, fy, fw, fh) {
75: with (spot.style) {
76: left = img.x + fx * img.w;
77: top = img.y + fy * img.h;
78: width = fw * img.w;
79: height = fh * img.h;
80: visibility = 'visible';
81: };
82: }
83:
84: function ShowArrow(spot, img, fx, fy, fw, fh) {
85: var x = img.x + (fx + 0.5 * fw) * img.w - 0.5 * spot.obj.width;
86: var y = img.y + (fy + 0.5 * fh) * img.h - 0.5 * spot.obj.height;
87: spot.style.left = x;
88: spot.style.top = y;
89: spot.style.visibility = 'visible';
90: }
91:
92: function NoRedFrame(spot) {
93: with (spot.style) {
94: left = 0;
95: top = 0;
96: width = 0;
97: height = 0;
98: visibility = 'hidden';
99: };
100: }
101:
102:
103: function Point(event) {
104: var x, y;
105: if (event) {
106: // Netscape
107: x = parseInt(event.pageX);
108: y = parseInt(event.pageY);
109: } else {
110: // IE4
111: x = parseInt(window.event.clientX);
112: y = parseInt(window.event.clientY);
113: }
114: this.pageX = x;
115: this.pageY = y;
116: this.x = this.pageX - parseInt(Img.x);
117: this.y = this.pageY - parseInt(Img.y);
118: return this;
119: }
120:
121: function DrawFrame() {
122: with (red_div.style) {
123: left = Math.min(p1.x, p2.x) + Img.x;
124: top = Math.min(p1.y, p2.y) + Img.y;
125: width = Math.abs(p1.x - p2.x);
126: height = Math.abs(p1.y - p2.y);
127: visibility = 'visible';
128: };
129: }
130:
131: function CoordsStr() {
132: var imW = Img.w;
133: var imH = Img.h;
134: var cx = Math.min(p1.x, p2.x)/imW;
135: var cy = Math.min(p1.y, p2.y)/imH;
136: var cw = Math.abs(p1.x - p2.x)/imW;
137: var ch = Math.abs(p1.y - p2.y)/imH;
138: return (
139: cx.toFixed(4) + ',' +
140: cy.toFixed(4) + ',' +
141: cw.toFixed(4) + ',' +
142: ch.toFixed(4) );
143: }
144:
145: function Move(event) {
146: p2 = new Point(event);
147: DrawFrame();
148: }
149:
150: function Click(event) {
151: if (state == 0) {
152: state = 1;
153: p1 = new Point(event);
154: p2 = p1;
155: red_div.obj.addEventListener("mousemove", Move, true);
156: Img.obj.addEventListener("mousemove", Move, true);
157: } else {
158: state = 0;
159: p2 = new Point(event);
160: red_div.obj.removeEventListener("mousemove", Move, true);
161: Img.obj.removeEventListener("mousemove", Move, true);
162: }
163: DrawFrame();
164: document.form.coordstr.value = CoordsStr();
165: }
166:
167: function Coord(name, element, cx, cy, cw, ch) {
168: // berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
169: var OW = element.obj.offsetWidth;
170: var OH = element.obj.offsetHeight;
171: this.element = element;
172: this.link = new getObj(name);
173: this.linkname = name;
174: this.linkstyle = this.link.style;
175: this.cx = cx;
176: this.cy = cy;
177: this.cw = cw;
178: this.ch = ch;
179: this.x = cx * OW;
180: this.y = cy * OH;
181: this.w = cw * OW;
182: this.h = ch * OH;
183: this.area = this.h * this.w;
184: return this;
185: }
186:
187: function inCoords(coord, p) {
188: // liegt Punkt "p" im Rechteckfeld "coord"?
189: with (coord) {
190: return (
191: (p.x >= x) &&
192: (p.y >= y) &&
193: (p.x <= x + w) &&
194: (p.y <= y + h));
195: };
196: }
197:
198: function Highlight(coords, nr, high) {
199: // selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
200: if (nr == -1) { NoRedFrame(Red); return };
201: with (coords[nr]) {
202: if (high) {
203: ShowRedFrame(Red, element, cx, cy, cw, ch);
204: linkstyle.backgroundColor = '#f08080';
205: }
206: else { linkstyle.backgroundColor = ''; };
207: };
208: }
209:
210: function getCoords(event, element, coords) {
211: // "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger
212: // setzt "Selection" als Index in das Array "coords"
213: var p = new Point(event, element);
214: var AR = element.area;
215: var i = 0;
216: Highlight(coords, Selection, false); // unselect last index
217: Selection = -1;
218: while (i < coords.length) {
219: var coord = coords[i];
220: if (inCoords(coord, p)) {
221: var ar = coord.area;
222: if (ar < AR) { AR = ar; Selection = i };
223: }
224: i += 1;
225: };
226: Highlight(coords, Selection, true); // select new index
227: }
228:
229: function Link() {
230: // Datensatz des selektierten Rechteckfelds in den Browser laden
231: if (Selection != -1) {
232: window.location.href = Coords[Selection].linkname;
233: };
234: }
235:
236:
237: function onMouseMove(event) {
238: getCoords(event, Img, Coords);
239: }
240:
241: function getElement(name) {
242: var e;
243: if (document.getElementById) {
244: e = document.getElementById(name);
245: } else if (document.all) {
246: e = document.all[name];
247: } else if (document.layers) {
248: e = document.layers[name];
249: };
250: return e;
251: }
252:
253: function highlightImg(name, highlight) {
254: var e = getElement(name);
255: //alert("highlight: "+e+" = "+highlight);
256: if (highlight) {
257: e.border = 2;
258: } else {
259: e.border = 0;
260: }
261: }
262:
263: function highlightPair(name, highlight) {
264: var img = getElement("i."+name);
265: var link = getElement(name);
266: //alert("imgstyle: "+img.style);
267: if (highlight) {
268: //img.border = 1;
269: img.style.borderStyle = 'solid';
270: link.style.backgroundColor = '#f08080';
271: } else {
272: //img.border = 0;
273: img.style.borderStyle = 'none';
274: link.style.backgroundColor = '';
275: }
276: }
277:
278:
279: """
280:
281: javaHandler="""
282: function installHandlers() {
283: %s
284: if (Img.obj.addEventListener) {
285: // event handler fuer Img installieren
286: Img.obj.addEventListener("mousemove", onMouseMove, true);
287: Img.obj.addEventListener("mousedown", Link, true);
288: // event handler fuer Red installieren
289: Red.obj.addEventListener("mousemove", onMouseMove, true);
290: Red.obj.addEventListener("mousedown", Link, true);
291: } else {
292: //Img.obj.captureEvents(Event.MOUSEMOVE);
293: Img.obj.onmousemove = onMouseMove;
294: //Red.obj.captureEvents(Event.MOUSEMOVE);
295: Red.obj.onmousemove = onMouseMove;
296: }
297: };
298: """
299:
FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>
![[BACK]](/cvs/cvsweb/icons/back.gif){kind=icon}
Return to ECHO_graphicalOverview.py CVS log ![[TXT]](/cvs/cvsweb/icons/text.gif){kind=icon}
![[DIR]](/cvs/cvsweb/icons/dir.gif){kind=icon}
Up to [Repository] / ECHO_content