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

ERU widget updates with data from mockWebsock. added option to have MEA widget display data from test-websocket-server to show faster component rendering if needed

This commit is contained in:
chillwafflez 2024-04-13 05:29:07 -07:00
parent e41c1c6fad
commit d0020a7ce6
3 changed files with 55 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
mockWebsock.cjs
View File

@ -29,6 +29,7 @@ wss.on('connection', (ws) => {
latitude: 7.7,
longitude: 8.8,
},
dummyConnection: 0,
vehicleStatus: 0,
};
@ -41,6 +42,7 @@ wss.on('connection', (ws) => {
vehicleData.currentPosition.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
vehicleData.currentPosition.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
vehicleData.lastUpdated = new Date().toLocaleTimeString();
vehicleData.dummyConnection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
ws.send(JSON.stringify(vehicleData));
}, 1000);

37
src/test-websocket-server.cjs
View File

@ -11,7 +11,6 @@ const server = http.createServer(app);
// Create a WebSocket server instance and attach it to the HTTP server
const websocketServer = new WebSocket.Server({ server });
let battery = 0;
//Listen for WebSocket connections
websocketServer.on('connection', (socket) => {
// Log a message when a new client connects
@ -27,30 +26,38 @@ websocketServer.on('connection', (socket) => {
vehicleStatus: 0,
}
// continuously send random battery values to client
// continuously send dummy battery, coordinate, and connection values to client using JSON object //
var count = 89;
var counterIncrement = -1;
const testBattery = setInterval(function() {
count = count+counterIncrement;
setInterval(() => {
count += counterIncrement;
if (count == 0 || count == 100 ) {
counterIncrement = -counterIncrement;
}
vehicleData.battery = count;
socket.send(JSON.stringify(vehicleData));
}, 100);
// continuously send random coordinate values to client
setInterval(() => {
vehicleData.currentPosition.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
vehicleData.currentPosition.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
socket.send(JSON.stringify(vehicleData));
}, 100);
// continuously send random battery values to client
// var count = 89;
// var counterIncrement = -1;
// const testBattery = setInterval(function() {
// count = count+counterIncrement;
// if (count == 0 || count == 100 ) {
// counterIncrement = -counterIncrement;
// }
// vehicleData.battery = count;
// socket.send(JSON.stringify(vehicleData));
// }, 100);
// continuously send random connection values to client
setInterval(() => {
vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
socket.send(JSON.stringify(vehicleData));
}, 1000);
// setInterval(() => {
// vehicleData.dummy_connection = Math.floor((Math.random() * (100 - 0 + 1)) + 0);
// socket.send(JSON.stringify(vehicleData));
// }, 1000);
// Listen for incoming WebSocket messages
socket.on('message', (message) => {
@ -61,6 +68,10 @@ websocketServer.on('connection', (socket) => {
// Log a message when a client disconnects
console.log('Client disconnected');
});
socket.on('close', () => {
console.log('client disconnected');
});
});
// Start the server listening on port 3000

64
src/views/StaticScreen.vue
View File

@ -4,34 +4,50 @@ import Status from '../components/VehicleStatusComponent.vue';
import NavBar from '../components/Navbar.vue';
import { onMounted, ref } from 'vue';
// for ERU widget
const receivedData = ref<any>(null);
const batteryPct = ref(0);
const latitude = ref<number>(7.7);
const longitude = ref<number>(8.8);
const testCoordinate = ref({longitude: 0, latitude: 0})
const dummyConnection = ref(0);
// for MEA widget
const receivedData2 = ref<any>(null);
const batteryPct2 = ref(78);
const testCoordinate2 = ref({longitude: 57.848923, latitude: -67.384919})
const dummyConnection2 = ref(65);
// create websocket connection once Static Screen finishes initial rendering
onMounted(() => {
// let client = new WebSocket('ws://localhost:5135/');
// uncomment below to use other local websocket server for data for single vehicle widget in Static Screen
let client = new WebSocket('ws://localhost:3000/');
console.log("Connected to server");
let client = new WebSocket('ws://localhost:5135/');
console.log("Connected to 5135 server");
client.addEventListener("message", (event) => {
const data = JSON.parse(event.data);
receivedData.value = data;
console.log("Received data:", receivedData);
batteryPct.value = receivedData.value.battery;
console.log("Received data from mockWebsock:", receivedData);
batteryPct.value = receivedData.value.batteryLife;
testCoordinate.value.latitude = receivedData.value.currentPosition.latitude;
testCoordinate.value.longitude = receivedData.value.currentPosition.longitude;
dummyConnection.value = receivedData.value.dummy_connection;
dummyConnection.value = receivedData.value.dummyConnection;
});
// -- uncomment below to use test-websocket-server.cjs for data for single vehicle widget in Static Screen -- //
let client2 = new WebSocket('ws://localhost:3000/');
console.log("Connected to port 3000 server")
client2.addEventListener("message", (event) => {
const data = JSON.parse(event.data);
receivedData2.value = data;
console.log("Received data from test-websocket-server:", receivedData2);
batteryPct2.value = receivedData2.value.battery;
testCoordinate2.value.latitude = receivedData2.value.currentPosition.latitude;
testCoordinate2.value.longitude = receivedData2.value.currentPosition.longitude;
dummyConnection2.value = receivedData2.value.dummy_connection;
});
});
// --- testing with dummy reactive data --- //
//let battery1 = ref(100);
let battery2 = ref(50);
let testCoordinateObject1 = {
longitude: -177.9325790,
latitude: 33.9325790
@ -40,44 +56,22 @@ let testCoordinateObject2 = {
longitude: 40.748440,
latitude: -73.984559
}
// --- functions to change reactive data randomly to test if individual vue components re-render ---- //
// var count = 89;
// var counterIncrement = -1;
// const testBattery = setInterval(function() {
// count = count+counterIncrement;
// if (count == 0 || count == 100 ) {
// counterIncrement = -counterIncrement;
// }
// battery1.value = count;
// battery2.value = count;
// connection.value = count;
// }, 100);
// const testCoords = setInterval(function() {
// testCoordinate.value.latitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
// testCoordinate.value.longitude = Number(((Math.random() * (180 - (-180) + 1)) + (-180)).toFixed(6));
// }, 100);
</script>
<template>
<div class="screen_div">
<!-- Map component will be placed below -->
<div class="map_div"></div>
<!-- <p v-if="receivedData && receivedData.currentPosition">
Latitude: {{ receivedData.currentPosition.latitude }}, Longitude: {{ receivedData.currentPosition.longitude }}
</p> -->
<div class="four-status-rightside">
<!-- For final product, pass in a Vehicle Object instead that contains all of the information for the VehicleStatusComponent to display-->
<Status :batteryPct=batteryPct :latency=dummyConnection :coordinates=testCoordinate :vehicleName="'ERU'" :vehicleStatus="'In Use'"/>
<Status :batteryPct=67 :latency=30 :coordinates="testCoordinateObject1" :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
<Status :batteryPct=batteryPct2 :latency=dummyConnection2 :coordinates=testCoordinate2 :vehicleName="'MEA'" :vehicleStatus="'Standby'"/>
<Status :batteryPct=0 :latency=100 :coordinates="testCoordinateObject2" :vehicleName="'MRA'" :vehicleStatus="'Offline'"/>
<Status :batteryPct=10 :latency=0 :coordinates="testCoordinateObject1" :vehicleName="'FRA'" :vehicleStatus="'Offline'"/>
</div>
</div>
<!-- <div class="camera-container">
this is static screen
</div> -->
</template>
<style scoped>