source: src/django_gheat/wlheatmap/static/heatmap_extensions.js@ 9815

Last change on this file since 9815 was 9815, checked in by rick, 13 years ago

Add extra filter to allow display some and all.

While where fix the filters to make the look more structured.

File size: 14.8 KB
Line 
1/**
2 * Uses zoomleven and mouseposition to call nodelist.py view.
3 * View returns nodes in json format, values are printed in doc element.
4 */
5function getNodeList(zoomlevel, mousepos){
6 $.getJSON("nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon,
7 function(json){
8 content = 'Wireless Leiden nodes on mouseposition:<br /><b>';
9 $.each(json, function(i,json){
10 content += json.fields.ssid + '<br />';
11 });
12 content += '</b>';
13 $("#node_list").html(content);
14 }
15 );
16}
17
18/**
19 * Right way to get url parameters?
20 * http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery/1404100#1404100
21 */
22function getURLParameter(name) {
23 return decodeURI(
24 (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
25 );
26}
27
28
29$(window).load(function() {
30 var signallayer = '';
31 var userlist = new Array();
32 var nodelist = new Array();
33
34 function update_raw_filter() {
35 $("#raw_filter").val(get_raw_filter());
36 }
37
38 /**
39 * Adds colourpicker for layer colour.
40 * Function set in: 'colourpicker.js'
41 */
42 $("#colour").colorPicker();
43
44 /**
45 * Adds datepicker for start & end date
46 * Function set in: 'jquery-ui-1.8.13.custom.min.js'
47 */
48 $("#start_date").datepicker({
49 dateFormat: "dd/mm/yy",
50 onSelect: function(dateValue, inst){
51 $("#end_date").datepicker("option", "minDate", dateValue);
52 update_raw_filter();
53 }
54 });
55 $("#end_date").datepicker({
56 dateFormat: "dd/mm/yy",
57 onSelect: function(dateValue, inst){
58 update_raw_filter();
59 }
60 });
61
62 /**
63 * Adds slider for signal strength layer.
64 * Function set in: 'jquery-ui-1.8.13.custom.min.js'
65 */
66 function update_slider(min,max) {
67 $("#sig_value").text("All AccessPoints Signal Strength: " + min + " - " + max);
68 $("#signallayer font").text("All AccessPoints Signal: " + min + " - " + max);
69 };
70
71 function update_sig_slider(min,max) {
72 $("#select_sig_value").text("Signal Strength: " + min + " - " + max);
73 update_raw_filter();
74 };
75
76 $("#slider").slider({
77 range: true,
78 min: 0,
79 max: 100,
80 values: [0, 100],
81 // while sliding, it changes the text above the slider to show the values realtime
82 slide: function(event, sig){
83 update_slider(sig.values[0], sig.values[1]);
84 },
85 // on slider stop, it sets a new URL with updated values and redraws the layer
86 stop: function(event, sig){
87 signallayer = map.getLayersByName('signallayer');
88 signallayer[0].setUrl("tile/${z}/${x},${y}.png?colour=90,90,90&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]);
89 signallayer[0].redraw();
90 }
91 });
92 $("#select_sig_slider").slider({
93 range: true,
94 min: 0,
95 max: 100,
96 values: [0,100],
97 // while sliding, it changes the text above the slider to show the values realtime
98 slide: function(event, sig){
99 update_sig_slider(sig.values[0], sig.values[1]);
100 }
101 });
102
103
104 function init_slider(min, max) {
105 $("#slider").slider( "option", "values", [min,max] );
106 signallayer = map.getLayersByName('signallayer');
107 signallayer[0].setUrl("tile/${z}/${x},${y}.png?colour=90,90,90&signaal__gte=" + min + "&signaal__lte=" + max);
108 signallayer[0].redraw();
109 update_slider(min,max);
110
111 $("#select_sig_slider").slider( "option", "values", [min,max] );
112 update_sig_slider(min,max);
113 };
114
115
116
117 /**
118 * Toggles layer visibility on checkbox use from layerswitcher.
119 */
120 $("#togglelayer").live('click', function(){
121 layername = $(this).parents('span').attr('id');
122 layer = map.getLayersByName(layername);
123 if(this.checked){
124 layer[0].setVisibility(true);
125 }
126 else{
127 layer[0].setVisibility(false);
128 }
129 });
130
131 /**
132 * Toggles layer visibility per category on checkbox use from layerswitcher.
133 */
134 $("#togglecat").live("click", function(){
135 layertype = $(this).attr('class');
136 layers = new Array();
137 layers = $('#' + layertype).children('span');
138 if(this.checked){
139 $.each(layers, function(l, layer){
140 layer = map.getLayersByName(layer.id);
141 layer[0].setVisibility(true);
142 $(this).children('input').attr('checked', true);
143 });
144 }
145 else{
146 $.each(layers, function(l, layer){
147 layer = map.getLayersByName(layer.id);
148 layer[0].setVisibility(false);
149 $(this).children('input').attr('checked', false);
150 });
151 }
152 });
153
154 /**
155 * Removes layer from map and layerswitcher.
156 */
157 $("#rmvlayer").live("click", function(){
158 layername = $(this).closest('span').attr('id');
159 layer = map.getLayersByName(layername);
160 map.removeLayer(layer[0]);
161 $(this).closest('span').remove();
162 });
163
164 /**
165 * Toggles text shown on website.
166 * 'info' shows info text.
167 * 'filter' page shows text on filters & filter options.
168 */
169 $("#menu_filter").click(function(){
170 $("#filter").slideToggle("fast");
171 $("#info").slideUp("fast");
172 });
173 $("#menu_info").click(function(){
174 $("#filter").slideUp("fast");
175 $("#info").slideToggle("fast");
176 });
177 $("#hide_parent").live("click",function(){
178 parent = $(this).parent("div");
179 $(parent).slideUp("fast");
180 });
181
182
183
184 /**
185 * Toggles layerswitcher visibility.
186 * On 'off', toggler shows a '+'.
187 * On 'on', toggler shows a '-'.
188 */
189 $("#layer_switcher_toggle").click(function(){
190 $("#layer_switcher").toggle();
191 if($(this).text() == '+'){
192 $(this).html('-');
193 }
194 else{
195 $(this).html('+');
196 }
197 });
198
199 /**
200 * Toggles category visibility.
201 * On 'visible', toggler shows a '^'.
202 * On 'invisible', toggler shows a 'v'.
203 */
204 $("#cat_hide").live("click", function(){
205 cat = $(this).parent('div').next('p').children('span')
206 cat.toggle();
207 if(cat.is(":visible")){
208 //FIXME: images are getting loaded the hard way. Replace '/static/'. '{{ STATIC_URL }}' doesn't seem to work here.
209 $(this).css('background-image', "url(/static/img/up.png)");
210 }
211 else{
212 $(this).css('background-image', "url(/static/img/down.png)");
213 }
214 });
215
216 /**
217 * Fastest?
218 * http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
219 */
220 $.getJSON("filters/",
221 function(json) {
222 $.each(json, function(i,json){
223 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
224 userlist.push(json.gebruiker);
225 $.each(json.meetrondje, function(m, meetrondje){
226 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value": meetrondje.naam}).text(meetrondje.naam));
227 $.each(meetrondje.nodes, function(n, nodes){
228 $("#select_node").append($("<option/>").attr({"class":json.gebruiker + "\\" + meetrondje.naam, "value":nodes}).text(nodes));
229 if(jQuery.inArray(nodes, nodelist)<0){
230 nodelist.push(nodes);
231 }
232 });
233 });
234 });
235 // Initiate the chain
236 $("#select_dataset").chained("#select_user");
237 $("#select_node").chained("#select_user, #select_dataset");
238 }
239 );
240
241 /**
242 * Earlier process got all users in JSON and put them in array.
243 * For each user in array, new layer is added with username as parameter.
244 * Layercolour is randomized.
245 * If button is pressed again, layers will be deleted.
246 */
247 function update_lname() {
248 $("#lname").val($("#select_user option:selected").text() + " - " + $("#select_dataset option:selected").text() + " - " + $("#select_node option:selected").text());
249 }
250 $("#select_user").change(function(){
251 update_lname();
252 update_raw_filter();
253 });
254 $("#select_dataset").change(function(){
255 update_lname();
256 update_raw_filter();
257 });
258 $("#select_node").change(function(){
259 update_lname();
260 update_raw_filter();
261 });
262 $("#select_nodetype").change(function(){
263 update_raw_filter();
264 });
265 $("#colour").change(function(){
266 update_raw_filter();
267 });
268
269 $('#user_filter').click(function(){
270 if(this.text=='(Add all users)'){
271 $.each(userlist, function(u, user){
272 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
273 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
274 initialize: function(name, options) {
275 var url = [
276 "tile/${z}/${x},${y}.png?&colour=" + colour + "&meetrondje__gebruiker__naam=" + user
277 ];
278 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
279 var newArguments = [name, url, options];
280 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
281 },
282 CLASS_NAME: "OpenLayers.Layer.Overlay"
283 });
284 filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
285 map.addLayer(filterlayer);
286 $("#user").append("<span id=\"" + user + "\"><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><input type=checkbox id=togglelayer checked /><font>" + user + " </font><a id=rmvlayer>X</a><br /></span>");
287 });
288 $(this).text('(Del all users');
289 }
290 else{
291 $(this).text('(Add all users)');
292 $.each($('#user span'), function(s, span){
293 layer = map.getLayersByName(span.id);
294 map.removeLayer(layer[0]);
295 $(span).remove();
296 });
297 }
298 });
299
300 /**
301 * Earlier process got all nodes in JSON and put them in array.
302 * For each node in array, new layer is added with node as parameter.
303 * Layercolour is randomized.
304 * If button is pressed again, layers will be deleted.
305 */
306 $('#node_filter').click(function(){
307 if(this.text=='(Add all nodes)'){
308 $.each(nodelist, function(n, node){
309 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
310 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
311 initialize: function(name, options) {
312 var url = [
313 "tile/${z}/${x},${y}.png?&colour=" + colour + "&accespoint__ssid=" + node
314 ];
315 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
316 var newArguments = [name, url, options];
317 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
318 },
319 CLASS_NAME: "OpenLayers.Layer.Overlay"
320 });
321 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
322 map.addLayer(nodefilterlayer);
323 $("#node").append("<span class='node' id=\"" + node + "\"><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><input type=checkbox id=togglelayer checked /><font>" + node + " </font><a id=rmvlayer>X</a><br /></span>");
324 });
325 $(this).text('(Del all nodes)');
326 }
327 else{
328 $(this).text('(Add all nodes)');
329 $.each($('#node span'), function(s, span){
330 layer = map.getLayersByName(span.id);
331 map.removeLayer(layer[0]);
332 $(span).remove();
333 });
334 }
335 });
336
337 function get_raw_filter() {
338 var query_array = [];
339
340 /* Values to be used to create the filter */
341 user = $('#select_user option:selected').val();
342 dataset = $('#select_dataset option:selected').val();
343 wlnode = $('#select_node option:selected').val();
344 nodetype = $('#select_nodetype option:selected').val();
345 start_date = $('#start_date').val();
346 end_date = $('#end_date').val();
347 colour = $("#colour").val();
348
349 // some checks if values are correct, and adding them to parts of the link
350 if (user != 'all') {
351 query_array.push('meetrondje__gebruiker__naam=' + user);
352 }
353 if (dataset != 'all') {
354 query_array.push('meetrondje__naam=' + dataset);
355 }
356 if (wlnode != 'all') {
357 query_array.push('accespoint__ssid=' + wlnode);
358 }
359 if (nodetype) {
360 query_array.push(nodetype);
361 }
362
363 if (start_date){
364 sd_d=start_date.substr(0,2);
365 sd_m=start_date.substr(3,2);
366 sd_y=start_date.substr(6,4);
367 query_array.push('meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d);
368 }
369 if (end_date){
370 ed_d=end_date.substr(0,2);
371 ed_m=end_date.substr(3,2);
372 ed_y=end_date.substr(6,4);
373 query_array.push('meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d);
374 }
375
376 var min = $("#select_sig_slider").slider("values")[0];
377 var max = $("#select_sig_slider").slider("values")[1];
378 query_array.push('signaal__gte=' + min);
379 query_array.push('signaal__lte=' + max);
380
381 /**
382 * On HEX to RGB:
383 * http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
384 * If no colour is defined, use a random colour
385 */
386 if (colour){
387 colour = [parseInt((colour.substr(1, 2)),16), parseInt((colour.substr(3, 2)),16), parseInt((colour.substr(5, 2)),16)];
388 } else {
389 colour = [Math.floor(Math.random()*256), Math.floor (Math.random()*256), Math.floor(Math.random()*256)];
390 }
391 query_array.push('colour=' + colour.join(','));
392
393 /* Return final result */
394 var raw_filter = query_array.filter(function() {return true;}).sort().join('&');
395 return raw_filter;
396 }
397
398 /**
399 * Adds a new layer when clicked.
400 * Filters set by user are used as layer parameters.
401 * Colour is either chosen or randomized.
402 * Blank parameters are ignored.
403 */
404 function add_filter(lname, filter, colour) {
405 // setting layer
406 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
407 initialize: function(name, options) {
408 var url = [
409 "tile/${z}/${x},${y}.png?" + filter,
410 ];
411 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
412 var newArguments = [name, url, options];
413 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
414 },
415 colour: colour,
416 CLASS_NAME: "OpenLayers.Layer.Overlay"
417 });
418
419 // adding layer
420 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
421 map.addLayer(filterlayer);
422
423 $("#custom").append("<span id=\"" + lname + "\"><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><input type=checkbox id=togglelayer checked /><font>" + lname + " </font><a id=rmvlayer>X</a><br /></span>");
424 }
425
426 $('#add_filter').click(function(){
427 lname = $("#lname").val();
428 if (lname == ''){
429 lname= 'Custom Filter';
430 }
431 add_filter(lname, $("#raw_filter").val(), colour);
432
433 });
434
435 // Parse the parameters
436 var items = window.location.search.slice(1).split('&');
437 var params = new Object;
438 for (var i=0; i < items.length; i++) {
439 var kv = items[i].split('=');
440 params[kv[0]] = decodeURIComponent(kv[1]);
441 }
442
443 init_heatmap();
444 init_slider(35,75);
445
446
447 // Initiate the custom filters
448 if (params['layercount']) {
449 for (var i=1; i <= params['layercount']; i++) {
450 add_filter(params['layername' + i], params['layerfilter' + i], params['layercolour' + i]);
451 }
452 }
453 var pl = map.getControlsByClass('OpenLayers.Control.Permalink');
454 pl.updateLink;
455});
Note: See TracBrowser for help on using the repository browser.