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

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

Filled in info page.
Experimented with getting filter names and showing and deleting filters. Right now, you can't delete your own custom filters (except the mass-add ones), but with this it might be possible to create a custom layer switcher where you can.
File size: 9.2 KB
Line 
1// Uses zoomlevel and mouseposition to call the nodelist.py view. View returns nodes in json format which is read and printed in document element.
2function getNodeList(zoomlevel, mousepos){
3 $.getJSON("/website/nodelist/" + zoomlevel + "," + mousepos.lat + "," + mousepos.lon,
4 function(json){
5 content = 'Wireless Leiden nodes on mouseposition:<br /><b>';
6 $.each(json, function(i,json){
7 content += json.fields.ssid + '<br />';
8 });
9 content += '</b>';
10 $("#node_list").html(content);
11 }
12 );
13}
14
15// Right way to get url parameters?: http://stackoverflow.com/questions/1403888/get-url-parameter-with-jquery/1404100#1404100
16function getURLParameter(name) {
17 return decodeURI(
18 (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
19 );
20}
21
22$(document).ready(function() {
23 var signallayer = '';
24 var userlist = new Array();
25 var nodelist = new Array();
26
27 // add colour picker
28 $("#colour").colorPicker();
29
30 // add date picker for start date
31 $("#start_date").datepicker({
32 dateFormat: "dd/mm/yy",
33 onSelect: function(dateValue, inst){
34 $("#end_date").datepicker("option", "minDate", dateValue);
35 }
36 });
37
38 // add date picker for end date
39 $("#end_date").datepicker({
40 dateFormat: "dd/mm/yy",
41 });
42 var testname = new Array();
43 // add slider for signal strength filter
44 $("#slider").slider({
45 range: true,
46 min: 0,
47 max: 100,
48 values: [0, 100],
49 // while sliding, it changes the text above the slider to show the values realtime
50 slide: function(event, sig){
51 $("#sig_value").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
52 },
53 // on slider stop, it tries to delete the old layer and creates a new layer with the slider values
54 stop: function(event, sig){
55 if(signallayer){
56 map.removeLayer(signallayer);
57 }
58 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
59 initialize: function(name, options) {
60 var url = [
61 "/website/tile/${z}/${x},${y}.png?colour=250,250,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]
62 ];
63 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
64 var newArguments = [name, url, options];
65 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
66 },
67 CLASS_NAME: "OpenLayers.Layer.Overlay"
68 });
69 lname = "Signal strength: " + sig.values[0] + " - " + sig.values[1];
70 signallayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
71 map.addLayer(signallayer);
72 },
73 });
74
75 $("#filter_text").append("<a id=remove>test</a>");
76 $("#remove").click(function(){
77 map.removeLayer(signallayer);
78 });
79
80 // menu toggle
81 $("#menu_filter").click(function(){
82 $("#filter").slideToggle("fast");
83 $("#info").slideUp("fast");
84 });
85 $("#menu_info").click(function(){
86 $("#filter").slideUp("fast");
87 $("#info").slideToggle("fast");
88 });
89
90 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
91 $.getJSON("/website/filters/",
92 function(json) {
93 $.each(json, function(i,json){
94 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
95 userlist.push(json.gebruiker);
96 $.each(json.meetrondje, function(m, meetrondje){
97 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
98 $.each(meetrondje.nodes, function(n, nodes){
99 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
100 if(jQuery.inArray(nodes, nodelist)<0){
101 nodelist.push(nodes);
102 }
103 });
104 });
105 });
106 // Initiate the chain
107 $("#select_dataset").chained("#select_user");
108 $("#select_node").chained("#select_dataset");
109 }
110 );
111
112 // add filter per user
113 $('#user_filter').click(function(){
114 if(this.value=='Add userfilter'){
115 $.each(userlist, function(u, user){
116 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
117 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
118 initialize: function(name, options) {
119 var url = [
120 "/website/tile/${z}/${x},${y}.png?" + colour + "&meetrondje__gebruiker__naam=" + user
121 ];
122 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
123 var newArguments = [name, url, options];
124 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
125 },
126 CLASS_NAME: "OpenLayers.Layer.Overlay"
127 });
128 filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
129 map.addLayer(filterlayer);
130 });
131 $(this).attr('value', 'Del userfilter');
132 }
133 else{
134 $(this).attr('value', 'Add userfilter');
135 $.each(userlist, function(u, user){
136 layer = map.getLayersByName('User: ' + user);
137 map.removeLayer(layer[0]);
138 });
139 }
140 });
141
142 // add filter per node
143 $('#node_filter').click(function(){
144 if(this.value=='Add nodefilter'){
145 $.each(nodelist, function(n, node){
146 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
147 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
148 initialize: function(name, options) {
149 var url = [
150 "/website/tile/${z}/${x},${y}.png?" + colour + "&accespoint__ssid=" + node
151 ];
152 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
153 var newArguments = [name, url, options];
154 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
155 },
156 CLASS_NAME: "OpenLayers.Layer.Overlay"
157 });
158 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
159 map.addLayer(nodefilterlayer);
160 });
161 $(this).attr('value', 'Del nodefilter');
162 }
163 else{
164 $(this).attr('value', 'Add nodefilter');
165 $.each(nodelist, function(n, node){
166 layer = map.getLayersByName('Node: ' + node);
167 map.removeLayer(layer[0]);
168 });
169 }
170 });
171
172 // add custom filter
173 $('#add_filter').click(function(){
174 //get values from elements
175 user = $('#select_user option:selected').text();
176 dataset = $('#select_dataset option:selected').text();
177 wlnode = $('#select_node option:selected').text();
178 start_date = $('#start_date').val();
179 end_date = $('#end_date').val();
180 colour = encodeURIComponent(document.getElementById("colour").value);
181 lname = encodeURIComponent(document.getElementById("lname").value);
182
183 // HEX to RGB: http://stackoverflow.com/questions/5798868/need-some-tips-with-how-to-convert-a-hexadecimal-color-value-to-a-rgb-one/5798900#5798900
184 // '#' comes out as '%23', so substr() starts at char 3
185 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
186
187 // some checks if values are correct, and adding them to parts of the link
188 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
189 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
190 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
191 if (start_date && end_date){
192 sd_d=start_date.substr(0,2);
193 sd_m=start_date.substr(3,2);
194 sd_y=start_date.substr(6,4);
195
196 ed_d=end_date.substr(0,2);
197 ed_m=end_date.substr(3,2);
198 ed_y=end_date.substr(6,4);
199
200 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
201 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
202 }
203 if (start_date && !end_date){
204 sd_d=start_date.substr(0,2);
205 sd_m=start_date.substr(3,2);
206 sd_y=start_date.substr(6,4);
207 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
208 end_date='';
209 }
210 if (!start_date && end_date){
211 ed_d=end_date.substr(0,2);
212 ed_m=end_date.substr(3,2);
213 ed_y=end_date.substr(6,4);
214 start_date='';
215 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
216 }
217 if (colour != 'NaN,NaN,NaN'){colour='colour='+colour;}
218 else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
219 if (lname != ''){lname=lname;}
220 else {lname = 'Custom Filter';}
221
222 // setting layer
223 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
224 initialize: function(name, options) {
225 var url = [
226 "/website/tile/${z}/${x},${y}.png?" + colour + user + dataset + wlnode + start_date + end_date
227 ];
228 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
229 var newArguments = [name, url, options];
230 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
231 },
232 CLASS_NAME: "OpenLayers.Layer.Overlay"
233 });
234
235 // adding layer
236 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
237 map.addLayer(filterlayer);
238 });
239});
Note: See TracBrowser for help on using the repository browser.