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