Changeset 9266 for src/django_gheat/website/templates/home.html

Timestamp:

Jun 17, 2011, 12:58:13 PM (14 years ago)

Author:

dennisw

Message:

Added a slider that creates a layer with signal strength. (works with range, e.g. signal strength 50 - 100, figured that gives more control)

File:

• src/django_gheat/website/templates/home.html (modified) (2 diffs)

src/django_gheat/website/templates/home.html

@@ -13 +13 @@
   <script language="javascript" type="text/javascript">
     $(function(){
-      $('#colour').colorPicker();
-      $('#start_date').datepicker({
-        dateFormat: 'dd/mm/yy',
+      $("#colour").colorPicker();
+      $("#start_date").datepicker({
+        dateFormat: "dd/mm/yy",
         onSelect: function(dateValue, inst){
-          $('#end_date').datepicker('option', 'minDate', dateValue);
+          $("#end_date").datepicker("option", "minDate", dateValue);
         }
       });
-
-      $('#end_date').datepicker({
-        dateFormat: 'dd/mm/yy',
+      var signallayer = '';
+      $("#slider").slider({
+        range: true,
+        min: 0,
+        max: 100,
+        values: [0, 100],
+        slide: function(event, sig){
+          $("#sig_value").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
+        },
+        stop: function(event, sig){
+          if(signallayer){
+            map.removeLayer(signallayer);
+          }
+          OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
+            initialize: function(name, options) {
+              var url = [
+                "/website/tile/${z}/${x},${y}.png?colour=0,255,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]
+              ];
+              options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
+              var newArguments = [name, url, options];
+              OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
+            },
+          CLASS_NAME: "OpenLayers.Layer.Overlay"
+          });
+          signallayer = new OpenLayers.Layer.OSM.Overlay("Signal strength: " + sig.values[0] + " - " + sig.values[1], {isBaseLayer: false, visibility: true});
+          map.addLayer(signallayer);
+        },
       });
 
-      $('#menu_filter').click(function(){
-        $('#filter').slideToggle('fast');
-        $('#info').slideUp('fast'); 
+      $("#end_date").datepicker({
+        dateFormat: "dd/mm/yy",
       });
-      $('#menu_info').click(function(){
-        $('#filter').slideUp('fast');
-        $('#info').slideToggle('fast'); 
+
+      $("#menu_filter").click(function(){
+        $("#filter").slideToggle("fast");
+        $("#info").slideUp("fast"); 
+      });
+      $("#menu_info").click(function(){
+        $("#filter").slideUp("fast");
+        $("#info").slideToggle("fast"); 
       });
     });
@@ -71 +99 @@
     </div>
   </div>
-  <div id='node_list'>
+  <div id="node_list">
   Click on map to display Wireless Leiden nodes.
+  </div>
+  <div id="sig_slider">
+    <font id='sig_value'>Signal strength: 0 - 100</font>
+    <div id="slider"></div>
   </div>
 </body>