Google maps (#79)

* google maps wip

* deleted maps api key and regenerated

* show data on google maps, need to implement selector

* Working selector

* add range bar and add center dot

* added new test drive file

* refined DataReplayer with menu and time estimation

* made UI improvements for maps

* minor changes

---------

Co-authored-by: Mingcan Li <mli727@wisc.edu>
Co-authored-by: sbasu107 <sbasu107@gmail.com>

Author: 3 people

Backend/components/component_router.py

@@ -1,7 +1,8 @@
 from fastapi import APIRouter
-from . import graph_api, record_data
+from . import graph_api, record_data, maps_api
 
 router = APIRouter()
 
 router.include_router(graph_api.router)
-router.include_router(record_data.router)
+router.include_router(record_data.router)
+router.include_router(maps_api.router)

Backend/components/maps_api.py

@@ -0,0 +1,77 @@
+from core import db
+from fastapi import APIRouter
+import time
+import numpy as np
+import config
+import asyncio
+import pandas as pd
+
+router = APIRouter()
+
+
+def hsv_to_rgb(hsv):
+    h, s, v = hsv
+    i = int(h * 6)
+    f = h * 6 - i
+    p = v * (1 - s)
+    q = v * (1 - f * s)
+    t = v * (1 - (1 - f) * s)
+    switch = {
+        0: (v, t, p),
+        1: (q, v, p),
+        2: (p, v, t),
+        3: (p, q, v),
+        4: (t, p, v),
+        5: (v, p, q)
+    }
+    r, g, b = switch[i % 6]
+    return "#{:02x}{:02x}{:02x}".format(int(r * 255), int(g * 255), int(b * 255))
+
+async def calculate_color(data_name, value):
+    # Calculate the color value for each segment of the polyline using the value range from dataformat
+    min_val = config.FORMAT[data_name]["min"]
+    max_val = config.FORMAT[data_name]["max"]
+    
+    if max_val - min_val == 0:
+        if config.FORMAT[data_name]["type"] == bool:
+            return [hsv_to_rgb((val * 0.375, 1, 1)) for val in value]
+        else:
+            return ["#aaaaaa"] * (len(value)-1)
+    colors = []
+    for i in range(len(value) - 1):
+        mean = (value[i] + value[i + 1]) / 2
+        # Calculate percentage within the value range
+        percentage = max(min((mean - min_val) / (max_val - min_val), 1), 0)
+        # Map to HSV from 0 to 120 for transition from green to red
+        colors.append(hsv_to_rgb((percentage * 0.375, 1, 1)))
+    return colors
+
+@router.get("/maps")
+async def get_maps(data: str, duration: int = 60):
+    """pass in a datafield to get and return the coordinates with the value of the data of each timestamp"""
+    if not data:
+        return {"coords": [], "data": []}
+    
+    end_time = int(time.time()*1000)
+    start_time = end_time - duration*1000
+    
+    all_data = await db.query_without_aggregation(["lat", "lon", data], start_time, end_time)
+    
+    # Filter out rows with lat or lon equal to -1000, -1001, or 0
+    all_data = all_data[~((all_data['lat'] == -1000) | 
+                          (all_data['lat'] == -1001) | 
+                          (all_data['lat'] == 0) | 
+                          (all_data['lon'] == -1000) | 
+                          (all_data['lon'] == -1001) | 
+                          (all_data['lon'] == 0))]
+    all_data = all_data.drop_duplicates()
+
+    all_data.index = pd.to_datetime(all_data.index, unit='ms')
+    sample_freq = duration * 5 # get 100 samples max
+    all_data = all_data.resample(f"{sample_freq}ms").mean().dropna()
+    color = await calculate_color(data, list(all_data[data]))
+
+    return {
+        "coords": [{"lat": d["lat"], "lng": d["lon"]} for _, d in all_data.iterrows()],
+        "color": color
+    }

Backend/core/comms.py

@@ -1,3 +1,4 @@
+from os import getpid
 import json, select, socket, struct, sys, time
 import threading
 import traceback
@@ -31,7 +32,7 @@ def set_format(file_path: str):
         format_string += types[data_format[key][1]]
         byte_length += data_format[key][0]
         properties.append(key)
-        config.FORMAT[key] = {'type': data_format[key][1]}
+        config.FORMAT[key] = {'type': data_format[key][1], 'min': data_format[key][3], 'max': data_format[key][4]}
 
 def unpack_data(data):
     fields = {}

Backend/main.py

@@ -13,4 +13,4 @@ async def startup():
 if __name__ == '__main__':
     uvicorn.run(app='main:app', host="0.0.0.0", port=config.HOST_PORT)
 
-    
+    

DataReplayer/README.md

@@ -4,7 +4,9 @@ The DataReplayer reads recorded CSV data and replays it by sending UDP packets t
 
 ## Features
 
-- Loads CSV data from `raw_data/2024-4-7rawdata.csv`
+- **Interactive CSV file selection** with file size and drive duration information
+- **Command-line support** for quick file selection
+- **Drive duration analysis** - automatically calculates drive time from timestamps
 - Parses CSV headers and maps them to the solar car data format
 - **Generates current timestamps** for live graphing compatibility
 - Sends data packets via UDP at 31Hz (32ms intervals) to match real-time telemetry
@@ -13,24 +15,57 @@ The DataReplayer reads recorded CSV data and replays it by sending UDP packets t
 
 ## Usage
 
-1. Make sure you have the CSV file in `raw_data/2024-4-7rawdata.csv`
-2. Navigate to the DataReplayer directory and run:
-   ```bash
-   cd DataReplayer
-   npm start
-   ```
-3. The replayer will:
-   - Load all CSV data into memory
-   - Start sending UDP packets to `localhost:4003`
-   - Display progress updates every 100 packets
+### Interactive Mode (with menu)
+Navigate to the DataReplayer directory and run:
+```bash
+cd DataReplayer
+npm start
+```
+
+This will show an interactive menu with:
+- All available CSV files in the `raw_data` directory
+- File sizes (in MB)
+- Drive durations (calculated from timestamps)
+- Arrow key navigation for selection
+
+Example menu:
+```
+Data Replayer
+=====================================
+Select a CSV file to replay:
+
+? Choose CSV file: (Use arrow keys)
+❯ 2024-4-7rawdata.csv (71.28 MB, 4h 15m) 
+  coasts2024-04-141530.csv (21.54 MB, 23m)
+```
+
+### Command-line Mode (skip menu)
+For quick access when you know the filename:
+```bash
+npm start filename.csv
+npm start coasts2024-04-141530.csv
+```
+
+This will:
+- Skip the interactive menu
+- Show file information (size and duration)
+- Start replaying immediately
+
+### Getting Help
+```bash
+npm run help
+```
 
 ## Installation
 
-No additional dependencies are needed since the DataReplayer uses only Node.js built-in modules:
-- `fs` - File system operations
-- `readline` - CSV parsing
-- `dgram` - UDP socket communication
-- `buffer` - Binary data handling
+Install dependencies:
+```bash
+npm install
+```
+
+Required dependencies:
+- `inquirer` - Interactive CLI menus
+- Node.js built-in modules: `fs`, `readline`, `dgram`, `buffer`
 
 ## Data Flow
 
@@ -39,12 +74,23 @@ CSV File → Parse → Binary Buffer → UDP Packet → Backend (port 4003)
 ```
 
 The replayer:
+- **Analyzes CSV files** to determine drive duration and file size
 - Reads the CSV headers and maps them to the solar car data format
 - **Replaces old timestamps with current time** to enable live graphing
 - Converts each row to a binary buffer using the same format as DataGenerator
 - Sends packets at the same rate as live telemetry (31Hz)
 - Loops through the dataset continuously
 
+## Drive Duration Analysis
+
+The DataReplayer automatically calculates drive duration by:
+1. Reading the first timestamp from the `Var1` column (first data row)
+2. Reading the last timestamp from the `Var1` column (last data row)
+3. Computing the difference and converting to hours and minutes
+4. Displaying in format: `4h 15m` or `23m` (if less than 1 hour)
+
+This helps you understand the scope of each dataset before selecting it for replay.
+
 ## Timestamp Handling
 
 The DataReplayer automatically replaces timestamp fields from the CSV with current timestamps: