Show board overlay original img, flex layout

Elucidation · Feb 27, 2024 · 2b9cb3a · 2b9cb3a
1 parent b81c3fe
commit 2b9cb3a
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 27 deletions.
diff --git a/chessboard_detection.js b/chessboard_detection.js
@@ -64,7 +64,8 @@ function processLoadedImage(img) {
   // Visualize sobel image.
   sobelCanvas.width = d.width;
   sobelCanvas.height = d.height;
-  sobelCanvas.getContext('2d').putImageData(d, 0, 0);
+  // sobelCanvas.getContext('2d').putImageData(d, 0, 0); // Draw gradient image
+  sobelCanvas.getContext('2d').drawImage(img,0,0, width, height);
 
   // Get squashed X and Y sobels (by summing along columns and rows respectively).
   squashed = squashSobels(d);

diff --git a/index.html b/index.html
@@ -28,7 +28,6 @@
   </head>
 
   <body>
-    <!-- Computer Vision Portion -->
     <div>
       <h3>Predicting Chessboard layouts from Screenshots using TensorflowJs</h3>
       <p>
@@ -45,32 +44,41 @@ <h3>Predicting Chessboard layouts from Screenshots using TensorflowJs</h3>
       <p>
         Input screenshot file: <input type="file" id="imageLoader" name="imageLoader" accept="image/*"/>
       </p>
-      <img id='example_input_img' src="example_input.png" width="321px" height="300px" style="display:none">
-      <canvas id="uploadedImage"></canvas>
-
-      <h3>Gradient Image</h3>
-      <p><canvas id="sobelCanvas"></canvas></p>
-
-      <!-- Machine Learning Portion -->
-      <div>
-        <h3>Input to machine learning model</h3>
-        <p><canvas id="resultCanvas"></canvas></p>      
+      <div class="container">
+        <!-- Computer Vision Portion -->
+        <div class="section">
+          <h3>1. Input Image</h3>
+          <img id='example_input_img' src="example_input.png" style="display:none">
+          <canvas id="uploadedImage"></canvas>
+        </div>
+
+        <div class="section">
+          <h3>2. Board Overlay</h3>
+          <p><canvas id="sobelCanvas"></canvas></p>
+        </div>
+        <!-- Machine Learning Portion -->
+        <div class="section">
+          <h3>3. Input to machine learning model</h3>
+          <p><canvas id="resultCanvas"></canvas></p>                
+        </div>
 
-        <h3>Prediction</h3>
-        <div id="prediction_block" style="display:none">
-          <p>
-            Raw Predicted FEN: <div id='fen'>Waiting for image...</div>
-          </p>
-          <div id="chessboard"></div>
-          <p>
-            ◇ White to play : <a href="" id="lichess_analysis_white">Analysis</a> | <a href="" id="lichess_editor_white">Editor</a><br/>
-            ◆ Black to play : <a href="" id="lichess_analysis_black">Analysis</a> | <a href="" id="lichess_editor_black">Editor</a><br/>
-          </p>
-          <p>
-            ▾ Links for when pieces are upside down on the board:<br/>
-            ◇ White to play : <a href="" id="lichess_analysis_white_inverted">Analysis</a> | <a href="" id="lichess_editor_white_inverted">Editor</a><br/>
-            ◆ Black to play : <a href="" id="lichess_analysis_black_inverted">Analysis</a> | <a href="" id="lichess_editor_black_inverted">Editor</a><br/>
-          </p>
+        <div class="section">
+          <h3>4. Prediction</h3>
+          <div id="prediction_block" style="display:none">
+            <p>
+              Raw Predicted FEN: <div id='fen'>Waiting for image...</div>
+            </p>
+            <div id="chessboard"></div>
+            <p>
+              ◇ White to play : <a href="" id="lichess_analysis_white">Analysis</a> | <a href="" id="lichess_editor_white">Editor</a><br/>
+              ◆ Black to play : <a href="" id="lichess_analysis_black">Analysis</a> | <a href="" id="lichess_editor_black">Editor</a><br/>
+            </p>
+            <p>
+              ▾ Links for when pieces are upside down on the board:<br/>
+              ◇ White to play : <a href="" id="lichess_analysis_white_inverted">Analysis</a> | <a href="" id="lichess_editor_white_inverted">Editor</a><br/>
+              ◆ Black to play : <a href="" id="lichess_analysis_black_inverted">Analysis</a> | <a href="" id="lichess_editor_black_inverted">Editor</a><br/>
+            </p>
+          </div>
         </div>
       </div>
     </div>

diff --git a/style.css b/style.css
@@ -6,6 +6,25 @@ body {
   line-height: 1.6; /* Adjust spacing between rows */
 }
 
+.container {
+  display: flex; /* Enable flexbox layout */
+  flex-wrap: wrap; /* Allow items to wrap into multiple rows*/
+  justify-content: space-around; /* Distribute space around sections */
+}
+
+.section {
+  width: fit-content;
+  margin-bottom: 20px;
+
+  padding: 15px;
+}
+
+h3 {
+  /* Style titles */
+  text-align: center;
+}
+
+/* fen2htmldiv styling */
 #chessboard {
   font-family: "Chess", sans-serif;
   display: grid;