Merge pull request #81 from SJSURoboticsTeam/Michael-Fullscreen-view

Michael fullscreen view

src/App.tsx

@@ -70,10 +70,11 @@ function App() {
           {system === 'science' && <ScienceSystem commands={commands} />}
 
           <Status status={status} />
-          <Camera name="0" src="http://192.168.0.201:8081/" />
-          <Camera name="1" src="http://192.168.0.206:8081/" />
-          <Camera name="2" src="http://raspberrypi:8003/stream.mjpg" />
-          <Camera name="3" src="http://raspberrypi:8003/stream.mjpg" />
+          <Camera name="0" src="http://192.168.1.201:8081/" className={''}/>
+          <Camera name="1" src="http://192.168.1.206:8081/" className={''}/>
+          <Camera name="2" src="http://raspberrypi:8003/stream.mjpg" className={''}/>
+          <Camera name="3" src="http://raspberrypi:8003/stream.mjpg" className={''}/>
+
         </div>
       }
     </div >

src/components/Camera.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-export default function Camera({ name, src }) {
+export default function Camera({ name, src, className }) {
     return (
         <div>
-            {src ? <img className='camera' src={src} alt={name} /> : <p>Camera {name} is not connected</p>}
+            {src ? <img className={className} src={src} alt={name} /> : <p>Camera {name} is not connected</p>}
         </div>
     )
 }

src/components/FullScreenView.tsx

@@ -0,0 +1,15 @@
+
+import MainCamera from "./OperationalView/MainCamera";
+
+export default function FullScreen({camNum}) {
+  console.log(camNum)
+  const displayCam = Array.from({length: camNum}, (_, index) => {
+    return <MainCamera key={index}/>
+  }); 
+
+    return(
+      <div className="fullscreen">
+        {displayCam}
+      </div>
+    );
+}

src/components/OperationalView.tsx

@@ -1,23 +1,23 @@
-import { useState } from "react";
-import Menu from "./OperationalView/Menu";
-import Camera from "./Camera";
 import OVStatus from "./OperationalView/OVStatus";
-import MainCamera from "./OperationalView/MainCamera";
+import FullScreen from "./FullScreenView";
+import { useState } from "react";
 
 export default function OperationalView({ commands, status }) {
-  const [activeCam, setActiveCam] = useState(null)
-  
-  return (
+  const [camNum, setCamNum] = useState(1)
+
+  return(
     <div className="operational-view">
       {/* left */}
       <div id = "ov-tools">
-        <OVStatus status = {status}/> 
+        <OVStatus status = {status}/>
+        <select className="cam-num"  onChange={(e) => {setCamNum(parseInt(e.target.value))}}>
+          <option className='btn btn__primary' value={1}>1 cam</option>
+          <option className='btn btn__primary' value={2}>2 cam</option>
+          <option className='btn btn__primary' value={3}>3 cam</option>
+        </select>
       </div>
-      {/* main */}
-      <MainCamera mainCam = {activeCam}/>
       {/* right */}
-      <Menu callback= {setActiveCam}/>
-      {/* <Camera name="primary" src="http://192.168.1.153:8081/" /> */}
+      <FullScreen camNum = {camNum}/>
     </div>
   );
 }

src/components/OperationalView/MainCamera.tsx

@@ -1,19 +1,25 @@
-import React from "react";
 import {useState} from "react"
 import Camera from "../Camera";
 import noCam from './Main_Camera_Test.png'
 import cam2 from './oatmeal.gif'
+import Menu from "./Menu";
 //Todo: need to add more cameras
 
 //Todo: swap from div to img for cam
 
-export default function MainCamera({mainCam}){
+export default function MainCamera(){
+    const [openMenu, setOpenMenu] = useState(false)
+    const [activeCam, setActiveCam] = useState(null)
+
+    const toggleMenu = () => {
+      setOpenMenu(true)
+    }
     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)
+    switch (activeCam)
     {
         case 'chassis':
             fileName = testCam1;
@@ -39,6 +45,11 @@ export default function MainCamera({mainCam}){
     }
 
     return(
-        <Camera name={mainCam} src={fileName} />
+        <div className="main-camera">
+            <Menu callback = {setActiveCam} openMenu={openMenu} closeMenu={setOpenMenu}/>
+            <button onClick={() => toggleMenu()}>
+                <Camera name={activeCam} src={fileName} className={activeCam}/>
+            </button>
+        </div>
     );
 }

src/components/OperationalView/Menu.tsx

@@ -3,7 +3,11 @@ import Camera from "../Camera";
 import { useState } from "react";
 import { Style } from "util";
 
-export default function Menu({callback}) {
+export default function Menu({callback, openMenu, closeMenu} ) {
+  const menuSelection = (title) => {
+    closeMenu(false)
+    callback(title)
+  }
 
   const camArray = [
     {title: "chassis"},
@@ -13,15 +17,15 @@ export default function Menu({callback}) {
     {title: "wheel_C"},
     {title: "arm"}
   ]
-
+ 
   return (
-      <div id="ov-camera-grid">
-      {camArray.map((cam) => (
-        <button onClick={() => callback(cam.title)}>
-          {cam.title}
-        </button>
-      ))}     
-       </div>
+      <dialog className="ov-camera-grid" open={openMenu} onClose={menuSelection}>
+        {camArray.map((cam) => (
+          <button onClick={() => menuSelection(cam.title)}>
+            {cam.title}
+          </button>
+        ))}    
+      </dialog>
   );
 }
 

src/index.css

@@ -379,15 +379,18 @@ video {
   column-gap: 5px;
   height: vh;
   width: vw;
-  grid-template-columns: 1fr 2.65fr 1fr;
+  grid-template-columns: 0.5fr 3fr;
   grid-template-rows: 1fr ;
 }
-#ov-main-cam{
+.ov-main-cam{
+  flex: 1;
   background-repeat: no-repeat;
   background-size: contain;
   aspect-ratio: 4/3;
   align-items: center;
   overflow: hidden;
+  object-fit: contain;
+  max-height: 100%;
 }
 
 #ov-camera-grid{
@@ -415,15 +418,33 @@ video {
   height: 100vh;
   overflow: hidden;
   aspect-ratio: 4/3;
+  object-fit: contain;
 }
-/* .ov-camera-toggle{
-  background-image: url(/src/components/OperationalView/oatmeal.gif);
-  background-size: contain;
-  background-repeat: no-repeat;
-  overflow: hidden;
-  background-position: center;
-  aspect-ratio: 4/3;
-} */
+
+.fullscreen{
+  display: flex;
+  /* grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr); */
+  width: 100%;
+  height: 100vh;
+  overflow: contain;
+  align-items: center;
+}
+
+.cam-num{
+  height: 40px
+}
+
+.menu:not([open]){
+  display: none; 
+}
+
+.menu{
+  display:grid;
+  grid-template-columns: repeat(2, 1fr);
+  transform: translate(-50%, -50%);
+}
+