steven/gpx.studio
1
0
Fork 0
mirror of https://github.com/gpxstudio/gpx.studio.git synced 2025-09-05 01:42:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

add highway info to elevation profile, closes #65

Browse Source
This commit is contained in:
vcoppe
2024-10-03 18:14:01 +02:00
parent 0c16ddd534
commit d7a02f714a
11 changed files with 225 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
website/src/lib/components/ElevationProfile.svelte
View File

@@ -16,9 +16,10 @@
Zap,
Circle,
Check,
ChartNoAxesColumn
ChartNoAxesColumn,
Construction
} from 'lucide-svelte';
import { surfaceColors } from '$lib/assets/surfaces';
import { surfaceColors, highwayColors } from '$lib/assets/colors';
import { _, locale } from 'svelte-i18n';
import {
getCadenceWithUnits,
@@ -43,7 +44,7 @@
export let gpxStatistics: Writable<GPXStatistics>;
export let slicedGPXStatistics: Writable<[GPXStatistics, number, number] | undefined>;
export let additionalDatasets: string[];
export let elevationFill: 'slope' | 'surface' | undefined;
export let elevationFill: 'slope' | 'surface' | 'highway' | undefined;
export let showControls: boolean = true;
const { distanceUnits, velocityUnits, temperatureUnits } = settings;
@@ -151,7 +152,10 @@
segment: point.slope.segment.toFixed(1),
length: getDistanceWithUnits(point.slope.length)
};
let surface = point.surface ? point.surface : 'unknown';
let surface = point.extensions.surface ? point.extensions.surface : 'unknown';
let highway = point.extensions.highway ? point.extensions.highway : 'unknown';
let sacScale = point.extensions.sac_scale;
let mtbScale = point.extensions['mtb:scale'];
let labels = [
` ${$_('quantities.distance')}: ${getDistanceWithUnits(point.x, false)}`,
@@ -164,6 +168,17 @@
);
}
if (elevationFill === 'highway') {
labels.push(
` ${$_('quantities.highway')}: ${$_(`toolbar.routing.highway.${highway}`)}${
sacScale ? ` (${$_(`toolbar.routing.sac_scale.${sacScale}`)})` : ''
}`
);
if (mtbScale) {
labels.push(` ${$_('toolbar.routing.mtb_scale')}: ${mtbScale}`);
}
}
if (point.time) {
labels.push(` ${$_('quantities.time')}: ${df.format(point.time)}`);
}
@@ -353,7 +368,7 @@
segment: data.local.slope.segment[index],
length: data.local.slope.length[index]
},
surface: point.getSurface(),
extensions: point.getExtensions(),
coordinates: point.getCoordinates(),
index: index
};
@@ -448,10 +463,15 @@
}
function surfaceFillCallback(context) {
let surface = context.p0.raw.surface;
let surface = context.p0.raw.extensions.surface;
return surfaceColors[surface] ? surfaceColors[surface] : surfaceColors.missing;
}
function highwayFillCallback(context) {
let highway = context.p0.raw.extensions.highway;
return highwayColors[highway] ? highwayColors[highway] : highwayColors.missing;
}
$: if (chart) {
if (elevationFill === 'slope') {
chart.data.datasets[0]['segment'] = {
@@ -461,6 +481,10 @@
chart.data.datasets[0]['segment'] = {
backgroundColor: surfaceFillCallback
};
} else if (elevationFill === 'highway') {
chart.data.datasets[0]['segment'] = {
backgroundColor: highwayFillCallback
};
} else {
chart.data.datasets[0]['segment'] = {};
}
@@ -551,7 +575,7 @@
<ChartNoAxesColumn size="18" />
</ButtonWithTooltip>
</Popover.Trigger>
<Popover.Content class="w-fit p-0 flex flex-col divide-y" side="left" sideOffset={-32}>
<Popover.Content class="w-fit p-0 flex flex-col divide-y" side="top" sideOffset={-32}>
<ToggleGroup.Root
class="flex flex-col items-start gap-0 p-1"
type="single"
@@ -582,6 +606,19 @@
<BrickWall size="15" class="mr-1" />
{$_('quantities.surface')}
</ToggleGroup.Item>
<ToggleGroup.Item
class="p-0 pr-1.5 h-6 w-full rounded flex justify-start data-[state=on]:bg-background data-[state=on]:hover:bg-accent hover:bg-accent hover:text-foreground"
value="highway"
variant="outline"
>
<div class="w-6 flex justify-center items-center">
{#if elevationFill === 'highway'}
<Circle class="h-1.5 w-1.5 fill-current text-current" />
{/if}
</div>
<Construction size="15" class="mr-1" />
{$_('quantities.highway')}
</ToggleGroup.Item>
</ToggleGroup.Root>
<ToggleGroup.Root
class="flex flex-col items-start gap-0 p-1"

22
website/src/lib/components/Export.svelte
View File

@@ -16,7 +16,7 @@
import {
Download,
Zap,
BrickWall,
Earth,
HeartPulse,
Orbit,
Thermometer,
@@ -31,19 +31,19 @@
let open = false;
let exportOptions: Record<string, boolean> = {
time: true,
surface: true,
hr: true,
cad: true,
atemp: true,
power: true
power: true,
extensions: true
};
let hide: Record<string, boolean> = {
time: false,
surface: false,
hr: false,
cad: false,
atemp: false,
power: false
power: false,
extensions: false
};
$: if ($exportState !== ExportState.NONE) {
@@ -63,11 +63,11 @@
}
hide.time = statistics.global.time.total === 0;
hide.surface = !Object.keys(statistics.global.surface).some((key) => key !== 'unknown');
hide.hr = statistics.global.hr.count === 0;
hide.cad = statistics.global.cad.count === 0;
hide.atemp = statistics.global.atemp.count === 0;
hide.power = statistics.global.power.count === 0;
hide.extensions = Object.keys(statistics.global.extensions).length === 0;
}
$: exclude = Object.keys(exportOptions).filter((key) => !exportOptions[key]);
@@ -144,11 +144,11 @@
{$_('quantities.time')}
</Label>
</div>
<div class="flex flex-row items-center gap-1.5 {hide.surface ? 'hidden' : ''}">
<Checkbox id="export-surface" bind:checked={exportOptions.surface} />
<Label for="export-surface" class="flex flex-row items-center gap-1">
<BrickWall size="16" />
{$_('quantities.surface')}
<div class="flex flex-row items-center gap-1.5 {hide.extensions ? 'hidden' : ''}">
<Checkbox id="export-extensions" bind:checked={exportOptions.extensions} />
<Label for="export-extensions" class="flex flex-row items-center gap-1">
<Earth size="16" />
{$_('quantities.osm_extensions')}
</Label>
</div>
<div class="flex flex-row items-center gap-1.5 {hide.hr ? 'hidden' : ''}">

2
website/src/lib/components/embedding/Embedding.ts
View File

@@ -10,7 +10,7 @@ export type EmbeddingOptions = {
show: boolean;
height: number;
controls: boolean;
fill: 'slope' | 'surface' | undefined;
fill: 'slope' | 'surface' | 'highway' | undefined;
speed: boolean;
hr: boolean;
cad: boolean;

3
website/src/lib/components/embedding/EmbeddingPlayground.svelte
View File

@@ -142,7 +142,7 @@
let value = selected?.value;
if (value === 'none') {
options.elevation.fill = undefined;
} else if (value === 'slope' || value === 'surface') {
} else if (value === 'slope' || value === 'surface' || value === 'highway') {
options.elevation.fill = value;
}
}}
@@ -153,6 +153,7 @@
<Select.Content>
<Select.Item value="slope">{$_('quantities.slope')}</Select.Item>
<Select.Item value="surface">{$_('quantities.surface')}</Select.Item>
<Select.Item value="highway">{$_('quantities.highway')}</Select.Item>
<Select.Item value="none">{$_('embedding.none')}</Select.Item>
</Select.Content>
</Select.Root>

22
website/src/lib/components/toolbar/tools/routing/Routing.ts
View File

@@ -65,7 +65,7 @@ async function getRoute(points: Coordinates[], brouterProfile: string, privateRo
const latIdx = messages[0].indexOf("Latitude");
const tagIdx = messages[0].indexOf("WayTags");
let messageIdx = 1;
let surface = messageIdx < messages.length ? getSurface(messages[messageIdx][tagIdx]) : undefined;
let tags = messageIdx < messages.length ? getTags(messages[messageIdx][tagIdx]) : {};
for (let i = 0; i < coordinates.length; i++) {
let coord = coordinates[i];
@@ -82,25 +82,25 @@ async function getRoute(points: Coordinates[], brouterProfile: string, privateRo
coordinates[i][1] == Number(messages[messageIdx][latIdx]) / 1000000) {
messageIdx++;
if (messageIdx == messages.length) surface = undefined;
else surface = getSurface(messages[messageIdx][tagIdx]);
if (messageIdx == messages.length) tags = {};
else tags = getTags(messages[messageIdx][tagIdx]);
}
if (surface) {
route[route.length - 1].setSurface(surface);
}
route[route.length - 1].setExtensions(tags);
}
return route;
}
function getSurface(message: string): string | undefined {
function getTags(message: string): { [key: string]: string } {
const fields = message.split(" ");
for (let i = 0; i < fields.length; i++) if (fields[i].startsWith("surface=")) {
return fields[i].substring(8);
let tags: { [key: string]: string } = {};
for (let i = 0; i < fields.length; i++) {
let tag = fields[i].split("=");
tags[tag[0]] = tag[1];
}
return undefined;
};
return tags;
}
function getIntermediatePoints(points: Coordinates[]): Promise<TrackPoint[]> {
let route: TrackPoint[] = [];