From fd5aa299695181634f7eb835f7549277c3a5df33 Mon Sep 17 00:00:00 2001
From: Daniel Becker <dbecker.fl@gmail.com>
Date: Wed, 1 Apr 2020 14:35:41 -0500
Subject: [PATCH] Added scaling of shotfeed

---
 .idea/workspace.xml             | 96 ++++++++++++++++-----------------
 src/components/ShotFeed.js      | 14 +++--
 src/util/TargetScreenManager.js | 20 +++----
 3 files changed, 63 insertions(+), 67 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index f5eff12..17b703d 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -2,11 +2,8 @@
 <project version="4">
   <component name="ChangeListManager">
     <list default="true" id="1329be04-a561-4802-8866-c40ae65b7eea" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/src/components/App.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/App.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Card.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Card.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/pages/CalibrateLaser.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/CalibrateLaser.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/pages/CalibrateWebcam.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/CalibrateWebcam.js" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/pages/Welcome.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/pages/Welcome.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ShotFeed.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ShotFeed.js" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/util/TargetScreenManager.js" beforeDir="false" afterPath="$PROJECT_DIR$/src/util/TargetScreenManager.js" afterDir="false" />
     </list>
     <ignored path="$PROJECT_DIR$/.tmp/" />
     <ignored path="$PROJECT_DIR$/temp/" />
@@ -37,7 +34,7 @@
       <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/pages/CalibrateWebcam.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="473">
+            <state relative-caret-position="1290">
               <caret line="86" column="63" selection-start-line="86" selection-start-column="63" selection-end-line="86" selection-end-column="63" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
@@ -47,13 +44,10 @@
         </entry>
       </file>
       <file pinned="false" current-in-tab="false">
-        <entry file="file://$PROJECT_DIR$/src/components/pages/Shoot.js">
+        <entry file="file://$PROJECT_DIR$/src/util/TargetScreenManager.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="180">
-              <caret line="12" column="13" selection-start-line="12" selection-start-column="13" selection-end-line="12" selection-end-column="13" />
-              <folding>
-                <element signature="e#0#26#0" expanded="true" />
-              </folding>
+            <state relative-caret-position="294">
+              <caret line="39" column="63" selection-start-line="39" selection-start-column="63" selection-end-line="39" selection-end-column="63" />
             </state>
           </provider>
         </entry>
@@ -70,10 +64,10 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="true">
+      <file pinned="false" current-in-tab="false">
         <entry file="file://$PROJECT_DIR$/src/components/pages/Welcome.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="728">
+            <state relative-caret-position="1620">
               <caret line="108" column="142" selection-start-line="108" selection-start-column="142" selection-end-line="108" selection-end-column="142" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
@@ -86,7 +80,7 @@
         <entry file="file://$PROJECT_DIR$/src/components/Card.js">
           <provider selected="true" editor-type-id="text-editor">
             <state relative-caret-position="60">
-              <caret line="4" column="1" lean-forward="true" selection-start-line="4" selection-start-column="1" selection-end-line="4" selection-end-column="1" />
+              <caret line="4" column="1" selection-start-line="4" selection-start-column="1" selection-end-line="4" selection-end-column="1" />
             </state>
           </provider>
         </entry>
@@ -109,11 +103,11 @@
           </provider>
         </entry>
       </file>
-      <file pinned="false" current-in-tab="false">
+      <file pinned="false" current-in-tab="true">
         <entry file="file://$PROJECT_DIR$/src/components/ShotFeed.js">
           <provider selected="true" editor-type-id="text-editor">
-            <state relative-caret-position="618">
-              <caret line="65" column="51" selection-start-line="65" selection-start-column="51" selection-end-line="65" selection-end-column="51" />
+            <state relative-caret-position="384">
+              <caret line="45" column="56" selection-start-line="45" selection-start-column="56" selection-end-line="45" selection-end-column="56" />
               <folding>
                 <element signature="e#0#26#0" expanded="true" />
               </folding>
@@ -172,7 +166,6 @@
         <option value="$PROJECT_DIR$/public/index.html" />
         <option value="$PROJECT_DIR$/src/components/LaserCalibration.js" />
         <option value="$PROJECT_DIR$/src/components/pages/CalibrateProjector.js" />
-        <option value="$PROJECT_DIR$/src/util/TargetScreenManager.js" />
         <option value="$PROJECT_DIR$/src/util/WebcamCalibrator.js" />
         <option value="$PROJECT_DIR$/src/util/ShotDetector.js" />
         <option value="$PROJECT_DIR$/src/components/ProjectorScreen.js" />
@@ -184,12 +177,13 @@
         <option value="$PROJECT_DIR$/src/components/pages/Loading.js" />
         <option value="$PROJECT_DIR$/src/components/pages/Shoot.js" />
         <option value="$PROJECT_DIR$/src/components/pages/TargetSelection.js" />
-        <option value="$PROJECT_DIR$/src/components/ShotFeed.js" />
         <option value="$PROJECT_DIR$/src/components/Card.js" />
         <option value="$PROJECT_DIR$/src/components/pages/CalibrateLaser.js" />
         <option value="$PROJECT_DIR$/src/components/pages/CalibrateWebcam.js" />
         <option value="$PROJECT_DIR$/src/components/App.js" />
         <option value="$PROJECT_DIR$/src/components/pages/Welcome.js" />
+        <option value="$PROJECT_DIR$/src/util/TargetScreenManager.js" />
+        <option value="$PROJECT_DIR$/src/components/ShotFeed.js" />
       </list>
     </option>
   </component>
@@ -304,12 +298,12 @@
       <workItem from="1585536286887" duration="204000" />
       <workItem from="1585598930454" duration="12946000" />
       <workItem from="1585679364068" duration="6230000" />
-      <workItem from="1585757062749" duration="5506000" />
+      <workItem from="1585757062749" duration="6436000" />
     </task>
     <servers />
   </component>
   <component name="TimeTrackingManager">
-    <option name="totallyTimeSpent" value="60033000" />
+    <option name="totallyTimeSpent" value="60963000" />
   </component>
   <component name="ToolWindowManager">
     <frame x="0" y="0" width="1680" height="1050" extended-state="0" />
@@ -391,13 +385,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/util/TargetScreenManager.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="735">
-          <caret line="49" column="26" selection-start-line="49" selection-start-column="26" selection-end-line="49" selection-end-column="26" />
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/util/ShotDetector.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="300">
@@ -466,20 +453,10 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/ShotFeed.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="618">
-          <caret line="65" column="51" selection-start-line="65" selection-start-column="51" selection-end-line="65" selection-end-column="51" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/components/Card.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="60">
-          <caret line="4" column="1" lean-forward="true" selection-start-line="4" selection-start-column="1" selection-end-line="4" selection-end-column="1" />
+          <caret line="4" column="1" selection-start-line="4" selection-start-column="1" selection-end-line="4" selection-end-column="1" />
         </state>
       </provider>
     </entry>
@@ -507,16 +484,6 @@
         </state>
       </provider>
     </entry>
-    <entry file="file://$PROJECT_DIR$/src/components/pages/CalibrateWebcam.js">
-      <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="473">
-          <caret line="86" column="63" selection-start-line="86" selection-start-column="63" selection-end-line="86" selection-end-column="63" />
-          <folding>
-            <element signature="e#0#26#0" expanded="true" />
-          </folding>
-        </state>
-      </provider>
-    </entry>
     <entry file="file://$PROJECT_DIR$/src/components/ProjectorScreen.js">
       <provider selected="true" editor-type-id="text-editor">
         <state relative-caret-position="-187">
@@ -539,7 +506,7 @@
     </entry>
     <entry file="file://$PROJECT_DIR$/src/components/pages/Welcome.js">
       <provider selected="true" editor-type-id="text-editor">
-        <state relative-caret-position="728">
+        <state relative-caret-position="1620">
           <caret line="108" column="142" selection-start-line="108" selection-start-column="142" selection-end-line="108" selection-end-column="142" />
           <folding>
             <element signature="e#0#26#0" expanded="true" />
@@ -547,5 +514,32 @@
         </state>
       </provider>
     </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/pages/CalibrateWebcam.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="1290">
+          <caret line="86" column="63" selection-start-line="86" selection-start-column="63" selection-end-line="86" selection-end-column="63" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/util/TargetScreenManager.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="294">
+          <caret line="39" column="63" selection-start-line="39" selection-start-column="63" selection-end-line="39" selection-end-column="63" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/src/components/ShotFeed.js">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="384">
+          <caret line="45" column="56" selection-start-line="45" selection-start-column="56" selection-end-line="45" selection-end-column="56" />
+          <folding>
+            <element signature="e#0#26#0" expanded="true" />
+          </folding>
+        </state>
+      </provider>
+    </entry>
   </component>
 </project>
\ No newline at end of file
diff --git a/src/components/ShotFeed.js b/src/components/ShotFeed.js
index 39fcc5e..377817f 100644
--- a/src/components/ShotFeed.js
+++ b/src/components/ShotFeed.js
@@ -11,6 +11,7 @@ class ShotFeed extends React.Component {
         }
 
         this.canvasRef = React.createRef();
+        this.canvasParentRef = React.createRef();
     }
 
     updateNoise(e) {
@@ -41,8 +42,15 @@ class ShotFeed extends React.Component {
                     outputDimensions, 200);
             }
 
-            const scaleRows = .75
-            const scaleColumns = .75
+            const parentWidth = this.canvasParentRef.current.offsetWidth * .9;
+            const windowHeight = window.innerHeight * .6;
+            let scaleColumns = parentWidth / outputDimensions.columns
+            let scaleRows = windowHeight / outputDimensions.rows
+            if (scaleRows < scaleColumns) {
+                scaleColumns = scaleRows
+            } else {
+                scaleRows = scaleColumns
+            }
             const canvas = this.canvasRef.current;
             canvas.width = outputDimensions.columns * scaleColumns;
             canvas.height = outputDimensions.rows * scaleRows;
@@ -61,7 +69,7 @@ class ShotFeed extends React.Component {
 
     render() {
         return (
-            <div>
+            <div ref={this.canvasParentRef}>
                 <div style={{display: this.state.running ? "none" : "inline"}} >
                     <Button variant="customPrimary" onClick={() => {this.startProcessing()}}>Start shooting!</Button>
                 </div>
diff --git a/src/util/TargetScreenManager.js b/src/util/TargetScreenManager.js
index 4228ab4..3f28cce 100644
--- a/src/util/TargetScreenManager.js
+++ b/src/util/TargetScreenManager.js
@@ -12,6 +12,8 @@ class TargetScreenManager {
         this.maxWidth = canvas.width;
         this.ctx = canvas.getContext('2d');
         console.log("Target canvas attached");
+
+        this.wipeScreen();
     }
 
     detachCanvas() {
@@ -19,37 +21,29 @@ class TargetScreenManager {
         console.log("Target canvas detached")
     }
 
-    // showCalibrationScreen() {
-    //     let image = new Image();
-    //     image.onload = () => {
-    //         this.ctx.drawImage(image, 0, 0, this.maxWidth, this.maxHeight);
-    //     }
-    //     image.src = "/assets/checkerboard.svg";
-    // }
-
     showCalibrationScreen(cornerNumber) {
         let textCoordinates = {x: null, y: null};
 
-        const textWidth = 125;
+        const textWidth = 190;
 
         switch(cornerNumber) {
             case 1:
-                textCoordinates = {x: 20, y: 30}
+                textCoordinates = {x: 10, y: 30}
                 break;
             case 2:
                 textCoordinates = {x: this.maxWidth - 30 - textWidth, y: 30}
                 break;
             case 3:
-                textCoordinates = {x: this.maxWidth - 30 - textWidth, y: this.maxHeight - 30}
+                textCoordinates = {x: this.maxWidth - 30 - textWidth, y: this.maxHeight - 10}
                 break;
             case 4:
-                textCoordinates = {x: 20, y: this.maxHeight - 30}
+                textCoordinates = {x: 10, y: this.maxHeight - 10}
                 break;
         }
 
         this.wipeScreen();
 
-        this.ctx.font = "20px Times"
+        this.ctx.font = "30px Times"
         this.ctx.fillStyle = "black"
         this.ctx.fillText("Click this corner!", textCoordinates.x, textCoordinates.y);
     }