quoije/yaris-obd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: max-speed marker scrubs timeline + timeline tick (FEAT-16)

Browse Source 
- Clicking the amber max-speed map marker now jumps the replay to that point
- Add an amber tick on the scrubber at the max-speed position (clickable too)
- Both on Pi and server portal
This commit is contained in:
Mathieu Moran
2026-08-15 18:00:06 -04:00
parent 87d63e8f32
commit 7d6dd28680
4 changed files with 63 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files
static/js/history.js
+38 -5
View File
@@ -35,7 +35,8 @@
// ── Core state ──────────────────────────────────────────────────────
let st = {
route: null, marker: null, points: [], timer: null, ctrl: null, activeRow: null
route: null, marker: null, points: [], timer: null, ctrl: null, activeRow: null,
maxIndex: null
};
let _cache = {};
let _geoTimer = null, _geoCtrl = null, _lastKey = null;
@@ -59,7 +60,9 @@
stopTm();
if (st.route) { map.removeLayer(st.route); st.route = null; }
if (st.marker) { map.removeLayer(st.marker); st.marker = null; }
st.points = []; _cache = {}; _lastKey = null;
st.points = []; _cache = {}; _lastKey = null; st.maxIndex = null;
var maxTick = document.getElementById("trip-max-tick");
if (maxTick) maxTick.hidden = true;
if (_geoCtrl) { _geoCtrl.abort(); _geoCtrl = null; }
clearTimeout(_geoTimer);
timeline.hidden = true; summary.textContent = "Select a trip";
@@ -149,6 +152,27 @@
showPt(0);
}
// ── Max-speed marker helpers ────────────────────────────────────────
function jumpToMax() {
if (st.maxIndex == null) return;
stopTm();
showPt(st.maxIndex);
}
function placeMaxTick() {
var tick = document.getElementById("trip-max-tick");
var scrubber = document.getElementById("trip-scrubber");
if (!tick || !scrubber) return;
if (st.maxIndex == null || !st.points || st.points.length < 2) {
tick.hidden = true;
return;
}
var ratio = st.maxIndex / (st.points.length - 1);
var thumb = 16; // approximate range thumb width
var usable = Math.max(1, scrubber.clientWidth - thumb);
tick.style.left = (thumb / 2 + ratio * usable) + "px";
tick.hidden = false;
}
// ── Trip loader ─────────────────────────────────────────────────────
var _deb;
function loadTrip(id) {
@@ -172,10 +196,14 @@
L.marker(coords[0]).bindPopup("Start").addTo(st.route);
L.marker(coords[coords.length - 1]).bindPopup("End").addTo(st.route);
}
// Pin the fastest point on the route.
var maxPt = null;
// Pin the fastest point on the route, remembering its index so
// clicking the marker scrubs the timeline to that point.
var maxPt = null; st.maxIndex = null;
for (var i = 0; i < d.points.length; i++) {
if (!maxPt || d.points[i].speed > maxPt.speed) maxPt = d.points[i];
if (!maxPt || d.points[i].speed > maxPt.speed) {
maxPt = d.points[i];
st.maxIndex = i;
}
}
if (maxPt && maxPt.speed > 0) {
L.circleMarker([maxPt.latitude, maxPt.longitude], {
@@ -188,6 +216,7 @@
.bindTooltip("Max speed: " + fS(maxPt.speed), {
permanent: true, direction: "top", offset: [0, -8],
})
.on("click", jumpToMax)
.addTo(st.route);
}
st.route.addTo(map);
@@ -202,12 +231,16 @@
};
summary.textContent = fK(d.trip.distance_km) + " \u00b7 " + fD(d.trip.duration_seconds) + " \u00b7 avg " + fS(d.trip.average_speed_kmh) + " \u00b7 max " + fS(d.trip.max_speed_kmh) + " \u00b7 " + d.points.length + " pts";
initTL(d.points);
placeMaxTick();
} catch (e) { if (e.name !== "AbortError") showErr(e.message); }
finally { if (!sig.aborted) setLoading(false); }
}
// ── Scrubber & play ─────────────────────────────────────────────────
scrubber.addEventListener("input", function () { stopTm(); showPt(Number(scrubber.value)); });
var maxTick = document.getElementById("trip-max-tick");
if (maxTick) maxTick.addEventListener("click", jumpToMax);
window.addEventListener("resize", placeMaxTick);
playButton.addEventListener("click", function () {
if (st.timer) { stopTm(); return; }
if (Number(scrubber.value) >= st.points.length - 1) showPt(0);