Merge pull request #78 from SJSURoboticsTeam/Michael-connect-camera-t…

…o-interface connected cameras to Operational-View
SJSURoboticsTeam · Sep 9, 2023 · bb9719d · bb9719d
2 parents aa3da13 + af114e0
commit bb9719d
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 18 deletions.
diff --git a/src/components/Camera.tsx b/src/components/Camera.tsx
@@ -3,7 +3,7 @@ import React from 'react'
 export default function Camera({ name, src }) {
     return (
         <div>
-            {src ? <img src={src} alt={name} /> : <p>Camera {name} is not connected</p>}
+            {src ? <img className='camera' src={src} alt={name} /> : <p>Camera {name} is not connected</p>}
         </div>
     )
 }
diff --git a/src/components/OperationalView/MainCamera.tsx b/src/components/OperationalView/MainCamera.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import {useState} from "react"
+import Camera from "../Camera";
 import noCam from './Main_Camera_Test.png'
 import cam2 from './oatmeal.gif'
 //Todo: need to add more cameras
@@ -8,20 +9,23 @@ import cam2 from './oatmeal.gif'
 
 export default function MainCamera({mainCam}){
     var fileName = noCam;
+    //Todo: add more cameras from rover
+    var testCam1 = 'http://192.168.1.119:8081/'
+    var testCam2 = 'http://192.168.1.196:8081/'
 
     switch (mainCam)
     {
         case 'chassis':
-            fileName = noCam;
+            fileName = testCam1;
             break;
         case 'mast':
-            fileName = cam2
+            fileName = testCam2;
             break;
         case 'wheel_A':
             fileName = noCam;
             break;
         case 'wheel_B':
-            fileName = cam2
+            fileName = cam2;
             break;
         case 'wheel_C':
             fileName = noCam;
@@ -34,18 +38,7 @@ export default function MainCamera({mainCam}){
             break;
     }
 
-    const camStyle = {
-        backgroundImage: `url(${fileName})`,
-        backgroundSize: 'cover',
-        backgroundPosition: 'center',
-        width: '100%',
-        height: '100vh',
-        overflow: 'hidden',
-        aspectRatio: '4/3'
-      };
-
     return(
-        <div id = "ov-main-cam"style={camStyle}>
-        </div>
+        <Camera name={mainCam} src={fileName} />
     );
 }
diff --git a/src/components/OperationalView/Menu.tsx b/src/components/OperationalView/Menu.tsx
@@ -11,8 +11,7 @@ export default function Menu({callback}) {
     {title: "wheel_A"},
     {title: "wheel_B"},
     {title: "wheel_C"},
-    {title: "arm"},
-    {title: "noCam"}
+    {title: "arm"}
   ]
 
   return (

diff --git a/src/index.css b/src/index.css
@@ -407,6 +407,15 @@ video {
   border: 2px solid #565656;
   border-radius: 8px;
 }
+
+.camera{
+  background-size: cover;
+  background-position: center;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  aspect-ratio: 4/3;
+}
 /* .ov-camera-toggle{
   background-image: url(/src/components/OperationalView/oatmeal.gif);
   background-size: contain;