1#@!#!123s

: / etc / munin / static /
Filename : dynazoom.html
back
<head>
	<script language="JavaScript" src="formatdate.js"></script>
	<script language="JavaScript" src="querystring.js"></script>
</head>
<body>
	
<div style="position:relative;">
	<img id="image" />
<div id="overlayDiv" />

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

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

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

	<!-- Start and stop -->
	<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>

	<!-- Limit high & low -->
	<tr>
		<td>Limit low/high :</td>
		<td>

			<input type="text" name="lower_limit" size="10"> /  <input type="text" name="upper_limit" size="10">
		</td>
	</tr>


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

		<td>
			<input type="text" name="size_x" size="5"> / <input type="text" name="size_y" size="5" >
		</td>
	</tr>
</table>
	<input type=hidden name="cgiurl_graph" />
	<input type=submit />
	<input type=button name="btnZoomOut" value="Zoom Out x2" />
</form>

</body>

<script>

// 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";

	var start_manual = fillDate(form.start_iso8601.value, default_date);
	var stop_manual = fillDate(form.stop_iso8601.value, default_date);
	
	var dateRegex = /(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2}):(\d{2}).(\d{4})/;
	
	if (dateRegex.test(start_manual)) {
		var date_parsed = new Date(start_manual.replace(dateRegex, "$2 $3, $1 $4:$5:$6"));
		form.start_epoch.value = date_parsed.getTime() / 1000;
	}

	if (dateRegex.test(stop_manual)) {
		var date_parsed = new Date(stop_manual.replace(dateRegex, "$2 $3, $1 $4:$5:$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>

<style>
#overlayDiv { 
	opacity: .55; 
	filter: alpha(opacity=55); 
	background-color:#EEE; 
	position: absolute; 
	z-index: 2;
}
</style>