Mercurial > hg > extraction-interface

comparison geotemco/js/Time/TimeGui.js @ 0:b12c99b7c3f0

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
commit for previous development
author Zoe Hong <zhong@mpiwg-berlin.mpg.de>
date Mon, 19 Jan 2015 17:13:49 +0100
parents
children
comparison
equal deleted inserted replaced
-1:000000000000 0:b12c99b7c3f0
1 /*
2 * TimeGui.js
3 *
4 * Copyright (c) 2012, Stefan Jänicke. All rights reserved.
5 *
6 * This library is free software; you can redistribute it and/or
7 * modify it under the terms of the GNU Lesser General Public
8 * License as published by the Free Software Foundation; either
9 * version 3 of the License, or (at your option) any later version.
10 *
11 * This library is distributed in the hope that it will be useful,
12 * but WITHOUT ANY WARRANTY; without even the implied warranty of
13 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU
14 * Lesser General Public License for more details.
15 *
16 * You should have received a copy of the GNU Lesser General Public
17 * License along with this library; if not, write to the Free Software
18 * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston,
19 * MA 02110-1301 USA
20 */
21
22 /**
23 * @class TimeGui
24 * Time GUI Implementation
25 * @author Stefan Jänicke (stjaenicke@informatik.uni-leipzig.de)
26 * @release 1.0
27 * @release date: 2012-07-27
28 * @version date: 2012-07-27
29 *
30 * @param {TimeWidget} parent time widget object
31 * @param {HTML object} div parent div to append the time gui
32 * @param {JSON} options time configuration
33 */
34 function TimeGui(plot, div, options, iid) {
35
36 var gui = this;
37
38 this.plot = plot;
39
40 this.container = div;
41 if (options.timeWidth) {
42 this.container.style.width = options.timeWidth;
43 }
44 if (options.timeHeight) {
45 this.container.style.height = options.timeHeight;
46 }
47 this.container.style.position = 'relative';
48
49 var w = this.container.offsetWidth;
50 var h = this.container.offsetHeight;
51
52 var toolbarTable = document.createElement("table");
53 toolbarTable.setAttribute('class', 'ddbToolbar');
54 this.container.appendChild(toolbarTable);
55
56 this.plotWindow = document.createElement("div");
57 this.plotWindow.id = "plotWindow"+iid;
58 this.plotWindow.setAttribute('class', 'plotWindow');
59 // this.plotWindow.style.width = w + "px";
60
61 this.plotWindow.style.height = (h + 12) + "px";
62 this.container.style.height = (h + 12) + "px";
63
64 this.plotWindow.onmousedown = function() {
65 return false;
66 }
67
68 this.plotContainer = document.createElement("div");
69 this.plotContainer.id = "plotContainer"+iid;
70 this.plotContainer.setAttribute('class', 'plotContainer');
71 // this.plotContainer.style.width = w + "px";
72 this.plotContainer.style.height = h + "px";
73 this.plotContainer.style.position = "absolute";
74 this.plotContainer.style.zIndex = 0;
75 this.plotContainer.style.top = "12px";
76 this.plotWindow.appendChild(this.plotContainer);
77 this.container.appendChild(this.plotWindow);
78
79 this.timeplotDiv = document.createElement("div");
80 this.timeplotDiv.style.left = "16px";
81 this.timeplotDiv.style.width = (w - 32) + "px";
82 this.timeplotDiv.style.height = h + "px";
83 this.plotContainer.appendChild(this.timeplotDiv);
84
85 var cv = document.createElement("canvas");
86 cv.setAttribute('class', 'plotCanvas');
87 this.plotWindow.appendChild(cv);
88 if (!cv.getContext && G_vmlCanvasManager)
89 cv = G_vmlCanvasManager.initElement(cv);
90 var ctx = cv.getContext('2d');
91
92 var setCanvas = function(){
93 cv.width = gui.plotWindow.clientWidth;
94 cv.height = gui.plotWindow.clientHeight;
95 var gradient = ctx.createLinearGradient(0, 0, 0, gui.plotWindow.clientHeight);
96 gradient.addColorStop(0, options.timeCanvasFrom);
97 gradient.addColorStop(1, options.timeCanvasTo);
98 ctx.fillStyle = gradient;
99 ctx.fillRect(0, 0, gui.plotWindow.clientWidth, gui.plotWindow.clientHeight);
100 }
101 setCanvas();
102
103 this.resize = function(){
104 gui.timeplotDiv.style.width = (gui.container.offsetWidth - 32) + "px";
105 ctx.clearRect(0,0,gui.plotWindow.clientWidth, gui.plotWindow.clientHeight);
106 if( typeof plot.datasets != "undefined" ){
107 plot.redrawPlot();
108 plot.resetOpacityPlots();
109 }
110 setCanvas();
111 };
112
113 var titles = document.createElement("tr");
114 toolbarTable.appendChild(titles);
115 var tools = document.createElement("tr");
116 toolbarTable.appendChild(tools);
117
118 this.timeUnitTitle = document.createElement("td");
119 this.timeUnitTitle.innerHTML = GeoTemConfig.getString('timeUnit');
120 this.timeUnitSelector = document.createElement("td");
121 if (options.unitSelection) {
122 tools.appendChild(this.timeUnitSelector);
123 titles.appendChild(this.timeUnitTitle);
124 }
125
126 this.timeAnimation = document.createElement("td");
127 this.timeAnimation.innerHTML = GeoTemConfig.getString('timeAnimation');
128 var timeAnimationTools = document.createElement("td");
129
130 var status;
131 this.updateAnimationButtons = function(s) {
132 status = s;
133 if (status == 0) {
134 gui.playButton.setAttribute('class', 'smallButton playDisabled');
135 gui.pauseButton.setAttribute('class', 'smallButton pauseDisabled');
136 } else if (status == 1) {
137 gui.playButton.setAttribute('class', 'smallButton playEnabled');
138 gui.pauseButton.setAttribute('class', 'smallButton pauseDisabled');
139 } else {
140 gui.playButton.setAttribute('class', 'smallButton playDisabled');
141 gui.pauseButton.setAttribute('class', 'smallButton pauseEnabled');
142 }
143 };
144 this.playButton = document.createElement("div");
145 this.playButton.title = GeoTemConfig.getString('playButton');
146 timeAnimationTools.appendChild(this.playButton);
147 this.playButton.onclick = function() {
148 if (status == 1) {
149 plot.play();
150 }
151 }
152
153 this.pauseButton = document.createElement("div");
154 this.pauseButton.title = GeoTemConfig.getString('pauseButton');
155 timeAnimationTools.appendChild(this.pauseButton);
156 this.pauseButton.onclick = function() {
157 if (status == 2) {
158 plot.stop();
159 }
160 }
161
162 this.valueScale = document.createElement("td");
163 this.valueScale.innerHTML = GeoTemConfig.getString('valueScale');
164 var valueScaleTools = document.createElement("td");
165
166 var linearPlot;
167 var setValueScale = function(linScale) {
168 if (linearPlot != linScale) {
169 linearPlot = linScale;
170 if (linearPlot) {
171 gui.linButton.setAttribute('class', 'smallButton linearPlotActivated');
172 gui.logButton.setAttribute('class', 'smallButton logarithmicPlotDeactivated');
173 plot.drawLinearPlot();
174 } else {
175 gui.linButton.setAttribute('class', 'smallButton linearPlotDeactivated');
176 gui.logButton.setAttribute('class', 'smallButton logarithmicPlotActivated');
177 plot.drawLogarithmicPlot();
178 }
179 }
180 };
181 this.linButton = document.createElement("div");
182 this.linButton.title = GeoTemConfig.getString('linearPlot');
183 valueScaleTools.appendChild(this.linButton);
184 this.linButton.onclick = function() {
185 setValueScale(true);
186 }
187
188 this.logButton = document.createElement("div");
189 this.logButton.title = GeoTemConfig.getString('logarithmicPlot');
190 valueScaleTools.appendChild(this.logButton);
191 this.logButton.onclick = function() {
192 setValueScale(false);
193 }
194 if (options.rangeAnimation) {
195 titles.appendChild(this.timeAnimation);
196 tools.appendChild(timeAnimationTools);
197 this.updateAnimationButtons(0);
198 }
199
200 if (options.scaleSelection) {
201 titles.appendChild(this.valueScale);
202 tools.appendChild(valueScaleTools);
203 setValueScale(options.linearScale);
204 }
205
206 if (GeoTemConfig.allowFilter) {
207 this.filterTitle = document.createElement("td");
208 titles.appendChild(this.filterTitle);
209 this.filterTitle.innerHTML = GeoTemConfig.getString('filter');
210 this.filterOptions = document.createElement("td");
211 tools.appendChild(this.filterOptions);
212 }
213
214 if (options.dataInformation) {
215 this.infoTitle = document.createElement("td");
216 this.infoTitle.innerHTML = options.timeTitle;
217 titles.appendChild(this.infoTitle);
218 var timeSum = document.createElement("td");
219 this.timeElements = document.createElement("div");
220 this.timeElements.setAttribute('class', 'ddbElementsCount');
221 timeSum.appendChild(this.timeElements);
222 tools.appendChild(timeSum);
223 }
224
225 /*
226 var tooltip = document.createElement("div");
227 tooltip.setAttribute('class','ddbTooltip');
228 toolbarTable.appendChild(tooltip);
229
230 tooltip.onmouseover = function(){
231 /*
232 getPublisher().Publish('TooltipContent', {
233 content: GeoTemConfig.getString(GeoTemConfig.language,'timeHelp'),
234 target: $(tooltip)
235 });
236
237 }
238 tooltip.onmouseout = function(){
239 //getPublisher().Publish('TooltipContent');
240 }
241 */
242
243 this.setHeight = function() {
244 this.container.style.height = (this.plotWindow.offsetHeight + toolbarTable.offsetHeight) + "px";
245 };
246
247 this.updateTimeQuantity = function(count) {
248 if (options.dataInformation) {
249 this.plotCount = count;
250 if (count != 1) {
251 this.timeElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('results');
252 } else {
253 this.timeElements.innerHTML = this.beautifyCount(count) + " " + GeoTemConfig.getString('result');
254 }
255 }
256 }
257
258 this.setTimeUnitDropdown = function(units) {
259 $(this.timeUnitSelector).empty();
260 var gui = this;
261 var timeUnits = [];
262 var addUnit = function(unit, index) {
263 var setUnit = function() {
264 gui.plot.setTimeUnit(unit.unit);
265 }
266 timeUnits.push({
267 name : unit.label,
268 onclick : setUnit
269 });
270 }
271 for (var i = 0; i < units.length; i++) {
272 addUnit(units[i], i);
273 }
274 this.timeUnitDropdown = new Dropdown(this.timeUnitSelector, timeUnits, GeoTemConfig.getString('selectTimeUnit'), '100px');
275 this.timeUnitDropdown.setEntry(0);
276 }
277 this.setTimeUnitDropdown([{
278 name : 'none',
279 id : -1
280 }]);
281
282 this.beautifyCount = function(count) {
283 var c = count + '';
284 var p = 0;
285 var l = c.length;
286 while (l - p > 3) {
287 p += 3;
288 c = c.substring(0, l - p) + "." + c.substring(l - p);
289 p++;
290 l++;
291 }
292 return c;
293 }
294
295 this.hideTimeUnitSelection = function() {
296 this.timeUnitTitle.style.display = 'none';
297 this.timeUnitSelector.style.display = 'none';
298 }
299 };