Gecko [ bestcars.gr ]

Name	Size	Permission
definitions.html	2.49 KB	-rw-r--r--
dynazoom.html	7.29 KB	-rw-r--r--
favicon.ico	2 KB	-rw-r--r--
formatdate.js	12.41 KB	-rw-r--r--
logo-h.png	1.75 KB	-rw-r--r--
logo.png	473 B	-rw-r--r--
querystring.js	1.08 KB	-rw-r--r--
style-1.2.css	3.53 KB	-rw-r--r--
style-new.css	4 KB	-rw-r--r--
style.css	5.23 KB	-rw-r--r--
zoom.js	4.65 KB	-rw-r--r--

Code Editor : dynazoom.html

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<title>Munin: dynamic graph zoom</title>
	<script src="formatdate.js" type="text/javascript"></script>
	<script src="querystring.js" type="text/javascript"></script>

</div>
<table>
<tr>
<td>

</td>
<td>
	Zooming is very easy, it's done in 3 clicks (regular clicks, no drag&amp;drop):
	<ol>
		<li>First click to define the start of zoom.</li>
		<li>Second click to define the ending of zoom.</li>
		<li>Third click inside the defined zone to zoom, outside to cancel the zone.</li>
	</ol>
</td>
</tr>
</table>

<form id="myNewForm" action="">
<table>
	
	<tr>
		<td>Plugin Name <em>(domain/hostname/plugin_name)</em> :</td>
		<td><input type="text" name="plugin_name" size="64" /></td>
	</tr>

<tr>
		<td>Start/Stop of the graph <br/>(format:2005-08-15T15:52:01+0000) <br/><em>(epoch)</em> :</td>
		<td>
			<input type="text" name="start_iso8601" size="24" /> / <input type="text" name="stop_iso8601" size="24" /> <input name="btnMaj" type="button" value="update" /> <br/>

(<input type="text" name="start_epoch" size="10" /> / <input type="text" name="stop_epoch" size="10" />)
		</td>
	</tr>

<tr>
		<td>Limit low/high :</td>
		<td>

<tr>
		<td>Graph size (w/o legend) <em>(pixels)</em>:</td>

// Insert values in the form
var qs = new Querystring();

var form = document.getElementById("myNewForm");
var image = document.getElementById("image");
var divOverlay = document.getElementById("overlayDiv");

form.cgiurl_graph.value = qs.get("cgiurl_graph", "/munin-cgi/munin-cgi-graph");
form.plugin_name.value = qs.get("plugin_name", "localdomain/localhost.localdomain/if_eth0");
form.start_epoch.value = qs.get("start_epoch", "1236561663");
form.stop_epoch.value = qs.get("stop_epoch", "1237561663");
form.lower_limit.value = qs.get("lower_limit", "");
form.upper_limit.value = qs.get("upper_limit", "");
form.size_x.value = qs.get("size_x", "");
form.size_y.value = qs.get("size_y", "");

form.btnMaj.onclick = majDates;
form.btnZoomOut.onclick = zoomOut;

// Refresh the image with the selected params
var scale = refreshImg();

function refreshImg() {
	image.src = form.cgiurl_graph.value + "/"
		+ form.plugin_name.value
		+ "-pinpoint=" + parseInt(form.start_epoch.value) + "," + parseInt(form.stop_epoch.value)
		+ ".png"
		+ "?"
		+ "&lower_limit=" + form.lower_limit.value
		+ "&upper_limit=" + form.upper_limit.value
		+ "&size_x=" + form.size_x.value
		+ "&size_y=" + form.size_y.value
	;

return ((+form.stop_epoch.value) - (+form.start_epoch.value)) / (+form.size_x.value);
}

var start_epoch = (+form.start_epoch.value);
var stop_epoch = (+form.stop_epoch.value);
var initial_left;
var initial_top;

updateStartStop();

function updateStartStop() {
	form.start_iso8601.value = new Date(form.start_epoch.value * 1000).formatDate(Date.DATE_ISO8601);
	form.stop_iso8601.value = new Date(form.stop_epoch.value * 1000).formatDate(Date.DATE_ISO8601);
}

function divMouseMove(mouseMouveEvent) {
	var delta_x;
	var size_x;

// Handling the borders (X1>X2 ou X1<X2)
	var current_width = mouseMouveEvent.pageX - initial_left;
	if (current_width < 0) {
		divOverlay.style.left = mouseMouveEvent.pageX;
		delta_x = mouseMouveEvent.pageX - 63; // the Y Axis is 63px from the left border
		divOverlay.style.width = size_x = - current_width;
	} else {
		divOverlay.style.left = initial_left;
		delta_x = initial_left - 63; // the Y Axis is 63px from the left border
		divOverlay.style.width = size_x = current_width;
	}
	
	// Compute the epochs UNIX (only for horizontal)
	form.start_epoch.value = start_epoch + scale * delta_x;
	form.stop_epoch.value = start_epoch + scale * ( delta_x + size_x );
	
	// update !
	updateStartStop();
}

function startZoom(mouseMouveEvent) {
	initial_left = mouseMouveEvent.pageX;
	initial_top = mouseMouveEvent.pageY;
	
	// Fixed, since zoom is only horizontal
	divOverlay.style.top = image.style.top.replace("px", "") + 29;
	divOverlay.style.height = (+form.size_y.value) + 1;

// Show the div
	divOverlay.style.visibility = 'visible';
	divOverlay.style.backgroundColor = '#555';

// Initial show
	divOverlay.style.left = mouseMouveEvent.pageX;
	//divOverlay.style.width = (+form.size_x.value) / 4;
	divOverlay.style.width = 40;
	
	// Fix the handles
	image.onmousemove = divMouseMove;
	divOverlay.onmousemove = divMouseMove;
	divOverlay.onclick = image.onclick;

}

function endZoom(event) {
	divOverlay.style.backgroundColor = '#000';
	image.onmousemove = undefined;
	divOverlay.onmousemove = undefined;
	divOverlay.onclick = doZoom;
}

function clearZoom(event) {
	divOverlay.style.visibility = 'hidden';
	divOverlay.style.width = 0;
	
	// reset the zoom
	form.start_epoch.value = start_epoch;
	form.stop_epoch.value = stop_epoch;

updateStartStop();
}

function doZoom(event) {
	// Navigate !
	form.submit();
}

function zoomOut(event) {
	form.start_epoch.value = start_epoch - scale * form.size_x.value;
	form.stop_epoch.value= stop_epoch + scale * form.size_y.value;
	form.submit();
}

function fillDate(date, default_date) {
	return date + default_date.substring(date.length, default_date.length);
}

function majDates(event) {
	var default_date = "2009-01-01T00:00:00+0100";

if (dateRegex.test(stop_manual)) {
        var dateparts = stop_manual.match(dateRegex);
        var date_parsed = new Date(dateparts[1], dateparts[2] - 1, dateparts[3],
                                    dateparts[4], dateparts[5], dateparts[6]);
        form.stop_epoch.value = date_parsed.getTime() / 1000;
    }                                                                                                                                                               form.submit();
}

// Sets the onClick handler
divOverlay.onclick = image.onclick = click;
var clickCounter = 1;
function click(event) {
	switch ((clickCounter++) % 3) {
		case 0:
			clearZoom(event);
			break;
		case 1:
			startZoom(event);
			break;
		case 2:
			endZoom(event);
			break;			
	}
}

//]]>
</script>
</body>
</html>

${this.title}

Code Editor : dynazoom.html