|
0
|
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 };
|
