source: src/django_gheat/website/templates/home.html@ 9266

Last change on this file since 9266 was 9266, checked in by dennisw, 13 years ago

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 size: 4.6 KB
Line 
1<html>
2<head>
3 <link href="{{ STATIC_URL }}style.css" rel="stylesheet" type="text/css" media="screen" />
4 <link type="text/css" href="{{ STATIC_URL }}jquery-ui-1.8.13.custom.css" rel="Stylesheet" />
5 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}jquery-1.6.1.min.js"></script>
6 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenLayers.js"></script>
7 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}OpenStreetMap.js"></script>
8 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap.js"></script>
9 <script type="text/javascript" language="javascript" src="{{ STATIC_URL }}jquery.chained.js"></script>
10 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}heatmap_extensions.js"></script>
11 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}colorpicker.js"></script>
12 <script type="text/javascript" language="Javascript" src="{{ STATIC_URL }}jquery-ui-1.8.13.custom.min.js"></script>
13 <script language="javascript" type="text/javascript">
14 $(function(){
15 $("#colour").colorPicker();
16 $("#start_date").datepicker({
17 dateFormat: "dd/mm/yy",
18 onSelect: function(dateValue, inst){
19 $("#end_date").datepicker("option", "minDate", dateValue);
20 }
21 });
22 var signallayer = '';
23 $("#slider").slider({
24 range: true,
25 min: 0,
26 max: 100,
27 values: [0, 100],
28 slide: function(event, sig){
29 $("#sig_value").text("Signal strength: " + sig.values[0] + " - " + sig.values[1]);
30 },
31 stop: function(event, sig){
32 if(signallayer){
33 map.removeLayer(signallayer);
34 }
35 OpenLayers.Layer.OSM.Overlay = OpenLayers.Class(OpenLayers.Layer.OSM, {
36 initialize: function(name, options) {
37 var url = [
38 "/website/tile/${z}/${x},${y}.png?colour=0,255,0&signaal__gte=" + sig.values[0] + "&signaal__lte=" + sig.values[1]
39 ];
40 options = OpenLayers.Util.extend({ numZoomLevels: 21 }, options);
41 var newArguments = [name, url, options];
42 OpenLayers.Layer.OSM.prototype.initialize.apply(this, newArguments);
43 },
44 CLASS_NAME: "OpenLayers.Layer.Overlay"
45 });
46 signallayer = new OpenLayers.Layer.OSM.Overlay("Signal strength: " + sig.values[0] + " - " + sig.values[1], {isBaseLayer: false, visibility: true});
47 map.addLayer(signallayer);
48 },
49 });
50
51 $("#end_date").datepicker({
52 dateFormat: "dd/mm/yy",
53 });
54
55 $("#menu_filter").click(function(){
56 $("#filter").slideToggle("fast");
57 $("#info").slideUp("fast");
58 });
59 $("#menu_info").click(function(){
60 $("#filter").slideUp("fast");
61 $("#info").slideToggle("fast");
62 });
63 });
64 </script>
65</head>
66<body onload="init()">
67 <div id="heatmap"></div>
68 <div id="container">
69 <div id="header">
70 Stichting Wireless Leiden - Heatmap
71 </div>
72 <div id="menu">
73 <a id="menu_info">Info</a>
74 <a id="menu_filter">Filters</a>
75 </div>
76 <div id="info">
77 This might need some work done.
78 </div>
79 <div id="filter">
80 <div id="filter_text">
81 <h1>Filters</h1>
82 <p>Create your custom layer by choosing the desired filter options on the right and adding it the layer to the list.</p>
83 <p>For instance, you can choose to create a layer with data measured only by yourself, or with a certain node from Wireless Leiden only.</p>
84 </div>
85 <div id="filter_list">
86 <form method="get" action="">
87 <input type="text" id="start_date" name="start_date" size="10"/> Start date<br />
88 <input type="text" id="end_date" name="end_date" size="10"/> End date<br />
89 <select id="select_user" style="width:104px"></select> User<br />
90 <select id="select_dataset" style="width:104px"></select> Dataset<br />
91 <select id="select_node" style="width:104px"></select> Node<br />
92 <input type="text" id="lname" name="lname" size="10"/> Filtername<br /><br />
93 <input type="text" id="colour" name="colour"/> Colour<br /><br />
94 <input type="button" id="add_filter" value="Add filter"/><br />
95 <input type="button" id="user_filter" value="Add userfilter"/><br />
96 <input type="button" id="node_filter" value="Add nodefilter"/><br />
97 </form>
98 </div>
99 </div>
100 </div>
101 <div id="node_list">
102 Click on map to display Wireless Leiden nodes.
103 </div>
104 <div id="sig_slider">
105 <font id='sig_value'>Signal strength: 0 - 100</font>
106 <div id="slider"></div>
107 </div>
108</body>
109</html>
Note: See TracBrowser for help on using the repository browser.