mockWS

package.json

@@ -13,7 +13,8 @@
   "dependencies": {
     "@tauri-apps/api": "^1.4.0",
     "vue": "^3.2.45",
-    "vue-router": "^4.3.0"
+    "vue-router": "^4.3.0",
+    "ws": "^8.16.0"
   },
   "devDependencies": {
     "@tauri-apps/cli": "^1.4.0",

pnpm-lock.yaml

@@ -14,6 +14,9 @@ dependencies:
   vue-router:
     specifier: ^4.3.0
     version: 4.3.0(vue@3.2.45)
+  ws:
+    specifier: ^8.16.0
+    version: 8.16.0
 
 devDependencies:
   '@tauri-apps/cli':
@@ -8914,6 +8917,7 @@ packages:
       '@vue/devtools-api': 6.6.1
       vue: 3.2.45
     dev: false
+
   /vue-style-loader@4.1.3:
     resolution: {integrity: sha512-sFuh0xfbtpRlKfm39ss/ikqs9AbKCoXZBpHeVZ8Tx650o0k0q/YCM7FRvigtxpACezfq6af+a7JeqVTWvncqDg==}
     dependencies:
@@ -9451,7 +9455,6 @@ packages:
         optional: true
       utf-8-validate:
         optional: true
-    dev: true
 
   /xtend@4.0.2:
     resolution: {integrity: sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==}

src/components/Camera.vue

@@ -3,7 +3,7 @@
     props: ['cameraID'],
     data() {
       return {
-        localIp: 'http://localhost', //maybe change accordingly .env?
+        localIp: 'http://192.168.1.65', //maybe change accordingly .env?
         port: '5000', //maybe change accordingly
         cameraUrls: { 
           1: 'video_feed', //cam url here

src/components/Greet.vue

@@ -1,12 +0,0 @@
-<script setup lang="ts">
-import { ref } from "vue";
-import { invoke } from "@tauri-apps/api/tauri";
-
-const greetMsg = ref("");
-const name = ref("");
-
-async function greet() {
-  // Learn more about Tauri commands at https://tauri.app/v1/guides/features/command
-  greetMsg.value = await invoke("greet", { name: name.value });
-}
-</script>

src/components/Navbar.vue

@@ -80,7 +80,7 @@ export default {
           <!-- Insert your menu items here -->
           <li><a href="#" style="text-decoration: none;">Home</a></li>
           <li><a href="#" style="text-decoration: none;" @click="openNewWindow">Link</a></li>
-          <li><router-link to="/1" style="text-decoration: none;">Disabled</router-link></li>
+          <li><router-link to="/test" style="text-decoration: none;">Disabled</router-link></li>
         </ul>
       </div>
     </nav>

src/components/mockWS.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts">
+import { ref, onBeforeUnmount } from "vue";
+
+// const webSocketUrl = "ws://192.168.1.65:5135/ws"; // WebSocket server URL
+const webSocketUrl = "ws://localhost:5135/ws"; // WebSocket server URL
+const socket = ref<WebSocket | null>(null);
+const receivedData = ref<any>(null);
+
+// Reactive variables for user input
+const key = ref("Vehicle 2");
+const speed = ref<number>(1.1);
+const pitch = ref<number>(2.2);
+const yaw = ref<number>(3.3);
+const roll = ref<number>(4.4);
+const altitude = ref<number>(5.5);
+const batteryLife = ref<number>(6.6);
+const latitude = ref<number>(7.7);
+const longitude = ref<number>(8.8);
+
+// Function to establish the WebSocket connection
+function establishWebSocketConnection() {
+  socket.value = new WebSocket(webSocketUrl);
+
+  // Set up event listeners
+  socket.value.onopen = () => {
+    console.log("WebSocket connection opened.");
+  };
+
+  socket.value.onmessage = (event: MessageEvent) => {
+    // Handle incoming message
+    const data = JSON.parse(event.data);
+    console.log("Received data:", data);
+    
+    // Update receivedData with the parsed data
+    receivedData.value = data;
+  };
+
+  socket.value.onerror = (error: Event) => {
+    console.error("WebSocket error:", error);
+  };
+
+  socket.value.onclose = () => {
+    console.log("WebSocket connection closed.");
+  };
+}
+
+// Function to send updated vehicle data to the server
+function sendUpdatedData() {
+  if (socket.value) {
+    // Create a vehicle data object using user input
+    const updatedData = {
+      key: key.value,
+      speed: speed.value,
+      pitch: pitch.value,
+      yaw: yaw.value,
+      roll: roll.value,
+      altitude: altitude.value,
+      batteryLife: batteryLife.value,
+      lastUpdated: new Date().toLocaleTimeString(),
+      currentPosition: {
+        latitude: latitude.value,
+        longitude: longitude.value,
+      },
+      vehicleStatus: receivedData.value?.vehicleStatus ?? 0, // Use existing vehicle status if available
+    };
+
+    // Send the updated data to the server as a JSON string
+    socket.value.send(JSON.stringify(updatedData));
+    console.log("Sent updated data:", updatedData);
+  }
+}
+
+// Establish the WebSocket connection when the component is created
+establishWebSocketConnection();
+
+// Close the WebSocket connection on component unmount
+onBeforeUnmount(() => {
+  if (socket.value) {
+    socket.value.close();
+  }
+});
+
+</script>
+
+<template>
+  <div>
+    <h1>Vehicle Data</h1>
+    <div v-if="receivedData">
+      <p><strong>Key:</strong> {{ receivedData.key }}</p>
+      <p><strong>Speed:</strong> {{ receivedData.speed }}</p>
+      <p><strong>Pitch:</strong> {{ receivedData.pitch }}</p>
+      <p><strong>Yaw:</strong> {{ receivedData.yaw }}</p>
+      <p><strong>Roll:</strong> {{ receivedData.roll }}</p>
+      <p><strong>Altitude:</strong> {{ receivedData.altitude }}</p>
+      <p><strong>Battery Life:</strong> {{ receivedData.batteryLife }}</p>
+      <p><strong>Last Updated:</strong> {{ receivedData.lastUpdated }}</p>
+      <p><strong>Current Position:</strong> Latitude: {{ receivedData.currentPosition.latitude }}, Longitude: {{ receivedData.currentPosition.longitude }}</p>
+      <p><strong>Vehicle Status:</strong> {{ receivedData.vehicleStatus }}</p>
+    </div>
+    <div v-else>
+      <p>No data received yet.</p>
+    </div>
+    
+    <h2>Update Vehicle Data</h2>
+    <form @submit.prevent="sendUpdatedData">
+      <div>
+        <label>Key:</label>
+        <input type="text" v-model="key" />
+      </div>
+      <div>
+        <label>Speed:</label>
+        <input type="number" v-model="speed" step="0.1" />
+      </div>
+      <div>
+        <label>Pitch:</label>
+        <input type="number" v-model="pitch" step="0.1" />
+      </div>
+      <div>
+        <label>Yaw:</label>
+        <input type="number" v-model="yaw" step="0.1" />
+      </div>
+      <div>
+        <label>Roll:</label>
+        <input type="number" v-model="roll" step="0.1" />
+      </div>
+      <div>
+        <label>Altitude:</label>
+        <input type="number" v-model="altitude" step="0.1" />
+      </div>
+      <div>
+        <label>Battery Life:</label>
+        <input type="number" v-model="batteryLife" step="0.1" />
+      </div>
+      <div>
+        <label>Latitude:</label>
+        <input type="number" v-model="latitude" step="0.1" />
+      </div>
+      <div>
+        <label>Longitude:</label>
+        <input type="number" v-model="longitude" step="0.1" />
+      </div>
+      <button type="submit">Send Updated Data</button>
+    </form>
+  </div>
+</template>

src/router/index.js

@@ -3,7 +3,7 @@ import HomeScreen from "../views/HomeScreen.vue";
 import StaticScreen from "../views/StaticScreen.vue";
 import Cam2Focus from "../views/Cam2Focus.vue";
 import CamFocus from "../views/CamFocus.vue";
-import test from "../views/test.vue";
+import mockWS from "../views/mockWS.vue";
 
 
 const routes = [
@@ -11,7 +11,7 @@ const routes = [
   { path: '/1', component: StaticScreen },
   { path: '/2', component: Cam2Focus },
   { path: '/CamFocus/:id', component: CamFocus },
-  { path: '/test', component: test },
+  { path: '/test', component: mockWS },
 ]
 
 const router = createRouter({

src/views/mockWS.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import mockWS from "../components/mockWS.vue";
  
 
 </script>
@@ -7,7 +8,7 @@
     <div class="grid">
         <div>
             <h1>
-                TESTESTES
+                <mockWS/>
             </h1>
         </div>
     </div>