Improved panorama style

panorama/static/panorama/css/map.css

@@ -9,15 +9,15 @@ body {
 }
 
 #mon-canvas {
-    background-color:#44F;
+    background-color:#000;
     margin:auto;
     display:block;
 }
 
 #info {
     display:none;
-    background-color:#FF0;
-    border:1px red solid;
+    background-color:#000;
+    border:1px black solid;
     position:absolute;
     margin:1em;
     padding:0.2em 0.5em;
@@ -26,8 +26,8 @@ body {
 
 #insert {
     display:none;
-    background-color:#F88;
-    border:1px red solid;
+    background-color:#000;
+    border:1px black solid;
     position:absolute;
 }
 
@@ -38,15 +38,15 @@ label {
 
 legend {
     opacity:1;
-    background-color:#F88;
-    border:solid #F00 1px;
+    background-color:#000;
+    border:solid #000 1px;
     border-radius:0.5em;
     padding:0 1em;
     text-shadow:2px 2px 2px #000, -2px -2px 2px #000;
 }      
 
 legend:hover {
-    color:#FF0;
+    color:#FFF;
     cursor:default;
 }
 
@@ -79,7 +79,7 @@ input[type="checkbox"] {
     padding:0.2em 0.5em;
     border-radius:0.5em;
     background-color:rgba(128,128,128,0.5);
-    border:solid #00F 1px;
+    border:solid #000 1px;
     position:absolute;
     top:1em;
     right:2em;
@@ -90,10 +90,10 @@ input[type="checkbox"] {
 #params em {	
     display:block;
     float:right;
-    background-color:#88F;
+    background-color:#000;
     border-radius:0.5em;
     padding:0 0.5em;
-    color:#FF0;
+    color:#FFF;
 }
 
 #loca_show {
@@ -117,7 +117,7 @@ input[type="checkbox"] {
     border:solid #F00 1px;
     border-radius:0.5em;
     padding:0.2em 0.5em;
-    background-color:#F88; 
+    background-color:#000; 
     padding:0 1em;
 }
 
@@ -127,11 +127,11 @@ input[type="checkbox"] {
 }
 
 #addParams label:hover {
-    color: #FF0; 
+    color: #FFF; 
 }
 
 fieldset {
-    border:solid #F00 1px;
+    border:solid #000 2px;
     border-radius:0.5em;
     padding:0 0.5em;
     color:#FFF;
@@ -165,9 +165,9 @@ fieldset#adding {
  
 
 input:focus {
-  background-color:#004;
+  background-color:#000;
   color:#FFF;
-  border-color:#F00;
+  border-color:#000;
 }
  
 .validators {
@@ -189,8 +189,8 @@ input:focus {
     padding:0.2em 0.4em;
     color:#FF8;
     position:absolute;
-    bottom:1em;
-    right:2em;
+    top:1em;
+    margin-left: 30%;
     background-color:rgba(0,0,0,0.3);
     border:solid #FFF 1px;
 }

panorama/static/panorama/js/pano.js

@@ -938,7 +938,7 @@ function clean_canvas_events(e) {
 }
 
 canvas_set_size = function() {
-    canvas.style.border = border_width+"px solid red";
+    canvas.style.border = border_width+"px solid black";
     canvas.width = window.innerWidth-2*border_width;
     canvas.height = window.innerHeight-2*border_width;
     canvas_pos.x = canvas.offsetLeft+border_width;
@@ -1091,3 +1091,79 @@ function load_pano() {
 	adding.addEventListener('mouseout', paramOut, false);
     }
 };
+	function toRad(n) {
+	  return n * Math.PI / 180;
+	}
+	function toDeg(n) {
+	  return n * 180 / Math.PI;
+	}
+	function destVincenty(lat1, lon1, brng, dist) {
+	  /* JavaScript function to calculate the destination point given start point
+	   * latitude / longitude (numeric degrees), bearing (numeric degrees) and
+	   * distance (in m).
+	   * Original scripts by Chris Veness
+	   * Taken from http://movable-type.co.uk/scripts/latlong-vincenty-direct.html
+	   * and optimized / cleaned up by Mathias Bynens <http://mathiasbynens.be/>
+	   *
+	   * Based on the Vincenty direct formula by T. Vincenty, “Direct and Inverse
+	   * Solutions of Geodesics on the Ellipsoid with application of nested
+	   * equations”, Survey Review, vol XXII no 176, 1975
+	   * <http://www.ngs.noaa.gov/PUBS_LIB/inverse.pdf>
+	   */
+	  var a = 6378137,
+	      b = 6356752.3142,
+	      f = 1 / 298.257223563, // WGS-84 ellipsiod
+	      s = dist,
+	      alpha1 = toRad(brng),
+	      sinAlpha1 = Math.sin(alpha1),
+	      cosAlpha1 = Math.cos(alpha1),
+	      tanU1 = (1 - f) * Math.tan(toRad(lat1)),
+	      cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1,
+	      sigma1 = Math.atan2(tanU1, cosAlpha1),
+	      sinAlpha = cosU1 * sinAlpha1,
+	      cosSqAlpha = 1 - sinAlpha * sinAlpha,
+	      uSq = cosSqAlpha * (a * a - b * b) / (b * b),
+	      A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq))),
+	      B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq))),
+	      sigma = s / (b * A),
+	      sigmaP = 2 * Math.PI;
+	  while (Math.abs(sigma - sigmaP) > 1e-12) {
+	    var cos2SigmaM = Math.cos(2 * sigma1 + sigma),
+		sinSigma = Math.sin(sigma),
+		cosSigma = Math.cos(sigma),
+		deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) - B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
+	    sigmaP = sigma;
+	    sigma = s / (b * A) + deltaSigma;
+	  };
+	  var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1,
+	      lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)),
+	      lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1),
+	      C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha)),
+	      Lo = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM))),
+	      revAz = Math.atan2(sinAlpha, -tmp); // final bearing	
+
+	  return {lat: toDeg(lat2), lng: lon1 + toDeg(Lo)};
+	};
+	function getCone(lat, lng, bearing, angle, distance){
+	  /* Returns a polygon to be drawn to the map to show the current visual field
+	   */
+	  var conepoints = [];
+	  // by default, points are drawn every 5°, but if the angle to draw is
+	  // smaller than 5°, we draw no intermediary points
+	  var delta = 5;
+	  if (angle < 5){delta=angle};
+
+	  conepoints.push ([lat,lng]);
+
+	  for (i=0; i<=angle; i+=delta){
+	    conepoints.push([destVincenty(lat, lng, bearing-(angle/2.0)+i, distance).lat,
+		destVincenty(lat, lng, bearing-(angle/2.0)+i, distance).lng]);
+	  }
+
+	  var p = L.polygon(conepoints, {
+	      color: 'grey',
+	      fillColor: 'grey',
+	      fillOpacity: 0.5
+	  });
+	  return p;
+	};

panorama/templates/panorama/view.html

@@ -39,6 +39,47 @@
     <link type="image/x-icon" rel="shortcut icon" href="{% static "panorama/img/tsf.png" %}"/>
     <link rel="stylesheet" media="screen" href="{% static "panorama/css/map.css" %}" />
     <script src="{% static "panorama/js/hide_n_showForm.js" %}"></script>
+    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
+    <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>
+      $( document ).ready(function() {
+
+	var viewField, viewDirection ;
+
+	var map = L.map('mapid').setView([{{ panorama.latitude }}, {{ panorama.longitude }}], 13);
+	// 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);
+
+	L.marker([{{ panorama.latitude }}, {{ panorama.longitude }}]).addTo(map);
+
+	var bearing = $('#angle_ctrl').val();
+        var lat = {{panorama.latitude}};
+        var lng = {{panorama.longitude}};
+
+	viewField = getCone({{panorama.latitude}},{{panorama.longitude}},bearing,90,5000);
+        viewDirection = L.polygon([[lat, lng],[destVincenty(lat, lng, bearing, 7000).lat,destVincenty(lat, lng, bearing, 7000).lng]]);
+        viewDirection.addTo(map);
+	viewField.addTo(map);
+
+	$('#mon-canvas').on('mouseup', function(e) {
+	    bearing = $('#angle_ctrl').val();
+	    map.removeLayer(viewField);
+            map.removeLayer(viewDirection);
+	    viewField = getCone(lat,lng,bearing,90,5000);
+	    viewField.addTo(map);
+            viewDirection = L.polygon([[lat, lng],[destVincenty(lat, lng, bearing, 7000).lat,destVincenty(lat, lng, bearing, 7000).lng]]);
+            viewDirection.addTo(map);
+	    });
+
+      });
+    </script>
+
   </head>
   <body>
     <canvas id="mon-canvas">
@@ -80,123 +121,11 @@
     </p>
     <p id="res"></p>
 
-    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
-    <div id="mapid" style="height: 1000px; "></div>
-    <style type="text/css">
-      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>
-      function toRad(n) {
-        return n * Math.PI / 180;
-      }
-      function toDeg(n) {
-        return n * 180 / Math.PI;
-      }
-      function destVincenty(lat1, lon1, brng, dist) {
-        /* JavaScript function to calculate the destination point given start point
-         * latitude / longitude (numeric degrees), bearing (numeric degrees) and
-         * distance (in m).
-         * Original scripts by Chris Veness
-         * Taken from http://movable-type.co.uk/scripts/latlong-vincenty-direct.html
-         * and optimized / cleaned up by Mathias Bynens <http://mathiasbynens.be/>
-         *
-         * Based on the Vincenty direct formula by T. Vincenty, “Direct and Inverse
-         * Solutions of Geodesics on the Ellipsoid with application of nested
-         * equations”, Survey Review, vol XXII no 176, 1975
-         * <http://www.ngs.noaa.gov/PUBS_LIB/inverse.pdf>
-         */
-        var a = 6378137,
-            b = 6356752.3142,
-            f = 1 / 298.257223563, // WGS-84 ellipsiod
-            s = dist,
-            alpha1 = toRad(brng),
-            sinAlpha1 = Math.sin(alpha1),
-            cosAlpha1 = Math.cos(alpha1),
-            tanU1 = (1 - f) * Math.tan(toRad(lat1)),
-            cosU1 = 1 / Math.sqrt((1 + tanU1 * tanU1)), sinU1 = tanU1 * cosU1,
-            sigma1 = Math.atan2(tanU1, cosAlpha1),
-            sinAlpha = cosU1 * sinAlpha1,
-            cosSqAlpha = 1 - sinAlpha * sinAlpha,
-            uSq = cosSqAlpha * (a * a - b * b) / (b * b),
-            A = 1 + uSq / 16384 * (4096 + uSq * (-768 + uSq * (320 - 175 * uSq))),
-            B = uSq / 1024 * (256 + uSq * (-128 + uSq * (74 - 47 * uSq))),
-            sigma = s / (b * A),
-            sigmaP = 2 * Math.PI;
-        while (Math.abs(sigma - sigmaP) > 1e-12) {
-          var cos2SigmaM = Math.cos(2 * sigma1 + sigma),
-              sinSigma = Math.sin(sigma),
-              cosSigma = Math.cos(sigma),
-              deltaSigma = B * sinSigma * (cos2SigmaM + B / 4 * (cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM) - B / 6 * cos2SigmaM * (-3 + 4 * sinSigma * sinSigma) * (-3 + 4 * cos2SigmaM * cos2SigmaM)));
-          sigmaP = sigma;
-          sigma = s / (b * A) + deltaSigma;
-        };
-        var tmp = sinU1 * sinSigma - cosU1 * cosSigma * cosAlpha1,
-            lat2 = Math.atan2(sinU1 * cosSigma + cosU1 * sinSigma * cosAlpha1, (1 - f) * Math.sqrt(sinAlpha * sinAlpha + tmp * tmp)),
-            lambda = Math.atan2(sinSigma * sinAlpha1, cosU1 * cosSigma - sinU1 * sinSigma * cosAlpha1),
-            C = f / 16 * cosSqAlpha * (4 + f * (4 - 3 * cosSqAlpha)),
-            Lo = lambda - (1 - C) * f * sinAlpha * (sigma + C * sinSigma * (cos2SigmaM + C * cosSigma * (-1 + 2 * cos2SigmaM * cos2SigmaM))),
-            revAz = Math.atan2(sinAlpha, -tmp); // final bearing	
-
-        return {lat: toDeg(lat2), lng: lon1 + toDeg(Lo)};
-      };
-
-
-      function getCone(lat, lng, bearing, angle, distance){
-        /* Returns a polygon to be drawn to the map to show the current visual field
-         */
-        var conepoints = [];
-        // by default, points are drawn every 5°, but if the angle to draw is
-        // smaller than 5°, we draw no intermediary points
-        var delta = 5;
-        if (angle < 5){delta=angle};
-
-        conepoints.push ([lat,lng]);
-
-        for (i=0; i<=angle; i+=delta){
-          conepoints.push([destVincenty(lat, lng, bearing-(angle/2.0)+i, distance).lat,
-              destVincenty(lat, lng, bearing-(angle/2.0)+i, distance).lng]);
-        }
-
-        var p = L.polygon(conepoints, {
-            color: 'grey',
-            fillColor: 'grey',
-            fillOpacity: 0.5
-        });
-        return p;
-      };
-
-      var viewField ;
-
-      var map = L.map('mapid').setView([{{ panorama.latitude }}, {{ panorama.longitude }}], 13);
-      // 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);
-
-      L.marker([{{ panorama.latitude }}, {{ panorama.longitude }}]).addTo(map);
-      L.circle([{{ panorama.latitude }}, {{ panorama.longitude }}], 200, {
-        color: 'grey',
-        fillColor: 'grey',
-        fillOpacity: 0.5
-      }).addTo(map);
-
-      var bearing = $('#angle_ctrl').val();
-
-      viewField = getCone({{panorama.latitude}},{{panorama.longitude}},bearing,90,5000);
-
-      viewField.addTo(map);
-
-      $('#mon-canvas').on('mouseup', function(e) {
-          bearing = $('#angle_ctrl').val();
-          map.removeLayer(viewField);
-          viewField = getCone({{panorama.latitude}},{{panorama.longitude}},bearing,90,5000);
-          viewField.addTo(map);
-          });
-    </script>
+    <div id="mapid" style="height: 300px; width: 300px; bottom: 0;
+    height: 300px;
+    margin: 20px;
+    position: absolute;
+    right: 0;
+    width: 300px;"></div>
   </body>
 </html>