improve obc conn styling & pass lint!

tritonuas · Nov 3, 2023 · d339175 · d339175
1 parent dff7487
commit d339175
Show file tree

Hide file tree

Showing 7 changed files with 137 additions and 105 deletions.
diff --git a/houston/src/App.tsx b/houston/src/App.tsx
@@ -12,7 +12,8 @@ import Layout from './pages/Layout';
 import Report from './pages/Report';
 import NoPage from './pages/NoPage';
 
-import {ConnectionType, ConnectionStatus} from "./pages/Connection" // TODO modify to protobufs
+
+import { ConnectionType, ConnectionStatus } from "./utilities/temp";
 
 /**
  * Main React function

diff --git a/houston/src/pages/Connection.tsx b/houston/src/pages/Connection.tsx
@@ -1,19 +1,7 @@
 import "./Connection.css"
 import {statusToLink} from "../utilities/ConnectionHelpers"
 
-// TODO: standardize connection status data structure
-// and make it a protobuf
-export interface ConnectionStatus {
-    name: string,
-    isActive: boolean
-    type: ConnectionType
-}
-
-export const enum ConnectionType {
-    Radio,
-    Ethernet,
-    Wifi
-}
+import { ConnectionStatus } from "../utilities/temp";
 
 // TODO: allow clicking on each connection status item
 // in order to see a more in depth description of that

diff --git a/houston/src/pages/OnboardComputer.css b/houston/src/pages/OnboardComputer.css
@@ -1,71 +1,83 @@
-
 main.obc-page {
-    /* The map is a child of this flex container, so it will take up the entire space */
+    flex: 1; /* Take up remainder of screen beyond navbar */
+
     display: flex;
     flex-direction: row;
-    flex: 1; /* Take up remainder of screen */
 }    
 
+/* container which holds the image gallery */
 main.obc-page .left-container {
-    flex: 4;
-    display: flex;
-    flex-direction: column;
+    flex: 1; /* take up as much available space */
 }
 
+/* list of all the status icons */
 main.obc-page ul.status-list {
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     list-style-type: none;
     background-color: var(--dark-bg);
     margin: 0;
+    padding: 0;
+}
+
+/* This icon is specifically clickable, so make this more obvious */
+main.obc-page #camera-icon {
+    border-bottom: 1px solid black;
+    cursor: pointer;
+    transition: var(--std-transition);
+}
+main.obc-page #camera-icon:is(:hover, :focus) {
+    transform: translateY(-0.5rem);
 }
 
+/* Some icons have captions underneath them, so make sure they are all nice and aligned */
 main.obc-page ul.status-list figcaption {
     text-align: center;
     color: var(--light-text);
 }
 
-main.obc-page .image-gallery {
-    flex: 3;
+/* Position the camera config form within the center of the screen when the modal opens */
+.obc-camera-form-modal {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    outline: 0;
 }
 
-main.obc-page iframe.ubiquiti {
-    flex: 3;
-    border: none;
-    background-color: white;
+.obc-camera-form-modal form {
+    border: 0;
 }
 
-main.obc-page fieldset {
+/* Put all the field items going down in a nice column */
+.obc-camera-form-modal fieldset {
     border: none;
+    border-radius: 4px;
     display: flex;
-    flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
     background-color: var(--light-bg);
     margin: 0;
     padding: 0;
     font-family: 'Jetbrains Mono', sans-serif;
 }
 
-main.obc-page legend {
+.obc-camera-form-modal legend {
     color: var(--highlight);
     background-color: var(--dark-bg);
     border: 1px solid var(--dark-text);
 }
 
-main.obc-page input {
-    width: fit-content;
-}
-
-main.obc-page input[type="submit"] {
-    border: 1px solid var(--light-text);
+.obc-camera-form-modal input[type="submit"] {
+    border: none;
 }
 
-main.obc-page input[type="submit"]:is(:hover, :focus) {
+.obc-camera-form-modal input[type="submit"]:is(:hover, :focus) {
     background-color: var(--dark-bg);
     color: var(--highlight);
     border: none;
 }
 
-main.obc-page fieldset > * {
+.obc-camera-form-modal fieldset > * {
     margin: 0.3rem;
 }
diff --git a/houston/src/pages/OnboardComputer.tsx b/houston/src/pages/OnboardComputer.tsx
@@ -1,5 +1,6 @@
 import {useState} from 'react'
 import ImageGallery from 'react-image-gallery'
+import Modal from 'react-modal'
 
 import './OnboardComputer.css'
 import "react-image-gallery/styles/css/image-gallery.css";
@@ -11,7 +12,7 @@ import { PageOpenPopup } from '../utilities/PageOpenPopup';
 import { UBIQUITI_URL } from '../utilities/general';
 
 // testing
-import duckPic from '../assets/duck.png'
+import duckPic from '../assets/duck.png';
 
 // TODO: move to protobuf
 interface OBCConnection {
@@ -24,9 +25,11 @@ interface OBCConnection {
  * @returns Page for the Onboard computer connection status.
  */
 function OnboardComputer() {
+    const [showCameraForm, setShowCameraForm] = useState(false);
+
     // TODO: eventuallly replace to prop that is passed through...
     const [obcConn, _setOBCConn] = useState<OBCConnection>({
-        cameraConnected: false,
+        cameraConnected: true,
         images: [],
         mavHeartbeat: .5112312312,
     });
@@ -56,74 +59,86 @@ function OnboardComputer() {
                 <p>
                     <b>Password:</b> triton
                 </p>
+                <p>
+                    <a href={UBIQUITI_URL} target="_blank" rel="noreferrer">{UBIQUITI_URL}</a>
+                </p>
             </PageOpenPopup>
+            <Modal
+                isOpen={showCameraForm} 
+                onRequestClose={() => setShowCameraForm(false)}
+                contentLabel={"Camera Config"}
+                className="obc-camera-form-modal"
+                >
+                <form>
+                    <fieldset>
+                        <legend>Camera Config</legend>
+                        <label> 
+                            Gain:
+                            <input type="number" step="any" min="0" max="27.045771" name="Gain" id="gain-input"/>
+                        </label>
+
+                        <label>
+                            GainAuto:
+                            <input type="text" name="GainAuto"/>
+                        </label>
+
+                        <label>
+                            ExposureTime:
+                            <input type="number" step="any" min="359" name="ExposureTime" />
+                        </label>
+
+                        <label>
+                            ExposureAuto:
+                            <input type="text" name="ExposureAuto"/>
+                        </label>
+
+                        <label>
+                            BalanceWhiteAuto: 
+                            <input type="text" name="BalanceWhiteAuto"/>
+                        </label>
+
+                        <label>
+                            BalanceWhiteEnable: 
+                            <input type="checkbox" name="BalanceWhiteEnable" />
+                        </label>
+
+                        <label>
+                            Gamma: 
+                            <input type="number" step="any" min="0.2" max="2.0" name="Gamma" />
+                        </label>
+
+                        <label>
+                            GammaEnable: 
+                            <input type="checkbox" name="GammaEnable"/>
+                        </label>
+
+                        <input type="submit" value="Submit"/>
+                    </fieldset>
+                </form>
+            </Modal>
             <main className="obc-page">
                 <div className="left-container">
                     <ImageGallery items={images}/>
-                    <form>
-                         <fieldset>
-                            <legend>Camera Config</legend>
-                            <label> 
-                                Gain:
-                                <input type="number" step="any" min="0" max="27.045771" name="Gain" id="gain-input"/>
-                            </label>
-
-                            <label>
-                                GainAuto:
-                                <input type="text" name="GainAuto"/>
-                            </label>
-
-                            <label>
-                                ExposureTime:
-                                <input type="number" step="any" min="359" name="ExposureTime" />
-                            </label>
-
-                            <label>
-                                ExposureAuto:
-                                <input type="text" name="ExposureAuto"/>
-                            </label>
-
-                            <label>
-                                BalanceWhiteAuto: 
-                                <input type="text" name="BalanceWhiteAuto"/>
-                            </label>
-
-                            <label>
-                                BalanceWhiteEnable: 
-                                <input type="checkbox" name="BalanceWhiteEnable" />
-                            </label>
-
-                            <label>
-                                Gamma: 
-                                <input type="number" step="any" min="0.2" max="2.0" name="Gamma" />
-                            </label>
-
-                            <label>
-                                GammaEnable: 
-                                <input type="checkbox" name="GammaEnable"/>
-                            </label>
-
-                            <input type="submit" value="Submit"/>
-                        </fieldset>
-                    </form>
-                    <ul className="status-list">
-                        <li>
-                            <figure>
-                                <img src={cameraIcon} 
-                                    className={(obcConn.cameraConnected ? "svg active" : "svg inactive")}/>
-                            </figure>
-                        </li>
-                        <li>
-                            <figure>
-                                <img src={heartbeatIcon}
-                                    className={(obcConn.mavHeartbeat != null) ? "svg active" : "svg inactive"}/>
-                                <figcaption>{obcConn.mavHeartbeat?.toFixed(4)}</figcaption>
-                            </figure>
-                        </li>
-                    </ul>
                 </div>
-                <iframe className="ubiquiti" src={`${UBIQUITI_URL}`}>
-                </iframe>
+                <ul className="status-list">
+                    <li>
+                        <figure>
+                            <img src={cameraIcon} 
+                                id="camera-icon"
+                                className={(obcConn.cameraConnected ? "svg active" : "svg inactive")}
+                                onClick={() => {
+                                    setShowCameraForm(true);
+                                }}/>
+                        </figure>
+                    </li>
+                    <li>
+                        <figure>
+                            <img src={heartbeatIcon}
+                                className={(obcConn.mavHeartbeat != null) ? "svg active" : "svg inactive"}/>
+                            <figcaption>{obcConn.mavHeartbeat?.toFixed(4)}</figcaption>
+                        </figure>
+                    </li>
+                </ul>
             </main>
         </>
     );

diff --git a/houston/src/utilities/ConnectionHelpers.tsx b/houston/src/utilities/ConnectionHelpers.tsx
@@ -5,7 +5,7 @@ import radioDisconnected from "../assets/radio-disconnected.svg"
 import wifiConnected from "../assets/wifi-connected.svg"
 import wifiDisconnected from "../assets/wifi-disconnected.svg"
 
-import {ConnectionStatus, ConnectionType} from "../pages/Connection"
+import {ConnectionStatus, ConnectionType} from "./temp"
 
 import {Link} from 'react-router-dom'
 

diff --git a/houston/src/utilities/general.tsx b/houston/src/utilities/general.tsx
@@ -1,4 +1,4 @@
-export const UBIQUITI_URL = "http://192.168.1.35/login.cgi?uri=/"
+export const UBIQUITI_URL = "http://192.168.1.35";
 
 export const INFLUX_PORT = "8086";
 export const INFLUX_URI = "/orgs/83cf98a33ce1da25/data-explorer?bucket=mavlink";

diff --git a/houston/src/utilities/temp.tsx b/houston/src/utilities/temp.tsx
@@ -0,0 +1,16 @@
+// This file is holding TEMPORARY definitions which will eventually be removed
+// TODO: implement protobufs and remove these defs
+
+// TODO: standardize connection status data structure
+// and make it a protobuf
+export interface ConnectionStatus {
+    name: string,
+    isActive: boolean
+    type: ConnectionType
+}
+
+export const enum ConnectionType {
+    Radio,
+    Ethernet,
+    Wifi
+}