diff --git a/houston/src/App.tsx b/houston/src/App.tsx index 5fefa5f1..7f5aecdf 100644 --- 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 index d03be9ba..cdcbe6d4 100644 --- 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 index afdb4275..80f6e350 100644 --- a/houston/src/pages/OnboardComputer.css +++ b/houston/src/pages/OnboardComputer.css @@ -1,44 +1,60 @@ - 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; @@ -46,26 +62,22 @@ main.obc-page fieldset { 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; } \ No newline at end of file diff --git a/houston/src/pages/OnboardComputer.tsx b/houston/src/pages/OnboardComputer.tsx index 03b32f77..9027cc35 100644 --- 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({ - cameraConnected: false, + cameraConnected: true, images: [], mavHeartbeat: .5112312312, }); @@ -56,74 +59,86 @@ function OnboardComputer() {

Password: triton

+

+ {UBIQUITI_URL} +

+ setShowCameraForm(false)} + contentLabel={"Camera Config"} + className="obc-camera-form-modal" + > +
+
+ Camera Config + + + + + + + + + + + + + + + + + +
+
+
-
-
- Camera Config - - - - - - - - - - - - - - - - - -
-
-
    -
  • -
    - -
    -
    • -
  • -
    - -
    {obcConn.mavHeartbeat?.toFixed(4)}
    -
    -
    • -
- +
); diff --git a/houston/src/utilities/ConnectionHelpers.tsx b/houston/src/utilities/ConnectionHelpers.tsx index 1a254ea0..40fa1eb6 100644 --- 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 index f711387c..05da4c44 100644 --- 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 new file mode 100644 index 00000000..1364b373 --- /dev/null +++ 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 +} \ No newline at end of file