diff --git a/public/satellite-dish.svg b/public/satellite-dish.svg new file mode 100644 index 0000000..692f618 --- /dev/null +++ b/public/satellite-dish.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/panels/MapView.tsx b/src/components/panels/MapView.tsx index 833af01..0077752 100644 --- a/src/components/panels/MapView.tsx +++ b/src/components/panels/MapView.tsx @@ -3,6 +3,7 @@ import React, { useEffect, useState } from 'react'; import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet'; import L from 'leaflet'; +import antennaMarker from "@/../public/satellite-dish.svg"; import { useWaypoints, LatLngTuple } from '@/contexts/WaypointContext'; import BreadcrumbTrail from '../BreadCrumbTrail'; import WaypointCreatorWindow from '../WaypointCreatorWindow'; @@ -20,6 +21,23 @@ const getCustomIcon = (color: string) => iconAnchor: [10, 10], }); +const getAntennaIcon = (heading: number) => + L.divIcon({ + html: ` + + `, + className: '', + iconSize: [30, 30], + iconAnchor: [15, 15], + }); + type MapViewProps = { offline: boolean; }; @@ -27,6 +45,8 @@ type MapViewProps = { const MapView: React.FC = ({offline}) => { const { ros } = useROS(); const [droneLoc, setDroneLoc] = useState([0, 0]); + const [antennaLoc, setAntennaLoc] = useState([45.385172, -75.698283]); + const [antennaHead, setAntennaHead] = useState(0); const { waypoints } = useWaypoints(); const { NEXT_PUBLIC_TILE_SERVER } = useEnvContext(); const tileServer = NEXT_PUBLIC_TILE_SERVER || "localhost:80"; @@ -40,16 +60,45 @@ const MapView: React.FC = ({offline}) => { messageType: 'sensor_msgs/NavSatFix', }); + const antennaFixTopic = new ROSLIB.Topic({ + ros, + name: '/base_station/fix', + messageType: 'sensor_msgs/NavSatFix', + }); + + const antennaBearingTopic = new ROSLIB.Topic({ + ros, + name: '/antenna/tracker_bearing', + messageType: 'std_msgs/Float32', + }); + const handleDrone = (message: any) => { // Assuming the /fix message contains 'latitude' and 'longitude' const { latitude, longitude } = message; setDroneLoc([latitude, longitude]); }; + + const handleAntennaFix = (message: any) => { + // Assuming the /fix message contains 'latitude' and 'longitude' + const { latitude, longitude } = message; + setAntennaLoc([latitude, longitude]); + }; + + const handleAntennaBearing = (message: any) => { + // Assuming the message contains float32 + const angle = message.data * 360; + setAntennaHead(angle); + }; droneTopic.subscribe(handleDrone); + antennaFixTopic.subscribe(handleAntennaFix); + antennaBearingTopic.subscribe(handleAntennaBearing); return () => { droneTopic.unsubscribe(handleDrone); + antennaFixTopic.unsubscribe(handleAntennaFix); + antennaBearingTopic.unsubscribe(handleAntennaBearing); }; + }, [ros]); return ( @@ -66,6 +115,7 @@ const MapView: React.FC = ({offline}) => { /> + {waypoints.map((wp, index) => (