resize and center

templates/browser-detect.html

@@ -9,11 +9,16 @@
 
 body {
   font-family: roboto;
-  margin: 2em;
   color: #3d3d3d;
   --mdc-theme-primary: #007f8b;
   --mdc-theme-on-primary: #f1f3f4;
+  box-sizing: border-box;
 }
+
+canvas {
+            background-color: lightgray; /* Just for visibility */
+        }
+
 </style>
 
   <script>
@@ -32,17 +37,17 @@ body {
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs-tflite/dist/tf-tflite.min.js"></script>
 
 
-    <div id="liveView" class="videoView">
+        <center>
       <img id="output_image" style="display:none"></img>
       <button id="webcamButton">
         <span>ENABLE WEBCAM</span>
       </button>
       <span id="predicted_result"></span>
-      <div style="position: relative;">
-        <video id="webcam" style="position: absolute;  display:none" autoplay="" playsinline=""></video>
-        <canvas class="output_canvas" id="output_canvas" style="position: absolute; left: 0px; top: 0px; display:block"></canvas>
-      </div>
-    </div>
+
+        </center>
+            <video id="webcam" style="display:none" autoplay="" playsinline=""></video>
+            <canvas class="output_canvas" id="output_canvas" style="display:block; position:absolute; left:0px" width="100%" height="30%"></canvas>
+
     
 
   
@@ -120,11 +125,7 @@ let lastVideoTime = -1;
 let results = undefined;
 console.log(video);
 async function predictWebcam() {
-    canvasElement.style.width = video.videoWidth;
-    ;
-    canvasElement.style.height = video.videoHeight;
-    canvasElement.width = video.videoWidth;
-    canvasElement.height = video.videoHeight;
+    canvasElement.width = window.innerWidth;
     // Now let's start detecting the stream.
     if (runningMode === "IMAGE") {
         runningMode = "VIDEO";
@@ -137,7 +138,7 @@ async function predictWebcam() {
     }
     canvasCtx.save();
     canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height);
-    canvasCtx.drawImage(video, 0, 0, canvasElement.width, canvasElement.height)
+    canvasCtx.drawImage(video, 0, 0, canvasElement.width, (video.videoHeight/video.videoWidth)*canvasElement.width)
     if (results.landmarks) {
         annotateImage()
         //detectSign()
@@ -156,8 +157,8 @@ if(results.landmarks[0]){
         y_array=[]
         results.landmarks[0].forEach(iterate)    
         //console.log(x_array)
-        var image_height = video.videoHeight
-        var image_width= video.videoWidth
+        var image_height = (video.videoHeight/video.videoWidth)*canvasElement.width
+        var image_width= canvasElement.width
     var min_x = Math.min(...x_array)*image_width
     var min_y = Math.min(...y_array)*image_height
     var max_x = Math.max(...x_array)*image_width
@@ -286,8 +287,8 @@ drawLandmarks(canvasCtx, hand[17], '#ff3030'); // Pinky palm (17)
     }
   // Add more drawing calls for each landmark collection as needed
 
-var dataurl=cropCanvas(canvasElement,crop_left,crop_top,crop_right-crop_left, crop_bottom-crop_top).toDataURL("image/jpeg", 2);
-document.getElementById("output_image").src=dataurl
+var dataurl=cropCanvas(canvasElement,crop_left,crop_top,crop_right-crop_left, crop_bottom-crop_top).toDataURL("image/jpeg", 0.2);
+
         
 //# sourceURL=pen.js
       }
@@ -300,14 +301,14 @@ function iterate(x,y){
 
 const cropCanvas = (sourceCanvas,left,top,width,height) => {
     let destCanvas = document.createElement('canvas');
-    destCanvas.width = 244;
+    destCanvas.width = 224;
     var cropAspectRatio = width / height;
 
-    destCanvas.height = 244 / cropAspectRatio
+    destCanvas.height = 224 / cropAspectRatio
     destCanvas.getContext("2d").drawImage(
         sourceCanvas,
         left,top,width,height,  // source rect with content to crop
-        0,0,244,destCanvas.height);      // newCanvas, same size as source 
+        0,0,224,destCanvas.height);      // newCanvas, same size as source 
         var predictionInput=tf.browser.fromPixels(destCanvas.getContext("2d").getImageData(0, 0, 224, 224))
 
         predict(tf.expandDims(predictionInput,0))
@@ -329,11 +330,14 @@ async function predict(inputTensor){
 }
 
 function drawLandmarks(canvasCtx, landmarks, color) {
+    var image_height = (video.videoHeight/video.videoWidth)*canvasElement.width
+    var image_width= canvasElement.width
+
   canvasCtx.fillStyle = color;
   canvasCtx.strokeStyle = 'white';
   canvasCtx.lineWidth = 1;
   canvasCtx.beginPath();
-  canvasCtx.arc(landmarks.x * video.videoWidth, landmarks.y*video.videoHeight, 6, 0, 2 * Math.PI);
+  canvasCtx.arc(landmarks.x * image_width, landmarks.y*image_height, 6, 0, 2 * Math.PI);
   canvasCtx.fill();
   canvasCtx.stroke();
 
@@ -341,14 +345,18 @@ function drawLandmarks(canvasCtx, landmarks, color) {
 
 function drawConnection(startNode, endNode, strokeColor, strokeWidth) {
 
+    var image_height = (video.videoHeight/video.videoWidth)*canvasElement.width
+    var image_width= canvasElement.width
+
   canvasCtx.strokeStyle = strokeColor;
   canvasCtx.lineWidth = strokeWidth;
   canvasCtx.beginPath();
-  canvasCtx.moveTo(startNode.x * video.videoWidth, startNode.y*video.videoHeight,);
-  canvasCtx.lineTo(endNode.x * video.videoWidth, endNode.y*video.videoHeight);
+  canvasCtx.moveTo(startNode.x * image_width, startNode.y*image_height);
+  canvasCtx.lineTo(endNode.x * image_width, endNode.y*image_height);
   canvasCtx.stroke();
 }
 
+
     </script>