create svg

coco/storage.py

@@ -97,7 +97,7 @@ class Annotation:
         dy = (dimensions[1] - targetSize)/2
         return (dx, dy)
 
-    def asSvg(self, filename, square=False, bg=None):
+    def asSvg(self, filename, square=False, bg=None, clip_image=False, image_dir=None) -> svgwrite.Drawing:
         dimensions = (self.bbox[2], self.bbox[3])
         viewbox = copy.copy(self.bbox)
         if square:
@@ -120,6 +120,13 @@ class Annotation:
                 (viewbox[0], viewbox[1]),
                 (viewbox[2], viewbox[3]),
                 fill=bg))
+        if clip_image is not False:
+            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)))
         self.writeToDrawing(dwg)
         return dwg
 
@@ -290,12 +297,12 @@ class COCOStorage:
             f"SELECT annotations.id, points FROM annotations INNER JOIN segments ON segments.annotation_id = annotations.id WHERE area > 0")
         return cur.fetchall()
 
-    def getAnnotationById(self, annotation_id=None, withZerkine=False):
+    def getAnnotationById(self, annotation_id=None, withZerkine=False) -> Annotation:
         if annotation_id == -1:
             annotation_id = None
         return self.getRandomAnnotation(annotation_id=annotation_id, withZerkine=withZerkine)
 
-    def getRandomAnnotation(self, annotation_id=None, category_id=None, withZerkine=False):
+    def getRandomAnnotation(self, annotation_id=None, category_id=None, withZerkine=False) -> Annotation:
         result = self.getRandomAnnotations(
             annotation_id, category_id, withZerkine, limit=1)
         return result[0] if len(result) else None

server.py

@@ -1,5 +1,5 @@
 import argparse
-from coco.storage import COCOStorage
+from coco.storage import Annotation, COCOStorage
 import logging
 import coloredlogs
 import tornado.ioloop
@@ -28,7 +28,7 @@ class AnnotationHandler(tornado.web.RequestHandler):
     def get(self, *params):
         self.write(json.dumps(self.getData(*params), cls=JsonEncoder))
 
-    def getData(self):
+    def getData(self) -> Annotation:
         # get specific annotation
         annotation_id = self.get_argument('id', None)
         annotation_id = None if not annotation_id else int(annotation_id)
@@ -51,6 +51,18 @@ class AnnotationHandler(tornado.web.RequestHandler):
             return annotation.getNormalised(normalise, normalise)
         return annotation
 
+class AnnotationSvgHandler(AnnotationHandler):
+    def initialize(self, storage: COCOStorage):
+        self.storage = storage
+        self.set_header("Content-Type", "image/svg+xml")
+
+    def get(self, *params):
+        annotation = self.getData(*params)
+        dwg = annotation.asSvg(None, clip_image=True, image_dir='/dataset')
+        xml = dwg.tostring()
+        print(xml)
+        self.write(xml)
+
 
 class StaticFileWithHeaderHandler(tornado.web.StaticFileHandler):
     def set_extra_headers(self, path):
@@ -62,6 +74,9 @@ class StaticFileWithHeaderHandler(tornado.web.StaticFileHandler):
 def make_app(storage, debug):
     return tornado.web.Application([
         (r"/annotation.json", AnnotationHandler, {'storage': storage}),
+        (r"/annotation.svg", AnnotationSvgHandler, {'storage': storage}),
+        (r"/dataset/(.*)", StaticFileWithHeaderHandler,
+         {"path": 'dataset', "default_filename": 'index.html'}),
         (r"/(.*)", StaticFileWithHeaderHandler,
          {"path": 'www', "default_filename": 'index.html'}),
     ], debug=debug)

www/js/game.js

@@ -43,8 +43,10 @@ export function init(svgEl, crosshairXEl, crosshairYEl) {
             //TODO: calculate points
             flywheel.add();
 
+            // fade out
             setTimeout(function () {
                 shapeEl.classList.add('hide');
+                // remove shape
                 setTimeout(function () {
                     shapeEl.parentNode.removeChild(shapeEl);
                 }, 1000);
@@ -53,4 +55,6 @@ export function init(svgEl, crosshairXEl, crosshairYEl) {
         window.addEventListener('mousemove', mouseMoveEv);
         window.addEventListener('mouseup', mouseUpEv);
     })
+
+    return this;
 }