| 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 | </head>
|
|---|
| 14 | <body onload="init()">
|
|---|
| 15 | <div id="heatmap"></div>
|
|---|
| 16 | <div id="container">
|
|---|
| 17 | <div id="header">
|
|---|
| 18 | Stichting Wireless Leiden - Heatmap
|
|---|
| 19 | </div>
|
|---|
| 20 | <div id="menu">
|
|---|
| 21 | <a id="menu_info">Info</a>
|
|---|
| 22 | <a id="menu_filter">Filters</a>
|
|---|
| 23 | </div>
|
|---|
| 24 | <div id="info">
|
|---|
| 25 | <div id="hide_parent"></div>
|
|---|
| 26 | <h1>Info</h1>
|
|---|
| 27 | <p>Welcome to Wireless Leiden's Heatmap. Here you can check for the coverage of (open) wifi connections in Leiden.</p>
|
|---|
| 28 | <p>On the right, you will find a layer selection panel. Here you can turn layers on or off, depending on what you would like to see displayed on the map.</p>
|
|---|
| 29 | <p>Above you will see a 'filter' button. Here you can set your own filters.</p>
|
|---|
| 30 | <p>Below you will see a textfield and a slider. The textfield displays Wireless Leiden nodes on the position where you clicked with your mouse. With the slider you can set the range of the signal strength you would like to have. Based on these values, a new layer will appear showing only the connections within your chosen range.</p>
|
|---|
| 31 | </div>
|
|---|
| 32 | <div id="filter">
|
|---|
| 33 | <div id="filter_text">
|
|---|
| 34 | <h1>Filters</h1>
|
|---|
| 35 | <p>Create your custom layer by choosing the desired filter options on the right and adding it the layer to the list.</p>
|
|---|
| 36 | <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>
|
|---|
| 37 | </div>
|
|---|
| 38 | <div id="filter_list">
|
|---|
| 39 | <form method="get" action="">
|
|---|
| 40 | <input type="text" id="start_date" name="start_date" size="10"/> Start date<br />
|
|---|
| 41 | <input type="text" id="end_date" name="end_date" size="10"/> End date<br />
|
|---|
| 42 | <select id="select_user" style="width:104px"></select> User<br />
|
|---|
| 43 | <select id="select_dataset" style="width:104px"></select> Dataset<br />
|
|---|
| 44 | <select id="select_node" style="width:104px"></select> Node<br />
|
|---|
| 45 | <input type="text" id="lname" name="lname" size="10"/> Filtername<br /><br />
|
|---|
| 46 | <input type="text" id="colour" name="colour"/> Colour<br /><br />
|
|---|
| 47 | <input type="button" id="add_filter" value="Add filter"/><br />
|
|---|
| 48 | </form>
|
|---|
| 49 | </div>
|
|---|
| 50 | <div id="hide_parent"></div>
|
|---|
| 51 | </div>
|
|---|
| 52 | </div>
|
|---|
| 53 | <div id="node_list">
|
|---|
| 54 | Click on map to display Wireless Leiden nodes.
|
|---|
| 55 | </div>
|
|---|
| 56 | <div id="sig_slider">
|
|---|
| 57 | <font id='sig_value'>Signal strength: 0 - 100</font>
|
|---|
| 58 | <div id="slider"></div>
|
|---|
| 59 | </div>
|
|---|
| 60 | <div id="layer_switcher_toggle">-
|
|---|
| 61 | </div>
|
|---|
| 62 | <div id="layer_switcher">
|
|---|
| 63 | <div id="cat_container">
|
|---|
| 64 | <div id="layer_switcher_cat">
|
|---|
| 65 | <div id="cat_hide"></div>
|
|---|
| 66 | <input type=checkbox id=togglecat class=default checked />Default layers
|
|---|
| 67 | </div>
|
|---|
| 68 | <p><span id="default"></span></p>
|
|---|
| 69 | </div>
|
|---|
| 70 | <div id="cat_container">
|
|---|
| 71 | <div id="layer_switcher_cat">
|
|---|
| 72 | <div id="cat_hide"></div>
|
|---|
| 73 | <input type=checkbox id=togglecat class=node checked />Nodes
|
|---|
| 74 | <a style="margin-top:4px;font-size:10px;float:right;" id="node_filter">(Add all nodes)</a>
|
|---|
| 75 | </div>
|
|---|
| 76 | <p><span id="node"></span></p>
|
|---|
| 77 | </div>
|
|---|
| 78 | <div id="cat_container">
|
|---|
| 79 | <div id="layer_switcher_cat">
|
|---|
| 80 | <div id="cat_hide"></div>
|
|---|
| 81 | <input type=checkbox id=togglecat class=user checked />Users
|
|---|
| 82 | <a style="margin-top:4px;font-size:10px;float:right;" id="user_filter">(Add all users)</a>
|
|---|
| 83 | </div>
|
|---|
| 84 | <p><span id="user"></span></p>
|
|---|
| 85 | </div>
|
|---|
| 86 | <div id="cat_container">
|
|---|
| 87 | <div id="layer_switcher_cat">
|
|---|
| 88 | <div id="cat_hide"></div>
|
|---|
| 89 | <input type=checkbox id=togglecat class=custom checked />Custom filters
|
|---|
| 90 | </div><p><span id="custom"></span></p>
|
|---|
| 91 | </div>
|
|---|
| 92 | </div>
|
|---|
| 93 | </body>
|
|---|
| 94 | </html>
|
|---|
