From f7b6eacfb1853d0bf813455486e25cd31c80af60 Mon Sep 17 00:00:00 2001
From: Michael Chan <mchan100work@gmail.com>
Date: Tue, 12 Sep 2023 16:40:20 -0700
Subject: [PATCH 1/5] (wip) creating fullscreen view

---
 src/components/FullScreenView.tsx       | 18 ++++++++++++++++++
 src/components/OperationalView.tsx      |  6 ++++--
 src/components/OperationalView/Menu.tsx | 19 +++++++++++--------
 src/index.css                           |  6 ++++++
 4 files changed, 39 insertions(+), 10 deletions(-)
 create mode 100644 src/components/FullScreenView.tsx

diff --git a/src/components/FullScreenView.tsx b/src/components/FullScreenView.tsx
new file mode 100644
index 0000000..dde38e7
--- /dev/null
+++ b/src/components/FullScreenView.tsx
@@ -0,0 +1,18 @@
+import React, { useState } from "react"
+import Camera from "./Camera";
+
+export default function FullScreen(handleFullscreen) {
+    const[fullScreen, setFullScreen] = useState(handleFullscreen)
+    const closeFullScreen = () => {
+        setFullScreen(!handleFullscreen);
+    }
+
+    return(
+        <dialog className="full-screen-view" onClose={fullScreen}>
+            hello
+            <button onClick={() => closeFullScreen()}>
+                Return
+            </button>
+        </dialog>
+    );
+}
\ No newline at end of file
diff --git a/src/components/OperationalView.tsx b/src/components/OperationalView.tsx
index d9c79dd..363fc6c 100644
--- a/src/components/OperationalView.tsx
+++ b/src/components/OperationalView.tsx
@@ -3,9 +3,11 @@ import Menu from "./OperationalView/Menu";
 import Camera from "./Camera";
 import OVStatus from "./OperationalView/OVStatus";
 import MainCamera from "./OperationalView/MainCamera";
+import FullScreen from "./FullScreenView";
 
 export default function OperationalView({ commands, status }) {
   const [activeCam, setActiveCam] = useState(null)
+  const [fullScreen, setFullScreen] = useState(false)
   
   return (
     <div className="operational-view">
@@ -16,8 +18,8 @@ export default function OperationalView({ commands, status }) {
       {/* main */}
       <MainCamera mainCam = {activeCam}/>
       {/* right */}
-      <Menu callback= {setActiveCam}/>
-      {/* <Camera name="primary" src="http://192.168.1.153:8081/" /> */}
+      <Menu callback = {setActiveCam} toggleFullScreen = {setFullScreen}/>
+      <FullScreen handleFullscreen = {fullScreen}/>
     </div>
   );
 }
diff --git a/src/components/OperationalView/Menu.tsx b/src/components/OperationalView/Menu.tsx
index 0761bde..44196a2 100644
--- a/src/components/OperationalView/Menu.tsx
+++ b/src/components/OperationalView/Menu.tsx
@@ -3,7 +3,7 @@ import Camera from "../Camera";
 import { useState } from "react";
 import { Style } from "util";
 
-export default function Menu({callback}) {
+export default function Menu({callback, toggleFullScreen} ) {
 
   const camArray = [
     {title: "chassis"},
@@ -13,15 +13,18 @@ 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>
+        {camArray.map((cam) => (
+          <button onClick={() => callback(cam.title)}>
+            {cam.title}
+          </button>
+        ))}    
+        <button onClick={() => toggleFullScreen(true)}>
+          toggle Full Screen
+        </button> 
+      </div>
   );
 }
 
diff --git a/src/index.css b/src/index.css
index d300a16..018f119 100644
--- a/src/index.css
+++ b/src/index.css
@@ -416,6 +416,12 @@ video {
   overflow: hidden;
   aspect-ratio: 4/3;
 }
+
+.full-screen-view{
+  width: 100%;
+  height: 100vh;
+  background-color: #e70000;
+}
 /* .ov-camera-toggle{
   background-image: url(/src/components/OperationalView/oatmeal.gif);
   background-size: contain;

From 1806c6a0e30a7a6a9c1e5c3c2cca6edd9a1094d4 Mon Sep 17 00:00:00 2001
From: Michael Chan <mchan100work@gmail.com>
Date: Mon, 2 Oct 2023 17:01:49 -0700
Subject: [PATCH 2/5] allow user to add number of desired camera

---
 src/components/FullScreenView.tsx             | 22 +++++------
 src/components/OperationalView.tsx            | 23 ++++++-----
 src/components/OperationalView/MainCamera.tsx | 18 +++++++--
 src/components/OperationalView/Menu.tsx       | 15 +++----
 src/index.css                                 | 39 +++++++++++++------
 5 files changed, 70 insertions(+), 47 deletions(-)

diff --git a/src/components/FullScreenView.tsx b/src/components/FullScreenView.tsx
index dde38e7..b9b8407 100644
--- a/src/components/FullScreenView.tsx
+++ b/src/components/FullScreenView.tsx
@@ -1,18 +1,14 @@
-import React, { useState } from "react"
-import Camera from "./Camera";
 
-export default function FullScreen(handleFullscreen) {
-    const[fullScreen, setFullScreen] = useState(handleFullscreen)
-    const closeFullScreen = () => {
-        setFullScreen(!handleFullscreen);
-    }
+import MainCamera from "./OperationalView/MainCamera";
+
+export default function FullScreen({camNum}) {
+  const displayCam = Array.from({length: camNum}, (_, index) => {
+    return <MainCamera key={index}/>
+  }); 
 
     return(
-        <dialog className="full-screen-view" onClose={fullScreen}>
-            hello
-            <button onClick={() => closeFullScreen()}>
-                Return
-            </button>
-        </dialog>
+      <div className="fullscreen">
+        {displayCam}
+      </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/OperationalView.tsx b/src/components/OperationalView.tsx
index 363fc6c..20fbc82 100644
--- a/src/components/OperationalView.tsx
+++ b/src/components/OperationalView.tsx
@@ -1,25 +1,24 @@
-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)
   const [fullScreen, setFullScreen] = useState(false)
-  
-  return (
+  const [camNum, setCamNum] = useState(null)
+
+  return(
     <div className="operational-view">
       {/* left */}
       <div id = "ov-tools">
-        <OVStatus status = {status}/> 
+        <OVStatus status = {status}/>
+        <select className="cam-num"  onChange={(e) => {setCamNum(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} toggleFullScreen = {setFullScreen}/>
-      <FullScreen handleFullscreen = {fullScreen}/>
+      <FullScreen camNum = {camNum}/>
     </div>
   );
 }
diff --git a/src/components/OperationalView/MainCamera.tsx b/src/components/OperationalView/MainCamera.tsx
index 092e587..91408c9 100644
--- a/src/components/OperationalView/MainCamera.tsx
+++ b/src/components/OperationalView/MainCamera.tsx
@@ -3,17 +3,24 @@ 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 +46,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} />
+            </button>
+        </div>
     );
 }
\ No newline at end of file
diff --git a/src/components/OperationalView/Menu.tsx b/src/components/OperationalView/Menu.tsx
index 44196a2..c052edd 100644
--- a/src/components/OperationalView/Menu.tsx
+++ b/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, toggleFullScreen} ) {
+export default function Menu({callback, openMenu, closeMenu} ) {
+  const menuSelection = (title) => {
+    closeMenu(false)
+    callback(title)
+  }
 
   const camArray = [
     {title: "chassis"},
@@ -15,16 +19,13 @@ export default function Menu({callback, toggleFullScreen} ) {
   ]
  
   return (
-      <div id="ov-camera-grid">
+      <dialog className="ov-camera-grid" open={openMenu} onClose={menuSelection}>
         {camArray.map((cam) => (
-          <button onClick={() => callback(cam.title)}>
+          <button onClick={() => menuSelection(cam.title)}>
             {cam.title}
           </button>
         ))}    
-        <button onClick={() => toggleFullScreen(true)}>
-          toggle Full Screen
-        </button> 
-      </div>
+      </dialog>
   );
 }
 
diff --git a/src/index.css b/src/index.css
index 018f119..4842bdb 100644
--- a/src/index.css
+++ b/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,21 +418,33 @@ video {
   height: 100vh;
   overflow: hidden;
   aspect-ratio: 4/3;
+  object-fit: contain;
 }
 
-.full-screen-view{
+.fullscreen{
+  display: flex;
+  /* grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr); */
   width: 100%;
   height: 100vh;
-  background-color: #e70000;
+  overflow: contain;
+  align-items: center;
 }
-/* .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;
-} */
+
+.cam-num{
+  height: 40px
+}
+
+.menu:not([open]){
+  display: none; 
+}
+
+.menu{
+  display:grid;
+  grid-template-columns: repeat(2, 1fr);
+  transform: translate(-50%, -50%);
+}
+
 
 
 

From d7f4a8b43b82371a0bd0f4af94ef297a3c22bbbf Mon Sep 17 00:00:00 2001
From: Evan Astle <starphys@gmail.com>
Date: Thu, 5 Oct 2023 00:49:12 -0700
Subject: [PATCH 3/5] Remove styling from cameras in other views.

---
 src/App.tsx                                   | 8 ++++----
 src/components/Camera.tsx                     | 4 ++--
 src/components/OperationalView/MainCamera.tsx | 2 +-
 3 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 75fc457..71fc5f3 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -70,10 +70,10 @@ function App() {
           {system === 'science' && <ScienceSystem commands={commands} />}
 
           <Status status={status} />
-          <Camera name="0" src="http://192.168.1.201:8081/" />
-          <Camera name="1" src="http://192.168.1.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 >
diff --git a/src/components/Camera.tsx b/src/components/Camera.tsx
index c95f483..ba5038a 100644
--- a/src/components/Camera.tsx
+++ b/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>
     )
 }
diff --git a/src/components/OperationalView/MainCamera.tsx b/src/components/OperationalView/MainCamera.tsx
index 91408c9..831cadc 100644
--- a/src/components/OperationalView/MainCamera.tsx
+++ b/src/components/OperationalView/MainCamera.tsx
@@ -49,7 +49,7 @@ export default function MainCamera(){
         <div className="main-camera">
             <Menu callback = {setActiveCam} openMenu={openMenu} closeMenu={setOpenMenu}/>
             <button onClick={() => toggleMenu()}>
-                <Camera name={activeCam} src={fileName} />
+                <Camera name={activeCam} src={fileName} className={'camera'} />
             </button>
         </div>
     );

From a60ef196606ec23c50e552a8d54311713f6b3baf Mon Sep 17 00:00:00 2001
From: Michael Chan <mchan100work@gmail.com>
Date: Thu, 5 Oct 2023 01:46:13 -0700
Subject: [PATCH 4/5] fixed bug where cameras do not show up when the webserver
 is on for the first time

---
 src/components/FullScreenView.tsx  | 1 +
 src/components/OperationalView.tsx | 5 ++---
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/FullScreenView.tsx b/src/components/FullScreenView.tsx
index b9b8407..f134824 100644
--- a/src/components/FullScreenView.tsx
+++ b/src/components/FullScreenView.tsx
@@ -2,6 +2,7 @@
 import MainCamera from "./OperationalView/MainCamera";
 
 export default function FullScreen({camNum}) {
+  console.log(camNum)
   const displayCam = Array.from({length: camNum}, (_, index) => {
     return <MainCamera key={index}/>
   }); 
diff --git a/src/components/OperationalView.tsx b/src/components/OperationalView.tsx
index 20fbc82..bfc3b8f 100644
--- a/src/components/OperationalView.tsx
+++ b/src/components/OperationalView.tsx
@@ -3,15 +3,14 @@ import FullScreen from "./FullScreenView";
 import { useState } from "react";
 
 export default function OperationalView({ commands, status }) {
-  const [fullScreen, setFullScreen] = useState(false)
-  const [camNum, setCamNum] = useState(null)
+  const [camNum, setCamNum] = useState(1)
 
   return(
     <div className="operational-view">
       {/* left */}
       <div id = "ov-tools">
         <OVStatus status = {status}/>
-        <select className="cam-num"  onChange={(e) => {setCamNum(e.target.value)}}>
+        <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>

From b716d60384a365ee6ea271fd916f8dc1454d9385 Mon Sep 17 00:00:00 2001
From: Michael Chan <mchan100work@gmail.com>
Date: Thu, 5 Oct 2023 19:04:56 -0700
Subject: [PATCH 5/5] fixing merge conflicts

---
 src/components/OperationalView/MainCamera.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/components/OperationalView/MainCamera.tsx b/src/components/OperationalView/MainCamera.tsx
index 831cadc..3c20089 100644
--- a/src/components/OperationalView/MainCamera.tsx
+++ b/src/components/OperationalView/MainCamera.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {useState} from "react"
 import Camera from "../Camera";
 import noCam from './Main_Camera_Test.png'
@@ -49,7 +48,7 @@ export default function MainCamera(){
         <div className="main-camera">
             <Menu callback = {setActiveCam} openMenu={openMenu} closeMenu={setOpenMenu}/>
             <button onClick={() => toggleMenu()}>
-                <Camera name={activeCam} src={fileName} className={'camera'} />
+                <Camera name={activeCam} src={fileName} className={activeCam}/>
             </button>
         </div>
     );