summaryrefslogtreecommitdiffstats
path: root/htdocs/js/smokeping_zoom.js
diff options
context:
space:
mode:
authorTobi Oetiker <tobi@oetiker.ch>2007-08-16 12:02:17 +0200
committerTobi Oetiker <tobi@oetiker.ch>2007-08-16 12:02:17 +0200
commit0d36f50e05d91267ed72dbe7236c5d09d14764bc (patch)
treeb6032838a674752d822766521b71043929dbca8f /htdocs/js/smokeping_zoom.js
parentdedbd98b8522b7da27dcae51cd7b50d6c5ff1c8d (diff)
downloadsmokeping-0d36f50e05d91267ed72dbe7236c5d09d14764bc.tar.gz
smokeping-0d36f50e05d91267ed72dbe7236c5d09d14764bc.tar.xz
Interactive (Ajax) Zooming of Graphs -- Roman Plessl <rplessl oetiker ch>
Diffstat (limited to 'htdocs/js/smokeping_zoom.js')
-rw-r--r--htdocs/js/smokeping_zoom.js181
1 files changed, 181 insertions, 0 deletions
diff --git a/htdocs/js/smokeping_zoom.js b/htdocs/js/smokeping_zoom.js
new file mode 100644
index 0000000..3f19db5
--- /dev/null
+++ b/htdocs/js/smokeping_zoom.js
@@ -0,0 +1,181 @@
+<!--
+
+/*
+ * This code replaces images in the smokeping website with ajax
+ *
+ * The jquery toolkit (version 1.1.3.1) was used for platform
+ * independency. The URL parsing part was taken from the
+ * bonsaj.js script.
+ *
+ * Copyright (c) 2007 Roman Plessl <roman.plessl@oetiker.ch>
+ * Dual licensed under the MIT (MIT-LICENSE.txt)
+ * and GPL (GPL-LICENSE.txt) licenses.
+ *
+ * $Date: 2007-08-15 17:14:56 +0200 $
+ * $Rev: 36 $
+ *
+ */
+
+/*++ from bonsai.js ++ urlObj +++++++++++++++++++++++++++++++++++++++++*/
+function urlObj(url) {
+ var urlBaseAndParameters;
+
+ urlBaseAndParameters = url.split("?");
+ this.urlBase = urlBaseAndParameters[0];
+ this.urlParameters = urlBaseAndParameters[1].split(";");
+
+ this.getUrlBase = urlObjGetUrlBase;
+ this.getUrlParameterValue = urlObjGetUrlParameterValue;
+}
+
+/*++ from bonsai.js ++ urlObjGetUrlBase +++++++++++++++++++++++++++++++*/
+
+function urlObjGetUrlBase() {
+ return this.urlBase;
+}
+
+/*++ form bonsai.js ++ urlObjGetUrlParameterValue +++++++++++++++++++++*/
+
+function urlObjGetUrlParameterValue(parameter) {
+ var i;
+ var fieldAndValue;
+ var value;
+
+ i = 0;
+ while (this.urlParameters [i] != undefined) {
+ fieldAndValue = this.urlParameters[i].split("=");
+ if (fieldAndValue[0] == parameter) {
+ value = fieldAndValue[1];
+ }
+ i++;
+ }
+ return value;
+}
+
+/*++++++++++++++++++++ isoDateToJS +++++++++++++++++++++++++++++++++++++*/
+function ISODateToJS(rawisodate) {
+ var decode = decodeURI(rawisodate);
+ if (decode == "now") {
+ return new Date();
+ }
+ else {
+ var M = decode.match(/(\d\d\d\d).(\d\d).(\d\d).(\d\d).(\d\d)/)
+ var date = new Date(M[1], M[2]-1, M[3], M[4], M[5], "00")
+ return date;
+ }
+}
+
+/*++++++++++++++++++++++ JSToisoDate ++++++++++++++++++++++++++++++++++++++*/
+function JSToISODate(mydate) {
+ var isodate = mydate.getFullYear() + "-";
+ if ((mydate.getMonth() + 1) < 10) { isodate = isodate + "0"; }
+ isodate = isodate + (mydate.getMonth() + 1) + "-";
+ if (mydate.getDate() < 10) { isodate = isodate + "0"; }
+ isodate = isodate + mydate.getDate() + " ";
+ if (mydate.getHours() < 10) { isodate = isodate + "0"; }
+ isodate = isodate + mydate.getHours() + ":";
+ if (mydate.getMinutes() < 10) { isodate = isodate + "0"; }
+ isodate = isodate + mydate.getMinutes();
+ return encodeURI(isodate);
+}
+
+$(document).ready(function() {
+
+ mySelectTop = 0;
+ mySelectLeft = 0;
+ mySelectRight = 0;
+ mySelectBottom = 0;
+
+ myImgTop = 0;
+ myImgLeft = 0;
+ myImgRight = 0;
+ myImgBottom = 0;
+
+ RRDLeftDiff = 68; // difference between left border of RRD image and content
+ RRDRightDiff = 33; // difference between right border of RRD image and content
+ RRDImgWidth = 697; // Width of the Smokeping RRD Graphik
+ RRDImgUsable = 596; // 598 = 697 - 68 - 33;
+
+ mySelectTop = 0;
+ mySelectLeft = 0;
+ mySelectRight = 0;
+ mySelectBottom = 0;
+
+ StartDateString = 0;
+ EndDateString = 0;
+
+ $("div.zoom").mousedown(function() {
+
+ var rrdimg = $("div.zoom").children("img");
+ myImgTop = rrdimg.get(0).y;
+ myImgLeft = rrdimg.get(0).x;
+ myImgRight = myImgLeft + rrdimg.get(0).width;
+ myImgBottom = myImgTop + rrdimg.get(0).height;
+
+ });
+
+ $("div.zoom").Selectable({
+ accept : 'selectableitem',
+ opacity : 0.2,
+ selectedclass : 'selecteditem',
+ helperclass : 'selecthelper'
+ });
+
+});
+
+// will be started by modified iSelect (StopApply Function)
+function changeRRDImage(){
+
+ var oldimg = $("div.zoom").children("img");
+
+ myURLObj = new urlObj(document.URL);
+
+ // parse start and stop parameter from URL
+ var myURL = myURLObj.getUrlBase();
+ var myRawStartDate = (StartDateString != 0) ? StartDateString : myURLObj.getUrlParameterValue("start");
+ var myRawStopDate = (EndDateString != 0) ? EndDateString : myURLObj.getUrlParameterValue("end");
+ var myRawTarget = myURLObj.getUrlParameterValue("target");
+
+ var myParsedStartDate = ISODateToJS(myRawStartDate);
+ myParsedStartEpoch = Math.floor(myParsedStartDate.getTime()/1000.0);
+
+ var myParsedStopDate = ISODateToJS(myRawStopDate);
+ myParsedStopEpoch = Math.floor(myParsedStopDate.getTime()/1000.0);
+
+ myParsedDivEpoch = myParsedStopEpoch - myParsedStartEpoch;
+
+ var mySerialDate = new Date();
+ var mySerial = mySerialDate.getTime();
+
+ // Generate Selected Range in Unix Timestamps
+ var genStart = myParsedStartEpoch + (((mySelectLeft - RRDLeftDiff) / RRDImgUsable ) * myParsedDivEpoch);
+ var genStop = myParsedStartEpoch + (((mySelectRight - RRDLeftDiff) / RRDImgUsable ) * myParsedDivEpoch);
+
+ var floorGenStart = Math.floor(genStart);
+ var floorGenStop = Math.floor(genStop);
+
+ var StartDate = new Date(floorGenStart*1000);
+ var StopDate = new Date(floorGenStop*1000);
+
+ // floor to last full minute
+ var MinuteGenStart = ( Math.floor(floorGenStart / 60) * 60 );
+ var MinuteGenStop = ( Math.floor(floorGenStop / 60) * 60 );
+
+ // create new image based on old image and fetched data
+ var newimg = new Image();
+ newimg = oldimg;
+
+ StartDateString = JSToISODate(StartDate);
+ EndDateString = JSToISODate(StopDate);
+
+ // construct Image URL
+ myGraph = "img/__navcache/" + mySerial + "_" + MinuteGenStop + "_" + MinuteGenStart + ".png";
+
+ // Fetch image with ajax
+ var result = $.get(myURL + "?displaymode=a;start=" + StartDateString+ ";end=" + EndDateString + ";target=" + myRawTarget + ";serial=" + mySerial,
+ function(){
+ // replacement image with AJAX
+ newimg.attr("src", myGraph);
+ });
+};
+