From c8532b4750fd6b072dab25fccd0dd91fa09b4951 Mon Sep 17 00:00:00 2001 From: stweedo Date: Fri, 20 Jun 2025 12:10:14 -0500 Subject: [PATCH] recorder: Add interactive maps with clickable track points and data charts --- apps/recorder/README.md | 25 +- apps/recorder/interface.html | 937 +++++++++++++++++++++++++++-------- 2 files changed, 759 insertions(+), 203 deletions(-) diff --git a/apps/recorder/README.md b/apps/recorder/README.md index 9c283bb7e..f24d6d5fb 100644 --- a/apps/recorder/README.md +++ b/apps/recorder/README.md @@ -29,12 +29,29 @@ Some apps like the [Run app](https://banglejs.com/apps/?id=run) are able to auto as well. They need to define a `foobar.recorder.js` file - see the `getRecorders` function in `lib.js` for more information. -## Graphing +## Viewing and Downloading Data -You can download the information to the PC using [the App Loader](https://banglejs.com/apps/?id=recorder). Connect -to your Bangle, then in `My Apps` click the disk icon next to the `Recorder` app to download data. +You can download and visualize the information using [the App Loader](https://banglejs.com/apps/?id=recorder). Connect +to your Bangle, then in `My Apps` click the disk icon next to the `Recorder` app to access the download interface. -You can also view some information on the watch. +### Interactive Web Interface + +The download interface provides individual track visualization with: + +* **Interactive Leaflet maps** - Each GPS track gets its own map using OpenStreetMap tiles +* **Track statistics** - Distance, duration, and track points automatically calculated +* **Start/End markers** - Green circles mark track start, red circles mark end points +* **Interactive track points** - Click anywhere along the GPS track to see detailed data at that point +* **Data popups** - View available data for each point (time, heart rate, altitude, speed, steps, battery, barometer - if recorded) +* **Interactive charts** - Collapsible graphs for heart rate, battery, steps, elevation, speed, and barometer data with PNG export +* **Download options** - KML, GPX, and CSV formats for individual tracks or all at once +* **Settings** - Option to include/exclude entries without GPS coordinates +* **Unit preferences** - Choose between metric, imperial, or auto-detect based on your locale +* **Mobile responsive** - Works well on all devices + +### On-Watch Visualization + +You can also view some information on the watch: * Tap `View Tracks` * Tap on the Track number you're interested in, and you'll see a page with information about that track... diff --git a/apps/recorder/interface.html b/apps/recorder/interface.html index 63f2d0482..5d6834c0f 100644 --- a/apps/recorder/interface.html +++ b/apps/recorder/interface.html @@ -1,74 +1,378 @@ + + +
-
+
+ + + - + \ No newline at end of file