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

Last change on this file since 9619 was 9578, checked in by rick, 14 years ago

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