TrickfireRobotics · Quashnock · Apr 11, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 21, 2025
diff --git a/.gitignore b/.gitignore
@@ -26,3 +26,4 @@ coverage
 *.njsproj
 *.sln
 *.sw?
+.lens/*
diff --git a/index.html b/index.html
@@ -2,7 +2,11 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
+    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="icon" href="/favicon.ico" />
+    <link rel="manifest" href="/site.webmanifest" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>TFR Mission Control</title>
   </head>

diff --git a/public/android-chrome-192x192.png b/public/android-chrome-192x192.png
diff --git a/public/android-chrome-512x512.png b/public/android-chrome-512x512.png
diff --git a/public/apple-touch-icon.png b/public/apple-touch-icon.png
diff --git a/public/connected-favicon.ico b/public/connected-favicon.ico
diff --git a/public/favicon-16x16.png b/public/favicon-16x16.png
diff --git a/public/favicon-32x32.png b/public/favicon-32x32.png
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/site.webmanifest b/public/site.webmanifest
@@ -0,0 +1,11 @@
+{
+  "name": "Mission Control",
+  "short_name": "",
+  "icons": [
+    { "src": "/android-chrome-192x192.png", "sizes": "192x192", "type": "image/png" },
+    { "src": "/android-chrome-512x512.png", "sizes": "512x512", "type": "image/png" }
+  ],
+  "theme_color": "#ffffff",
+  "background_color": "#ffffff",
+  "display": "standalone"
+}
diff --git a/src/App.vue b/src/App.vue
@@ -3,8 +3,10 @@ import Navbar from '@/components/Navbar.vue';
 import { useRoslibStore } from '@/store/roslibStore';
 import { onBeforeUnmount, onMounted } from 'vue';
 import { gamepadInit } from '@/lib/controller/gamepad';
-
+import { useFavicon } from '@vueuse/core';
+import { computed } from 'vue';
 const rosjs = useRoslibStore();
+
 // All global subscribers & publishers that do not belong in a component put in here.
 onMounted(() => {
   // Create a new connection if the current one is stopped.
@@ -20,6 +22,13 @@ onBeforeUnmount(() => {
   // Stop the websocket when the app unloads.
   rosjs.stop = true;
 });
+
+// changes favicon based on if web socket is connected or not
+const favicon = computed(() =>
+  rosjs.isWebSocketConnected ? 'connected-favicon.ico' : 'favicon.ico',
+);
+
+useFavicon(favicon);
 </script>
 
 <template>

diff --git a/src/assets/global.scss b/src/assets/global.scss
@@ -2,6 +2,7 @@
   --nav-bar-size: 4rem;
   --black: #000000;
   --dark-grey: #212121;
+  --accent-color: hsl(240, 20%, 20%);
   --grey: #303030;
   --light-grey: #424242;
   --error: #e50000;
@@ -17,6 +18,7 @@
   list-style-type: none;
   box-sizing: border-box;
   text-decoration: none;
+
   &:hover {
     color: inherit;
     text-decoration: none;
@@ -72,6 +74,16 @@ button {
   }
 }
 
+.dialogue-box {
+  padding: 10px;
+  border: 1px solid var(--light-grey);
+  border-radius: 5px;
+  background-color: var(--dark-grey);
+  color: var(--white);
+  width: 100%;
+}
+
+// Page Styles
 .two-by-three-grid-page {
   display: grid;
   width: 100vw;
@@ -82,5 +94,10 @@ button {
   // Can toggle off for debugging
   > * {
     overflow: hidden;
+    background-color: var(--accent-color);
+    padding: 5px;
+    border: var(--white) 1px solid;
+    border-radius: 1%;
+    margin: 0px 2px;
   }
 }
diff --git a/src/components/ExampleComponent.vue b/src/components/ExampleComponent.vue
@@ -24,7 +24,12 @@ const onAndOffHandler = () => {
 </script>
 <template>
   <div>
-    <h1>Example Data: {{ example.helloWorldSub.msg?.data }}</h1>
+    <div class="dialogue-box">
+      <h2>Example Data:</h2>
+      <p>
+        {{ example.helloWorldSub.msg?.data }}
+      </p>
+    </div>
     <button @click="example.helloWorldPub.publish({ data: example.helloWorldSub.msg?.data + '!' })">
       Add !
     </button>

diff --git a/src/components/PublishTesterComponent.vue b/src/components/PublishTesterComponent.vue
@@ -114,7 +114,7 @@ function publishTest() {
         <button type="submit">Publish</button>
       </div>
 
-      <div v-if="receivedMessage" class="subscriber-box">
+      <div v-if="receivedMessage" class="dialogue-box">
         <h2>Received Message:</h2>
         <pre>{{ receivedMessage }}</pre>
       </div>
@@ -178,17 +178,6 @@ button {
   flex-shrink: 0;
 }
 
-.subscriber-box {
-  margin-top: 20px;
-  padding: 10px;
-  border: 1px solid var(--light-grey);
-  border-radius: 5px;
-  background-color: var(--dark-grey);
-  color: var(--white);
-  width: 300px;
-  max-height: 80px;
-}
-
 pre {
   white-space: pre-wrap;
   word-wrap: break-word;

diff --git a/src/components/arm/ArmModel.vue b/src/components/arm/ArmModel.vue
@@ -6,33 +6,45 @@ import { CanBusID, useTelemetryData } from '@/lib/roslibUtils/telemetry';
 
 const { scene } = await useGLTF('newarm.glb');
 
-//TODO: - add remaining bones
-//      - connect data to bones
+//const wrist = scene.getObjectByName('Wrist') as Bone;
 const shoulder = scene.getObjectByName('Shoulder') as Bone;
 const elbow = scene.getObjectByName('Elbow') as Bone;
+const turntable = scene.getObjectByName('Turntable') as Bone;
 
 function degreesToRadians(degrees: number): number {
   return degrees * (Math.PI / 180);
 }
 
 //default rotations on the 3d model
+//const wristDefault = degreesToRadians(12.69);
 const shoulderDefault = degreesToRadians(-72.88);
 const elbowDefault = degreesToRadians(153.65);
+const turntableDefault = degreesToRadians(-37.76);
 
-useTelemetryData([CanBusID.ArmShoulder, CanBusID.ArmElbow], (data) => data.position, null, {
-  armShoulder: (position) => {
-    // Multiply the telemetry fraction by 2π to get the incoming additional radians.
-    const additionalShoulderRotation = position * -2 * Math.PI;
-    // The final rotation equals the default plus the telemetry offset.
-    const shoulderRotation = shoulderDefault + additionalShoulderRotation;
-    shoulder.rotation.x = shoulderRotation;
+useTelemetryData(
+  [CanBusID.ArmShoulder, CanBusID.ArmElbow, CanBusID.ArmTurntable],
+  (data) => data.position,
+  null,
+  {
+    armShoulder: (position) => {
+      // Multiply the telemetry fraction by 2π to get the incoming additional radians.
+      const additionalShoulderRotation = position * -2 * Math.PI;
+      // The final rotation equals the default plus the telemetry offset.
+      const shoulderRotation = shoulderDefault + additionalShoulderRotation;
+      shoulder.rotation.x = shoulderRotation;
+    },
+    armElbow: (position) => {
+      const additionalElbowRotation = position * 2 * Math.PI;
+      const elbowRotation = elbowDefault + additionalElbowRotation;
+      elbow.rotation.x = elbowRotation;
+    },
+    armTurntable: (position) => {
+      const additionalTurntableRotation = position * 2 * Math.PI;
+      const turntableRotation = turntableDefault + additionalTurntableRotation;
+      turntable.rotation.x = turntableRotation;
+    },
   },
-  armElbow: (position) => {
-    const additionalElbowRotation = position * 2 * Math.PI;
-    const elbowRotation = elbowDefault + additionalElbowRotation;
-    elbow.rotation.x = elbowRotation;
-  },
-});
+);
 </script>
 <template>
   <div id="arm">
@@ -45,11 +57,4 @@ useTelemetryData([CanBusID.ArmShoulder, CanBusID.ArmElbow], (data) => data.posit
     </TresCanvas>
   </div>
 </template>
-<style lang="scss" scoped>
-#arm {
-  height: 100%;
-  width: 100%;
-  grid-column: 2 / span 2;
-  grid-row: 1 / span 2;
-}
-</style>
+<style lang="scss" scoped></style>
diff --git a/src/lib/roslibUtils/rosTypes.ts b/src/lib/roslibUtils/rosTypes.ts
@@ -11,6 +11,7 @@ export type TopicTypeMap = {
   'std_msgs/Float32': StdMsg<number>;
   'std_msgs/Time': StdMsg<number>;
   'sensor_msgs/msg/CompressedImage': CompressedImage;
+  'sensor_msgs/msg/NavSatFix': NavSatFix;
 };
 
 export type TopicType = keyof TopicTypeMap;
@@ -28,3 +29,23 @@ export type CompressedImage = {
   format: 'jpg' | 'png';
   data: Uint8Array;
 };
+
+//https://docs.ros.org/en/noetic/api/sensor_msgs/html/msg/NavSatFix.html
+export type NavSatFix = {
+  header: {
+    stamp: {
+      sec: number;
+      nanosec: number;
+    };
+    frame_id: string;
+  };
+  status: {
+    status: number;
+    service: number;
+  };
+  latitude: number;
+  longitude: number;
+  altitude: number;
+  position_covariance: number[];
+  position_covariance_type: number;
+};
diff --git a/src/pages/Arm.vue b/src/pages/Arm.vue
@@ -9,9 +9,14 @@ import ArmModel from '../components/arm/ArmModel.vue';
     <Suspense>
       <ArmModel />
     </Suspense>
-
-    <h1>Not yet Implemented</h1>
   </div>
 </template>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+#arm {
+  height: 100%;
+  width: 100%;
+  grid-column: 2 / span 2;
+  grid-row: 1 / span 2;
+}
+</style>
diff --git a/src/pages/Cameras.vue b/src/pages/Cameras.vue
@@ -7,10 +7,6 @@ import CameraModule from '@/components/camera/CameraModule.vue';
   <div class="two-by-three-grid-page">
     <CameraModule :camera-id="0" camera-name="Front" />
     <CameraModule :camera-id="1" camera-name="Back" />
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
   </div>
 </template>
 

diff --git a/src/pages/DevTab.vue b/src/pages/DevTab.vue
@@ -8,11 +8,6 @@ import PublishTesterComponent from '@/components/PublishTesterComponent.vue';
   <div class="two-by-three-grid-page">
     <ExampleComponent />
     <PublishTesterComponent />
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
   </div>
 </template>
 

diff --git a/src/pages/Help.vue b/src/pages/Help.vue
@@ -1,14 +1,7 @@
 <!-- Layout of controls -->
 <script setup lang="ts"></script>
 <template>
-  <div class="two-by-three-grid-page">
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-  </div>
+  <div class="two-by-three-grid-page"></div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/pages/Home.vue b/src/pages/Home.vue
@@ -1,15 +1,15 @@
 <!--
 Show a couple of cameras, basic telemetry, auto/teleop button, reconnect canfd bus button, allow basic info about motors (like power consumption?), battery power level, LATER- shows box of the map
 -->
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import ArmModeSelection from '@/components/arm/ArmModeSelection.vue';
+import CameraModule from '@/components/camera/CameraModule.vue';
+</script>
 <template>
   <div class="two-by-three-grid-page">
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
+    <CameraModule :camera-id="0" camera-name="Front" />
+    <CameraModule :camera-id="1" camera-name="Back" />
+    <ArmModeSelection />
   </div>
 </template>
 

diff --git a/src/pages/Map.vue b/src/pages/Map.vue
@@ -5,8 +5,6 @@ import InteractiveMap from '@/components/map/InteractiveMap.vue';
 <template>
   <div class="two-by-three-grid-page">
     <InteractiveMap />
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
   </div>
 </template>
 

diff --git a/src/pages/Science.vue b/src/pages/Science.vue
@@ -1,14 +1,7 @@
 <!-- Anything related to life detection, science stuff should be here -->
 <script setup lang="ts"></script>
 <template>
-  <div class="two-by-three-grid-page">
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-  </div>
+  <div class="two-by-three-grid-page"></div>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
@@ -6,11 +6,6 @@ import ConnectionSettings from '@/components/settings/ConnectionSettings.vue';
 <template>
   <div class="two-by-three-grid-page">
     <ConnectionSettings />
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
   </div>
 </template>
 

diff --git a/src/pages/Telemetry.vue b/src/pages/Telemetry.vue
@@ -145,10 +145,6 @@ function getMoteusStateProxy(
         </GenericMotorTelemetry>
       </div>
     </div>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
-    <h1>Not yet Implemented</h1>
   </div>
 </template>
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,3 +26,4 @@ coverage @@
     *.njsproj
     *.sln
     *.sw?
+    .lens/*