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