Devco1 Shell

Filename : dynazoom.html
back
<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>

	<style type="text/css">
	#overlayDiv {
		opacity: .55;
		filter: alpha(opacity=55);
		background-color:#EEE;
		position: absolute;
		z-index: 2;
	}
	</style>
</head>
<body>
	
<div style="position:relative;">
	<img id="image" src="" alt="Dynamically zoomable graph" />
<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):
	<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>
	<!-- 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>
<p>
	<input type="hidden" name="cgiurl_graph" />
	<input type="submit" />
	<input type="button" name="btnZoomOut" value="Zoom Out x2" />
</p>
</form>

<script type="text/javascript">
//<![CDATA[

// 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 dateparts = start_manual.match(dateRegex);
        var date_parsed = new Date(dateparts[1], dateparts[2] - 1, dateparts[3],
                                    dateparts[4], dateparts[5], dateparts[6]);
        form.start_epoch.value = date_parsed.getTime() / 1000;
    }

    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>