Annotation of ECHO_content/ECHO_graphicalOverview.py, revision 1.2
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:
10: function Init() {
11: Selection = -1;
12: state = 0;
13: Coords = new Array();
14: Red = new getObj("red");
15: Img = new getObj("overview");
16: installHandlers();
17: }
18:
19: function calcX(obj) {
20: if (!obj) { obj = this.obj };
21: var curleft = 0;
22: if (obj.offsetParent) {
23: while (obj.offsetParent) {
24: curleft += obj.offsetLeft;
25: obj = obj.offsetParent;
26: };
27: }
28: else if (obj.x) { curleft += obj.x; };
29: return curleft;
30: }
31:
32: function calcY(obj) {
33: if (!obj) { obj = this.obj };
34: var curtop = 0;
35: if (obj.offsetParent) {
36: while (obj.offsetParent) {
37: curtop += obj.offsetTop;
38: obj = obj.offsetParent;
39: };
40: }
41: else if (obj.y) { curtop += obj.y; };
42: return curtop;
43: }
44:
45: function getObj(name) {
46: if (document.getElementById) {
47: this.obj = document.getElementById(name);
48: this.style = document.getElementById(name).style;
49: }
50: else if (document.all) {
51: this.obj = document.all[name];
52: this.style = document.all[name].style;
53: }
54: else if (document.layers) {
55: this.obj = document.layers[name];
56: this.style = document.layers[name];
57: };
58: this.getX = calcX;
59: this.getY = calcY;
60: this.x = this.getX();
61: this.y = this.getY();
62: this.w = this.obj.offsetWidth;
63: this.h = this.obj.offsetHeight;
64: this.area = this.w * this.h;
65: }
66:
67: function ShowRedFrame(spot, img, fx, fy, fw, fh) {
68: with (spot.style) {
69: left = img.x + fx * img.w;
70: top = img.y + fy * img.h;
71: width = fw * img.w;
72: height = fh * img.h;
73: visibility = 'visible';
74: };
75: }
76:
1.2 ! casties 77: function ShowArrow(spot, img, fx, fy, fw, fh) {
! 78: with (spot.style) {
! 79: left = img.x + fx * img.w - 0.5 * width;
! 80: top = img.y + fy * img.h - 0.5 * height;
! 81: //width = fw * img.w;
! 82: //height = fh * img.h;
! 83: visibility = 'visible';
! 84: };
! 85: }
! 86:
1.1 dwinter 87: function NoRedFrame(spot) {
88: with (spot.style) {
89: left = 0;
90: top = 0;
91: width = 0;
92: height = 0;
93: visibility = 'hidden';
94: };
95: }
96:
97:
98: function Point(event) {
99: this.pageX = parseInt(event.pageX);
100: this.pageY = parseInt(event.pageY);
101: this.x = this.pageX - parseInt(Img.x);
102: this.y = this.pageY - parseInt(Img.y);
103: return this;
104: }
105:
106: function DrawFrame() {
107: with (red_div.style) {
108: left = Math.min(p1.x, p2.x) + Img.x;
109: top = Math.min(p1.y, p2.y) + Img.y;
110: width = Math.abs(p1.x - p2.x);
111: height = Math.abs(p1.y - p2.y);
112: visibility = 'visible';
113: };
114: }
115:
116: function CoordsStr() {
117: var imW = Img.w;
118: var imH = Img.h;
119: var cx = Math.min(p1.x, p2.x)/imW;
120: var cy = Math.min(p1.y, p2.y)/imH;
121: var cw = Math.abs(p1.x - p2.x)/imW;
122: var ch = Math.abs(p1.y - p2.y)/imH;
123: return (
124: cx.toFixed(4) + ',' +
125: cy.toFixed(4) + ',' +
126: cw.toFixed(4) + ',' +
127: ch.toFixed(4) );
128: }
129:
130: function Move(event) {
131: p2 = new Point(event);
132: DrawFrame();
133: }
134:
135: function Click(event) {
136: if (state == 0) {
137: state = 1;
138: p1 = new Point(event);
139: p2 = p1;
140: red_div.obj.addEventListener("mousemove", Move, true);
141: Img.obj.addEventListener("mousemove", Move, true);
142: } else {
143: state = 0;
144: p2 = new Point(event);
145: red_div.obj.removeEventListener("mousemove", Move, true);
146: Img.obj.removeEventListener("mousemove", Move, true);
147: }
148: DrawFrame();
149: document.form.coordstr.value = CoordsStr();
150: }
151:
152: function Coord(name, element, cx, cy, cw, ch) {
153: // berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
154: var OW = element.obj.offsetWidth;
155: var OH = element.obj.offsetHeight;
156: this.element = element;
157: this.link = new getObj(name);
158: this.linkname = name;
159: this.linkstyle = this.link.style;
160: this.cx = cx;
161: this.cy = cy;
162: this.cw = cw;
163: this.ch = ch;
164: this.x = cx * OW;
165: this.y = cy * OH;
166: this.w = cw * OW;
167: this.h = ch * OH;
168: this.area = this.h * this.w;
169: return this;
170: }
171:
172: function inCoords(coord, p) {
173: // liegt Punkt "p" im Rechteckfeld "coord"?
174: with (coord) {
175: return (
176: (p.x >= x) &&
177: (p.y >= y) &&
178: (p.x <= x + w) &&
179: (p.y <= y + h));
180: };
181: }
182:
183: function Highlight(coords, nr, high) {
184: // selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
185: if (nr == -1) { NoRedFrame(Red); return };
186: with (coords[nr]) {
187: if (high) {
188: ShowRedFrame(Red, element, cx, cy, cw, ch);
1.2 ! casties 189: linkstyle.backgroundColor = '#f08080';
1.1 dwinter 190: }
191: else { linkstyle.backgroundColor = ''; };
192: };
193: }
194:
195: function getCoords(event, element, coords) {
196: // "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger
197: // setzt "Selection" als Index in das Array "coords"
198: var p = new Point(event, element);
199: var AR = element.area;
200: var i = 0;
201: Highlight(coords, Selection, undefined); // unselect last index
202: Selection = -1;
203: while (i < coords.length) {
204: var coord = coords[i];
205: if (inCoords(coord, p)) {
206: var ar = coord.area;
207: if (ar < AR) { AR = ar; Selection = i };
208: }
209: i += 1;
210: };
211: Highlight(coords, Selection, 1); // select new index
212: }
213:
214: function Link() {
215: // Datensatz des selektierten Rechteckfelds in den Browser laden
216: if (Selection != -1) {
217: window.location.href = Coords[Selection].linkname;
218: };
219: }
220:
221:
222: function onMouseMove(event) {
223: getCoords(event, Img, Coords);
224: }
225: """
226:
227: javaHandler="""
228: function installHandlers() {
229: %s
230: // event handler für Img installieren
231: Img.obj.addEventListener("mousemove", onMouseMove, true);
232: Img.obj.addEventListener("mousedown", Link, true);
233: // event handler für Red installieren
234: Red.obj.addEventListener("mousemove", onMouseMove, true);
235: Red.obj.addEventListener("mousedown", Link, true);
236: };
237: """
238:
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