4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Route slope coloring: colour descents by a cool fan (green->cyan->navy)

Browse source 
Slope was coloured by |grade| - up and down looked identical. Colour by signed
grade in travel-direction order: uphill keeps the warm fan (green->yellow->red->
brown->black), downhill drops through a cool fan (green->cyan->blue->navy). Legend
shows both strips.
This commit is contained in:
4aiman 2026-10-26 20:55:11 +03:00
commit 27c60a460a
1 changed files with 16 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

25
frontend/js/main.js
View file

@ -3797,22 +3797,29 @@ function showShareModal(session, stats, points) {
}
// Slope tint by absolute grade in %, in 1%-wide discrete bands (hard boundaries
// kept — one colour per segment): green -> yellow -> red -> brown -> black.
// <1%=0 .. 9–10%=9, >=10% = black. Both up- and downhill coloured by magnitude.
let ROUTE_SLOPE_BANDS = [
// Slope is coloured by DIRECTION of travel (point order = travel direction):
// uphill climbs through a WARM fan (green -> yellow -> red -> brown -> black),
// downhill drops through a COOL fan (green -> cyan -> blue -> navy). Flat (<1%)
// is green either way. 1% bands: <1%=0 .. 9–10%=9, >=10% = last.
let ROUTE_SLOPE_UP = [
"#2e7d32", "#7cb342", "#aeea00", "#ffeb3b", "#ffc107",
"#ff9800", "#ff5722", "#e53935", "#b71c1c", "#6d4c41", "#000000",
];
let ROUTE_SLOPE_DOWN = [
"#2e7d32", "#2e9e5b", "#26a69a", "#00bcd4", "#29b6f6",
"#1e88e5", "#1976d2", "#1565c0", "#0d47a1", "#0a357a", "#001f5c",
];
function routeSlopeColor(gradePct) {
let idx = Math.min(10, Math.floor(Math.abs(gradePct || 0)));
return ROUTE_SLOPE_BANDS[idx];
let g = gradePct || 0;
let idx = Math.min(10, Math.floor(Math.abs(g)));
return g < 0 ? ROUTE_SLOPE_DOWN[idx] : ROUTE_SLOPE_UP[idx];
}
// Compact colour strip for the slope legend (every 1% band, 0 → 10%+).
// Compact colour strips for the slope legend (every 1% band, 0 → 10%+), both fans.
function slopeLegendHtml() {
let cells = ROUTE_SLOPE_BANDS
.map(c => `<span style="display:inline-block;width:11px;height:10px;background:${c};vertical-align:middle"></span>`)
let strip = arr => arr
.map(c => `<span style="display:inline-block;width:9px;height:10px;background:${c};vertical-align:middle"></span>`)
.join("");
return `уклон 0% ${cells} 10%+`;
return `подъём ${strip(ROUTE_SLOPE_UP)} крутой&nbsp;&nbsp;спуск ${strip(ROUTE_SLOPE_DOWN)} крутой`;
}
// Draw a route as a feature group: a wide colored casing (per segment — by slope