Home Explore Help
Sign In
k4be
/
gpx-vis
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Fix login flash, elevation gain/loss accuracy, and stats label position

- Hide auth page by default to prevent flash when already logged in
- Filter GPS elevation noise with 5m hysteresis threshold, halving inflated gain/loss values
- Move gain/loss stats label above the chart area to avoid overlap with profile

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
k4be 2 weeks ago
parent
ae5a700f36
commit
eb6f55ade7
4 changed files with 12 additions and 9 deletions
Split View Show Diff Stats
  1. 2 0
      CLAUDE.md
  2. 1 1
      gpx-vis-frontend/index.html
  3. 0 1
      gpx-vis-frontend/js/app.js
  4. 9 7
      gpx-vis-frontend/js/elevation.js

+ 2 - 0
CLAUDE.md
View File 

@@ -84,6 +84,8 @@ gpx-vis/
 
 
 After `git pull`, check `git diff HEAD~1 --name-only` — if all changed files are under `gpx-vis-frontend/` or are docs, skip the restart.
 
 
+Commit all features immediately when finished. Advise whether restart is needed after every task is finished.
 
+
 
 ## Development notes
 
 
 - Do not mock the database in tests — `test/setup.js` wires real in-memory SQLite

+ 1 - 1
gpx-vis-frontend/index.html
View File 

@@ -9,7 +9,7 @@
 
 </head>
 
 <body>
 
   <!-- Auth page -->
 
-  <div id="auth-page">
 
+  <div id="auth-page" style="display:none">
 
     <div class="auth-container">
 
       <h1 id="app-title">GPX Visualizer</h1>
 
       <div class="auth-tabs">

+ 0 - 1
gpx-vis-frontend/js/app.js
View File 

@@ -350,7 +350,6 @@ async function main() {
 
 
   if (!loggedIn) {
 
     document.getElementById('auth-page').style.display = 'flex';
 
-    document.getElementById('app').style.display = 'none';
 
     return;
 
   }

+ 9 - 7
gpx-vis-frontend/js/elevation.js
View File 

@@ -94,14 +94,16 @@ const Elevation = (() => {
 
   }
 
 
   function computeElevStats(pts) {
 
-    let gain = 0, loss = 0, prev = null;
 
+    // Use hysteresis threshold to filter GPS elevation noise.
 
+    // Only count a direction change as real gain/loss once it exceeds THRESHOLD metres.
 
+    const THRESHOLD = 5;
 
+    let gain = 0, loss = 0, anchor = null;
 
     for (const p of pts) {
 
       if (p.ele == null) continue;
 
-      if (prev != null) {
 
-        const d = p.ele - prev;
 
-        if (d > 0) gain += d; else loss -= d;
 
-      }
 
-      prev = p.ele;
 
+      if (anchor == null) { anchor = p.ele; continue; }
 
+      const d = p.ele - anchor;
 
+      if (d >= THRESHOLD) { gain += d; anchor = p.ele; }
 
+      else if (d <= -THRESHOLD) { loss -= d; anchor = p.ele; }
 
     }
 
     return { gain: Math.round(gain), loss: Math.round(loss) };
 
   }
 
@@ -212,7 +214,7 @@ const Elevation = (() => {
 
     ctx.font = '10px sans-serif';
 
     ctx.textAlign = 'right';
 
     ctx.fillStyle = 'rgba(120,120,120,0.9)';
 
-    ctx.fillText(text, PAD.left + cw - 2, PAD.top + 10);
 
+    ctx.fillText(text, PAD.left + cw - 2, PAD.top - 4);
 
   }
 
 
   // Draw a vertical cursor + dot at the given point (CSS pixel coords)