Background images and menu for saved page

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('</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:])

www/canvas.svg

@@ -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">

www/coco.css

@@ -1,23 +1,30 @@
 body{
-	font-family:sans-serif;
+	background-color: darkblue;
-	background: 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;
+	/*bottom:0;*/
-	overflow-y: auto;
+	/*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;
+}

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;

www/index.html

@@ -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 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>
 <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> -->

www/saved.html

@@ -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}