ECHO_content/ECHO_draw.zpt - view - 1.1

Return to ECHO_draw.zpt CVS log

Up to [Repository] / ECHO_content

File: [Repository] / ECHO_content / Attic / ECHO_draw.zpt
Revision 1.1: download - view: text, annotated - select for diffs - revision graph
Tue Nov 25 11:19:47 2003 UTC (20 years, 6 months ago) by casties
Branches: MAIN
CVS tags: HEAD

Initial revision

<html>
<head>
<script type="text/javascript">
<!-- 

var 
	Selection, 
	Coords, 
	Red,
	Img,
	state, p1, p2;

function Init() {
	Selection = -1;
	state = 0;
	Coords = new Array();
	Red = new getObj("red");
	Img = new getObj("overview");
	installHandlers();
}

function installHandlers() { 
// event handler für Img installieren
//	Img.obj.addEventListener("mousemove", onMouseMove, true);		
	Img.obj.addEventListener("mousedown", Click, true);		
// event handler für Red installieren
//	Red.obj.addEventListener("mousemove", onMouseMove, true);		
	Red.obj.addEventListener("mousedown", Click, true);		
};

function calcX(obj) {
	if (!obj) { obj = this.obj };
	var curleft = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) {
			curleft += obj.offsetLeft;
			obj = obj.offsetParent;
			};
		}
	else if (obj.x) { curleft += obj.x; };
	return curleft;
}

function calcY(obj) {
	if (!obj) { obj = this.obj };
	var curtop = 0;
	if (obj.offsetParent) {
		while (obj.offsetParent) { 
			curtop += obj.offsetTop;
			obj = obj.offsetParent;
			};
		}
	else if (obj.y) { curtop += obj.y; };
	return curtop;
}

function getObj(name) {
	if (document.getElementById) {
		this.obj = document.getElementById(name);
		this.style = document.getElementById(name).style;
		}
 	else if (document.all) {
		this.obj = document.all[name];
		this.style = document.all[name].style;
		}
 	else if (document.layers) {
		this.obj = document.layers[name];
		this.style = document.layers[name];
		};
	this.getX = calcX;
	this.getY = calcY;
	this.x = this.getX();
	this.y = this.getY();
	this.w = this.obj.offsetWidth;
	this.h = this.obj.offsetHeight;
	this.area = this.w * this.h;
}

function ShowRedFrame(spot, img, fx, fy, fw, fh) {
	with (spot.style) {
		left = img.x + fx * img.w;
		top  = img.y + fy * img.h;
		width  = fw * img.w;
		height = fh * img.h;
		visibility = 'visible';
		};
}

function NoRedFrame(spot) {
	with (spot.style) {
		left   = 0;
		top    = 0;
		width  = 0;
		height = 0;
		visibility = 'hidden';
		};
}


function Point(event) {
	this.pageX = parseInt(event.pageX);
	this.pageY = parseInt(event.pageY);
	this.x = this.pageX - parseInt(Img.x);
	this.y = this.pageY - parseInt(Img.y);
	return this;
}

function DrawFrame() { 
	with (Red.style) {
		left = Math.min(p1.x, p2.x) + Img.x;
		top = Math.min(p1.y, p2.y) + Img.y; 
		width  = Math.abs(p1.x - p2.x);
		height = Math.abs(p1.y - p2.y);
		visibility = 'visible';
		};
}

function CoordsStr() {
	var imW = Img.w;
	var imH = Img.h;
	var cx = Math.min(p1.x,  p2.x)/imW;
	var cy = Math.min(p1.y,  p2.y)/imH;
	var cw = Math.abs(p1.x - p2.x)/imW;
	var ch = Math.abs(p1.y - p2.y)/imH;
	return (
		cx.toFixed(4) + ',' +
		cy.toFixed(4) + ',' +
		cw.toFixed(4) + ',' +
		ch.toFixed(4) );
}

function Move(event) {
	p2 = new Point(event);
	DrawFrame();
}	
		
function Click(event) {
	if (state == 0) {
		state = 1;
		p1 = new Point(event);
		p2 = p1;
		Red.obj.addEventListener("mousemove", Move, true);		
		Img.obj.addEventListener("mousemove", Move, true);		
	} else {
		state = 0;
		p2 = new Point(event);
		Red.obj.removeEventListener("mousemove", Move, true);		
		Img.obj.removeEventListener("mousemove", Move, true);		
	}
	DrawFrame();
	document.form.coordstr.value = CoordsStr();
}
		
function Coord(name, element, cx, cy, cw, ch) {
// berechnet aus DIGLIB Koordinaten (0.0 - 1.0) Pixel-Koordinaten relativ zum tag "element"
	var OW = element.obj.offsetWidth;
	var OH = element.obj.offsetHeight;
	this.element = element;
	this.link = new getObj(name);
	this.linkname = name;
	this.linkstyle = this.link.style;
	this.cx = cx;
	this.cy = cy;
	this.cw = cw;
	this.ch = ch;
	this.x = cx * OW;
	this.y = cy * OH;
	this.w = cw * OW;
	this.h = ch * OH;
	this.area = this.h * this.w;
return this;
}	

function inCoords(coord, p) {
// liegt Punkt "p" im Rechteckfeld "coord"?
with (coord) {
	return (
		(p.x >= x) && 
		(p.y >= y) && 
		(p.x <= x + w) && 
		(p.y <= y + h)); 
	};
}

function Highlight(coords, nr, high) {
// selektiert/delektiert Rechteckfeld und Link im Array "coords", Index "nr"
if (nr == -1) { NoRedFrame(Red); return };
with (coords[nr]) {
	if (high) { 
		ShowRedFrame(Red, element, cx, cy, cw, ch);
		linkstyle.backgroundColor = '#f0dfdf';
		}
	else {	linkstyle.backgroundColor = ''; };
	};
}
		
function getCoords(event, element, coords) {
// "mousemove" event handler; berechnet kleinstes Rechteckfeld unter dem Mauszeiger 
// setzt "Selection" als Index in das Array "coords"
var p = new Point(event, element);
var AR = element.area;
var i = 0;
	Highlight(coords, Selection, undefined); // unselect last index
	Selection = -1;
	while (i < coords.length) {
		var coord = coords[i];
		if (inCoords(coord, p)) {
			var ar = coord.area;
			if (ar < AR) { AR = ar; Selection = i };
			}
		i += 1;
		};
	Highlight(coords, Selection, 1);  // select new index
}

function Link() {
// Datensatz des selektierten Rechteckfelds in den Browser laden
	if (Selection != -1) {
		window.location.href = Coords[Selection].linkname;
		};
}


function onMouseMove(event) { 
	getCoords(event, Img, Coords); 
}




//-->
</script>
</head>
<body onload="Init()">
<form id="form" name="form" method="post" action="ECHO_enterCoords">
<input type="text" id="coordstr" name="coordstr">
<input type="submit">
</form>
<span tal:repeat="coord python:here.coords" tal:replace="coord"/>
<img id="overview" tal:attributes="src python:here.aq_parent.overview.getId()">
<div id="red" style="position: absolute; top: 0; left: 0; width: 0; height: 0; background: url(red.gif); visibility: visible;">
</div>
</body>
</html>

FreeBSD-CVSweb <freebsd-cvsweb@FreeBSD.org>