Convert between Python- and js-based coordinates

panorama/models.py

@@ -184,9 +184,12 @@ class Panorama(ReferencePoint):
     def references_data(self):
         """Similar hack, returns all references currently associated to the
         panorama."""
-        return [{"name": r.reference_point.name,
-                 "x": r.x,
-                 "y": r.y,
+        return [{"id": r.pk,
+                 "name": r.reference_point.name,
+                 # Adapt to js-based coordinates (x between 0 and 1, y
+                 # between -0.5 and 0.5)
+                 "x": r.x / r.panorama.image_width,
+                 "y": (r.y / r.panorama.image_height) - 0.5,
                  "cap": self.bearing(r.reference_point),
                  "elevation": self.elevation(r.reference_point)}
                 for r in self.panorama_references.all()]

panorama/static/panorama/js/pano.js

@@ -902,7 +902,8 @@ function insert_ref_point(el, x, y) {
 	xhr.send("reference_point=" + refpoint_url
 	         + "&panorama=" + panorama_url
                  + "&csrfmiddlewaretoken=" + csrf_token
-	         + "&x=" + (last.x + x) + "&y=" + (last.y + y));
+	         + "&x=" + Math.floor(posx * image_width)
+                 + "&y=" + Math.floor((posy + 0.5) * image_height));
 }
 
 function show_result(clear_before) {

panorama/templates/panorama/view.html

@@ -10,6 +10,8 @@
       var panorama_url = "/api/v1/panoramas/{{ panorama.pk }}/";
       var img_prefix = '{{ panorama.tiles_url }}';
       var image_loop = {{ panorama.loop|yesno:"true,false,undefined" }};
+      var image_width = {{ panorama.image_width }};
+      var image_height = {{ panorama.image_height }};
       var csrf_token = "{{ csrf_token }}";
     </script>
     <script src="{% static "panorama/js/pano.js" %}"></script>