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

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

Moved scripts from home.html to heatmap_extensions.js for better overview.
File size: 8.8 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$(document).ready(function() {
16 var signallayer = '';
17 var userlist = new Array();
18 var nodelist = new Array();
19
20 // add colour picker
21 $("#colour").colorPicker();
22
23 // add date picker for start date
24 $("#start_date").datepicker({
25 dateFormat: "dd/mm/yy",
26 onSelect: function(dateValue, inst){
27 $("#end_date").datepicker("option", "minDate", dateValue);
28 }
29 });
30
31 // add date picker for end date
32 $("#end_date").datepicker({
33 dateFormat: "dd/mm/yy",
34 });
35
36 // add slider for signal strength filter
37 $("#slider").slider({
38 range: true,
39 min: 0,
40 max: 100,
41 values: [0, 100],
42 // while sliding, it changes the text above the slider to show the values realtime
43 slide: function(event, sig){
44 $("#sig_value").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
45 },
46 // on slider stop, it tries to delete the old layer and creates a new layer with the slider values
47 stop: function(event, sig){
48 if(signallayer){
49 map.removeLayer(signallayer);
50 }
51 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
52 initialize: function(name, options) {
53 var url = [
54 "/website/tile/${z}/${x},${y}.png?colour=0,255,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]
55 ];
56 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
57 var newArguments = [name, url, options];
58 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
59 },
60 CLASS_NAME: "OpenLayers.Layer.Overlay"
61 });
62 signallayer = new OpenLayers.Layer.OSM.Overlay("Signal strength: " + sig.values[0] + " - " + sig.values[1], {isBaseLayer: false, visibility: true});
63 map.addLayer(signallayer);
64 },
65 });
66
67 // menu toggle
68 $("#menu_filter").click(function(){
69 $("#filter").slideToggle("fast");
70 $("#info").slideUp("fast");
71 });
72 $("#menu_info").click(function(){
73 $("#filter").slideUp("fast");
74 $("#info").slideToggle("fast");
75 });
76
77 // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
78 $.getJSON("/website/filters/",
79 function(json) {
80 $.each(json, function(i,json){
81 $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
82 userlist.push(json.gebruiker);
83 $.each(json.meetrondje, function(m, meetrondje){
84 $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
85 $.each(meetrondje.nodes, function(n, nodes){
86 $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
87 if(jQuery.inArray(nodes, nodelist)<0){
88 nodelist.push(nodes);
89 }
90 });
91 });
92 });
93 // Initiate the chain
94 $("#select_dataset").chained("#select_user");
95 $("#select_node").chained("#select_dataset");
96 }
97 );
98
99 // add filter per user
100 $('#user_filter').click(function(){
101 if(this.value=='Add userfilter'){
102 $.each(userlist, function(u, user){
103 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
104 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
105 initialize: function(name, options) {
106 var url = [
107 "/website/tile/${z}/${x},${y}.png?" + colour + "&meetrondje__gebruiker__naam=" + user
108 ];
109 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
110 var newArguments = [name, url, options];
111 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
112 },
113 CLASS_NAME: "OpenLayers.Layer.Overlay"
114 });
115 filterlayer = new OpenLayers.Layer.OSM.Overlay("User: "+ user, {isBaseLayer: false, visibility: true});
116 map.addLayer(filterlayer);
117 });
118 $(this).attr('value', 'Del userfilter');
119 }
120 else{
121 $(this).attr('value', 'Add userfilter');
122 $.each(userlist, function(u, user){
123 layer = map.getLayersByName('User: ' + user);
124 map.removeLayer(layer[0]);
125 });
126 }
127 });
128
129 // add filter per node
130 $('#node_filter').click(function(){
131 if(this.value=='Add nodefilter'){
132 $.each(nodelist, function(n, node){
133 colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
134 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
135 initialize: function(name, options) {
136 var url = [
137 "/website/tile/${z}/${x},${y}.png?" + colour + "&accespoint__ssid=" + node
138 ];
139 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
140 var newArguments = [name, url, options];
141 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
142 },
143 CLASS_NAME: "OpenLayers.Layer.Overlay"
144 });
145 nodefilterlayer = new OpenLayers.Layer.OSM.Overlay("Node: "+ node, {isBaseLayer: false, visibility: true});
146 map.addLayer(nodefilterlayer);
147 });
148 $(this).attr('value', 'Del nodefilter');
149 }
150 else{
151 $(this).attr('value', 'Add nodefilter');
152 $.each(nodelist, function(n, node){
153 layer = map.getLayersByName('Node: ' + node);
154 map.removeLayer(layer[0]);
155 });
156 }
157 });
158
159 // add custom filter
160 $('#add_filter').click(function(){
161 //get values from elements
162 user = $('#select_user option:selected').text();
163 dataset = $('#select_dataset option:selected').text();
164 wlnode = $('#select_node option:selected').text();
165 start_date = $('#start_date').val();
166 end_date = $('#end_date').val();
167 colour = encodeURIComponent(document.getElementById("colour").value);
168 lname = encodeURIComponent(document.getElementById("lname").value);
169
170 // 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
171 // '#' comes out as '%23', so substr() starts at char 3
172 colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
173
174 // some checks if values are correct, and adding them to parts of the link
175 if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
176 if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
177 if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
178 if (start_date && end_date){
179 sd_d=start_date.substr(0,2);
180 sd_m=start_date.substr(3,2);
181 sd_y=start_date.substr(6,4);
182
183 ed_d=end_date.substr(0,2);
184 ed_m=end_date.substr(3,2);
185 ed_y=end_date.substr(6,4);
186
187 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
188 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
189 }
190 if (start_date && !end_date){
191 sd_d=start_date.substr(0,2);
192 sd_m=start_date.substr(3,2);
193 sd_y=start_date.substr(6,4);
194 start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
195 end_date='';
196 }
197 if (!start_date && end_date){
198 ed_d=end_date.substr(0,2);
199 ed_m=end_date.substr(3,2);
200 ed_y=end_date.substr(6,4);
201 start_date='';
202 end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
203 }
204 if (colour != 'NaN,NaN,NaN'){colour='colour='+colour;}
205 else {colour = '&colour='+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
206 if (lname != ''){lname=lname;}
207 else {lname = 'Custom Filter';}
208
209 // setting layer
210 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
211 initialize: function(name, options) {
212 var url = [
213 "/website/tile/${z}/${x},${y}.png?" + colour + user + dataset + wlnode + start_date + end_date
214 ];
215 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
216 var newArguments = [name, url, options];
217 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
218 },
219 CLASS_NAME: "OpenLayers.Layer.Overlay"
220 });
221
222 // adding layer
223 filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
224 map.addLayer(filterlayer);
225 });
226});
Note: See TracBrowser for help on using the repository browser.