Background images and menu for saved page

This commit is contained in:
Ruben van de Ven 2020-03-10 11:53:00 +01:00
parent c7dc70efd1
commit ca5af3c6b7
6 changed files with 90 additions and 11 deletions

View file

@ -111,7 +111,8 @@ class SaveHandler(RestHandler):
with open('www/canvas.svg') as fp: with open('www/canvas.svg') as fp:
svgContent = fp.read() svgContent = fp.read()
svgContent = svgContent.replace('{source}', json.dumps(source))\ svgContent = svgContent.replace('{source}', json.dumps(source))\
.replace('</svg>', "".join(svgGs)+"</svg>") .replace('</svg>', "".join(svgGs)+"</svg>")\
.replace('{scenenr}', str(scene))
saveId = uuid.uuid4().hex + '.svg' saveId = uuid.uuid4().hex + '.svg'
@ -132,6 +133,7 @@ class SavedHandler(tornado.web.RequestHandler):
files.sort(key=lambda f: -1 * os.path.getmtime(f)) files.sort(key=lambda f: -1 * os.path.getmtime(f))
for filename in files[:100]: for filename in files[:100]:
# latest 100 images only
with open(filename, 'r') as fp: with open(filename, 'r') as fp:
# remove first XML line: # remove first XML line:
contents = '\n'.join(fp.read().split('\n')[1:]) contents = '\n'.join(fp.read().split('\n')[1:])

View file

@ -1,5 +1,5 @@
<?xml version="1.0" encoding="UTF-8"?> <?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" id="svgCanvas" viewBox="0 0 1000 1000"> <svg xmlns="http://www.w3.org/2000/svg" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" id="svgCanvas" viewBox="0 0 1000 1000" class="scene{scenenr}">
<metadata><rdf:RDF><dc:source>{source}</dc:source></rdf:RDF></metadata> <metadata><rdf:RDF><dc:source>{source}</dc:source></rdf:RDF></metadata>
<defs> <defs>
<pattern id="tprke" patternUnits="userSpaceOnUse" width="5" height="5"> <pattern id="tprke" patternUnits="userSpaceOnUse" width="5" height="5">

Before

Width:  |  Height:  |  Size: 27 KiB

After

Width:  |  Height:  |  Size: 27 KiB

View file

@ -1,23 +1,30 @@
body{ body{
font-family:sans-serif; background-color: darkblue;
background: darkblue;
margin:0; margin:0;
background-size:cover;
background-position: center center;
} }
#svgCanvas{ #svgCanvas{
width:100vw; width:100%;
height:100vh; height:100vh;
/*position: fixed;
top:0;
left:0;
bottom:0;
right:0;*/
z-index: -1;
} }
.catNav{ .catNav{
position:absolute; position:absolute;
top:0; top:0;
color:white; color:white;
bottom:0; /*bottom:0;*/
overflow-y: auto; /*overflow-y: auto;*/
padding: 10px; padding: 10px;
} }
#catNav { #catNav {
left: 0; left:calc(3vh + 10px);
} }
#catNav2 { #catNav2 {
right:0; right:0;
@ -35,6 +42,10 @@ body{
margin-bottom:-85px; margin-bottom:-85px;
box-shadow: white 0 0 20px; box-shadow: white 0 0 20px;
position:relative; position:relative;
font-size: 12px;
}
.catNav ul:first-child{
margin-top:0;
} }
.catNav ul:before{ .catNav ul:before{
content: attr(data-name); content: attr(data-name);
@ -214,3 +225,37 @@ body.hideLabels svg text{
margin: 10px; margin: 10px;
border:solid 1px white; 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;
}

View file

@ -115,10 +115,13 @@ class CocoCanvas {
this.loadImagesBtnEl.addEventListener('change', (e) => this.toggleImages(e)); this.loadImagesBtnEl.addEventListener('change', (e) => this.toggleImages(e));
this.loadLabelsBtnEl.addEventListener('change', (e) => this.toggleLabels(e)); this.loadLabelsBtnEl.addEventListener('change', (e) => this.toggleLabels(e));
this.sceneSelectEl.addEventListener('change', (e) => this.toggleBackground(e));
this.savedBtnEl.addEventListener('click', function(e){ this.savedBtnEl.addEventListener('click', function(e){
if(this.savedBtnEl.disabled || this.annotations.length < 1) return; if(this.savedBtnEl.disabled || this.annotations.length < 1) return;
this.save(); this.save();
}.bind(this)); }.bind(this));
this.toggleBackground();
} }
loadNav() { loadNav() {
let r = new Request('categories.json'); let r = new Request('categories.json');
@ -337,6 +340,11 @@ class CocoCanvas {
} }
} }
toggleBackground(e) {
let url = cc.sceneSelectEl.selectedOptions[0].dataset.background;
document.body.style.backgroundImage = `url(${url})`;
}
save() { save() {
let scene = this.sceneSelectEl.value; let scene = this.sceneSelectEl.value;
let annotations = []; let annotations = [];

View file

@ -43,13 +43,14 @@
<div class='buttons'> <div class='buttons'>
<label id='scenelabel'>Scene <select id='scene'> <label id='scenelabel'>Scene <select id='scene'>
<!-- <option>-</option> --> <!-- <option>-</option> -->
<option value="1">View from a drone</option> <option data-background="drone_simple.svg" value="1">View from a drone</option>
<option value="2">View from a self driving car</option> <option data-background="car_simple.svg" value="2">View from a self driving car</option>
<option value="3">Product affiliation detector</option> <option data-background="room_simple.svg" value="3">Product affiliation detector</option>
</select></label> </select></label>
<label id='convert'><input type='checkbox' id='loadImages'> images</label> <label id='convert'><input type='checkbox' id='loadImages'> images</label>
<label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label> <label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label>
<label id='savewrap'><input type='submit' id='save' disabled='disabled' value='save'></label> <label id='savewrap'><input type='submit' id='save' disabled='disabled' value='save'></label>
<label id='saved'><a href='saved'>Saved drawings</a></label>
</div> </div>
<!-- <script src="svg-inject.min.js"></script> --> <!-- <script src="svg-inject.min.js"></script> -->

View file

@ -2,12 +2,35 @@
<html> <html>
<head> <head>
<title>Plotting Data: COCO drawings</title> <title>Plotting Data: COCO drawings</title>
<!-- Plotting Data publication -->
<link rel="stylesheet" type="text/css" href="/a/css/main.css">
<link rel="stylesheet" type="text/css" href="coco.css"> <link rel="stylesheet" type="text/css" href="coco.css">
</head> </head>
<body class='hideImages'> <body class='hideImages'>
<nav id='publication'>
<a href="/a/introduction.html">
Introduction
</a>
<a href="/a/coco/" class='current'>
COCO
</a>
<a href="/a/enron/">
Enron
</a>
<a href="/a/20bn/">
Something-Something
</a>
<a href="/a/interviews.html">
Interviews
</a>
</nav>
<div class='buttons buttons-inline'> <div class='buttons buttons-inline'>
<label id='convert'><input type='checkbox' id='loadImages'> images</label> <label id='convert'><input type='checkbox' id='loadImages'> images</label>
<label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label> <label id='labelcheck'><input type='checkbox' id='loadLabels'> labels</label>
<label id='godraw'><a href='/a/coco'>Draw your own!</a></label>
</div> </div>
<div id='saved'> <div id='saved'>
{images} {images}