From ca5af3c6b79e12c85bc991c88603c46efa90a50f Mon Sep 17 00:00:00 2001 From: Ruben van de Ven Date: Tue, 10 Mar 2020 11:53:00 +0100 Subject: [PATCH] Background images and menu for saved page --- server.py | 4 +++- www/canvas.svg | 2 +- www/coco.css | 57 ++++++++++++++++++++++++++++++++++++++++++++------ www/coco.js | 8 +++++++ www/index.html | 7 ++++--- www/saved.html | 23 ++++++++++++++++++++ 6 files changed, 90 insertions(+), 11 deletions(-) diff --git a/server.py b/server.py index c715b49..f1eefc2 100644 --- a/server.py +++ b/server.py @@ -111,7 +111,8 @@ class SaveHandler(RestHandler): with open('www/canvas.svg') as fp: svgContent = fp.read() svgContent = svgContent.replace('{source}', json.dumps(source))\ - .replace('', "".join(svgGs)+"") + .replace('', "".join(svgGs)+"")\ + .replace('{scenenr}', str(scene)) saveId = uuid.uuid4().hex + '.svg' @@ -132,6 +133,7 @@ class SavedHandler(tornado.web.RequestHandler): files.sort(key=lambda f: -1 * os.path.getmtime(f)) for filename in files[:100]: + # latest 100 images only with open(filename, 'r') as fp: # remove first XML line: contents = '\n'.join(fp.read().split('\n')[1:]) diff --git a/www/canvas.svg b/www/canvas.svg index 77c1dda..772c290 100644 --- a/www/canvas.svg +++ b/www/canvas.svg @@ -1,5 +1,5 @@ - + {source} diff --git a/www/coco.css b/www/coco.css index 15a8181..c733545 100644 --- a/www/coco.css +++ b/www/coco.css @@ -1,23 +1,30 @@ body{ - font-family:sans-serif; - background: darkblue; + background-color: darkblue; margin:0; + background-size:cover; + background-position: center center; } #svgCanvas{ - width:100vw; + width:100%; height:100vh; + /*position: fixed; + top:0; + left:0; + bottom:0; + right:0;*/ + z-index: -1; } .catNav{ position:absolute; top:0; color:white; - bottom:0; - overflow-y: auto; + /*bottom:0;*/ + /*overflow-y: auto;*/ padding: 10px; } #catNav { - left: 0; + left:calc(3vh + 10px); } #catNav2 { right:0; @@ -35,6 +42,10 @@ body{ margin-bottom:-85px; box-shadow: white 0 0 20px; position:relative; + font-size: 12px; +} +.catNav ul:first-child{ + margin-top:0; } .catNav ul:before{ content: attr(data-name); @@ -214,3 +225,37 @@ body.hideLabels svg text{ margin: 10px; border:solid 1px white; } + + +#saved svg.scene1{ + background-image:url('drone_simple.svg'); + background-size: cover; + background-origin: center center; +} +#saved svg.scene2{ + background-image:url('car_simple.svg'); + background-size: cover; + background-origin: center center; +} +#saved svg.scene3{ + background-image:url('room_simple.svg'); + background-size: cover; + background-origin: center center; +} + +a, a:link, a:visited{ + color:white; + text-decoration:none; +} +a:hover{ + text-decoration: underline; +} + +#godraw a,#saved a{ + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + + text-decoration: none; + color: initial; +} \ No newline at end of file diff --git a/www/coco.js b/www/coco.js index 91e8d49..c3a2a98 100644 --- a/www/coco.js +++ b/www/coco.js @@ -115,10 +115,13 @@ class CocoCanvas { this.loadImagesBtnEl.addEventListener('change', (e) => this.toggleImages(e)); this.loadLabelsBtnEl.addEventListener('change', (e) => this.toggleLabels(e)); + this.sceneSelectEl.addEventListener('change', (e) => this.toggleBackground(e)); this.savedBtnEl.addEventListener('click', function(e){ if(this.savedBtnEl.disabled || this.annotations.length < 1) return; this.save(); }.bind(this)); + + this.toggleBackground(); } loadNav() { let r = new Request('categories.json'); @@ -336,6 +339,11 @@ class CocoCanvas { document.body.classList.add('hideLabels'); } } + + toggleBackground(e) { + let url = cc.sceneSelectEl.selectedOptions[0].dataset.background; + document.body.style.backgroundImage = `url(${url})`; + } save() { let scene = this.sceneSelectEl.value; diff --git a/www/index.html b/www/index.html index aff2dc6..7a7bd77 100644 --- a/www/index.html +++ b/www/index.html @@ -43,13 +43,14 @@
+
diff --git a/www/saved.html b/www/saved.html index 0a006ae..67e9654 100644 --- a/www/saved.html +++ b/www/saved.html @@ -2,12 +2,35 @@ Plotting Data: COCO drawings + + + + + +
+
{images}