Added scaling of shotfeed

dbecker1 · Apr 1, 2020 · fd5aa29 · fd5aa29
1 parent 23add13
commit fd5aa29
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 67 deletions.
diff --git a/.idea/workspace.xml b/.idea/workspace.xml
diff --git 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
@@ -12,44 +12,38 @@ class TargetScreenManager {
         this.maxWidth = canvas.width;
         this.ctx = canvas.getContext('2d');
         console.log("Target canvas attached");
+
+        this.wipeScreen();
     }
 
     detachCanvas() {
         this.canvas = null
         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);
     }