Mercurial > hg > extraction-interface

comparison geotemco/js/FuzzyTimeline/FuzzyTimelineRangeSlider.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 * FuzzyTimelineRangeSlider.js
3 *
4 * Copyright (c) 2013, Sebastian Kruse. 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 FuzzyTimelineRangeSlider
24 * Implementation for a fuzzy time-ranges slider
25 * @author Sebastian Kruse (skruse@mpiwg-berlin.mpg.de)
26 *
27 * @param {HTML object} parent div to append the FuzzyTimeline
28 */
29 function FuzzyTimelineRangeSlider(parent) {
30
31 var rangeSlider = this;
32
33 this.parent = parent;
34 this.options = parent.options;
35
36 this.spans;
37
38 this.datasets;
39
40 this.sliderParentTable = this.parent.gui.sliderTable;
41 var headerRow = $("<tr></tr>");
42 var controlsRow = $("<tr></tr>");
43 $(this.sliderParentTable).append(headerRow).append(controlsRow);
44
45 headerRow.append("<td>Time start</td>");
46 this.rangeStart = document.createElement("select");
47 controlsRow.append($("<td></td>").append(this.rangeStart));
48
49 headerRow.append("<td>Time unit</td>");
50 this.rangeDropdown = document.createElement("select");
51 controlsRow.append($("<td></td>").append(this.rangeDropdown));
52
53 headerRow.append("<td>Scaling</td>");
54 this.scalingDropdown = document.createElement("select");
55 controlsRow.append($("<td></td>").append(this.scalingDropdown));
56 $(this.scalingDropdown).append("<option>normal</option>");
57 $(this.scalingDropdown).append("<option>logarithm</option>");
58 $(this.scalingDropdown).append("<option>percentage</option>");
59 $(this.scalingDropdown).change(function(eventObject){
60 var scaleMode = $(rangeSlider.scalingDropdown).find("option:selected").text();
61 rangeSlider.parent.changeScaleMode(scaleMode);
62 });
63
64 headerRow.append("<td>Animation</td>");
65 this.startAnimation = document.createElement("div");
66 $(this.startAnimation).addClass("smallButton playDisabled");
67 this.pauseAnimation = document.createElement("div");
68 $(this.pauseAnimation).addClass("smallButton pauseDisabled");
69 controlsRow.append($("<td></td>").append(this.startAnimation).append(this.pauseAnimation));
70
71 headerRow.append("<td>Dated Objects</td>");
72 this.numberDatedObjects = 0;
73 this.numberDatedObjectsDIV = document.createElement("div");
74 $(this.numberDatedObjectsDIV).addClass("ddbElementsCount");
75 controlsRow.append($("<td></td>").append(this.numberDatedObjectsDIV));
76 }
77
78 FuzzyTimelineRangeSlider.prototype = {
79
80 initialize : function(datasets) {
81 var rangeSlider = this;
82 rangeSlider.datasets = datasets;
83
84 //reset values
85 rangeSlider.spans = [];
86 rangeSlider.spanHash = [];
87
88 //find smallest (most accurate) time-span
89 var smallestSpan;
90 rangeSlider.numberDatedObjects = 0;
91 $(this.datasets).each(function(){
92 $(this.objects).each(function(){
93 var dataObject = this;
94 var span;
95 if (dataObject.isTemporal){
96 rangeSlider.numberDatedObjects++;
97 smallestSpan = moment.duration(1,'milliseconds');
98 } else if (dataObject.isFuzzyTemporal){
99 rangeSlider.numberDatedObjects++;
100 span = moment.duration(dataObject.TimeSpanEnd-dataObject.TimeSpanBegin);
101 if ( (typeof smallestSpan === 'undefined') || (span < smallestSpan))
102 smallestSpan = span;
103 }
104 });
105 if ((typeof smallestSpan !== 'undefined') && (smallestSpan.asMilliseconds() === 1))
106 return false;
107 });
108
109 //show number of objects that have a time in header
110 $(rangeSlider.numberDatedObjectsDIV).empty().append(rangeSlider.numberDatedObjects + " results");
111
112 if (typeof smallestSpan === 'undefined')
113 return;
114
115 var fixedSpans = [
116 moment.duration(1, 'seconds'),
117 moment.duration(1, 'minutes'),
118 moment.duration(10, 'minutes'),
119 moment.duration(15, 'minutes'),
120 moment.duration(30, 'minutes'),
121 moment.duration(1, 'hours'),
122 moment.duration(5, 'hours'),
123 moment.duration(10, 'hours'),
124 moment.duration(12, 'hours'),
125 moment.duration(1, 'days'),
126 moment.duration(7, 'days'),
127 moment.duration(1, 'weeks'),
128 moment.duration(2, 'weeks'),
129 moment.duration(1, 'months'),
130 moment.duration(2, 'months'),
131 moment.duration(3, 'months'),
132 moment.duration(6, 'months'),
133 moment.duration(1, 'years'),
134 moment.duration(5, 'years'),
135 moment.duration(10, 'years'),
136 moment.duration(20, 'years'),
137 moment.duration(25, 'years'),
138 moment.duration(50, 'years'),
139 moment.duration(100, 'years'),
140 moment.duration(200, 'years'),
141 moment.duration(250, 'years'),
142 moment.duration(500, 'years'),
143 moment.duration(1000, 'years'),
144 moment.duration(2000, 'years'),
145 moment.duration(2500, 'years'),
146 moment.duration(5000, 'years'),
147 moment.duration(10000, 'years'),
148 ];
149 var overallSpan = rangeSlider.parent.overallMax-rangeSlider.parent.overallMin;
150 //only add spans that are not too small for the data
151 for (var i = 0; i < fixedSpans.length; i++){
152 if ( (fixedSpans[i].asMilliseconds() > (smallestSpan.asMilliseconds() * 0.5)) &&
153 (fixedSpans[i].asMilliseconds() < overallSpan)
154 &&
155 (
156 rangeSlider.parent.options.showAllPossibleSpans ||
157 ((rangeSlider.parent.overallMax-rangeSlider.parent.overallMin)/fixedSpans[i]<rangeSlider.options.maxBars)
158 ))
159 rangeSlider.spans.push(fixedSpans[i]);
160 }
161
162 $(rangeSlider.rangeDropdown).empty();
163
164 $(rangeSlider.rangeDropdown).append("<option>continuous</option>");
165 var index = 0;
166 $(rangeSlider.spans).each(function(){
167 var duration = this;
168 if (duration < moment.duration(1,'second'))
169 humanizedSpan = duration.milliseconds() + "ms";
170 else if (duration < moment.duration(1,'minute'))
171 humanizedSpan = duration.seconds() + "s";
172 else if (duration < moment.duration(1,'hour'))
173 humanizedSpan = duration.minutes() + "min";
174 else if (duration < moment.duration(1,'day'))
175 humanizedSpan = duration.hours() + "h";
176 else if (duration < moment.duration(1,'month')){
177 var days = duration.days();
178 humanizedSpan = days + " day";
179 if (days > 1)
180 humanizedSpan += "s";
181 } else if (duration < moment.duration(1,'year')){
182 var months = duration.months();
183 humanizedSpan = months + " month";
184 if (months > 1)
185 humanizedSpan += "s";
186 } else {
187 var years = duration.years();
188 humanizedSpan = years + " year";
189 if (years > 1)
190 humanizedSpan += "s";
191 }
192 $(rangeSlider.rangeDropdown).append("<option index='"+index+"'>"+humanizedSpan+"</option>");
193 index++;
194 });
195
196 $(rangeSlider.rangeDropdown).change(function( eventObject ){
197 var handlePosition = $(rangeSlider.rangeDropdown).find("option:selected").first().attr("index");
198 //if there is no index, "continuous" is selected - so the density plot will be drawn
199
200 if (typeof handlePosition === "undefined"){
201 rangeSlider.parent.switchViewMode("density");
202 } else {
203 rangeSlider.parent.switchViewMode("barchart");
204 }
205
206 rangeSlider.parent.slidePositionChanged(rangeSlider.spans[handlePosition]);
207 });
208
209 $(rangeSlider.rangeStart).empty();
210 //add start of timeline selections
211 //TODO: add Months/Days/etc., atm there are only years
212 var starts = [];
213 var overallMin = rangeSlider.parent.overallMin;
214 var last = moment(overallMin).year();
215 starts.push(last);
216 for (i = 1;;i++){
217 var date = moment(overallMin).year();
218 date = date/Math.pow(10,i);
219 if (Math.abs(date)<1)
220 break;
221 date = Math.floor(date);
222 date = date*Math.pow(10,i);
223 if (date != last)
224 starts.push(date);
225 last = date;
226 }
227 $(starts).each(function(){
228 $(rangeSlider.rangeStart).append("<option>"+this+"</option>");
229 });
230
231 $(rangeSlider.rangeStart).change(function( eventObject ){
232 var handlePosition = rangeSlider.rangeStart.selectedIndex;
233 var start = starts[handlePosition];
234
235 rangeSlider.parent.overallMin = moment().year(start);
236 $(rangeSlider.rangeDropdown).change();
237 });
238
239 $(rangeSlider.rangeDropdown).change();
240
241 $(rangeSlider.startAnimation).click(function(){
242 if ($(rangeSlider.startAnimation).hasClass("playEnabled")){
243 $(rangeSlider.startAnimation).removeClass("playEnabled").addClass("playDisabled");
244 $(rangeSlider.pauseAnimation).removeClass("pauseDisabled").addClass("pauseEnabled");
245
246 rangeSlider.parent.startAnimation();
247 }
248 });
249
250 $(rangeSlider.pauseAnimation).prop('disabled', true);
251 $(rangeSlider.pauseAnimation).click(function(){
252 if ($(rangeSlider.pauseAnimation).hasClass("pauseEnabled")){
253 $(rangeSlider.startAnimation).removeClass("playDisabled").addClass("playEnabled");
254 $(rangeSlider.pauseAnimation).removeClass("pauseEnabled").addClass("pauseDisabled");
255
256 rangeSlider.parent.pauseAnimation();
257 }
258 });
259 },
260
261 triggerHighlight : function(columnElement) {
262
263 },
264
265 triggerSelection : function(columnElement) {
266
267 },
268
269 deselection : function() {
270 },
271
272 filtering : function() {
273 },
274
275 inverseFiltering : function() {
276 },
277
278 triggerRefining : function() {
279 },
280
281 reset : function() {
282 },
283
284 show : function() {
285 },
286
287 hide : function() {
288 }
289 };