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

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

Allow specifing custom filters from the CLI
File size: 14.6 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": json.gebruiker + "-" + 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_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 $("#colour").change(function(){
263 update_raw_filter();
264 });
265
266 $('#user_filter').click(function(){
267 if(this.text=='(Add all users)'){
268 $.each(userlist, function(u, user){
269 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
270 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
271 initialize: function(name, options) {
272 var url = [
273 "tile/${z}/${x},${y}.png?&colour=" + colour + "&meetrondje__gebruiker__naam=" + user
274 ];
275 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
276 var newArguments = [name, url, options];
277 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
278 },
279 CLASS_NAME: "OpenLayers.Layer.Overlay"
280 });
281 filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
282 map.addLayer(filterlayer);
283 $("#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>");
284 });
285 $(this).text('(Del all users');
286 }
287 else{
288 $(this).text('(Add all users)');
289 $.each($('#user span'), function(s, span){
290 layer = map.getLayersByName(span.id);
291 map.removeLayer(layer[0]);
292 $(span).remove();
293 });
294 }
295 });
296
297 /**
298 * Earlier process got all nodes in JSON and put them in array.
299 * For each node in array, new layer is added with node as parameter.
300 * Layercolour is randomized.
301 * If button is pressed again, layers will be deleted.
302 */
303 $('#node_filter').click(function(){
304 if(this.text=='(Add all nodes)'){
305 $.each(nodelist, function(n, node){
306 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
307 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
308 initialize: function(name, options) {
309 var url = [
310 "tile/${z}/${x},${y}.png?&colour=" + colour + "&accespoint__ssid=" + node
311 ];
312 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
313 var newArguments = [name, url, options];
314 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
315 },
316 CLASS_NAME: "OpenLayers.Layer.Overlay"
317 });
318 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
319 map.addLayer(nodefilterlayer);
320 $("#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>");
321 });
322 $(this).text('(Del all nodes)');
323 }
324 else{
325 $(this).text('(Add all nodes)');
326 $.each($('#node span'), function(s, span){
327 layer = map.getLayersByName(span.id);
328 map.removeLayer(layer[0]);
329 $(span).remove();
330 });
331 }
332 });
333
334 function get_raw_filter() {
335 user = $('#select_user option:selected').text();
336 dataset = $('#select_dataset option:selected').text();
337 wlnode = $('#select_node option:selected').text();
338 start_date = $('#start_date').val();
339 end_date = $('#end_date').val();
340 colour = $("#colour").val();
341
342 /**
343 * On HEX to RGB:
344 * http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
345 */
346 colour = parseInt((colour.substr(1, 2)),16) + ',' + parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16);
347
348 // some checks if values are correct, and adding them to parts of the link
349 if (user == 'all') {
350 user = '';
351 } else {
352 user='&meetrondje__gebruiker__naam='+user;
353 }
354 if (dataset == 'all') {
355 dataset = '';
356 } else {
357 dataset='&meetrondje__naam='+dataset;
358 }
359 if (wlnode == 'all'){
360 wlnode='';
361 } else {
362 wlnode='&accespoint__ssid='+wlnode;
363 }
364 if (start_date && end_date){
365 sd_d=start_date.substr(0,2);
366 sd_m=start_date.substr(3,2);
367 sd_y=start_date.substr(6,4);
368
369 ed_d=end_date.substr(0,2);
370 ed_m=end_date.substr(3,2);
371 ed_y=end_date.substr(6,4);
372
373 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
374 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
375 }
376 if (start_date && !end_date){
377 sd_d=start_date.substr(0,2);
378 sd_m=start_date.substr(3,2);
379 sd_y=start_date.substr(6,4);
380 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
381 end_date='';
382 }
383 if (!start_date && end_date){
384 ed_d=end_date.substr(0,2);
385 ed_m=end_date.substr(3,2);
386 ed_y=end_date.substr(6,4);
387 start_date='';
388 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
389 }
390 if (colour != 'NaN,NaN,NaN'){
391 colour=colour;
392 } else {
393 colour = Math.floor(Math.random()*256)+','+Math.floor (Math.random()*256)+','+Math.floor(Math.random()*256);
394 }
395
396 var min = $("#select_sig_slider").slider("values")[0];
397 var max = $("#select_sig_slider").slider("values")[1];
398 signal = '&signaal__gte=' + min + '&signaal__lte=' + max;
399
400 var raw_filter = "colour=" + colour + user + dataset + wlnode + start_date + end_date + signal
401 return raw_filter;
402 }
403
404 /**
405 * Adds a new layer when clicked.
406 * Filters set by user are used as layer parameters.
407 * Colour is either chosen or randomized.
408 * Blank parameters are ignored.
409 */
410 function add_filter(lname, filter) {
411 // setting layer
412 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
413 initialize: function(name, options) {
414 var url = [
415 "tile/${z}/${x},${y}.png?" + filter,
416 ];
417 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
418 var newArguments = [name, url, options];
419 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
420 },
421
422 CLASS_NAME: "OpenLayers.Layer.Overlay"
423 });
424
425 // adding layer
426 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
427 map.addLayer(filterlayer);
428
429 $("#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>");
430 }
431
432 $('#add_filter').click(function(){
433 lname = $("#lname").val();
434 if (lname == ''){
435 lname= 'Custom Filter';
436 }
437 add_filter(lname, $("#raw_filter").val());
438
439 });
440 init_heatmap();
441 init_slider(35,75);
442
443 // Initiate the custom filters
444 var items = window.location.hash.split('#').slice(1);
445 for (var i=0; i < items.length; i++) {
446 var y = items[i].split('!');
447 var label = y[0];
448 var url = y[1];
449 add_filter(label, url);
450 }
451});
Note: See TracBrowser for help on using the repository browser.