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

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

Some tricks to start making permalinks for custom filters to be able to share more interesing views right from a single link. As building those filters can sometimes be a burden...
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": 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 type = y[0];
448 if ( type == 'filter') {
449 add_filter(y[1], y[2]);
450 } else if ( type == 'focus') {
451 var lonLat = new OpenLayers.LonLat(y[1], y[2]).transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject());
452 map.setCenter (lonLat, y[3]);
453 }
454 }
455});
Note: See TracBrowser for help on using the repository browser.