diff --git a/.gitignore b/.gitignore index b894980..0771773 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,6 @@ tiles/ tiles.tar node_modules map_tiles -public/ +public/utah-tiles-2/ dist/ gps_webtransport_server/target/ \ No newline at end of file diff --git a/frontend/gps-client.js b/frontend/gps-client.js index 718e042..d0b12e9 100644 --- a/frontend/gps-client.js +++ b/frontend/gps-client.js @@ -1,13 +1,15 @@ export function startGPSClient() { - const socket = new WebSocket('ws://localhost:9001'); // make sure port matches server port - + console.log("Creating websocket...") + const socket = new WebSocket('ws://192.168.1.68:9001'); // make sure port matches server port + console.log("WebSocket created!") socket.onopen = () => { console.log('🔌 WebSocket connection established'); - } + }; socket.onmessage = (event) => { try { const data = JSON.parse(event.data); + console.log(data); const gpsEvent = new CustomEvent('gps-update', { detail: data }); window.dispatchEvent(gpsEvent); } catch (e) { diff --git a/frontend/index.html b/frontend/index.html index dc0c823..3122c00 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -16,6 +16,7 @@
Rover's current position
Click a tool's button to enable it.
diff --git a/frontend/main.js b/frontend/main.js index f1db07f..55eaac2 100644 --- a/frontend/main.js +++ b/frontend/main.js @@ -35,14 +35,14 @@ let currentPositionMarker = null; window.onload = () => { // Initialize rover icon var roverIcon = L.icon({ - iconUrl: 'rover.png', - shadowUrl: 'rover-shadow.png', - - iconSize: [30, 30], // size of the icon - shadowSize: [30, 30], // size of the shadow - iconAnchor: [0, 0], // point of the icon which will correspond to marker's location + iconUrl: '/rover-icon/rover.png', + shadowUrl: '/rover-icon/rover-shadow.png', + + iconSize: [30, 30], // size of the icon + shadowSize: [30, 30], // size of the shadow + iconAnchor: [0, 0], // point of the icon which will correspond to marker's location shadowAnchor: [-2, 1], // the same for the shadow - popupAnchor: [50, 50] // point from which the popup should open relative to the iconAnchor + popupAnchor: [50, 50] // point from which the popup should open relative to the iconAnchor }); window.addWayPoint = () => { @@ -51,14 +51,18 @@ window.onload = () => { // Listen for GPS data window.addEventListener('gps-update', (e) => { + console.log("GPS updated"); const { lat, lon } = e.detail; - // FOR TESTING: console.log(`📡 GPS Update: Latitude ${lat}, Longitude ${lon}`); + console.log(`📡 GPS Update: Latitude ${lat}, Longitude ${lon}`); + document.getElementById("rover-pos").innerHTML = `Rover Position: ${lat.toFixed(6)}, ${lon.toFixed(6)}`; // Add or update the current position marker if (currentPositionMarker) { currentPositionMarker.setLatLng([lat, lon]); } else { - currentPositionMarker = L.marker([lat, lon], {icon: roverIcon}).addTo(map); + currentPositionMarker = L.marker([lat, lon], { icon: roverIcon }).addTo(map); + + map.setView([lat, lon], 13); } }); diff --git a/frontend/map.js b/frontend/map.js index 3a7837f..3e666ed 100644 --- a/frontend/map.js +++ b/frontend/map.js @@ -13,7 +13,7 @@ const tileLayer = L.tileLayer('/utah-tiles-2/{z}/{x}/{y}.png', { tileLayer.on('tileerror', function (e) { const img = e.tile; - img.src = '../map-placeholder.png'; // placeholder image for if tiles don't load + img.src = '/map-placeholder.png'; // placeholder image for if tiles don't load }); tileLayer.addTo(map); diff --git a/frontend/map-placeholder.png b/frontend/public/map-placeholder.png similarity index 100% rename from frontend/map-placeholder.png rename to frontend/public/map-placeholder.png diff --git a/frontend/rover-shadow.png b/frontend/public/rover-icon/rover-shadow.png similarity index 100% rename from frontend/rover-shadow.png rename to frontend/public/rover-icon/rover-shadow.png diff --git a/frontend/rover.png b/frontend/public/rover-icon/rover.png similarity index 100% rename from frontend/rover.png rename to frontend/public/rover-icon/rover.png