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