diff d3s_examples/python-neo4jrestclient/static/platin/js/Time/TimeGui.js @ 8:18ef6948d689

new d3s examples
author Dirk Wintergruen <dwinter@mpiwg-berlin.mpg.de>
date Thu, 01 Oct 2015 17:17:27 +0200
parents
children
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/d3s_examples/python-neo4jrestclient/static/platin/js/Time/TimeGui.js	Thu Oct 01 17:17:27 2015 +0200
@@ -0,0 +1,299 @@
+/*
+* TimeGui.js
+*
+* Copyright (c) 2012, Stefan Jänicke. All rights reserved.
+*
+* This library is free software; you can redistribute it and/or
+* modify it under the terms of the GNU Lesser General Public
+* License as published by the Free Software Foundation; either
+* version 3 of the License, or (at your option) any later version.
+*
+* This library is distributed in the hope that it will be useful,
+* but WITHOUT ANY WARRANTY; without even the implied warranty of
+* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the GNU
+* Lesser General Public License for more details.
+*
+* You should have received a copy of the GNU Lesser General Public
+* License along with this library; if not, write to the Free Software
+* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
+* MA 02110-1301  USA
+*/
+
+/**
+ * @class TimeGui
+ * Time GUI Implementation
+ * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
+ * @release 1.0
+ * @release date: 2012-07-27
+ * @version date: 2012-07-27
+ *
+ * @param {TimeWidget} parent time widget object
+ * @param {HTML object} div parent div to append the time gui
+ * @param {JSON} options time configuration
+ */
+function TimeGui(plot, div, options, iid) {
+
+	var gui = this;
+
+	this.plot = plot;
+
+	this.container = div;
+	if (options.timeWidth) {
+		this.container.style.width = options.timeWidth;
+	}
+	if (options.timeHeight) {
+		this.container.style.height = options.timeHeight;
+	}
+	this.container.style.position = 'relative';
+
+	var w = this.container.offsetWidth;
+	var h = this.container.offsetHeight;
+
+	var toolbarTable = document.createElement("table");
+	toolbarTable.setAttribute('class', 'ddbToolbar');
+	this.container.appendChild(toolbarTable);
+
+	this.plotWindow = document.createElement("div");
+	this.plotWindow.id = "plotWindow"+iid;
+	this.plotWindow.setAttribute('class', 'plotWindow');
+//	this.plotWindow.style.width = w + "px";
+
+	this.plotWindow.style.height = (h + 12) + "px";
+	this.container.style.height = (h + 12) + "px";
+
+	this.plotWindow.onmousedown = function() {
+		return false;
+	}
+
+	this.plotContainer = document.createElement("div");
+	this.plotContainer.id = "plotContainer"+iid;
+	this.plotContainer.setAttribute('class', 'plotContainer');
+//	this.plotContainer.style.width = w + "px";
+	this.plotContainer.style.height = h + "px";
+	this.plotContainer.style.position = "absolute";
+	this.plotContainer.style.zIndex = 0;
+	this.plotContainer.style.top = "12px";
+	this.plotWindow.appendChild(this.plotContainer);
+	this.container.appendChild(this.plotWindow);
+
+	this.timeplotDiv = document.createElement("div");
+	this.timeplotDiv.style.left = "16px";
+	this.timeplotDiv.style.width = (w - 32) + "px";
+	this.timeplotDiv.style.height = h + "px";
+	this.plotContainer.appendChild(this.timeplotDiv);
+
+	var cv = document.createElement("canvas");
+	cv.setAttribute('class', 'plotCanvas');
+	this.plotWindow.appendChild(cv);
+	if (!cv.getContext && G_vmlCanvasManager)
+		cv = G_vmlCanvasManager.initElement(cv);
+	var ctx = cv.getContext('2d');
+
+	var setCanvas = function(){
+		cv.width = gui.plotWindow.clientWidth;
+		cv.height = gui.plotWindow.clientHeight;
+		var gradient = ctx.createLinearGradient(0, 0, 0, gui.plotWindow.clientHeight);
+		gradient.addColorStop(0, options.timeCanvasFrom);
+		gradient.addColorStop(1, options.timeCanvasTo);
+		ctx.fillStyle = gradient;
+		ctx.fillRect(0, 0, gui.plotWindow.clientWidth, gui.plotWindow.clientHeight);
+	}
+	setCanvas();
+
+	this.resize = function(){
+		gui.timeplotDiv.style.width = (gui.container.offsetWidth - 32) + "px";
+		ctx.clearRect(0,0,gui.plotWindow.clientWidth, gui.plotWindow.clientHeight);
+		if( typeof plot.datasets != "undefined" ){
+			plot.redrawPlot();
+			plot.resetOpacityPlots();
+		}
+		setCanvas();
+	};
+
+	var titles = document.createElement("tr");
+	toolbarTable.appendChild(titles);
+	var tools = document.createElement("tr");
+	toolbarTable.appendChild(tools);
+
+	this.timeUnitTitle = document.createElement("td");
+	this.timeUnitTitle.innerHTML = GeoTemConfig.getString('timeUnit');
+	this.timeUnitSelector = document.createElement("td");
+	if (options.unitSelection) {
+		tools.appendChild(this.timeUnitSelector);
+		titles.appendChild(this.timeUnitTitle);
+	}
+
+	this.timeAnimation = document.createElement("td");
+	this.timeAnimation.innerHTML = GeoTemConfig.getString('timeAnimation');
+	var timeAnimationTools = document.createElement("td");
+
+	var status;
+	this.updateAnimationButtons = function(s) {
+		status = s;
+		if (status == 0) {
+			gui.playButton.setAttribute('class', 'smallButton playDisabled');
+			gui.pauseButton.setAttribute('class', 'smallButton pauseDisabled');
+		} else if (status == 1) {
+			gui.playButton.setAttribute('class', 'smallButton playEnabled');
+			gui.pauseButton.setAttribute('class', 'smallButton pauseDisabled');
+		} else {
+			gui.playButton.setAttribute('class', 'smallButton playDisabled');
+			gui.pauseButton.setAttribute('class', 'smallButton pauseEnabled');
+		}
+	};
+	this.playButton = document.createElement("div");
+	this.playButton.title = GeoTemConfig.getString('playButton');
+	timeAnimationTools.appendChild(this.playButton);
+	this.playButton.onclick = function() {
+		if (status == 1) {
+			plot.play();
+		}
+	}
+
+	this.pauseButton = document.createElement("div");
+	this.pauseButton.title = GeoTemConfig.getString('pauseButton');
+	timeAnimationTools.appendChild(this.pauseButton);
+	this.pauseButton.onclick = function() {
+		if (status == 2) {
+			plot.stop();
+		}
+	}
+
+	this.valueScale = document.createElement("td");
+	this.valueScale.innerHTML = GeoTemConfig.getString('valueScale');
+	var valueScaleTools = document.createElement("td");
+
+	var linearPlot;
+	var setValueScale = function(linScale) {
+		if (linearPlot != linScale) {
+			linearPlot = linScale;
+			if (linearPlot) {
+				gui.linButton.setAttribute('class', 'smallButton linearPlotActivated');
+				gui.logButton.setAttribute('class', 'smallButton logarithmicPlotDeactivated');
+				plot.drawLinearPlot();
+			} else {
+				gui.linButton.setAttribute('class', 'smallButton linearPlotDeactivated');
+				gui.logButton.setAttribute('class', 'smallButton logarithmicPlotActivated');
+				plot.drawLogarithmicPlot();
+			}
+		}
+	};
+	this.linButton = document.createElement("div");
+	this.linButton.title = GeoTemConfig.getString('linearPlot');
+	valueScaleTools.appendChild(this.linButton);
+	this.linButton.onclick = function() {
+		setValueScale(true);
+	}
+
+	this.logButton = document.createElement("div");
+	this.logButton.title = GeoTemConfig.getString('logarithmicPlot');
+	valueScaleTools.appendChild(this.logButton);
+	this.logButton.onclick = function() {
+		setValueScale(false);
+	}
+	if (options.rangeAnimation) {
+		titles.appendChild(this.timeAnimation);
+		tools.appendChild(timeAnimationTools);
+		this.updateAnimationButtons(0);
+	}
+
+	if (options.scaleSelection) {
+		titles.appendChild(this.valueScale);
+		tools.appendChild(valueScaleTools);
+		setValueScale(options.linearScale);
+	}
+
+	if (GeoTemConfig.allowFilter) {
+		this.filterTitle = document.createElement("td");
+		titles.appendChild(this.filterTitle);
+		this.filterTitle.innerHTML = GeoTemConfig.getString('filter');
+		this.filterOptions = document.createElement("td");
+		tools.appendChild(this.filterOptions);
+	}
+
+	if (options.dataInformation) {
+		this.infoTitle = document.createElement("td");
+		this.infoTitle.innerHTML = options.timeTitle;
+		titles.appendChild(this.infoTitle);
+		var timeSum = document.createElement("td");
+		this.timeElements = document.createElement("div");
+		this.timeElements.setAttribute('class', 'ddbElementsCount');
+		timeSum.appendChild(this.timeElements);
+		tools.appendChild(timeSum);
+	}
+
+	/*
+	 var tooltip = document.createElement("div");
+	 tooltip.setAttribute('class','ddbTooltip');
+	 toolbarTable.appendChild(tooltip);
+
+	 tooltip.onmouseover = function(){
+	 /*
+	 getPublisher().Publish('TooltipContent', {
+	 content: GeoTemConfig.getString(GeoTemConfig.language,'timeHelp'),
+	 target: $(tooltip)
+	 });
+
+	 }
+	 tooltip.onmouseout = function(){
+	 //getPublisher().Publish('TooltipContent');
+	 }
+	 */
+
+	this.setHeight = function() {
+		this.container.style.height = (this.plotWindow.offsetHeight + toolbarTable.offsetHeight) + "px";
+	};
+
+	this.updateTimeQuantity = function(count) {
+		if (options.dataInformation) {
+			this.plotCount = count;
+			if (count != 1) {
+				this.timeElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('results');
+			} else {
+				this.timeElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('result');
+			}
+		}
+	}
+
+	this.setTimeUnitDropdown = function(units) {
+		$(this.timeUnitSelector).empty();
+		var gui = this;
+		var timeUnits = [];
+		var addUnit = function(unit, index) {
+			var setUnit = function() {
+				gui.plot.setTimeUnit(unit.unit);
+			}
+			timeUnits.push({
+				name : unit.label,
+				onclick : setUnit
+			});
+		}
+		for (var i = 0; i < units.length; i++) {
+			addUnit(units[i], i);
+		}
+		this.timeUnitDropdown = new Dropdown(this.timeUnitSelector, timeUnits, GeoTemConfig.getString('selectTimeUnit'), '100px');
+		this.timeUnitDropdown.setEntry(0);
+	}
+	this.setTimeUnitDropdown([{
+		name : 'none',
+		id : -1
+	}]);
+
+	this.beautifyCount = function(count) {
+		var c = count + '';
+		var p = 0;
+		var l = c.length;
+		while (l - p > 3) {
+			p += 3;
+			c = c.substring(0, l - p) + "." + c.substring(l - p);
+			p++;
+			l++;
+		}
+		return c;
+	}
+
+	this.hideTimeUnitSelection = function() {
+		this.timeUnitTitle.style.display = 'none';
+		this.timeUnitSelector.style.display = 'none';
+	}
+};