Skip to content

recorder: Add interactive maps with clickable track points and data charts #3906

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: master
Choose a base branch
from

Conversation

stweedo
Copy link
Contributor

@stweedo stweedo commented Jun 26, 2025

Features Added

  • Interactive maps: Click any GPS point to see detailed data
  • Data charts: 6 chart types (HR, battery, steps, elevation, speed, barometer) with PNG export

UI Changes

  • Card layout → Accordion with lazy loading
  • Added track stats (distance, duration)

This can be tested at https://stweedo.github.io/BangleApps/?id=recorder

@stweedo stweedo closed this Jun 27, 2025
@stweedo stweedo reopened this Jun 27, 2025
@stweedo
Copy link
Contributor Author

stweedo commented Jun 27, 2025

@eisengpferd would you be able to test if BT Heartrate is shown in the chart?

@stweedo
Copy link
Contributor Author

stweedo commented Jun 27, 2025

Thanks! This should be ready for review

@stweedo stweedo marked this pull request as ready for review June 27, 2025 05:12
@bobrippling
Copy link
Collaborator

This is very cool - I should have more time to take a look soon

@stweedo stweedo force-pushed the recorder-interface branch from 7b517f2 to c8532b4 Compare June 27, 2025 09:23
@stweedo stweedo force-pushed the recorder-interface branch from df1d4e9 to 7f15506 Compare June 27, 2025 10:26
@stweedo stweedo force-pushed the recorder-interface branch from 7f15506 to 1ed5594 Compare June 27, 2025 10:38
The confirmation wasn’t showing on mobile so there was no way to delete a track. Switched back to the original delete immediately behavior.
@gfwilliams
Copy link
Member

Thanks! Out of interest why did you remove the confirmation for deleting? It felt like a good idea.

I just gave it a final look over and while it's minor I think it might be nice to change the colors for the Altitude graph? It can be quite hard to tell the two shades of purple apart (at least for me?)

I think given this has been tried in the forum a bit we're probably pretty good to merge after that though.

... going forward one thing I think would be nice is if in the unexpanded title for each recording could somehow show a small map of the rough location, since we have it available? Not sure how well Leaflet would handle that though?

@stweedo
Copy link
Contributor Author

stweedo commented Jun 27, 2025

The confirmation didn’t seem to work for some reason on WebBLE. But then I realized after, that app uninstalls have a confirmation that works just fine. So I must’ve been doing something wrong.

Thanks so much for checking it over. I’ll make some final tweaks to the graph color and then try to get the confirmation and mini-map previews working. I think I understand what you’re saying about the map preview… the initial location is available for each track when we first load the entire list, right? Then we can draw a small preview of that area in the track list next to each one before we even expand it?

@gfwilliams
Copy link
Member

Thanks for making those changes - you've put a ton of work into this!

I think I understand what you’re saying about the map preview… the initial location is available for each track when we first load the entire list, right? Then we can draw a small preview of that area in the track list next to each one before we even expand it?

Yes, exactly!

Instead of showing another popup for track delete confirmation, it now simply changes the button text to “Confirm Delete” for 3 seconds and a second tap will actually perform the delete.
@bobrippling
Copy link
Collaborator

Wow, yes very cool! The charts are great, really nice work.

I agree with Gordon - I have some long routes and opening the wrong accordion means there's a wait for it to load, so I like the idea of a preview too. Either before expanding or in the expanded view and the user clicks the preview to bring in the full route?

if (lIdx >= 0) {
var tries = 100;
var l = data;
while (l && l.split(",")[lIdx]=="" && tries--)
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, I was wondering why a few routes were no longer shown - this bugfix!

Not one for this PR, but I think once we've fetched the data we could re-decide/scan for lat/lon and then draw routes which have only acquired a GPS fix after 100 attempts

<strong>Track ${track.number}</strong> - ${dateStr}
</label>
<div class="accordion-body" id="track-content-${track.number}">
<div class="track-loading">Click to load track data...</div>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah, looks like you've already done the lazy loading? I guess it just needs a re-deploy?

attachTrackButtonListeners(trackContainer);

downloadTrack(track.filename, fullTrack => {
if (trackData.Latitude) {
Copy link
Collaborator

@bobrippling bobrippling Jun 29, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here (in a future PR) is where I guess we'd scan the whole list for track data (refering to this comment)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants