priyatham
/
gcs-user-interface
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

merge DEMO WS

This commit is contained in:
Steven C 2024-04-13 02:18:45 -07:00
parent 7d3eddaa69
commit 6eb1c61197
2 changed files with 20 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mockWebsock.js → mockWebsock.cjs
View File

@ -17,7 +17,7 @@ wss.on('connection', (ws) => {
// Sample vehicle data object // Sample vehicle data object
let vehicleData = { let vehicleData = {
key: 'Vehicle 3', key: 'ERU',
speed: 1.1, speed: 1.1,
pitch: 2.2, pitch: 2.2,
yaw: 3.3, yaw: 3.3,

35
src/components/mockWS.vue
View File

@ -7,15 +7,15 @@ const socket = ref<WebSocket | null>(null);
const receivedData = ref<any>(null); const receivedData = ref<any>(null);
// Reactive variables for user input // Reactive variables for user input
const key = ref("Vehicle 2"); const key = ref("Vehicle");
const speed = ref<number>(1.1); const speed = ref<number>(0);
const pitch = ref<number>(2.2); const pitch = ref<number>(0);
const yaw = ref<number>(3.3); const yaw = ref<number>(0);
const roll = ref<number>(4.4); const roll = ref<number>(0);
const altitude = ref<number>(5.5); const altitude = ref<number>(0);
const batteryLife = ref<number>(6.6); const batteryLife = ref<number>(0);
const latitude = ref<number>(7.7); const latitude = ref<number>(0);
const longitude = ref<number>(8.8); const longitude = ref<number>(0);
// Function to establish the WebSocket connection // Function to establish the WebSocket connection
function establishWebSocketConnection() { function establishWebSocketConnection() {
@ -94,7 +94,10 @@ onBeforeUnmount(() => {
<p><strong>Altitude:</strong> {{ receivedData.altitude }}</p> <p><strong>Altitude:</strong> {{ receivedData.altitude }}</p>
<p><strong>Battery Life:</strong> {{ receivedData.batteryLife }}</p> <p><strong>Battery Life:</strong> {{ receivedData.batteryLife }}</p>
<p><strong>Last Updated:</strong> {{ receivedData.lastUpdated }}</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>Current Position:</strong>
<p>Latitude: {{ receivedData.currentPosition.latitude }}</p>
<P>Longitude: {{ receivedData.currentPosition.longitude }}</P>
</p>
<p><strong>Vehicle Status:</strong> {{ receivedData.vehicleStatus }}</p> <p><strong>Vehicle Status:</strong> {{ receivedData.vehicleStatus }}</p>
</div> </div>
<div v-else> <div v-else>
@ -123,22 +126,22 @@ onBeforeUnmount(() => {
<label>Roll:</label> <label>Roll:</label>
<input type="number" v-model="roll" step="0.1" /> <input type="number" v-model="roll" step="0.1" />
</div> </div>
<div> <!-- <div>
<label>Altitude:</label> <label>Altitude:</label>
<input type="number" v-model="altitude" step="0.1" /> <input type="number" v-model="altitude" step="0.1" />
</div> </div> -->
<div> <!-- <div>
<label>Battery Life:</label> <label>Battery Life:</label>
<input type="number" v-model="batteryLife" step="0.1" /> <input type="number" v-model="batteryLife" step="0.1" />
</div> </div> -->
<div> <!-- <div>
<label>Latitude:</label> <label>Latitude:</label>
<input type="number" v-model="latitude" step="0.1" /> <input type="number" v-model="latitude" step="0.1" />
</div> </div>
<div> <div>
<label>Longitude:</label> <label>Longitude:</label>
<input type="number" v-model="longitude" step="0.1" /> <input type="number" v-model="longitude" step="0.1" />
</div> </div> -->
<button type="submit">Send Updated Data</button> <button type="submit">Send Updated Data</button>
</form> </form>
</div> </div>