Annotation of ECHO_content/ECHO_graphicalOverview.py, revision 1.4
1.1 dwinter 1: javaScriptMain="""
1.2 casties 2: //"
3: var Selection;
4: var Coords;
5: var Arrows;
6: var Red;
7: var Img;
8: var state, p1, p2;
1.1 dwinter 9:
1.4 ! casties 10: // fixing Array.push
! 11: if (! Array.prototype.push) {
! 12: Array.prototype.push = function(val) {
! 13: this[this.length] = val;
! 14: }
! 15: }
! 16:
1.1 dwinter 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:
1.2 casties 84: function ShowArrow(spot, img, fx, fy, fw, fh) {
85: with (spot.style) {
86: left = img.x + fx * img.w - 0.5 * width;
87: top = img.y + fy * img.h - 0.5 * height;
88: //width = fw * img.w;
89: //height = fh * img.h;
90: visibility = 'visible';
91: };
92: }
93:
1.1 dwinter 94: function NoRedFrame(spot) {
95: with (spot.style) {
96: left = 0;
97: top = 0;
98: width = 0;
99: height = 0;
100: visibility = 'hidden';
101: };
102: }
103:
104:
105: function Point(event) {
1.4 ! casties 106: var x, y;
! 107: if (event) {
! 108: // Netscape
! 109: x = parseInt(event.pageX);
! 110: y = parseInt(event.pageY);
! 111: } else {
! 112: // IE4
! 113: x = parseInt(window.event.clientX);
! 114: y = parseInt(window.event.clientY);
! 115: }
! 116: this.pageX = x;
! 117: this.pageY = y;
! 118: this.x = this.pageX - parseInt(Img.x);
! 119: this.y = this.pageY - parseInt(Img.y);
! 120: return this;
1.1 dwinter 121: }
122:
123: function DrawFrame() {
124: with (red_div.style) {
125: left = Math.min(p1.x, p2.x) + Img.x;
126: top = Math.min(p1.y, p2.y) + Img.y;
127: width = Math.abs(p1.x - p2.x);
128: height = Math.abs(p1.y - p2.y);
129: visibility = 'visible';
130: };
131: }
132:
133: function CoordsStr() {
134: var imW = Img.w;
135: var imH = Img.h;
136: var cx = Math.min(p1.x, p2.x)/imW;
137: var cy = Math.min(p1.y, p2.y)/imH;
138: var cw = Math.abs(p1.x - p2.x)/imW;
139: var ch = Math.abs(p1.y - p2.y)/imH;
140: return (
141: cx.toFixed(4) + ',' +
142: cy.toFixed(4) + ',' +
143: cw.toFixed(4) + ',' +
144: ch.toFixed(4) );
145: }
146:
147: function Move(event) {
148: p2 = new Point(event);
149: DrawFrame();
150: }
151:
152: function Click(event) {
153: if (state == 0) {
154: state = 1;
155: p1 = new Point(event);
156: p2 = p1;
157: red_div.obj.addEventListener("mousemove", Move, true);
158: Img.obj.addEventListener("mousemove", Move, true);
159: } else {
160: state = 0;
161: p2 = new Point(event);
162: red_div.obj.removeEventListener("mousemove", Move, true);
163: Img.obj.removeEventListener("mousemove", Move, true);
164: }
165: DrawFrame();
166: document.form.coordstr.value = CoordsStr();
167: }
168:
169: function Coord(name, element, cx, cy, cw, ch) {
170: // berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
171: var OW = element.obj.offsetWidth;
172: var OH = element.obj.offsetHeight;
173: this.element = element;
174: this.link = new getObj(name);
175: this.linkname = name;
176: this.linkstyle = this.link.style;
177: this.cx = cx;
178: this.cy = cy;
179: this.cw = cw;
180: this.ch = ch;
181: this.x = cx * OW;
182: this.y = cy * OH;
183: this.w = cw * OW;
184: this.h = ch * OH;
185: this.area = this.h * this.w;
186: return this;
187: }
188:
189: function inCoords(coord, p) {
190: // liegt Punkt "p" im Rechteckfeld "coord"?
191: with (coord) {
192: return (
193: (p.x >= x) &&
194: (p.y >= y) &&
195: (p.x <= x + w) &&
196: (p.y <= y + h));
197: };
198: }
199:
200: function Highlight(coords, nr, high) {
201: // selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
202: if (nr == -1) { NoRedFrame(Red); return };
203: with (coords[nr]) {
204: if (high) {
205: ShowRedFrame(Red, element, cx, cy, cw, ch);
1.2 casties 206: linkstyle.backgroundColor = '#f08080';
1.1 dwinter 207: }
208: else { linkstyle.backgroundColor = ''; };
209: };
210: }
1.3 casties 211:
1.1 dwinter 212: function getCoords(event, element, coords) {
213: // "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger
214: // setzt "Selection" als Index in das Array "coords"
215: var p = new Point(event, element);
216: var AR = element.area;
217: var i = 0;
1.4 ! casties 218: Highlight(coords, Selection, false); // unselect last index
1.1 dwinter 219: Selection = -1;
220: while (i < coords.length) {
221: var coord = coords[i];
222: if (inCoords(coord, p)) {
223: var ar = coord.area;
224: if (ar < AR) { AR = ar; Selection = i };
225: }
226: i += 1;
227: };
1.4 ! casties 228: Highlight(coords, Selection, true); // select new index
1.1 dwinter 229: }
230:
231: function Link() {
232: // Datensatz des selektierten Rechteckfelds in den Browser laden
233: if (Selection != -1) {
234: window.location.href = Coords[Selection].linkname;
235: };
236: }
237:
238:
239: function onMouseMove(event) {
240: getCoords(event, Img, Coords);
241: }
1.3 casties 242:
243: function getElement(name) {
244: var e;
245: if (document.getElementById) {
246: e = document.getElementById(name);
247: } else if (document.all) {
248: e = document.all[name];
249: } else if (document.layers) {
250: e = document.layers[name];
251: };
252: return e;
253: }
254:
255: function highlightImg(name, highlight) {
256: var e = getElement(name);
257: //alert("highlight: "+e+" = "+highlight);
258: if (highlight) {
259: e.border = 2;
260: } else {
261: e.border = 0;
262: }
263: }
264:
265: function highlightPair(name, highlight) {
266: var img = getElement("i."+name);
267: var link = getElement(name);
268: if (highlight) {
269: img.border = 1;
270: link.style.backgroundColor = '#f08080';
271: } else {
272: img.border = 0;
273: link.style.backgroundColor = '';
274: }
275: }
276:
277:
1.1 dwinter 278: """
279:
280: javaHandler="""
281: function installHandlers() {
282: %s
1.4 ! casties 283: if (Img.obj.addEventListener) {
! 284: // event handler fuer Img installieren
! 285: Img.obj.addEventListener("mousemove", onMouseMove, true);
! 286: Img.obj.addEventListener("mousedown", Link, true);
! 287: // event handler fuer Red installieren
! 288: Red.obj.addEventListener("mousemove", onMouseMove, true);
! 289: Red.obj.addEventListener("mousedown", Link, true);
! 290: } else {
! 291: //Img.obj.captureEvents(Event.MOUSEMOVE);
! 292: Img.obj.onmousemove = onMouseMove;
! 293: //Red.obj.captureEvents(Event.MOUSEMOVE);
! 294: Red.obj.onmousemove = onMouseMove;
! 295: }
1.1 dwinter 296: };
297: """
298:
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