TrickfireRobotics · adamseth2 · Mar 18, 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
@@ -24,11 +24,4 @@ watch(modelRef, (model) => {
     </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>
 

diff --git a/src/store/mapStore.ts b/src/store/mapStore.ts
@@ -0,0 +1,41 @@
+import { defineStore } from 'pinia';
+import { createSubscriber } from '@/lib/roslibUtils/createSubscriber';
+import { useRoslibStore } from '@/store/roslibStore';
+
+// 0th Define any constants above
+// const TOPIC_MESSAGE_TYPE: TopicType = 'sensor_msgs/NavSatFix';
+
+export const useMapStore = defineStore('example', () => {
+  // 1st define any dependency stores
+  // This will most likely only be useRoslibStore
+  // 2nd define any state here in ref<>()
+  const mapNavSub = createSubscriber({
+    topicName: '/fix',
+    topicType: 'sensor_msgs/msg/NavSatFix',
+    //startingDefaultValue: { data: 'Hello World' },
+  });
+
+  function myFunction() {
+    const ros = useRoslibStore();
+    console.log(mapNavSub.msg.value);
+    console.log(mapNavSub.msg);
+    ros.ros.getTopics((bob) => {
+      console.log(bob);
+    });
+  }
+
+  // Call `myFunction` every 1000 milliseconds (1 second)
+  setInterval(myFunction, 1000);
+  //3rd define any getters in computed
+  //const allCapsData = computed(() => helloWorldSub.msg.value?.data.toUpperCase());
+  //4th define any functions
+  /*
+  const helloWorldPub = createPublisher({
+    topicName: TOPIC_NAME,
+    topicType: TOPIC_MESSAGE_TYPE,
+  });
+  */
+
+  // Return all state, getters and functions
+  return mapNavSub;
+});
-Original file line number
+Diff line change
@@ Expand Up / @@ -26,3 +26,4 @@ coverage @@
     *.njsproj
     *.sln
     *.sw?
+    .lens/*