show image in position

coco/storage.py

@@ -5,6 +5,7 @@ import pycocotools.coco
 import ast
 import copy
 import svgwrite
+import uuid
 
 logger = logging.getLogger('coco.storage')
 
@@ -81,6 +82,7 @@ class Annotation:
         data = self.__dict__.copy()
         del data['storage']
         data['image'] = self.storage.getImage(data['image_id'])
+        data['category'] = self.storage.getCategory(self.category_id)
         return data
 
     def writeToDrawing(self, dwg, **pathSpecs):
@@ -121,13 +123,20 @@ class Annotation:
                 (viewbox[2], viewbox[3]),
                 fill=bg))
         if clip_image is not False:
+            clip_id = uuid.uuid4().hex
+
             img = self.storage.getImage(self.image_id)
             rmpart = len("http://images.cocodataset.org/")
             href = img['coco_url'][rmpart:]
             if image_dir:
                 href = os.path.join(image_dir, href)
-            dwg.add(dwg.image(href, insert=(0,0)))
+            dwg.add(dwg.image(href, insert=(0,0), clip_path=f"url(#{clip_id})"))
-        self.writeToDrawing(dwg)
+
+            
+            clip_path = dwg.defs.add(dwg.clipPath(id=clip_id))
+            self.writeToDrawing(clip_path)
+        else:
+            self.writeToDrawing(dwg)
         return dwg
 
 

www/index.html

@@ -31,6 +31,14 @@
             opacity:0;
         }
 
+
+        svg .img{
+            transition: stroke .2s;
+        }
+        svg .img.hide{
+            opacity:0;
+        }
+
         #crosshair line{
             stroke: gray;
             stroke-dasharray: 5px 5px;

www/js/game.js

@@ -1,60 +1,107 @@
 import { Flywheel } from "./effects.js";
 import { getPathShapeBetweenPoints } from "./svg.js";
 
-export function init(svgEl, crosshairXEl, crosshairYEl) {
+export class Game {
-    let flywheel = new Flywheel();
 
-    // canvas position relative to mouse/screen
+    constructor(svgEl, crosshairXEl, crosshairYEl) {
-    // TODO: update on resize:
+        this.flywheel = new Flywheel();
-    svgEl.setAttribute('viewBox', '0 0 ' + window.innerWidth + ' ' + window.innerHeight);
+        this.svgEl = svgEl;
-    let rect = svgEl.getBoundingClientRect();
 
-    // move crosshairs
+        // canvas position relative to mouse/screen
-    window.addEventListener('mousemove', function (mousemoveEv) {
+        // TODO: update on resize:
-        let x = mousemoveEv.clientX - rect.left;
+        svgEl.setAttribute('viewBox', '0 0 ' + window.innerWidth + ' ' + window.innerHeight);
-        let y = mousemoveEv.clientY - rect.top;
+        this.rect = svgEl.getBoundingClientRect();
 
-        crosshairXEl.setAttribute('x1', x)
+        // move crosshairs
-        crosshairXEl.setAttribute('x2', x)
+        window.addEventListener('mousemove', function (mousemoveEv) {
-        crosshairYEl.setAttribute('y1', y)
+            let x = mousemoveEv.clientX - this.rect.left;
-        crosshairYEl.setAttribute('y2', y)
+            let y = mousemoveEv.clientY - this.rect.top;
-    });
 
-    svgEl.addEventListener('mousedown', function (mousedownEv) {
+            crosshairXEl.setAttribute('x1', x)
-        // create shape to draw
+            crosshairXEl.setAttribute('x2', x)
-        let shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            crosshairYEl.setAttribute('y1', y)
-        shapeEl.classList.add('rect');
+            crosshairYEl.setAttribute('y2', y)
-        let p1 = { 'x': mousedownEv.clientX - rect.left, 'y': mousedownEv.clientY - rect.top }
+        }.bind(this));
-        let corners = flywheel.effects.shape.getAngles();
+        this.loadAnnotation();
-        let d = getPathShapeBetweenPoints(p1, p1, corners);
+    }
-        svgEl.appendChild(shapeEl);
-        shapeEl.setAttribute('d', d);
 
-        let mouseMoveEv = function (mousemoveEv) {
+    loadAnnotation() {
-            let p2 = { 'x': mousemoveEv.clientX - rect.left, 'y': mousemoveEv.clientY - rect.top }
+        let json_request = new Request('/annotation.json');
-            let d = getPathShapeBetweenPoints(p1, p2, corners);
+
+        fetch(json_request).then(function (response) {
+            return response.json();
+        }).then((annotation) => {
+            let svg_request = new Request('/annotation.svg?id='+annotation.id);
+
+            fetch(svg_request).then(function (response) {
+                return response.text()
+            }).then((text) => {
+                this.addAnnotation(annotation, text);
+            })
+        }).catch((e) => console.error(e));
+    }
+
+    addAnnotation(annotation, svgText) {
+        
+        //determine position
+        const maxX = this.rect.width - annotation.bbox[2];
+        const maxY = this.rect.height - annotation.bbox[3];
+        const posX = Math.random() * maxX;
+        const posY = Math.random() * maxY;
+        
+        let imgEl = document.createElementNS('http://www.w3.org/2000/svg', 'g');
+        imgEl.innerHTML = svgText;
+        imgEl.classList.add('img');
+        imgEl.setAttribute('transform', `translate(${posX} ${posY})`);
+        this.svgEl.appendChild(imgEl);
+
+        let startTrace = function (mousedownEv) {
+            // create shape to draw
+            let shapeEl = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+            shapeEl.classList.add('rect');
+            let p1 = { 'x': mousedownEv.clientX - this.rect.left, 'y': mousedownEv.clientY - this.rect.top }
+            let corners = this.flywheel.effects.shape.getAngles();
+            let d = getPathShapeBetweenPoints(p1, p1, corners);
+            this.svgEl.appendChild(shapeEl);
             shapeEl.setAttribute('d', d);
-        };
-        let mouseUpEv = function () {
-            console.log('up');
-            window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
-            window.removeEventListener('mouseup', mouseUpEv); // remove itself.
-            shapeEl.classList.add('locked');
-            //TODO: calculate points
-            flywheel.add();
 
-            // fade out
+            let mouseMoveEv = function (mousemoveEv) {
-            setTimeout(function () {
+                let p2 = { 'x': mousemoveEv.clientX - this.rect.left, 'y': mousemoveEv.clientY - this.rect.top }
-                shapeEl.classList.add('hide');
+                let d = getPathShapeBetweenPoints(p1, p2, corners);
-                // remove shape
+                shapeEl.setAttribute('d', d);
+            }.bind(this);
+            let mouseUpEv = function () {
+                console.log('up');
+                window.removeEventListener('mousemove', mouseMoveEv); // remove itself.
+                window.removeEventListener('mouseup', mouseUpEv); // remove itself.
+                this.svgEl.removeEventListener('mousedown', startTrace); // remove itself.
+                shapeEl.classList.add('locked');
+                //TODO: calculate points
+                this.flywheel.add();
+                this.loadAnnotation();
+
+                // fade out box
                 setTimeout(function () {
-                    shapeEl.parentNode.removeChild(shapeEl);
+                    shapeEl.classList.add('hide');
+                    // remove shape
+                    setTimeout(function () {
+                        shapeEl.parentNode.removeChild(shapeEl);
+                    }, 1000);
                 }, 1000);
-            }, 1000);
+                // fade out img
-        };
+                setTimeout(function () {
-        window.addEventListener('mousemove', mouseMoveEv);
+                    imgEl.classList.add('hide');
-        window.addEventListener('mouseup', mouseUpEv);
+                    // remove shape
-    })
+                    setTimeout(function () {
+                        imgEl.parentNode.removeChild(imgEl);
+                    }, 500);
+                }, 500);
+            }.bind(this);
+            window.addEventListener('mousemove', mouseMoveEv);
+            window.addEventListener('mouseup', mouseUpEv);
+        }.bind(this);
 
-    return this;
+        this.svgEl.addEventListener('mousedown', startTrace)
+
+    }
 }

www/js/main.js

@@ -1,9 +1,9 @@
-import { init } from "./game.js";
+import { Game } from "./game.js";
 
 let svgEl = document.getElementById('canvas');
 let crosshairXEl = document.getElementById('crosshair_x');
 let crosshairYEl = document.getElementById('crosshair_y');
 
 
-var game = init(svgEl, crosshairXEl, crosshairYEl);
+var game = new Game(svgEl, crosshairXEl, crosshairYEl);
 console.log('Initialised game', game);