Changeset 9779 for src/django_gheat/wlheatmap

Timestamp:

Dec 14, 2011, 7:50:53 PM (13 years ago)

Author:

rick

Message:

Filter should be allowed to be manually set as well, cause I like to run somehow more advanced filters..

Location:

src/django_gheat/wlheatmap

Files:

• static/heatmap_extensions.js (modified) (9 diffs)
• static/style.css (modified) (2 diffs)
• templates/home.html (modified) (1 diff)

src/django_gheat/wlheatmap/static/heatmap_extensions.js

@@ -26 +26 @@
 }
 
+
 $(window).load(function() {
   var signallayer = '';
@@ -31 +32 @@
   var nodelist = new Array();
 
+  function update_raw_filter() {
+     $("#raw_filter").val(get_raw_filter());
+  }
+
   /**
    * Adds colourpicker for layer colour.
@@ -45 +50 @@
     onSelect: function(dateValue, inst){
       $("#end_date").datepicker("option", "minDate", dateValue);
+      update_raw_filter();
     }
   });
   $("#end_date").datepicker({
-    dateFormat: "dd/mm/yy"
+    dateFormat: "dd/mm/yy",
+    onSelect: function(dateValue, inst){
+      update_raw_filter();
+    }
   });
 
@@ -62 +71 @@
   function update_sig_slider(min,max) {
       $("#select_sig_value").text("Signal Strength: " + min + " - " + max);
+      update_raw_filter();
   };
 
@@ -240 +250 @@
   $("#select_user").change(function(){
     update_lname();
+    update_raw_filter();
   });
   $("#select_dataset").change(function(){
     update_lname();
+    update_raw_filter();
   });
   $("#select_node").change(function(){
     update_lname();
+    update_raw_filter();
+  });
+  $("#colour").change(function(){
+    update_raw_filter();
   });
 
@@ -316 +332 @@
   });
 
-  /**
-   * Adds a new layer when clicked.
-   * Filters set by user are used as layer parameters.
-   * Colour is either chosen or randomized.
-   * Blank parameters are ignored.
-   */
-  $('#add_filter').click(function(){
-    // get values from elements
+  function get_raw_filter() {
     user = $('#select_user option:selected').text();
     dataset = $('#select_dataset option:selected').text();
@@ -330 +339 @@
     end_date = $('#end_date').val();
     colour = $("#colour").val();
-    lname = $("#lname").val();
 
     /**
@@ -385 +393 @@
       colour = Math.floor(Math.random()*256)+','+Math.floor (Math.random()*256)+','+Math.floor(Math.random()*256);
     }
-    if (lname == ''){
-      lname= 'Custom Filter';
-    }
 
     var min = $("#select_sig_slider").slider("values")[0];
     var max = $("#select_sig_slider").slider("values")[1];
     signal = '&signaal__gte=' + min + '&signaal__lte=' + max;
+
+    var raw_filter = "colour=" + colour + user + dataset + wlnode + start_date + end_date + signal
+    return raw_filter;
+  }
+
+  /**
+   * Adds a new layer when clicked.
+   * Filters set by user are used as layer parameters.
+   * Colour is either chosen or randomized.
+   * Blank parameters are ignored.
+   */
+  $('#add_filter').click(function(){
+    // get values from elements
+
+    lname = $("#lname").val();
+    if (lname == ''){
+      lname= 'Custom Filter';
+    }
 
     // setting layer
@@ -397 +420 @@
       initialize: function(name, options) {
         var url = [
-          "tile/${z}/${x},${y}.png?colour=" + colour + user + dataset + wlnode + start_date + end_date + signal
+          "tile/${z}/${x},${y}.png?" + $("#raw_filter").val(),
         ];
         options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);

src/django_gheat/wlheatmap/static/style.css

@@ -75 +75 @@
 #filter_text{
   height:100%;
-  width:570px;
+  width:200px;
   overflow:hidden;
   float:left;
@@ -82 +82 @@
 #filter_list{
   padding:5px;
-  width:200px;
   border-left: 1px solid #BA0000;
   float:right;

src/django_gheat/wlheatmap/templates/home.html

@@ -50 +50 @@
             <div id="select_sig_slider"></div>
           </div>
+          <input type="text" id="colour" name="colour"/> Colour<br /><br />
+          <textarea rows="5" id="raw_filter" name="raw_filter" cols="50"></textarea><br /><br />
           <input type="text" id="lname" name="lname" size="10"/> Filtername<br /><br />
-          <input type="text" id="colour" name="colour"/> Colour<br /><br />
-          <input type="button" id="add_filter" value="Add filter"/><br />
+          <input type="button" id="add_filter" value="Add filter" /><br />
         </form>
       </div>