Accueil Explorer Aide
Connexion
zopieux
/
celutz
forké depuis FFDN/celutz
1
0
Fork 0
Fichiers
Parcourir la source

Refonte de l'interface (travail de julpec)

Baptiste Jonglez il y a 8 ans
Parent
aec362af57
commit
a98d054498
10 fichiers modifiés avec 390 ajouts et 221 suppressions
Vue séparée Afficher les stats Diff
  1. 98 34
      panorama/static/panorama/css/map.css
  2. 47 3
      panorama/templates/panorama/base.html
  3. 0 28
      panorama/templates/panorama/list.html
  4. 18 101
      panorama/templates/panorama/locate_point.html
  5. 87 0
      panorama/templates/panorama/main.html
  6. 2 0
      panorama/templates/panorama/new.html
  7. 50 0
      panorama/templates/panorama/sidebar.html
  8. 69 28
      panorama/templates/panorama/view.html
  9. 4 5
      panorama/urls.py
  10. 15 22
      panorama/views.py

+ 98 - 34
panorama/static/panorama/css/map.css
Voir le fichier 

@@ -1,3 +1,101 @@
 
+label {
 
+  display: block;
 
+  font-weight: normal;
 
+  color: #999;
 
+}
 
+form {
 
+  padding: 10px 25px ;
 
+  width: 100% ;
 
+}
 
+
 
+input[type="number"], 
+input[type="text"] {
 
+  display: block;
 
+  width: 100%;
 
+  height: 32px;
 
+  padding: 6px 12px;
 
+  margin-bottom: 12px;
 
+  font-size: 14px;
 
+  line-height: 1.42857143;
 
+  color: #555;
 
+  background-color: #fff;
 
+  background-image: none;
 
+  border: 1px solid #ccc;
 
+  border-radius: 4px;
 
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 
+          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
 
+  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
 
+       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 
+          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
 
+}
 
+input[type="checkbox"] {
 
+  position: relative;
 
+  display: inline-block;
 
+  padding-left: 20px;
 
+  margin: 0;
 
+  font-weight: normal;
 
+  cursor: pointer;
 
+  margin-bottom: 12px;
 
+}
 
+
 
+input[type="number"]:focus,
 
+input[type="text"]:focus {
 
+  border-color: #66afe9;
 
+  outline: 0;
 
+  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
 
+          box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102, 175, 233, .6);
 
+}
 
+
 
+#id_altitude,
 
+#id_longitude,
 
+#id_latitude ,
 
+#angle_ctrl,
 
+#elvtr_ctrl,
 
+#loca_altitude,
 
+#loca_latitude,
 
+#loca_longitude {
 
+  padding: 0px;
 
+}
 
+
 
+#id_image {
 
+  color: #999;
 
+  font-size: 11px;
 
+  display: block;
 
+  width: 100%;
 
+  padding: 6px 0;
 
+  margin-bottom: 12px;
 
+} 
+
 
+.navbar li a {
 
+  padding: 15px 15px;
 
+}
 
+.navbar li a:focus {
 
+  background-color: #000;
 
+  outline: none;
 
+}
 
+.navbar li a:hover {
 
+  background-color: #000;
 
+  outline: none;
 
+}
 
+.wrapper-pano {
 
+  padding: 0px;
 
+}
 
+.dropdown-menu {
 
+  background-color: #222 !important;
 
+  padding: 10px;
 
+}
 
+.dropdown-menu p {
 
+  color: #999;
 
+}
 
+nav li .dropdown-menu a {
 
+  padding: 0px;
 
+}
 
+nav li .dropdown-menu a:hover {
 
+  background-color: transparent !important;
 
+}
 
+input .angle_crt {
 
+  border-radius: 4px;
 
+} 
 * {
 
     font-family:Arial, Verdana, sans-serif;
 
     padding:0;
 
@@ -51,31 +149,6 @@ legend:hover {
 
     cursor:default;
 
 }
 
 
-img {vertical-align:middle}
 
-
 
-input {
 
-    vertical-align:middle;
 
-}
 
-
 
-input[type="number"] {
 
-    border-radius:1em;
 
-    display:block;
 
-    float:right;
 
-    width:10ex;
 
-}
 
-
 
-input[type="submit"],
 
-input[type="reset"],
 
-input[type="button"] {
 
-    border-radius:0.4rem;
 
-    padding:0.2em 1em;
 
-    margin:0.2em;
 
-}
 
-
 
-input[type="checkbox"] {
 
-    margin:0 1em;
 
-}
 
-
 
 #params {
 
     padding:0.2em 0.5em;
 
     border-radius:0.5em;
 
@@ -146,7 +219,6 @@ fieldset#control {
 
     padding:0.2em 0.5em;
 
 }
 
 
-
 
 fieldset#locadraw {
 
     bottom:1em;
 
     left:1em;
 
@@ -164,13 +236,6 @@ fieldset#adding {
 
     text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
 
 }
 
  
-
 
-input:focus {
 
-  background-color:#000;
 
-  color:#FFF;
 
-  border-color:#000;
 
-}
 
- 
 .validators {
 
     text-align:center;
 
     background-color:rgba(50%,50%,50%,0.5);
 
@@ -204,7 +269,6 @@ input:focus {
 
     background-color:rgba(100,0,0,0.5);
 
 }
 
 
-
 
 /* Minimap on the panorama view */
 
 #mapid {
 
     position: absolute;

+ 47 - 3
panorama/templates/panorama/base.html
Voir le fichier 

@@ -5,17 +5,61 @@
 
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
 
   <head>
 
     <meta http-equiv="Content-type" content="text/html; charset=UTF-8"/>
 
-    <title>{% block title %}{% endblock title %}</title>
 
+    <title>{% block title %}Celutz, a panorama viewer{% endblock title %}</title>
 
+
 
     <link type="image/x-icon" rel="shortcut icon" href="{% static "panorama/img/tsf.png" %}"/>
 
-    <link rel="stylesheet" media="screen" href="{% static "panorama/css/base.css" %}" />
 
+
 
+    <link href="{% static "panorama/css/bootstrap.css" %}" rel="stylesheet" media="screen">
 
+    <link href="{% static "panorama/css/sb-admin.css" %}" rel="stylesheet" media="screen">
 
+    <link href="{% static "panorama/css/plugins/morris.css" %}" rel="stylesheet" media="screen">
 
+    <link href="{% static "panorama/font-awesome/css/font-awesome.min.css" %}" rel="stylesheet" type="text/css">
 
+    <link rel="stylesheet" media="screen" href="{% static "panorama/css/celutz.css" %}" />
 
     {% block css %}{% endblock css %}
 
+
 
+    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
 
+    <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
 
   </head>
 
 
   <body>
 
     {# Add base structure here, menu, etc... #}
 
 
-    {% block content %}{% endblock content %}
 
+   <div id="wrapper">
 
+        <!-- Navigation -->
 
+        <nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
 
+            <!-- Brand and toggle get grouped for better mobile display -->
 
+            <div class="navbar-header">
 
+                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
 
+                    <span class="sr-only">Toggle navigation</span>
 
+                    <span class="icon-bar"></span>
 
+                    <span class="icon-bar"></span>
 
+                    <span class="icon-bar"></span>
 
+                </button>
 
+                {% block top-menu-title %}
 
+                {% endblock top-menu-title %}
 
+            </div>
 
+            {% block top-menu-items %}
 
+            {% endblock top-menu-items %}
 
+            {% block sidebar %}
 
+            {% endblock sidebar %}
 
+            <!-- /.navbar-collapse -->
 
+        </nav>
 
+        <div id="page-wrapper">
 
+            <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
+            <style>
 
+            body{overflow : scroll;}
 
+            </style>
 
+          {% block content %}{% endblock content %}
 
+        </div>
 
+        <!-- /#page-wrapper -->
 
+    </div>
 
+    <!-- /#wrapper -->
 
 
     {% block js %}{% endblock js %}
 
+
 
+{% block pano %}{% endblock pano %}
 
+
 
+    <script src="{% static "panorama/js/jquery.js" %}"></script>
 
+    <script src="{% static "panorama/js/bootstrap.min.js" %}"></script>
 
+
 
   </body>
 
 </html>

+ 0 - 28
panorama/templates/panorama/list.html
Voir le fichier 

@@ -1,28 +0,0 @@
 
-<h1>Celutz</h1>
 
-
 
-<p>Celutz is a tool for managing and referencing panoramic photos.  <a href="https://code.ffdn.org/FFDN/celutz/">Project homepage</a>.</p>
 
-
 
-<h2>Panoramas</h2>
 
-<p>
 
-  <ul>
 
-    {% for pano in panoramas %}
 
-    <li>{{ pano.name }} ({{ pano.latitude}}°, {{ pano.longitude }}°, {{ pano.altitude }}m).  Has tiles: {{ pano.has_tiles|yesno }}.  <a href="{% url 'panorama:view_pano' pano.id %}">View panorama</a></li>
 
-    {% endfor %}
 
-  </ul>
 
-</p>
 
-
 
-<h2>New panorama</h2>
 
-
 
-<p><a href="{% url 'panorama:new' %}">Add new panorama</a></p>
 
-
 
-<h2>Locate a point</h2>
 
-
 
-<p><a href="{% url 'panorama:locate' %}">Locate a point</a> by listing all panoramas that can see this point</p>
 
-
 
-<h2>Add reference point</h2>
 
-
 
-<p><a href="{% url 'admin:app_list' 'panorama' %}">In the administration interface</a> for now.</p>
 
-
 
-<h2>Documentation</h2>
 
-
 
-<p><a href="https://code.ffdn.org/FFDN/celutz/src/master/README.md">Detailed documentation</a>.</p>

+ 18 - 101
panorama/templates/panorama/locate_point.html
Voir le fichier 

@@ -1,104 +1,21 @@
 
+{% extends "panorama/main.html" %}
 
 {% load panorama_url %}
 
 {% load distance_filter %}
 
 
-<h1>Locate a point</h1>
 
-
 
-{% if panoramas != None %}
 
-
 
-<h2>Result</h2>
 
-
 
-<p>Panoramas that see the point
 
-  <strong>{% if point_name %}{{ point_name }}{% else %}{{ point_lat }}°, {{ point_lon }}°{% endif %}</strong>:
 
-</p>
 
-
 
-{% if panoramas|length == 0 %}
 
-<p><strong>No panorama seeing this point!</strong></p>
 
-{% else %}
 
-<p>
 
-<ul>
 
-{% for panorama, distance, bearing, elevation in panoramas %}
 
-<li><a href="{% panorama_url panorama bearing elevation %}">{{ panorama.name }}</a> at {{ distance|distance }} (click to visualise)</li>
 
-{% endfor %}
 
-</ul>
 
-</p>
 
-{% endif %}
 
-
 
-{% endif %}
 
-
 
-<h2>How it works</h2>
 
-
 
-<p>
 
-  <ol>
 
-    <li>Select an existing point, or enter a custom point by its coordinates;</li>
 
-    <li>You obtain a list of panoramas that can see the point;</li>
 
-    <li>Click on a panorama to visualise exactly the point you asked for!</li>
 
-  </ol>
 
-</p>
 
-
 
-<h2>Locate!</h2>
 
-
 
-<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
- <div id="map" style="height: 400px; "></div>
 
-<style>
 
-body{overflow : scroll;}
 
-</style>
 
-<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 
-<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 
-
 
-<script>
 
-  var map;
 
-  var ajaxRequest;
 
-  var plotlist;
 
-  var plotlayers=[];
 
-
 
-  function initmap() {
 
-    // set up the map
 
-    map = new L.Map('map');
 
-
 
-    // create the tile layer with correct attribution
 
-    var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 
-    var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 
-    var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
 
-    // start the map in Grenoble
 
-    map.setView(new L.LatLng(45.1842, 5.7218),13);
 
-    map.addLayer(osm);
 
-
 
-    // Add in a crosshair for the map
 
-    var crosshairIcon = L.icon({
 
-        iconUrl: 'images/crosshair.png',
 
-        iconSize:     [20, 20], // size of the icon
 
-        iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
 
-      });
 
-    crosshair = new L.marker(map.getCenter(), {clickable:false});
 
-    crosshair.addTo(map);
 
-
 
-    // Move the crosshair to the center of the map when the user pans
 
-    map.on('move', function(e) {
 
-        crosshair.setLatLng(map.getCenter());
 
-      });
 
-
 
-    map.on('moveend', function(e) {
 
-        var lat = map.getCenter().lat;
 
-        var lng = map.getCenter().lng;
 
-        $('#id_latitude').val(lat);
 
-        $('#id_longitude').val(lng);
 
-        $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
 
-            function(data) {
 
-                $('#id_altitude').val(parseInt(data));
 
-                });
 
-        });
 
-  }
 
-  initmap();
 
-</script>
 
-
 
-<form action="{% url 'panorama:locate_refpoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
-  {{ refpoints_form.as_p }}
 
-  <input type="submit" value="Locate" />
 
-</form>
 
-
 
-<p><strong>OR</strong></p>
 
-
 
-<form action="{% url 'panorama:locate_custompoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
-  {{ custom_point_form.as_p }}
 
-  <input type="submit" value="Locate" />
 
-</form>
 
+{% block content %}
 
+
 
+  {% if located_panoramas != None %}
 
+    <div id="location-result"></div>
 
+    {% if located_panoramas|length == 0 %}
 
+      <p><strong>No panorama seeing this point!</strong></p>
 
+    {% else %}
 
+      <p>
 
+        <ul>
 
+          {% for panorama, distance, bearing, elevation in located_panoramas %}
 
+            <li><a href="{% panorama_url panorama bearing elevation %}">{{ panorama.name }}</a> at {{ distance|distance }} (click to visualise)</li>
 
+          {% endfor %}
 
+        </ul>
 
+      </p>
 
+    {% endif %}
 
+  {% endif %}
 
+{% endblock content %}

+ 87 - 0
panorama/templates/panorama/main.html
Voir le fichier 

@@ -0,0 +1,87 @@
 
+{% extends "panorama/base.html" %}
 
+{% load panorama_url %}
 
+{% load distance_filter %}
 
+
 
+{% block top-menu-title %} 
+    <a class="navbar-brand" href="{% url 'panorama:main' %}">Celutz</a> 
+{% endblock %}
 
+
 
+{% block top-menu-items %}
 
+<ul class="nav navbar-right top-nav">
 
+    <li class="dropdown">
 
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  à propos<b class="caret"></b></a>
 
+        <ul class="dropdown-menu">
 
+            <li>
 
+               <p>Celutz is a tool for managing and referencing panoramic photos.
 
+               <a href="https://code.ffdn.org/FFDN/celutz/">Project homepage</a>
 
+            </li>
 
+        </ul>
 
+    </li>
 
+</ul>
 
+{% endblock %}
 
+
 
+{% block sidebar %}
 
+  {% include "panorama/sidebar.html" %}
 
+{% endblock %}
 
+
 
+{% block content %}
 
+  <div id="map" style="height: 400px;"></div>
 
+  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
+      <style>
 
+      body{overflow : scroll;}
 
+      </style>
 
+{% endblock content %}
 
+
 
+{% block css %}
 
+<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
+{% endblock css %}
 
+
 
+{% block js %}
 
+<script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script>
 
+<script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 
+<script>
 
+    var map;
 
+    var ajaxRequest;
 
+    var plotlist;
 
+    var plotlayers=[];
 
+
 
+    function initmap() {
 
+        // set up the map
 
+        map = new L.Map('map');
 
+
 
+        // create the tile layer with correct attribution
 
+        var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
 
+        var osmAttrib = 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
 
+        var osm = new L.TileLayer(osmUrl, {attribution: osmAttrib});
 
+        // start the map in Grenoble
 
+        map.setView(new L.LatLng(45.1842, 5.7218),13);
 
+        map.addLayer(osm);
 
+
 
+        // Add in a crosshair for the map
 
+        var crosshairIcon = L.icon({
 
+            iconUrl: 'images/crosshair.png',
 
+            iconSize:     [20, 20], // size of the icon
 
+            iconAnchor:   [10, 10], // point of the icon which will correspond to marker's location
 
+        });
 
+        crosshair = new L.marker(map.getCenter(), {clickable:false});
 
+        crosshair.addTo(map);
 
+
 
+        // Move the crosshair to the center of the map when the user pans
 
+        map.on('move', function(e) {
 
+            crosshair.setLatLng(map.getCenter());
 
+        });
 
+
 
+        map.on('moveend', function(e) {
 
+            var lat = map.getCenter().lat;
 
+            var lng = map.getCenter().lng;
 
+            $('#id_latitude').val(lat);
 
+            $('#id_longitude').val(lng);
 
+            $.get("http://api.geonames.org/astergdem?lat="+lat+"&lng="+lng+"&username=celutz&style=full" ).done(
 
+                function(data) {
 
+                    $('#id_altitude').val(parseInt(data));
 
+                });
 
+        });
 
+    }
 
+    initmap();
 
+</script>
 
+{% endblock js %}

+ 2 - 0
panorama/templates/panorama/new.html
Voir le fichier 

@@ -1,4 +1,6 @@
 
 {% extends "panorama/base.html" %}
 
+{% load panorama_url %}
 
+{% load distance_filter %}
 
 
 {% block content %}
 
 <form action="" enctype="multipart/form-data" method="post">{% csrf_token %}

+ 50 - 0
panorama/templates/panorama/sidebar.html
Voir le fichier 

@@ -0,0 +1,50 @@
 
+<div class="collapse navbar-collapse navbar-ex1-collapse">
 
+    <ul class="nav navbar-nav side-nav">
 
+        <li>
 
+            <a href="{% url 'panorama:main' %}"><i class="fa fa-fw fa-home"></i> Map</a>
 
+        </li>
 
+        <li>
 
+            <a href="javascript:;" data-toggle="collapse" data-target="#panos"><i class="fa fa-fw fa-arrows-v"></i> Panoramas<i class="fa fa-fw fa-caret-down"></i></a>
 
+            <ul id="panos" class="collapse">
 
+              {% for pano in panoramas %}
 
+              <li><a href="{% url 'panorama:view_pano' pano.id %}"><i class="fa fa-fw fa-eye"></i> {{ pano.name }}</a></li>
 
+              {% endfor %}
 
+            </ul>
 
+        </li>
 
+        <li>
 
+            <a href="javascript:;" data-toggle="collapse" data-target="#locate-existing"><i class="fa fa-fw fa-arrows-v"></i> Locate existing point<i class="fa fa-fw fa-caret-down"></i></a>
 
+            <ul id="locate-existing" class="collapse">
 
+                <li>
 
+                    <form action="{% url 'panorama:locate_refpoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
+                      {{ refpoints_form.as_p }}
 
+                      <input type="submit" value="Locate" />
 
+                    </form>
 
+                </li>
 
+            </ul>
 
+        </li>
 
+        <li>
 
+            <a href="javascript:;" data-toggle="collapse" data-target="#locate-gps"><i class="fa fa-fw fa-arrows-v"></i> Locate GPS point<i class="fa fa-fw fa-caret-down"></i></a>
 
+            <ul id="locate-gps" class="collapse">
 
+                <li>
 
+                    <form action="{% url 'panorama:locate_custompoint' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
+                      {{ custom_point_form.as_p }}
 
+                      <input type="submit" value="Locate" />
 
+                    </form>
 
+                </li>
 
+            </ul>
 
+        </li>
 
+        <li>
 
+            <a href="javascript:;" data-toggle="collapse" data-target="#new-pano"><i class="fa fa-fw fa-edit"></i> Add new panorama<i class="fa fa-fw fa-caret-down"></i></a>
 
+            <ul id="new-pano" class="collapse">
 
+                <li>
 
+                    <form action="{% url 'panorama:new' %}" enctype="multipart/form-data" method="post">{% csrf_token %}
 
+                      {{ newpanorama_form.as_p }}
 
+                      <input type="submit" value="Submit" />
 
+                    </form>
 
+                </li>
 
+            </ul>
 
+
 
+        </li>
 
+    </ul>
 
+</div>
 
+

+ 69 - 28
panorama/templates/panorama/view.html
Voir le fichier 

@@ -3,6 +3,68 @@
 
 
 {% block title %}{{ panorama.name }}{% endblock title %}
 
 
+{% block top-menu-title %}
 
+    <a class="navbar-brand" href="">{{panorama.name}}</a>
 
+{% endblock %}
 
+
 
+{% block top-menu-items %}
 
+<ul class="nav navbar-right top-nav">
 
+    <li class="dropdown">
 
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  Controls<b class="caret"></b></a>
 
+        <ul class="dropdown-menu">
 
+            <li>
 
+                <fieldset id="control"><legend>contrôle</legend>
 
+                  <label>Zoom : <input type="range" min="0" max="2" value="2" id="zoom_ctrl"/></label>
 
+                  <label>Cap : <input type="number" min="0" max="360" step="10" value="0" autofocus="" id="angle_ctrl"/></label>
 
+                  <label>Élévation : <input type="number" min="-90" max="90" step="1" value="0" autofocus="" id="elvtn_ctrl"/></label>
 
+                </fieldset>
 
+            </li>
 
+        </ul>
 
+    </li>
 
+    <li class="dropdown">
 
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  Params<b class="caret"></b></a>
 
+        <ul class="dropdown-menu">
 
+            <li>
 
+                <div id="params">
 
+                  <p>latitude :   <em><span id="pos_lat">{{ panorama.latitude }}</span>°</em></p>
 
+                  <p>longitude : <em><span id="pos_lon">{{ panorama.longitude }}</span>°</em></p>
 
+                  <p>altitude : <em><span id="pos_alt">{{ panorama.altitude }}</span> m</em></p>
 
+                </div>
 
+            </li>
 
+        </ul>
 
+    </li>
 
+    <li class="dropdown">
 
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  Localiser<b class="caret"></b></a>
 
+        <ul class="dropdown-menu">
 
+            <li>
 
+                <fieldset id="control"><legend>Localiser un point</legend>
 
+                  <label class="form_col" title="La latitude ϵ [-90°, 90°]. Ex: 12.55257">Latitude :
 
+                    <input  name="loca_latitude" type="number" min="-90" max="90"  id="loca_latitude"/></label>
 
+                  <label class="form_col" title="La longitude ϵ [-180°, 180°]. Ex: 144.14723">Longitude :
 
+                    <input name="loca_longitude" type="number" min="-180" max="180" id="loca_longitude"/></label>
 
+                  <label class="form_col" title="L'altitude positive Ex: 170">Altitude :
 
+                    <input  name="loca_altitude" type="number" min="-400" id="loca_altitude"/></label>
 
+                  <div class="answer">
 
+                    <input type="button" value="Localiser" id="loca_button"/>
 
+                    <input type="button" value="Effacer" id="loca_erase"/>
 
+                  </div>
 
+                </fieldset><p id="info"></p>
 
+            </li>
 
+        </ul>
 
+    </li>
 
+    <li class="dropdown">
 
+        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-info"></i>  à propos<b class="caret"></b></a>
 
+        <ul class="dropdown-menu">
 
+            <li>
 
+               <p>Celutz is a tool for managing and referencing panoramic photos.
 
+               <a href="https://code.ffdn.org/FFDN/celutz/">Project homepage</a>
 
+            </li>
 
+        </ul>
 
+    </li>
 
+</ul>
 
+{% endblock %}
 
+
 
+
 
 {% block js %}
 
     <script>
 
       var title = "{{ panorama.name|escapejs }}";
 
@@ -77,39 +139,17 @@
 
 {% endblock js %}
 
 
 {% block css %}
 
-    <link rel="stylesheet" media="screen" href="{% static "panorama/css/map.css" %}" />
 
+    <link rel="stylesheet" media="screen" href="{% static "panorama/css/bootstrap.css" %}" />
 
     <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
 
 {% endblock css %}
 
 
 {% block content %}
 
+{% endblock content %}
 
+
 
+{% block pano %}
 
     <canvas id="mon-canvas">
 
       Ce message indique que ce navigateur est vétuste car il ne supporte pas <samp>canvas</samp> (IE6, IE7, IE8, ...)
 
     </canvas>
 
-
 
-    <fieldset id="control"><legend>contrôle</legend>
 
-      <label>Zoom : <input type="range" min="0" max="2" value="2" id="zoom_ctrl"/></label>
 
-      <label>Cap : <input type="number" min="0" max="360" step="10" value="0" autofocus="" id="angle_ctrl"/></label>
 
-      <label>Élévation : <input type="number" min="-90" max="90" step="1" value="0" autofocus="" id="elvtn_ctrl"/></label>
 
-    </fieldset>
 
-
 
-    <div id="params">
 
-      <p>latitude :   <em><span id="pos_lat">{{ panorama.latitude }}</span>°</em></p>
 
-      <p>longitude : <em><span id="pos_lon">{{ panorama.longitude }}</span>°</em></p>
 
-      <p>altitude : <em><span id="pos_alt">{{ panorama.altitude }}</span> m</em></p>
 
-    </div>
 
-    <img src="{% static "panorama/img/locapoint.svg" %}" id="loca_show" alt="localiser un point" title="pour localiser un point..."/>
 
-    <fieldset id="locadraw"><legend id="loca_hide">Localiser un point</legend>
 
-      <label class="form_col" title="La latitude ϵ [-90°, 90°]. Ex: 12.55257">Latitude :
 
-        <input  name="loca_latitude" type="number" min="-90" max="90"  id="loca_latitude"/></label>
 
-      <label class="form_col" title="La longitude ϵ [-180°, 180°]. Ex: 144.14723">Longitude :
 
-        <input name="loca_longitude" type="number" min="-180" max="180" id="loca_longitude"/></label>
 
-      <label class="form_col" title="L'altitude positive Ex: 170">Altitude :
 
-        <input  name="loca_altitude" type="number" min="-400" id="loca_altitude"/></label>
 
-      <div class="answer">
 
-        <input type="button" value="Localiser" id="loca_button"/>
 
-        <input type="button" value="Effacer" id="loca_erase"/>
 
-      </div>
 
-    </fieldset><p id="info"></p>
 
     <p id="insert"><select id="sel_point" name="known_points">
 
         {% for id, refpoint in panorama.refpoints_data %}
 
         <option>{{ refpoint.name }}</option>
 
@@ -120,6 +160,7 @@
 
       <input type="button" id="do-cancel" value="annuler"/>
 
     </p>
 
     <p id="res"></p>
 
-
 
     <div id="mapid"></div>
 
-{% endblock content %}
 
+
 
+{% endblock pano %}
 
+

+ 4 - 5
panorama/urls.py
Voir le fichier 

@@ -3,14 +3,13 @@ from __future__ import unicode_literals
 
 
 from django.conf.urls import include, url
 
 
-from .views import PanoramaUpload, PanoramaView, PanoramaList, PanoramaGenTiles, LocatePointView, LocateReferencePointView, LocateCustomPointView
 
+from .views import MainView, PanoramaUpload, PanoramaView, PanoramaGenTiles, LocateReferencePointView, LocateCustomPointView
 
 
 
 urlpatterns = [
 
-    url(r'^$', PanoramaList.as_view(), name="list"),
 
-    url(r'^locate/$', LocatePointView.as_view(), name="locate"),
 
-    url(r'^locate/refpoint/$', LocateReferencePointView.as_view(), name="locate_refpoint"),
 
-    url(r'^locate/custompoint/$', LocateCustomPointView.as_view(), name="locate_custompoint"),
 
+    url(r'^$', MainView.as_view(), name="main"),
 
+    url(r'^locate_refpoint/$', LocateReferencePointView.as_view(), name="locate_refpoint"),
 
+    url(r'^locate_custompoint/$', LocateCustomPointView.as_view(), name="locate_custompoint"),
 
     url(r'^pano/new/$', PanoramaUpload.as_view(), name="new"),
 
     url(r'^pano/view/(?P<pk>\d+)/$', PanoramaView.as_view(), name="view_pano"),
 
     url(r'^pano/gen_tiles/(?P<pk>\d+)/$', PanoramaGenTiles.as_view(), name="gen_tiles"),

+ 15 - 22
panorama/views.py
Voir le fichier 

@@ -52,21 +52,14 @@ class PanoramaGenTiles(CelutzLoginMixin, RedirectView):
 
         return super(PanoramaGenTiles, self).get_redirect_url(*args, **kwargs)
 
 
 
-class PanoramaList(CelutzLoginMixin, ListView):
 
-    model = Panorama
 
-    template_name = "panorama/list.html"
 
-    context_object_name = "panoramas"
 
-
 
-
 
-class LocatePointView(CelutzLoginMixin, TemplateView):
 
-    """View to choose a point to locate (either an existing reference point,
 
-    or from GPS coordinates)"""
 
-    template_name = 'panorama/locate_point.html'
 
+class MainView(CelutzLoginMixin, TemplateView):
 
+    template_name = "panorama/main.html"
 
 
     def get_context_data(self, **kwargs):
 
-        context = super(LocatePointView, self).get_context_data(**kwargs)
 
+        context = super(MainView, self).get_context_data(**kwargs)
 
         context['refpoints_form'] = SelectReferencePointForm
 
         context['custom_point_form'] = CustomPointForm
 
+        context['panoramas'] = Panorama.objects.all()
 
         return context
 
 
     def compute_interesting_panoramas(self, point):
 
@@ -84,30 +77,30 @@ class LocatePointView(CelutzLoginMixin, TemplateView):
 
         return sorted(l, key=lambda x: x[1])
 
 
 
-class LocateReferencePointView(LocatePointView):
 
-    """Subclass that handles locating a reference point"""
 
+class LocateReferencePointView(MainView):
 
+    """Displays a located reference point"""
 
+    template_name = 'panorama/locate_point.html'
 
 
     def post(self, request, *args, **kwargs):
 
         context = self.get_context_data()
 
         form = SelectReferencePointForm(request.POST)
 
-        context['refpoints_form'] = form
 
         if form.is_valid():
 
             point = form.cleaned_data['reference_point']
 
-            context['panoramas'] = self.compute_interesting_panoramas(point)
 
-            context['point_name'] = point.name
 
+            context['located_panoramas'] = self.compute_interesting_panoramas(point)
 
+            context['located_point_name'] = point.name
 
         return super(LocateReferencePointView, self).render_to_response(context)
 
 
 
-class LocateCustomPointView(LocatePointView):
 
-    """Subclass that handles locating a custom point"""
 
+class LocateCustomPointView(MainView):
 
+    """Displays a located custom GPS point"""
 
+    template_name = 'panorama/locate_point.html'
 
 
     def post(self, request, *args, **kwargs):
 
         context = self.get_context_data()
 
         form = CustomPointForm(request.POST)
 
-        context['custom_point_form'] = form
 
         if form.is_valid():
 
             point = Point(**form.cleaned_data)
 
-            context['panoramas'] = self.compute_interesting_panoramas(point)
 
-            context['point_lat'] = point.latitude
 
-            context['point_lon'] = point.longitude
 
+            context['located_panoramas'] = self.compute_interesting_panoramas(point)
 
+            context['located_point_lat'] = point.latitude
 
+            context['located_point_lon'] = point.longitude
 
         return super(LocateCustomPointView, self).render_to_response(context)