introduce training page layout

bleeptrack · May 28, 2024 · e179afe · e179afe
1 parent 538e737
commit e179afe
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 11 deletions.
diff --git a/static/PaperCanvas.js b/static/PaperCanvas.js
@@ -14,12 +14,13 @@ export class PaperCanvas extends HTMLElement {
 			<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 			<style>
 				
-				canvas{
-					background-color: lightblue;
-				}
+				canvas[resize] {
+					width: 100%;
+					height: 100%;
+				}	
 			</style>
 			
-			<canvas id="paperCanvas"></canvas>
+			<canvas id="paperCanvas" resize="true"></canvas>
 				
 		`;
 
@@ -46,6 +47,8 @@ export class PaperCanvas extends HTMLElement {
 		tool.onMouseDown = function (event) {
 			path = new Path()
 			path.strokeColor = "black"
+			path.strokeWidth = 3
+			path.strokeCap = 'round'
 			path.add(event.point)
 		}
 

diff --git a/static/PatternTrainer.js b/static/PatternTrainer.js
@@ -29,31 +29,69 @@ export class PatternTrainer extends HTMLElement {
 			<link rel="stylesheet" href="/static/style.css">
 			<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
 			<style>
-				
+				#container{
+					display: flex;
+					flex-direction: column;
+					height: 100%;
+					box-sizing: border-box;
+					padding: 5%;
+					gap: 1vh;
+				}
+				#canvas-container{
+					width: 100%;
+					flex: 1;
+					border: 2px solid black;
+					position: relative;
+				}
+				input{
+					max-width: 40vw;
+					width: 50em;
+					height: 2em;
+					padding: 0.5em;
+					align-self: center;
+				}
+				#undo{
+					position: absolute;
+					top: 2vh;
+					right: 2vh;
+					width: 2em;
+				}
+				#train{
+					align-self: center;
+				}
+				[contenteditable=true]:empty:before {
+					content: attr(placeholder);
+					pointer-events: none;
+					display: block; /* For Firefox */
+					color: grey;
+				}
 				
 			</style>
 			
 			<div id="container">
-				<input type="test" placeholder="Scribble Name" id="name"></input>
+				<h1>Train your Scribble Model</h1>
+				<div id="name" class="scribble input" placeholder="Enter your model name" contenteditable=true></div>
+				<div id="canvas-container">
+					<button id="undo" class="material-symbols-outlined scribble">undo</button>
+				</div>
 				
-				<button id="undo">undo</button>
-				<button id="train">train</button>
+				<button id="train" class="scribble">train</button>
 			</div>
 		`;
 
 
 		this.shadow.appendChild(container.content.cloneNode(true));
 
-		this.shadow.getElementById("name").after(this.canvas)
+		this.shadow.getElementById("canvas-container").appendChild(this.canvas)
 		this.shadow.getElementById("undo").addEventListener("click", () => {
 			this.canvas.undo()
 		})
 		this.shadow.getElementById("train").addEventListener("click", () => {
 			console.log(this.canvas.linelist)
-			console.log("name:", this.shadow.getElementById("name").value)
+			console.log("name:", this.shadow.getElementById("name").innerHTML)
 
 			this.socket.emit("new dataset", {
-				name: this.shadow.getElementById("name").value,
+				name: this.shadow.getElementById("name").innerHTML,
 				list: this.canvas.linelist,
 			})
 

diff --git a/templates/train.html b/templates/train.html
@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <title>title</title>
     <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
+    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
     <script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.12.15/paper-full.min.js" integrity="sha512-ovjLI1ZcZe6bw+ImQ21r+sv8q/Vwob2kq7tFidK6E1LWfi0T4uobbmpfEU1//a9h9o5Kkt+MnMWf6rWlg0EiMw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
   </head>