Map scale

src/components/BreadCrumbTrail.tsx

@@ -5,7 +5,6 @@ import { Circle, Polyline, useMap } from 'react-leaflet';
 import { useROS } from '@/ros/ROSContext';
 import { useWaypoints } from '@/contexts/WaypointContext';
 import ROSLIB from 'roslib';
-import L from 'leaflet'
 
 interface Breadcrumb {
   coordinate: [number, number];
@@ -14,7 +13,11 @@ interface Breadcrumb {
   altitude?: number;
 }
 
-const BreadcrumbTrail: React.FC = () => {
+type BreadcrumbTrailProps = {
+  downloadPNG: Function,
+}
+
+const BreadcrumbTrail: React.FC<BreadcrumbTrailProps> = ({ downloadPNG }) => {
   const map = useMap();
   const { ros, connectionStatus } = useROS();
   const { addWaypoint } = useWaypoints();
@@ -222,6 +225,19 @@ const BreadcrumbTrail: React.FC = () => {
           >
             Re-center
           </button>
+          <button
+            onClick={downloadPNG}
+            style={{
+              padding: '0.25rem 0.5rem',
+              backgroundColor: '#b84dff',
+              border: 'none',
+              borderRadius: '4px',
+              color: '#fff',
+              cursor: 'pointer',
+            }}
+          >
+            PNG
+          </button>
         </div>
         {lastFix && (
           <button
@@ -243,4 +259,4 @@ const BreadcrumbTrail: React.FC = () => {
   );
 };
 
-export default BreadcrumbTrail;
+export default BreadcrumbTrail;

src/components/panels/MapView.tsx

@@ -1,7 +1,7 @@
 'use client';
 
-import React, { useEffect, useState } from 'react';
-import { MapContainer, TileLayer, Marker, Popup, Polyline } from 'react-leaflet';
+import React, { useEffect, useState, useRef } from 'react';
+import { MapContainer, TileLayer, Marker, Popup, Polyline, ScaleControl } from 'react-leaflet';
 import L from 'leaflet';
 import antennaMarker from "@/../public/satellite-dish.svg";
 import { useWaypoints, LatLngTuple } from '@/contexts/WaypointContext';
@@ -12,6 +12,7 @@ import MapCompass from '../MapCompass';
 import { useROS } from '@/ros/ROSContext';
 import ROSLIB from 'roslib';
 import { TILING_SERVER } from '@/constants';
+import html2canvas from 'html2canvas';
 
 const DEFAULT_MAP_CENTER: LatLngTuple = [38.405884, -110.791719];
 
@@ -50,6 +51,7 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
   const [antennaLoc, setAntennaLoc] = useState<LatLngTuple>(DEFAULT_MAP_CENTER);
   const [antennaHead, setAntennaHead] = useState<number>(0);
   const { waypoints } = useWaypoints();
+  const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
     if (!ros) return;
@@ -100,8 +102,26 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
     };
 
   }, [ros]);
+
+  const downloadPNG = async () => {
+    console.log("Download PNG")
+    if (!containerRef.current) return;
+
+    console.log("Download PNG 2")
+    const canvas = await html2canvas(containerRef.current, {
+      backgroundColor: '#181818',
+    });
 
+    console.log("Download PNG 3")
+    const link = document.createElement('a');
+    link.download = `cprt-map.png`;
+    link.href = canvas.toDataURL('image/png');
+    link.click();
+    console.log("Download PNG 4")
+  };
+
   return (
+<div ref={containerRef} style={{ height: "100%" }}>
     <MapContainer
       center={DEFAULT_MAP_CENTER}
       zoom={15}
@@ -113,6 +133,7 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
         url={offline? `http://${TILING_SERVER}/{z}/{x}/{y}.png` : "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"}
         attribution="&copy; Maptiler server"
       />
+      <ScaleControl position="bottomright" maxWidth={200} />
       <MapInteractionHandler />
       <Marker position={droneLoc} icon={getCustomIcon("#4657F2")}/>
       <Marker position={antennaLoc} icon={getAntennaIcon(antennaHead)}/>
@@ -149,7 +170,7 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
           fontSize: '0.9rem',
           maxWidth: '300px',
         }}>
-        <BreadcrumbTrail />
+        <BreadcrumbTrail downloadPNG={downloadPNG} />
         <WaypointCreatorWindow />
       </div>
       <div
@@ -166,7 +187,8 @@ const MapView: React.FC<MapViewProps> = ({offline}) => {
         <MapCompass/>
       </div>
     </MapContainer>
+</div>
   );
 };
 
-export default MapView;
+export default MapView;

src/components/panels/ScienceControlPanel.tsx

@@ -97,9 +97,6 @@ const servos: ServoConfig[] = [
   }
 ];
 
-const CM_PER_TICK = 0.15 / 13 / 70; // 1.5 mm pitch thread, 1:13 gear ratio, 12-bit encoder
-const DRILL_HEIGHT = 52;
-
 // --------------------
 // Panel
 // --------------------
@@ -108,9 +105,6 @@ const ScienceControlPanel: React.FC = () => {
 
   const [title, setTitle] = useState<string>("");
   const [polarStatus, setPolarStatus] = useState<string>("");
-  const [drill, setDrill] = useState<MotorStatus>();
-  const [elevator, setElevator] = useState<MotorStatus>();
-  const [zero, setZero] = useState<number>(0); // TODO: Service for resetting talon encoder estimate
 
   const sendMotor: SendMotorFn = (
     motorID,
@@ -181,60 +175,8 @@ const ScienceControlPanel: React.FC = () => {
     );
   };
 
-  useEffect(() => {
-    if (!ros) return;
-
-    const drillTopic = new ROSLIB.Topic({
-      ros,
-      name: '/drill/status',
-      messageType: 'ros_phoenix/msg/MotorStatus',
-    });
-
-    const handleDrillReading = (msg: any) => {
-      setDrill(msg as MotorStatus);
-    };
-
-    drillTopic.subscribe(handleDrillReading);
-
-    return () => {
-      drillTopic.unsubscribe(handleDrillReading);
-    };
-  }, [ros]);
-
-  useEffect(() => {
-    if (!ros) return;
-
-    const elevatorTopic = new ROSLIB.Topic({
-      ros,
-      name: '/elevator/status',
-      messageType: 'ros_phoenix/msg/MotorStatus',
-    });
-
-    const handleElevatorReading = (msg: any) => {
-      setElevator(msg as MotorStatus);
-    };
-
-    elevatorTopic.subscribe(handleElevatorReading);
-
-    return () => {
-      elevatorTopic.unsubscribe(handleElevatorReading);
-    };
-  }, [ros]);
-
   return (
     <div className="panel">
-      <div className="drill-info">
-        <div style={{ float: "left" }}>
-          <button style={{ marginRight: '10px' }} onClick={() => {setZero(elevator?.position ?? 0)}}>Set Fully UP</button>
-          <span style={{ paddingRight: '20px' }}>Drill Height: <span className='drill-reading'>{(DRILL_HEIGHT + (((elevator?.position ?? 0) - zero) * CM_PER_TICK)).toFixed(2)}</span> cm above ground</span>
-          <span style={{ paddingRight: '20px' }}>Drill Current: <span className='drill-reading'>{drill?.output_current?.toFixed(2) ?? '--'}</span> A</span>
-          <span>Drill Percent: <span className='drill-reading'>{((drill?.output_percent ?? 0) * 100).toFixed(0)}</span>%</span>
-        </div>
-        <div style={{ float: "right" }}>
-          <span className='right' style={{ paddingRight: '20px' }}>Elevator Current: <span className='drill-reading'>{elevator?.output_current?.toFixed(2) ?? '--'}</span> A</span>
-          <span className='right'>Elevator Percent: <span className='drill-reading'>{((elevator?.output_percent ?? 0) * 100).toFixed(0)}</span>%</span>
-        </div>
-      </div>
       <div className="motor-grid">
         {motors.map((motor) =>
             <DCMotor
@@ -414,25 +356,6 @@ const ScienceControlPanel: React.FC = () => {
           background: #00ffcc;
           transition: width 0.1s linear;
         }
-
-        .drill-info {
-          border: 1px solid #3a3a3a;
-          border-radius: 10px;
-          padding: .75rem;
-          margin-bottom: 1rem;
-          box-shadow: 0 3px 10px rgba(0,0,0,.4);
-          background: linear-gradient(145deg,#2b2b2b,#202020);
-          color: #eaeaea;
-        }
-
-        .right {
-          vertical-align: -moz-middle-with-baseline;
-          vertical-align: -webkit-baseline-middle;
-        }
-
-        .drill-reading {
-          font-weight: 600;
-        }
       `}</style>
     </div>
   );