Background images and menu for saved page
This commit is contained in:
Ruben van de Ven
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:
|
||||
svgContent = fp.read()
|
||||
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'
|
||||
|
|
@ -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:])
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<?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>
|
||||
<defs>
|
||||
<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{
|
||||
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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -43,13 +43,14 @@
|
|||
<div class='buttons'>
|
||||
<label id='scenelabel'>Scene <select id='scene'>
|
||||
<!-- <option>-</option> -->
|
||||
<option value="1">View from a drone</option>
|
||||
<option value="2">View from a self driving car</option>
|
||||
<option value="3">Product affiliation detector</option>
|
||||
<option data-background="drone_simple.svg" value="1">View from a drone</option>
|
||||
<option data-background="car_simple.svg" value="2">View from a self driving car</option>
|
||||
<option data-background="room_simple.svg" value="3">Product affiliation detector</option>
|
||||
</select></label>
|
||||
<label id='convert'><input type='checkbox' id='loadImages'> images</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='saved'><a href='saved'>Saved drawings</a></label>
|
||||
</div>
|
||||
|
||||
<!-- <script src="svg-inject.min.js"></script> -->
|
||||
|
|
|
|||
|
|
@ -2,12 +2,35 @@
|
|||
<html>
|
||||
<head>
|
||||
<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">
|
||||
</head>
|
||||
<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'>
|
||||
<label id='convert'><input type='checkbox' id='loadImages'> images</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 id='saved'>
|
||||
{images}
|
||||
|
|
|
|||
Loading…
Reference in a new issue