Skip to content

recorder: load full map and add author info #4049

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.

Sign up for GitHub

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
Open

recorder: load full map and add author info #4049

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4d5f1ee
recorder: render map when we have full track details
bobrippling Oct 30, 2025
b094ce3
recorder: return after `resolve()` and faster track loading
bobrippling Oct 30, 2025
30aca3b
recorder: add bangle auther info
bobrippling Oct 30, 2025
f2b463d
recorder: space out GPX tags
bobrippling Oct 30, 2025
6b1d0e1
recorder: add note about track type
bobrippling Oct 30, 2025
8ade24a
recorder: update author name & link
bobrippling Oct 31, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
46 changes: 27 additions & 19 deletions apps/recorder/interface.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -411,10 +411,19 @@
// check track validity after filtering
if (!track?.[0]?.Time) return showToast("Error in trackfile (no time or empty).", "error");
let lastTime = 0;
//const trackType = ... -> `<type>${trackType}</type>`
const gpx = `<?xml version="1.0" encoding="UTF-8"?>
<gpx creator="Bangle.js" version="1.1" xmlns="http://www.topografix.com/GPX/1/1" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://www.topografix.com/GPX/1/1 http://www.topografix.com/GPX/1/1/gpx.xsd http://www.garmin.com/xmlschemas/GpxExtensions/v3 http://www.garmin.com/xmlschemas/GpxExtensionsv3.xsd http://www.garmin.com/xmlschemas/TrackPointExtension/v1 http://www.garmin.com/xmlschemas/TrackPointExtensionv1.xsd" xmlns:gpxtpx="http://www.garmin.com/xmlschemas/TrackPointExtension/v1" xmlns:gpxx="http://www.garmin.com/xmlschemas/GpxExtensions/v3">
<metadata><time>${track[0].Time.toISOString()}</time></metadata>
<trk><name>${title}</name><trkseg>${track.map(pt => {
<metadata>
<author>
<name>Bangle.js</name>
<link href="https://banglejs.com/apps/?id=recorder" />
</author>
</metadata>
<trk>
<name>${title}</name>
<trkseg>${track.map(pt => {
// Calculate cadence (steps per minute) from step count
// Formula: (steps in interval * 60 seconds * 1000ms) / time elapsed in ms
// Simplified to: steps * 30000 / time_ms (since 60 * 1000 / 2 = 30000)
Expand Down Expand Up @@ -710,7 +719,7 @@
if (lIdx >= 0) {
var tries = 100;
var l = data;
while (l && l.split(",")[lIdx]=="" && tries--)
while (l && l.split(",")[lIdx]==="" && tries--)
l = f.readLine();
if (l) data = l;
}
Expand All @@ -719,6 +728,7 @@
if (!trackInfo || !("headers" in trackInfo)) {
showToast("Error loading track list.", "error");
resolve();
return;
}
trackInfo.headers = trackInfo.headers.split(",");
trackList.push({
Expand Down Expand Up @@ -842,23 +852,21 @@ <h2>Settings</h2>
attachTrackButtonListeners(trackContainer);

downloadTrack(track.filename).then(fullTrack => {
if (trackData.Latitude) {
const coordinates = fullTrack
.filter(hasValidGPS)
.map(pt => [parseFloat(pt.Latitude), parseFloat(pt.Longitude)]);

if (coordinates.length > 0) {
createLeafletMap(`map-${track.number}`, coordinates, fullTrack);

let distance = 0;
for (let i = 1; i < coordinates.length; i++) distance += L.latLng(coordinates[i-1]).distanceTo(L.latLng(coordinates[i]));
const duration = fullTrack[fullTrack.length-1].Time - fullTrack[0].Time;
const hours = Math.floor(duration / 3600000), minutes = Math.floor((duration % 3600000) / 60000);
const statsEl = document.getElementById(`stats-${track.number}`);
if (statsEl) {
const d = convertDistance(distance/1000);
statsEl.innerHTML = `<strong>Distance:</strong> ${d.value.toFixed(2)} ${d.unit} | <strong>Duration:</strong> ${hours}h ${minutes}m | <strong>Points:</strong> ${coordinates.length}`;
}
const coordinates = fullTrack
.filter(hasValidGPS)
.map(pt => [parseFloat(pt.Latitude), parseFloat(pt.Longitude)]);

if (coordinates.length > 0) {
createLeafletMap(`map-${track.number}`, coordinates, fullTrack);

let distance = 0;
for (let i = 1; i < coordinates.length; i++) distance += L.latLng(coordinates[i-1]).distanceTo(L.latLng(coordinates[i]));
const duration = fullTrack[fullTrack.length-1].Time - fullTrack[0].Time;
const hours = Math.floor(duration / 3600000), minutes = Math.floor((duration % 3600000) / 60000);
const statsEl = document.getElementById(`stats-${track.number}`);
if (statsEl) {
const d = convertDistance(distance/1000);
statsEl.innerHTML = `<strong>Distance:</strong> ${d.value.toFixed(2)} ${d.unit} | <strong>Duration:</strong> ${hours}h ${minutes}m | <strong>Points:</strong> ${coordinates.length}`;
}
}

Expand Down