Background images and menu for saved page
This commit is contained in:
parent
c7dc70efd1
commit
ca5af3c6b7
6 changed files with 90 additions and 11 deletions
|
@ -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:])
|
||||||
|
|
|
@ -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 |
57
www/coco.css
57
www/coco.css
|
@ -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;
|
||||||
|
}
|
|
@ -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 = [];
|
||||||
|
|
|
@ -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> -->
|
||||||
|
|
|
@ -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}
|
||||||
|
|
Loading…
Reference in a new issue