diff --git a/src/components/Camera.tsx b/src/components/Camera.tsx index 2638acb..c95f483 100644 --- 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 (
- {src ? {name} :

Camera {name} is not connected

} + {src ? {name} :

Camera {name} is not connected

}
) } diff --git a/src/components/OperationalView/MainCamera.tsx b/src/components/OperationalView/MainCamera.tsx index 4a8587e..092e587 100644 --- 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( -
-
+ ); } \ No newline at end of file diff --git a/src/components/OperationalView/Menu.tsx b/src/components/OperationalView/Menu.tsx index de32a09..0761bde 100644 --- 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 index ba3691a..d300a16 100644 --- 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;