More efficient image zoom

app/api/imageuploads.py

@@ -88,7 +88,7 @@ class Thumbnail(TaskNestedView):
                 i += 1
             
             zoom = float(self.request.query_params.get('zoom', '1'))
-            if zoom < 0.2 or zoom > 6:
+            if zoom < 0.1 or zoom > 10:
                 raise ValueError()
 
         except ValueError:
@@ -112,30 +112,35 @@ class Thumbnail(TaskNestedView):
             
             # Scale
             scale_factor = 1
-            if zoom != 1:
-                scale_factor = (2 ** zoom)
-                img = ImageOps.scale(img, scale_factor, Image.NEAREST)
-            sw, sh = img.size
+            off_x = 0
+            off_y = 0
 
-             # Draw points
+            if zoom != 1:
+                scale_factor = (2 ** (zoom - 1))
+                off_x = w / 2.0 - w / scale_factor / 2.0
+                off_y = h / 2.0 - h / scale_factor / 2.0
+                win = img.crop((off_x, off_y, 
+                                off_x + (w / scale_factor),
+                                off_y + (h / scale_factor)
+                    ))
+                img = ImageOps.scale(win, scale_factor, Image.NEAREST)
+
+            sw, sh = w * scale_factor, h * scale_factor
+
+            # Draw points
             for p in points:
                 d = ImageDraw.Draw(img)
-                r = p['radius'] * zoom * max(w, h) / 100.0
+                r = p['radius'] * max(w, h) / 100.0
                 
-                x = (p['x'] + (0.5 - center_x)) * sw
-                y = (p['y'] + (0.5 - center_y)) * sh
+                sx = (p['x'] + (0.5 - center_x)) * sw
+                sy = (p['y'] + (0.5 - center_y)) * sh
+                #x = sx / scale_factor
+                #y = sy / scale_factor
+                x = sx - off_x * scale_factor
+                y = sy - off_y * scale_factor
                 d.ellipse([(x - r, y - r), 
                            (x + r, y + r)], outline=p['color'], width=int(max(1.0, math.floor(r / 3.0))))
             
-            # Crop
-            if scale_factor != 1:
-                img = img.crop((
-                    sw / 2.0 - w,
-                    sh / 2.0 - h,
-                    sw / 2.0 + w,
-                    sh / 2.0 + h
-                ))
-
             img.thumbnail((thumb_size, thumb_size))
             output = io.BytesIO()
             img.save(output, format='JPEG', quality=quality)

app/static/app/js/components/GCPPopup.jsx

@@ -18,7 +18,7 @@ class GCPPopup extends React.Component {
             loading: true,
             expandGCPImage: false,
             selectedShot: "",
-            zoom: 3
+            zoom: 4
         }
     }
 
@@ -55,7 +55,7 @@ class GCPPopup extends React.Component {
         const annotated = this.getAnnotationCoords(selectedShot);
         const reprojected = this.getReprojectedCoords(selectedShot);
     
-        return `/api/projects/${task.project}/tasks/${task.id}/images/thumbnail/${selectedShot}?size=${size}&center_x=${annotated[0]}&center_y=${annotated[1]}&draw_point=${annotated[0]},${annotated[1]}&point_color=f29900&point_radius=1.5&draw_point=${reprojected[0]},${reprojected[1]}&&point_color=00ff00&point_radius=1.5&zoom=${zoom}`;
+        return `/api/projects/${task.project}/tasks/${task.id}/images/thumbnail/${selectedShot}?size=${size}&center_x=${annotated[0]}&center_y=${annotated[1]}&draw_point=${annotated[0]},${annotated[1]}&point_color=f29900&point_radius=2&draw_point=${reprojected[0]},${reprojected[1]}&&point_color=00ff00&point_radius=2&zoom=${zoom}`;
     }
 
     componentDidMount(){
@@ -86,7 +86,7 @@ class GCPPopup extends React.Component {
     }
 
     canZoomIn = () => {
-        return this.state.zoom < 5 && !this.state.loading;
+        return this.state.zoom < 10 && !this.state.loading;
     }
 
     canZoomOut = () => {