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