source: src/django_gheat/website/static/heatmap_extensions.js@ 9302

Last change on this file since 9302 was 9302, checked in by dennisw, 13 years ago

Added/changed/clarified some comments in code.
File size: 11.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("/website/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 $("#slider").slider({
58 range: true,
59 min: 0,
60 max: 100,
61 values: [0, 100],
62 // while sliding, it changes the text above the slider to show the values realtime
63 slide: function(event, sig){
64 $("#sig_value").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
65 $("#signallayer font").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
66 },
67 // on slider stop, it sets a new URL with updated values and redraws the layer
68 stop: function(event, sig){
69 signallayer = map.getLayersByName('signallayer');
70 console.log(signallayer[0]);
71 signallayer[0].setUrl("/website/tile/${z}/${x},${y}.png?colour=250,250,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]);
72 signallayer[0].redraw();
73 },
74 });
75
76 /**
77 * Toggles layer visibility on checkbox use from layerswitcher.
78 */
79 $("#togglelayer").live('click', function(){
80 status = $(this).attr("checked");
81 layername = $(this).parents('span').attr('id');
82 layer = map.getLayersByName(layername);
83 layer[0].setVisibility(status);
84 });
85
86 /**
87 * Toggles layer visibility per category on checkbox use from layerswitcher.
88 */
89 $("#togglecat").live("click", function(){
90 if($(this).attr("checked")){
91 status = true;
92 }
93 else{
94 status = false;
95 }
96 layertype = $(this).attr('class');
97 layers = new Array();
98 layers = $('#' + layertype).children('span');
99 $.each(layers, function(l, layer){
100 layer = map.getLayersByName(layer.id);
101 layer[0].setVisibility(status);
102 $(this).children('input').attr('checked', status);
103 });
104 });
105
106 /**
107 * Removes layer from map and layerswitcher.
108 */
109 $("#rmvlayer").live("click", function(){
110 layername = $(this).closest('span').attr('id');
111 layer = map.getLayersByName(layername);
112 map.removeLayer(layer[0]);
113 $(this).closest('span').remove();
114 });
115
116 /**
117 * Toggles text shown on website.
118 * 'info' shows info text.
119 * 'filter' page shows text on filters & filter options.
120 */
121 $("#menu_filter").click(function(){
122 $("#filter").slideToggle("fast");
123 $("#info").slideUp("fast");
124 });
125 $("#menu_info").click(function(){
126 $("#filter").slideUp("fast");
127 $("#info").slideToggle("fast");
128 });
129
130 /**
131 * Toggles layerswitcher visibility.
132 * On 'off', toggler shows a '+'.
133 * On 'on', toggler shows a '-'.
134 */
135 $("#layer_switcher_toggle").click(function(){
136 $("#layer_switcher").toggle();
137 if($(this).text() == '+'){
138 $(this).html('-');
139 }
140 else{
141 $(this).html('+');
142 }
143 });
144
145 /**
146 * Fastest?
147 * http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
148 */
149 $.getJSON("/website/filters/",
150 function(json) {
151 $.each(json, function(i,json){
152 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
153 userlist.push(json.gebruiker);
154 $.each(json.meetrondje, function(m, meetrondje){
155 console.log(meetrondje.datum);
156 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
157 $.each(meetrondje.nodes, function(n, nodes){
158 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
159 if(jQuery.inArray(nodes, nodelist)<0){
160 nodelist.push(nodes);
161 }
162 });
163 });
164 });
165 // Initiate the chain
166 $("#select_dataset").chained("#select_user");
167 $("#select_node").chained("#select_dataset");
168 }
169 );
170
171 /**
172 * Earlier process got all users in JSON and put them in array.
173 * For each user in array, new layer is added with username as parameter.
174 * Layercolour is randomized.
175 * If button is pressed again, layers will be deleted.
176 */
177 $('#user_filter').click(function(){
178 if(this.text=='(Add all users)'){
179 $.each(userlist, function(u, user){
180 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
181 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
182 initialize: function(name, options) {
183 var url = [
184 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&meetrondje__gebruiker__naam=" + user
185 ];
186 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
187 var newArguments = [name, url, options];
188 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
189 },
190 CLASS_NAME: "OpenLayers.Layer.Overlay"
191 });
192 filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
193 map.addLayer(filterlayer);
194 $("#user").append("<span id=\"" + user + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><font>" + user + " </font><a id=rmvlayer>X</a><br /></span>");
195 });
196 $(this).text('(Del all users');
197 }
198 else{
199 $(this).text('(Add all users)');
200 $.each(userlist, function(u, user){
201 layer = map.getLayersByName(user);
202 map.removeLayer(layer[0]);
203 });
204 }
205 });
206
207 /**
208 * Earlier process got all nodes in JSON and put them in array.
209 * For each node in array, new layer is added with node as parameter.
210 * Layercolour is randomized.
211 * If button is pressed again, layers will be deleted.
212 */
213 $('#node_filter').click(function(){
214 if(this.text=='(Add all nodes)'){
215 $.each(nodelist, function(n, node){
216 colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
217 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
218 initialize: function(name, options) {
219 var url = [
220 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&accespoint__ssid=" + node
221 ];
222 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
223 var newArguments = [name, url, options];
224 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
225 },
226 CLASS_NAME: "OpenLayers.Layer.Overlay"
227 });
228 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
229 map.addLayer(nodefilterlayer);
230 $("#node").append("<span class='node' id=\"" + node + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><font>" + node + " </font><a id=rmvlayer>X</a><br /></span>");
231 });
232 $(this).text('(Del all nodes)');
233 }
234 else{
235 $(this).text('(Add all nodes)');
236 $.each($('#node span'), function(s, span){
237 layer = map.getLayersByName(span.id);
238 map.removeLayer(layer[0]);
239 $(span).remove();
240 });
241 }
242 });
243
244 /**
245 * Adds a new layer when clicked.
246 * Filters set by user are used as layer parameters.
247 * Colour is either chosen or randomized.
248 * Blank parameters are ignored.
249 */
250 $('#add_filter').click(function(){
251 // get values from elements
252 user = $('#select_user option:selected').text();
253 dataset = $('#select_dataset option:selected').text();
254 wlnode = $('#select_node option:selected').text();
255 start_date = $('#start_date').val();
256 end_date = $('#end_date').val();
257 colour = encodeURIComponent(document.getElementById("colour").value);
258 lname = encodeURIComponent(document.getElementById("lname").value);
259
260 /**
261 * On HEX to RGB:
262 * http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
263 * Note that '#' comes out as '%23', so substr() starts at char 3
264 */
265 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
266
267 // some checks if values are correct, and adding them to parts of the link
268 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
269 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
270 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
271 if (start_date && end_date){
272 sd_d=start_date.substr(0,2);
273 sd_m=start_date.substr(3,2);
274 sd_y=start_date.substr(6,4);
275
276 ed_d=end_date.substr(0,2);
277 ed_m=end_date.substr(3,2);
278 ed_y=end_date.substr(6,4);
279
280 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
281 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
282 }
283 if (start_date && !end_date){
284 sd_d=start_date.substr(0,2);
285 sd_m=start_date.substr(3,2);
286 sd_y=start_date.substr(6,4);
287 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
288 end_date='';
289 }
290 if (!start_date && end_date){
291 ed_d=end_date.substr(0,2);
292 ed_m=end_date.substr(3,2);
293 ed_y=end_date.substr(6,4);
294 start_date='';
295 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
296 }
297 if (colour != 'NaN,NaN,NaN'){colour=colour;}
298 else {colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
299 if (lname != ''){lname=lname;}
300 else {lname = 'Custom Filter';}
301
302 // setting layer
303 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
304 initialize: function(name, options) {
305 var url = [
306 "/website/tile/${z}/${x},${y}.png?&colour=" + colour + user + dataset + wlnode + start_date + end_date
307 ];
308 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
309 var newArguments = [name, url, options];
310 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
311 },
312
313 CLASS_NAME: "OpenLayers.Layer.Overlay"
314 });
315
316 // adding layer
317 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
318 map.addLayer(filterlayer);
319
320 $("#custom").append("<span id=\"" + lname + "\"><input type=checkbox id=togglelayer checked /><div id='layer_switcher_colour' style='background-color:rgb(" + colour + ")' /><font>" + lname + " </font><a id=rmvlayer>X</a><br /></span>");
321 });
322});
Note: See TracBrowser for help on using the repository browser.