| 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.
|
|---|
| 2 | function 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
|
|---|
| 16 | function 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 |
|
|---|
| 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 | $("#signallayer font").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
|
|---|
| 53 | },
|
|---|
| 54 | // on slider stop, it tries to delete the old layer and creates a new layer with the slider values
|
|---|
| 55 | stop: function(event, sig){
|
|---|
| 56 | signallayer = map.getLayersByName('signallayer');
|
|---|
| 57 | console.log(signallayer[0]);
|
|---|
| 58 | signallayer[0].setUrl("/website/tile/${z}/${x},${y}.png?colour=250,250,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]);
|
|---|
| 59 | signallayer[0].redraw();
|
|---|
| 60 | },
|
|---|
| 61 | });
|
|---|
| 62 |
|
|---|
| 63 | // toggle layer visibility
|
|---|
| 64 | $("#togglelayer").live("click", function(){
|
|---|
| 65 | status = $(this).attr("checked");
|
|---|
| 66 | layername = $(this).parents('span').attr('id');
|
|---|
| 67 | layer = map.getLayersByName(layername);
|
|---|
| 68 | layer[0].setVisibility(status);
|
|---|
| 69 | });
|
|---|
| 70 |
|
|---|
| 71 | // toggle layer visibility per categorie
|
|---|
| 72 | $("#togglecat").click(function(){
|
|---|
| 73 | layertype = $(this).closest('div').attr('id');
|
|---|
| 74 |
|
|---|
| 75 |
|
|---|
| 76 | });
|
|---|
| 77 |
|
|---|
| 78 | // remove layer
|
|---|
| 79 | $("#rmvlayer").live("click", function(){
|
|---|
| 80 | layername = $(this).closest('span').attr('id');
|
|---|
| 81 | layer = map.getLayersByName(layername);
|
|---|
| 82 | map.removeLayer(layer[0]);
|
|---|
| 83 | $(this).closest('span').remove();
|
|---|
| 84 | });
|
|---|
| 85 |
|
|---|
| 86 | // menu toggle
|
|---|
| 87 | $("#menu_filter").click(function(){
|
|---|
| 88 | $("#filter").slideToggle("fast");
|
|---|
| 89 | $("#info").slideUp("fast");
|
|---|
| 90 | });
|
|---|
| 91 | $("#menu_info").click(function(){
|
|---|
| 92 | $("#filter").slideUp("fast");
|
|---|
| 93 | $("#info").slideToggle("fast");
|
|---|
| 94 | });
|
|---|
| 95 |
|
|---|
| 96 | // switcher toggle
|
|---|
| 97 | $("#layer_switcher_toggle").click(function(){
|
|---|
| 98 | $("#layer_switcher").toggle();
|
|---|
| 99 | if($(this).text() == '+'){
|
|---|
| 100 | $(this).html('-');
|
|---|
| 101 | }
|
|---|
| 102 | else{
|
|---|
| 103 | $(this).html('+');
|
|---|
| 104 | }
|
|---|
| 105 | });
|
|---|
| 106 |
|
|---|
| 107 | // Fastest?: http://stackoverflow.com/questions/170986/what-is-the-best-way-to-add-options-to-a-select-from-an-array-with-jquery
|
|---|
| 108 | $.getJSON("/website/filters/",
|
|---|
| 109 | function(json) {
|
|---|
| 110 | $.each(json, function(i,json){
|
|---|
| 111 | $("#select_user").append($("<option/>").attr("value",json.gebruiker).text(json.gebruiker));
|
|---|
| 112 | userlist.push(json.gebruiker);
|
|---|
| 113 | $.each(json.meetrondje, function(m, meetrondje){
|
|---|
| 114 | $("#select_dataset").append($("<option/>").attr({"class":json.gebruiker, "value":meetrondje.naam}).text(meetrondje.naam));
|
|---|
| 115 | $.each(meetrondje.nodes, function(n, nodes){
|
|---|
| 116 | $("#select_node").append($("<option/>").attr({"class":meetrondje.naam, "value":nodes}).text(nodes));
|
|---|
| 117 | if(jQuery.inArray(nodes, nodelist)<0){
|
|---|
| 118 | nodelist.push(nodes);
|
|---|
| 119 | }
|
|---|
| 120 | });
|
|---|
| 121 | });
|
|---|
| 122 | });
|
|---|
| 123 | // Initiate the chain
|
|---|
| 124 | $("#select_dataset").chained("#select_user");
|
|---|
| 125 | $("#select_node").chained("#select_dataset");
|
|---|
| 126 | }
|
|---|
| 127 | );
|
|---|
| 128 |
|
|---|
| 129 | // add filter per user
|
|---|
| 130 | $('#user_filter').click(function(){
|
|---|
| 131 | if(this.text=='(Add all users)'){
|
|---|
| 132 | $.each(userlist, function(u, user){
|
|---|
| 133 | 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=" + colour + "&meetrondje__gebruiker__naam=" + user
|
|---|
| 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 | filterlayer = new OpenLayers.Layer.OSM.Overlay(user, {isBaseLayer: false, visibility: true});
|
|---|
| 146 | map.addLayer(filterlayer);
|
|---|
| 147 | $("#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>");
|
|---|
| 148 | });
|
|---|
| 149 | $(this).text('(Del all users');
|
|---|
| 150 | }
|
|---|
| 151 | else{
|
|---|
| 152 | $(this).text('(Add all users)');
|
|---|
| 153 | $.each(userlist, function(u, user){
|
|---|
| 154 | layer = map.getLayersByName(user);
|
|---|
| 155 | map.removeLayer(layer[0]);
|
|---|
| 156 | });
|
|---|
| 157 | }
|
|---|
| 158 | });
|
|---|
| 159 |
|
|---|
| 160 | // add filter per node
|
|---|
| 161 | $('#node_filter').click(function(){
|
|---|
| 162 | if(this.text=='(Add all nodes)'){
|
|---|
| 163 | $.each(nodelist, function(n, node){
|
|---|
| 164 | colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);
|
|---|
| 165 | OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
|
|---|
| 166 | initialize: function(name, options) {
|
|---|
| 167 | var url = [
|
|---|
| 168 | "/website/tile/${z}/${x},${y}.png?&colour=" + colour + "&accespoint__ssid=" + node
|
|---|
| 169 | ];
|
|---|
| 170 | options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
|
|---|
| 171 | var newArguments = [name, url, options];
|
|---|
| 172 | OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
|
|---|
| 173 | },
|
|---|
| 174 | CLASS_NAME: "OpenLayers.Layer.Overlay"
|
|---|
| 175 | });
|
|---|
| 176 | nodefilterlayer = new OpenLayers.Layer.OSM.Overlay(node, {isBaseLayer: false, visibility: true});
|
|---|
| 177 | map.addLayer(nodefilterlayer);
|
|---|
| 178 | $("#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>");
|
|---|
| 179 | });
|
|---|
| 180 | $(this).text('(Del all nodes)');
|
|---|
| 181 | }
|
|---|
| 182 | else{
|
|---|
| 183 | $(this).text('(Add all nodes)');
|
|---|
| 184 | $.each($('#node span'), function(s, span){
|
|---|
| 185 | layer = map.getLayersByName(span.id);
|
|---|
| 186 | map.removeLayer(layer[0]);
|
|---|
| 187 | $(span).remove();
|
|---|
| 188 | });
|
|---|
| 189 | }
|
|---|
| 190 | });
|
|---|
| 191 |
|
|---|
| 192 | // add custom filter
|
|---|
| 193 | $('#add_filter').click(function(){
|
|---|
| 194 | //get values from elements
|
|---|
| 195 | user = $('#select_user option:selected').text();
|
|---|
| 196 | dataset = $('#select_dataset option:selected').text();
|
|---|
| 197 | wlnode = $('#select_node option:selected').text();
|
|---|
| 198 | start_date = $('#start_date').val();
|
|---|
| 199 | end_date = $('#end_date').val();
|
|---|
| 200 | colour = encodeURIComponent(document.getElementById("colour").value);
|
|---|
| 201 | lname = encodeURIComponent(document.getElementById("lname").value);
|
|---|
| 202 |
|
|---|
| 203 | // 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
|
|---|
| 204 | // '#' comes out as '%23', so substr() starts at char 3
|
|---|
| 205 | colour = parseInt((colour.substr(3, 2)),16) + ',' + parseInt((colour.substr(5, 2)),16) + ',' + parseInt((colour.substr(7, 2)),16);
|
|---|
| 206 |
|
|---|
| 207 | // some checks if values are correct, and adding them to parts of the link
|
|---|
| 208 | if (user != ''){user='&meetrondje__gebruiker__naam='+user;}
|
|---|
| 209 | if (dataset != ''){dataset='&meetrondje__naam='+dataset;}
|
|---|
| 210 | if (wlnode != ''){wlnode='&accespoint__ssid='+wlnode;}
|
|---|
| 211 | if (start_date && end_date){
|
|---|
| 212 | sd_d=start_date.substr(0,2);
|
|---|
| 213 | sd_m=start_date.substr(3,2);
|
|---|
| 214 | sd_y=start_date.substr(6,4);
|
|---|
| 215 |
|
|---|
| 216 | ed_d=end_date.substr(0,2);
|
|---|
| 217 | ed_m=end_date.substr(3,2);
|
|---|
| 218 | ed_y=end_date.substr(6,4);
|
|---|
| 219 |
|
|---|
| 220 | start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
|
|---|
| 221 | end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
|
|---|
| 222 | }
|
|---|
| 223 | if (start_date && !end_date){
|
|---|
| 224 | sd_d=start_date.substr(0,2);
|
|---|
| 225 | sd_m=start_date.substr(3,2);
|
|---|
| 226 | sd_y=start_date.substr(6,4);
|
|---|
| 227 | start_date='&meetrondje__datum__gte=' + sd_y +'-'+ sd_m +'-'+ sd_d;
|
|---|
| 228 | end_date='';
|
|---|
| 229 | }
|
|---|
| 230 | if (!start_date && end_date){
|
|---|
| 231 | ed_d=end_date.substr(0,2);
|
|---|
| 232 | ed_m=end_date.substr(3,2);
|
|---|
| 233 | ed_y=end_date.substr(6,4);
|
|---|
| 234 | start_date='';
|
|---|
| 235 | end_date='&meetrondje__datum__lte=' + ed_y +'-'+ ed_m +'-'+ ed_d;
|
|---|
| 236 | }
|
|---|
| 237 | if (colour != 'NaN,NaN,NaN'){colour=colour;}
|
|---|
| 238 | else {colour = Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256)+','+Math.floor(Math.random()*256);}
|
|---|
| 239 | if (lname != ''){lname=lname;}
|
|---|
| 240 | else {lname = 'Custom Filter';}
|
|---|
| 241 |
|
|---|
| 242 | // setting layer
|
|---|
| 243 | OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
|
|---|
| 244 | initialize: function(name, options) {
|
|---|
| 245 | var url = [
|
|---|
| 246 | "/website/tile/${z}/${x},${y}.png?&colour=" + colour + user + dataset + wlnode + start_date + end_date
|
|---|
| 247 | ];
|
|---|
| 248 | options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
|
|---|
| 249 | var newArguments = [name, url, options];
|
|---|
| 250 | OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
|
|---|
| 251 | },
|
|---|
| 252 |
|
|---|
| 253 | CLASS_NAME: "OpenLayers.Layer.Overlay"
|
|---|
| 254 | });
|
|---|
| 255 |
|
|---|
| 256 | // adding layer
|
|---|
| 257 | filterlayer = new OpenLayers.Layer.OSM.Overlay(lname, {isBaseLayer: false, visibility: true});
|
|---|
| 258 | map.addLayer(filterlayer);
|
|---|
| 259 |
|
|---|
| 260 | $("#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>");
|
|---|
| 261 | });
|
|---|
| 262 | });
|
|---|
