From a611706249204fb6abf78272eb220685b8bca138 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Tue, 16 Jul 2024 12:41:53 -0600 Subject: [PATCH 01/17] Fix LitElement false unused warning --- web/src/ferrostar-core.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index 64f87a1f..6cdbaa04 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -8,7 +8,7 @@ import markerShadowUrl from "../node_modules/leaflet/dist/images/marker-shadow.p import init, { NavigationController, RouteAdapter } from "ferrostar"; @customElement("ferrostar-core") -class FerrostarCore extends LitElement { +export class FerrostarCore extends LitElement { @property() valhallaEndpointUrl: string = ""; From ee6f4c88578d4e7891f0ed8ec2818379668e3ca1 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Wed, 17 Jul 2024 20:10:03 -0600 Subject: [PATCH 02/17] Add stop navigation button --- web/index.html | 19 ++++++++++++++++++- web/src/ferrostar-core.ts | 6 +++++- web/src/index.css | 4 ++++ 3 files changed, 27 insertions(+), 2 deletions(-) diff --git a/web/index.html b/web/index.html index d4334fbc..b2809ed1 100644 --- a/web/index.html +++ b/web/index.html @@ -17,7 +17,7 @@ costingOptions="${{ bicycle: { use_roads: 0.2 } }}" > -

+

@@ -26,6 +26,10 @@

+

+ +

+ diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index 6cdbaa04..3858ca60 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -130,7 +130,11 @@ export class FerrostarCore extends LitElement { } async stopNavigation() { - // TODO + this.resetMap(); + this.routeAdapter = null; + this.locationProvider.updateCallback = null; + this.navigationController = null; + this.currentLocationMapMarker = null; } private async handleStateUpdate(newState: any, location: any) { diff --git a/web/src/index.css b/web/src/index.css index e6993d9e..8feeae87 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -14,6 +14,10 @@ ferrostar-core { gap: 10px; } +.controls-stop { + display: none; +} + #destination { width: 100%; max-width: 300px; From 6cb9cf47017ee78f6253a0796b913412a62fbdf6 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Thu, 18 Jul 2024 22:46:10 -0600 Subject: [PATCH 03/17] Add tripState in web components --- web/src/ferrostar-core.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index 3858ca60..ccfdde54 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -31,6 +31,9 @@ export class FerrostarCore extends LitElement { navigationController: NavigationController | null = null; currentLocationMapMarker: L.Marker | null = null; + // TODO: type + tripState: any = null; + static styles = [ unsafeCSS(leafletStyles), css` @@ -111,6 +114,7 @@ export class FerrostarCore extends LitElement { }; const initialTripState = this.navigationController.getInitialState(startingLocation); + this.tripState = initialTripState; this.handleStateUpdate(initialTripState, startingLocation); this.resetMap(); @@ -142,6 +146,7 @@ export class FerrostarCore extends LitElement { } private onLocationUpdated() { + this.tripState = this.navigationController!.updateUserLocation(this.locationProvider.lastLocation, this.tripState); this.currentLocationMapMarker!.setLatLng(this.locationProvider.lastLocation.coordinates); } From 4a533ea66bd04addc49dc6cd39eda4728ff7d7ad Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Thu, 18 Jul 2024 22:46:57 -0600 Subject: [PATCH 04/17] Add instructions-view and arrival-view --- web/src/arrival-view.ts | 50 ++++++++++++++++++++++++++++++++++++ web/src/ferrostar-core.ts | 30 +++++++++++++++++++++- web/src/instructions-view.ts | 36 ++++++++++++++++++++++++++ 3 files changed, 115 insertions(+), 1 deletion(-) create mode 100644 web/src/arrival-view.ts create mode 100644 web/src/instructions-view.ts diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts new file mode 100644 index 00000000..3a45fccc --- /dev/null +++ b/web/src/arrival-view.ts @@ -0,0 +1,50 @@ +import { LitElement, html } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +@customElement("arrival-view") +export class ArrivalView extends LitElement { + @property() + tripState: any = null; + + firstUpdated() { + console.log("ArrivalView firstUpdated"); + console.log(this.tripState?.Navigating.visualInstruction); + } + + // updated(changedProperties: any) { + // if (changedProperties.has("visualInstruction") && this.visualInstruction) { + // console.log(this.visualInstruction); + // } + // } + + getArrivalTime(seconds: number) { + const now = new Date(); + const minutesToAdd = Math.round(seconds / 60); + const arrivalTime = new Date(now.getTime() + minutesToAdd * 60000); + const hours = arrivalTime.getHours(); + const minutes = arrivalTime.getMinutes(); + return `${hours}:${minutes < 10 ? '0' : ''}${minutes}`; + } + + getDistanceRemaining(meters: number) { + return `${Math.round(meters).toLocaleString()}m`; + } + + getDurationRemaining(seconds: number) { + const minutes = Math.floor(seconds / 60); + const remainingSeconds = Math.floor(seconds % 60); + return `${minutes}m ${remainingSeconds}s`; + } + + render() { + if (this.tripState?.Navigating) { + return html` +
+

${this.getArrivalTime(this.tripState.Navigating.duration_remaining)}

+

${this.getDistanceRemaining(this.tripState.Navigating.progress.distance_remaining)}

+

${this.getDurationRemaining(this.tripState.Navigating.progress.duration_remaining)}

+
+ `; + } + } +} \ No newline at end of file diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index ccfdde54..f2a9e60f 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -6,6 +6,8 @@ import markerIconUrl from "../node_modules/leaflet/dist/images/marker-icon.png"; import markerIconRetinaUrl from "../node_modules/leaflet/dist/images/marker-icon-2x.png"; import markerShadowUrl from "../node_modules/leaflet/dist/images/marker-shadow.png"; import init, { NavigationController, RouteAdapter } from "ferrostar"; +import "./instructions-view"; +import "./arrival-view"; @customElement("ferrostar-core") export class FerrostarCore extends LitElement { @@ -41,6 +43,27 @@ export class FerrostarCore extends LitElement { height: 100%; width: 100%; } + + instructions-view, + arrival-view { + position: absolute; + left: 50%; + transform: translateX(-50%); + max-width: 80%; + padding: 10px; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + z-index: 1000; + } + + #top-component { + top: 10px; + } + + #bottom-component { + bottom: 10px; + } `, ]; @@ -159,6 +182,11 @@ export class FerrostarCore extends LitElement { } render() { - return html`
`; + return html` +
+ + +
+ `; } } diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts new file mode 100644 index 00000000..903f6d9e --- /dev/null +++ b/web/src/instructions-view.ts @@ -0,0 +1,36 @@ +import { LitElement, html } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +@customElement("instructions-view") +export class InstructionsView extends LitElement { + @property() + tripState: any = null; + + firstUpdated() { + console.log("InstructionsView firstUpdated"); + console.log(this.tripState?.Navigating.visualInstruction); + } + + // updated(changedProperties: any) { + // if (changedProperties.has("visualInstruction") && this.visualInstruction) { + // console.log(this.visualInstruction); + // } + // } + + private roundToNearestTen(meters: number) { + return Math.round(meters / 10) * 10; + } + + render() { + if (this.tripState?.Navigating) { + return html` +
+

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverModifier}

+

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverType}

+

${this.tripState.Navigating.visualInstruction.primaryContent.text}

+

${this.roundToNearestTen(this.tripState.Navigating.progress.distance_to_next_maneuver)}

+
+ `; + } + } +} From 60b07f9f8c328128405b1437fa6f49890950f48f Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Fri, 19 Jul 2024 16:38:58 -0600 Subject: [PATCH 05/17] Fix instructions-view not updating --- web/src/ferrostar-core.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index f2a9e60f..ed67e892 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -28,14 +28,15 @@ export class FerrostarCore extends LitElement { @property({ type: Object }) costingOptions!: any; + // TODO: type + @property({ type: Object }) + tripState: any = null; + routeAdapter: RouteAdapter | null = null; map: L.Map | null = null; navigationController: NavigationController | null = null; currentLocationMapMarker: L.Marker | null = null; - // TODO: type - tripState: any = null; - static styles = [ unsafeCSS(leafletStyles), css` From a97b86482e9e8c90fc1f1eb535ea35919d854b8d Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Fri, 19 Jul 2024 22:58:07 -0600 Subject: [PATCH 06/17] Divide CSS --- web/src/arrival-view.ts | 19 +++++++++++++++---- web/src/ferrostar-core.ts | 4 ---- web/src/instructions-view.ts | 16 +++++++++++++--- 3 files changed, 28 insertions(+), 11 deletions(-) diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index 3a45fccc..e1d4101d 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; @customElement("arrival-view") @@ -6,6 +6,17 @@ export class ArrivalView extends LitElement { @property() tripState: any = null; + static styles = [ + css` + #view-card { + padding: 10px; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + `, + ]; + firstUpdated() { console.log("ArrivalView firstUpdated"); console.log(this.tripState?.Navigating.visualInstruction); @@ -23,7 +34,7 @@ export class ArrivalView extends LitElement { const arrivalTime = new Date(now.getTime() + minutesToAdd * 60000); const hours = arrivalTime.getHours(); const minutes = arrivalTime.getMinutes(); - return `${hours}:${minutes < 10 ? '0' : ''}${minutes}`; + return `${hours}:${minutes < 10 ? "0" : ""}${minutes}`; } getDistanceRemaining(meters: number) { @@ -39,7 +50,7 @@ export class ArrivalView extends LitElement { render() { if (this.tripState?.Navigating) { return html` -
+

${this.getArrivalTime(this.tripState.Navigating.duration_remaining)}

${this.getDistanceRemaining(this.tripState.Navigating.progress.distance_remaining)}

${this.getDurationRemaining(this.tripState.Navigating.progress.duration_remaining)}

@@ -47,4 +58,4 @@ export class ArrivalView extends LitElement { `; } } -} \ No newline at end of file +} diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index ed67e892..9a746aff 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -51,10 +51,6 @@ export class FerrostarCore extends LitElement { left: 50%; transform: translateX(-50%); max-width: 80%; - padding: 10px; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); z-index: 1000; } diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 903f6d9e..7fc03767 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -1,4 +1,4 @@ -import { LitElement, html } from "lit"; +import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; @customElement("instructions-view") @@ -16,6 +16,16 @@ export class InstructionsView extends LitElement { // console.log(this.visualInstruction); // } // } + static styles = [ + css` + #view-card { + padding: 10px; + background-color: rgba(255, 255, 255, 0.9); + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + } + `, + ]; private roundToNearestTen(meters: number) { return Math.round(meters / 10) * 10; @@ -24,11 +34,11 @@ export class InstructionsView extends LitElement { render() { if (this.tripState?.Navigating) { return html` -
+

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverModifier}

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverType}

${this.tripState.Navigating.visualInstruction.primaryContent.text}

-

${this.roundToNearestTen(this.tripState.Navigating.progress.distance_to_next_maneuver)}

+

${this.roundToNearestTen(this.tripState.Navigating.progress.distance_to_next_maneuver)}m

`; } From f2b623a54ddaa8716e9d1dbe1701c35e5d7f7a8a Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Fri, 19 Jul 2024 22:59:35 -0600 Subject: [PATCH 07/17] Remove debug print code --- web/src/arrival-view.ts | 11 ----------- web/src/instructions-view.ts | 10 ---------- 2 files changed, 21 deletions(-) diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index e1d4101d..a872420b 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -17,17 +17,6 @@ export class ArrivalView extends LitElement { `, ]; - firstUpdated() { - console.log("ArrivalView firstUpdated"); - console.log(this.tripState?.Navigating.visualInstruction); - } - - // updated(changedProperties: any) { - // if (changedProperties.has("visualInstruction") && this.visualInstruction) { - // console.log(this.visualInstruction); - // } - // } - getArrivalTime(seconds: number) { const now = new Date(); const minutesToAdd = Math.round(seconds / 60); diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 7fc03767..2d8df27a 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -6,16 +6,6 @@ export class InstructionsView extends LitElement { @property() tripState: any = null; - firstUpdated() { - console.log("InstructionsView firstUpdated"); - console.log(this.tripState?.Navigating.visualInstruction); - } - - // updated(changedProperties: any) { - // if (changedProperties.has("visualInstruction") && this.visualInstruction) { - // console.log(this.visualInstruction); - // } - // } static styles = [ css` #view-card { From aee56bf6f352c6acd39fcce3f0cc7e483532dd99 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Sat, 20 Jul 2024 13:42:27 -0600 Subject: [PATCH 08/17] Fix bad arrival time display in arrival-view --- web/src/arrival-view.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index a872420b..8bfce2fe 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -40,7 +40,7 @@ export class ArrivalView extends LitElement { if (this.tripState?.Navigating) { return html`
-

${this.getArrivalTime(this.tripState.Navigating.duration_remaining)}

+

${this.getArrivalTime(this.tripState.Navigating.progress.duration_remaining)}

${this.getDistanceRemaining(this.tripState.Navigating.progress.distance_remaining)}

${this.getDurationRemaining(this.tripState.Navigating.progress.duration_remaining)}

From 6148f5f82cd6061970d810687a2d2f2712381c59 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Sat, 20 Jul 2024 23:25:19 -0600 Subject: [PATCH 09/17] Use camelCase in tripState --- common/ferrostar/src/navigation_controller/models.rs | 1 + web/src/arrival-view.ts | 6 +++--- web/src/instructions-view.ts | 2 +- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/common/ferrostar/src/navigation_controller/models.rs b/common/ferrostar/src/navigation_controller/models.rs index 6c180160..bd9e4a09 100644 --- a/common/ferrostar/src/navigation_controller/models.rs +++ b/common/ferrostar/src/navigation_controller/models.rs @@ -12,6 +12,7 @@ use serde::{Deserialize, Serialize}; #[derive(Debug, Clone, PartialEq)] #[cfg_attr(feature = "uniffi", derive(uniffi::Record))] #[cfg_attr(feature = "wasm-bindgen", derive(Serialize, Deserialize))] +#[cfg_attr(feature = "wasm-bindgen", serde(rename_all = "camelCase"))] pub struct TripProgress { /// The distance to the next maneuver, in meters. pub distance_to_next_maneuver: f64, diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index 8bfce2fe..d984831f 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -40,9 +40,9 @@ export class ArrivalView extends LitElement { if (this.tripState?.Navigating) { return html`
-

${this.getArrivalTime(this.tripState.Navigating.progress.duration_remaining)}

-

${this.getDistanceRemaining(this.tripState.Navigating.progress.distance_remaining)}

-

${this.getDurationRemaining(this.tripState.Navigating.progress.duration_remaining)}

+

${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}

+

${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}

+

${this.getDurationRemaining(this.tripState.Navigating.progress.durationRemaining)}

`; } diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 2d8df27a..1b483f75 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -28,7 +28,7 @@ export class InstructionsView extends LitElement {

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverModifier}

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverType}

${this.tripState.Navigating.visualInstruction.primaryContent.text}

-

${this.roundToNearestTen(this.tripState.Navigating.progress.distance_to_next_maneuver)}m

+

${this.roundToNearestTen(this.tripState.Navigating.progress.distanceToNextManeuver)}m

`; } From e2cf1de632c78d3a8488690acebf3ec7a033369c Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Sun, 21 Jul 2024 23:51:26 -0600 Subject: [PATCH 10/17] Add maneuver-image component --- web/src/assets/directions/arrive.svg | 4 +++ web/src/assets/directions/arrive_left.svg | 4 +++ web/src/assets/directions/arrive_right.svg | 4 +++ web/src/assets/directions/arrive_straight.svg | 4 +++ web/src/assets/directions/close.svg | 4 +++ web/src/assets/directions/continue.svg | 4 +++ web/src/assets/directions/continue_left.svg | 4 +++ web/src/assets/directions/continue_right.svg | 4 +++ .../directions/continue_slight_left.svg | 4 +++ .../directions/continue_slight_right.svg | 4 +++ .../assets/directions/continue_straight.svg | 4 +++ web/src/assets/directions/continue_uturn.svg | 4 +++ web/src/assets/directions/depart.svg | 4 +++ web/src/assets/directions/depart_left.svg | 4 +++ web/src/assets/directions/depart_right.svg | 4 +++ web/src/assets/directions/depart_straight.svg | 4 +++ .../assets/directions/end_of_road_left.svg | 4 +++ .../assets/directions/end_of_road_right.svg | 4 +++ web/src/assets/directions/flag.svg | 4 +++ web/src/assets/directions/fork.svg | 4 +++ web/src/assets/directions/fork_left.svg | 4 +++ web/src/assets/directions/fork_right.svg | 4 +++ .../assets/directions/fork_slight_left.svg | 4 +++ .../assets/directions/fork_slight_right.svg | 4 +++ web/src/assets/directions/fork_straight.svg | 4 +++ web/src/assets/directions/invalid.svg | 4 +++ web/src/assets/directions/invalid_left.svg | 4 +++ web/src/assets/directions/invalid_right.svg | 4 +++ .../assets/directions/invalid_slight_left.svg | 4 +++ .../directions/invalid_slight_right.svg | 4 +++ .../assets/directions/invalid_straight.svg | 4 +++ web/src/assets/directions/invalid_uturn.svg | 4 +++ web/src/assets/directions/merge_left.svg | 4 +++ web/src/assets/directions/merge_right.svg | 4 +++ .../assets/directions/merge_slight_left.svg | 4 +++ .../assets/directions/merge_slight_right.svg | 4 +++ web/src/assets/directions/merge_straight.svg | 3 ++ web/src/assets/directions/new_name_left.svg | 4 +++ web/src/assets/directions/new_name_right.svg | 4 +++ .../assets/directions/new_name_sharp_left.svg | 4 +++ .../directions/new_name_sharp_right.svg | 4 +++ .../directions/new_name_slight_left.svg | 4 +++ .../directions/new_name_slight_right.svg | 4 +++ .../assets/directions/new_name_straight.svg | 4 +++ .../assets/directions/notification_left.svg | 4 +++ .../assets/directions/notification_right.svg | 4 +++ .../directions/notification_sharp_left.svg | 4 +++ .../directions/notification_sharp_right.svg | 4 +++ .../directions/notification_slight_left.svg | 4 +++ .../directions/notification_slight_right.svg | 4 +++ .../directions/notification_straight.svg | 4 +++ web/src/assets/directions/off_ramp_left.svg | 4 +++ web/src/assets/directions/off_ramp_right.svg | 4 +++ .../directions/off_ramp_slight_left.svg | 4 +++ .../directions/off_ramp_slight_right.svg | 4 +++ web/src/assets/directions/on_ramp_left.svg | 4 +++ web/src/assets/directions/on_ramp_right.svg | 4 +++ .../assets/directions/on_ramp_sharp_left.svg | 4 +++ .../assets/directions/on_ramp_sharp_right.svg | 4 +++ .../assets/directions/on_ramp_slight_left.svg | 4 +++ .../directions/on_ramp_slight_right.svg | 4 +++ .../assets/directions/on_ramp_straight.svg | 4 +++ web/src/assets/directions/rotary.svg | 4 +++ web/src/assets/directions/rotary_left.svg | 4 +++ web/src/assets/directions/rotary_right.svg | 4 +++ .../assets/directions/rotary_sharp_left.svg | 4 +++ .../assets/directions/rotary_sharp_right.svg | 4 +++ .../assets/directions/rotary_slight_left.svg | 4 +++ .../assets/directions/rotary_slight_right.svg | 4 +++ web/src/assets/directions/rotary_straight.svg | 4 +++ web/src/assets/directions/roundabout.svg | 4 +++ web/src/assets/directions/roundabout_left.svg | 4 +++ .../assets/directions/roundabout_right.svg | 4 +++ .../directions/roundabout_sharp_left.svg | 4 +++ .../directions/roundabout_sharp_right.svg | 4 +++ .../directions/roundabout_slight_left.svg | 4 +++ .../directions/roundabout_slight_right.svg | 4 +++ .../assets/directions/roundabout_straight.svg | 4 +++ web/src/assets/directions/turn_left.svg | 4 +++ web/src/assets/directions/turn_right.svg | 4 +++ web/src/assets/directions/turn_sharp_left.svg | 4 +++ .../assets/directions/turn_sharp_right.svg | 4 +++ .../assets/directions/turn_slight_left.svg | 4 +++ .../assets/directions/turn_slight_right.svg | 4 +++ web/src/assets/directions/turn_straight.svg | 4 +++ web/src/assets/directions/updown.svg | 4 +++ web/src/assets/directions/uturn.svg | 4 +++ web/src/instructions-view.ts | 4 +-- web/src/maneuver-image.ts | 34 +++++++++++++++++++ 89 files changed, 383 insertions(+), 2 deletions(-) create mode 100644 web/src/assets/directions/arrive.svg create mode 100644 web/src/assets/directions/arrive_left.svg create mode 100644 web/src/assets/directions/arrive_right.svg create mode 100644 web/src/assets/directions/arrive_straight.svg create mode 100644 web/src/assets/directions/close.svg create mode 100644 web/src/assets/directions/continue.svg create mode 100644 web/src/assets/directions/continue_left.svg create mode 100644 web/src/assets/directions/continue_right.svg create mode 100644 web/src/assets/directions/continue_slight_left.svg create mode 100644 web/src/assets/directions/continue_slight_right.svg create mode 100644 web/src/assets/directions/continue_straight.svg create mode 100644 web/src/assets/directions/continue_uturn.svg create mode 100644 web/src/assets/directions/depart.svg create mode 100644 web/src/assets/directions/depart_left.svg create mode 100644 web/src/assets/directions/depart_right.svg create mode 100644 web/src/assets/directions/depart_straight.svg create mode 100644 web/src/assets/directions/end_of_road_left.svg create mode 100644 web/src/assets/directions/end_of_road_right.svg create mode 100644 web/src/assets/directions/flag.svg create mode 100644 web/src/assets/directions/fork.svg create mode 100644 web/src/assets/directions/fork_left.svg create mode 100644 web/src/assets/directions/fork_right.svg create mode 100644 web/src/assets/directions/fork_slight_left.svg create mode 100644 web/src/assets/directions/fork_slight_right.svg create mode 100644 web/src/assets/directions/fork_straight.svg create mode 100644 web/src/assets/directions/invalid.svg create mode 100644 web/src/assets/directions/invalid_left.svg create mode 100644 web/src/assets/directions/invalid_right.svg create mode 100644 web/src/assets/directions/invalid_slight_left.svg create mode 100644 web/src/assets/directions/invalid_slight_right.svg create mode 100644 web/src/assets/directions/invalid_straight.svg create mode 100644 web/src/assets/directions/invalid_uturn.svg create mode 100644 web/src/assets/directions/merge_left.svg create mode 100644 web/src/assets/directions/merge_right.svg create mode 100644 web/src/assets/directions/merge_slight_left.svg create mode 100644 web/src/assets/directions/merge_slight_right.svg create mode 100644 web/src/assets/directions/merge_straight.svg create mode 100644 web/src/assets/directions/new_name_left.svg create mode 100644 web/src/assets/directions/new_name_right.svg create mode 100644 web/src/assets/directions/new_name_sharp_left.svg create mode 100644 web/src/assets/directions/new_name_sharp_right.svg create mode 100644 web/src/assets/directions/new_name_slight_left.svg create mode 100644 web/src/assets/directions/new_name_slight_right.svg create mode 100644 web/src/assets/directions/new_name_straight.svg create mode 100644 web/src/assets/directions/notification_left.svg create mode 100644 web/src/assets/directions/notification_right.svg create mode 100644 web/src/assets/directions/notification_sharp_left.svg create mode 100644 web/src/assets/directions/notification_sharp_right.svg create mode 100644 web/src/assets/directions/notification_slight_left.svg create mode 100644 web/src/assets/directions/notification_slight_right.svg create mode 100644 web/src/assets/directions/notification_straight.svg create mode 100644 web/src/assets/directions/off_ramp_left.svg create mode 100644 web/src/assets/directions/off_ramp_right.svg create mode 100644 web/src/assets/directions/off_ramp_slight_left.svg create mode 100644 web/src/assets/directions/off_ramp_slight_right.svg create mode 100644 web/src/assets/directions/on_ramp_left.svg create mode 100644 web/src/assets/directions/on_ramp_right.svg create mode 100644 web/src/assets/directions/on_ramp_sharp_left.svg create mode 100644 web/src/assets/directions/on_ramp_sharp_right.svg create mode 100644 web/src/assets/directions/on_ramp_slight_left.svg create mode 100644 web/src/assets/directions/on_ramp_slight_right.svg create mode 100644 web/src/assets/directions/on_ramp_straight.svg create mode 100644 web/src/assets/directions/rotary.svg create mode 100644 web/src/assets/directions/rotary_left.svg create mode 100644 web/src/assets/directions/rotary_right.svg create mode 100644 web/src/assets/directions/rotary_sharp_left.svg create mode 100644 web/src/assets/directions/rotary_sharp_right.svg create mode 100644 web/src/assets/directions/rotary_slight_left.svg create mode 100644 web/src/assets/directions/rotary_slight_right.svg create mode 100644 web/src/assets/directions/rotary_straight.svg create mode 100644 web/src/assets/directions/roundabout.svg create mode 100644 web/src/assets/directions/roundabout_left.svg create mode 100644 web/src/assets/directions/roundabout_right.svg create mode 100644 web/src/assets/directions/roundabout_sharp_left.svg create mode 100644 web/src/assets/directions/roundabout_sharp_right.svg create mode 100644 web/src/assets/directions/roundabout_slight_left.svg create mode 100644 web/src/assets/directions/roundabout_slight_right.svg create mode 100644 web/src/assets/directions/roundabout_straight.svg create mode 100644 web/src/assets/directions/turn_left.svg create mode 100644 web/src/assets/directions/turn_right.svg create mode 100644 web/src/assets/directions/turn_sharp_left.svg create mode 100644 web/src/assets/directions/turn_sharp_right.svg create mode 100644 web/src/assets/directions/turn_slight_left.svg create mode 100644 web/src/assets/directions/turn_slight_right.svg create mode 100644 web/src/assets/directions/turn_straight.svg create mode 100644 web/src/assets/directions/updown.svg create mode 100644 web/src/assets/directions/uturn.svg create mode 100644 web/src/maneuver-image.ts diff --git a/web/src/assets/directions/arrive.svg b/web/src/assets/directions/arrive.svg new file mode 100644 index 00000000..36b99257 --- /dev/null +++ b/web/src/assets/directions/arrive.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/arrive_left.svg b/web/src/assets/directions/arrive_left.svg new file mode 100644 index 00000000..9db02f95 --- /dev/null +++ b/web/src/assets/directions/arrive_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/arrive_right.svg b/web/src/assets/directions/arrive_right.svg new file mode 100644 index 00000000..dc084d2e --- /dev/null +++ b/web/src/assets/directions/arrive_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/arrive_straight.svg b/web/src/assets/directions/arrive_straight.svg new file mode 100644 index 00000000..36b99257 --- /dev/null +++ b/web/src/assets/directions/arrive_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/close.svg b/web/src/assets/directions/close.svg new file mode 100644 index 00000000..a3ace83c --- /dev/null +++ b/web/src/assets/directions/close.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue.svg b/web/src/assets/directions/continue.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/continue.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue_left.svg b/web/src/assets/directions/continue_left.svg new file mode 100644 index 00000000..6097a55e --- /dev/null +++ b/web/src/assets/directions/continue_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue_right.svg b/web/src/assets/directions/continue_right.svg new file mode 100644 index 00000000..111ca661 --- /dev/null +++ b/web/src/assets/directions/continue_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue_slight_left.svg b/web/src/assets/directions/continue_slight_left.svg new file mode 100644 index 00000000..0f38fccc --- /dev/null +++ b/web/src/assets/directions/continue_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue_slight_right.svg b/web/src/assets/directions/continue_slight_right.svg new file mode 100644 index 00000000..fe0b748f --- /dev/null +++ b/web/src/assets/directions/continue_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue_straight.svg b/web/src/assets/directions/continue_straight.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/continue_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/continue_uturn.svg b/web/src/assets/directions/continue_uturn.svg new file mode 100644 index 00000000..c788fdb1 --- /dev/null +++ b/web/src/assets/directions/continue_uturn.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/depart.svg b/web/src/assets/directions/depart.svg new file mode 100644 index 00000000..8a395595 --- /dev/null +++ b/web/src/assets/directions/depart.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/depart_left.svg b/web/src/assets/directions/depart_left.svg new file mode 100644 index 00000000..acde52ba --- /dev/null +++ b/web/src/assets/directions/depart_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/depart_right.svg b/web/src/assets/directions/depart_right.svg new file mode 100644 index 00000000..aad21e0d --- /dev/null +++ b/web/src/assets/directions/depart_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/depart_straight.svg b/web/src/assets/directions/depart_straight.svg new file mode 100644 index 00000000..19eea31c --- /dev/null +++ b/web/src/assets/directions/depart_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/end_of_road_left.svg b/web/src/assets/directions/end_of_road_left.svg new file mode 100644 index 00000000..622fba45 --- /dev/null +++ b/web/src/assets/directions/end_of_road_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/end_of_road_right.svg b/web/src/assets/directions/end_of_road_right.svg new file mode 100644 index 00000000..c8faf0d4 --- /dev/null +++ b/web/src/assets/directions/end_of_road_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/flag.svg b/web/src/assets/directions/flag.svg new file mode 100644 index 00000000..4a3600d8 --- /dev/null +++ b/web/src/assets/directions/flag.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/fork.svg b/web/src/assets/directions/fork.svg new file mode 100644 index 00000000..1098bd0c --- /dev/null +++ b/web/src/assets/directions/fork.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/fork_left.svg b/web/src/assets/directions/fork_left.svg new file mode 100644 index 00000000..1548d935 --- /dev/null +++ b/web/src/assets/directions/fork_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/fork_right.svg b/web/src/assets/directions/fork_right.svg new file mode 100644 index 00000000..3ea6c9f4 --- /dev/null +++ b/web/src/assets/directions/fork_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/fork_slight_left.svg b/web/src/assets/directions/fork_slight_left.svg new file mode 100644 index 00000000..07b2f686 --- /dev/null +++ b/web/src/assets/directions/fork_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/fork_slight_right.svg b/web/src/assets/directions/fork_slight_right.svg new file mode 100644 index 00000000..10316854 --- /dev/null +++ b/web/src/assets/directions/fork_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/fork_straight.svg b/web/src/assets/directions/fork_straight.svg new file mode 100644 index 00000000..61abf311 --- /dev/null +++ b/web/src/assets/directions/fork_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid.svg b/web/src/assets/directions/invalid.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/invalid.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid_left.svg b/web/src/assets/directions/invalid_left.svg new file mode 100644 index 00000000..6097a55e --- /dev/null +++ b/web/src/assets/directions/invalid_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid_right.svg b/web/src/assets/directions/invalid_right.svg new file mode 100644 index 00000000..111ca661 --- /dev/null +++ b/web/src/assets/directions/invalid_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid_slight_left.svg b/web/src/assets/directions/invalid_slight_left.svg new file mode 100644 index 00000000..0f38fccc --- /dev/null +++ b/web/src/assets/directions/invalid_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid_slight_right.svg b/web/src/assets/directions/invalid_slight_right.svg new file mode 100644 index 00000000..fe0b748f --- /dev/null +++ b/web/src/assets/directions/invalid_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid_straight.svg b/web/src/assets/directions/invalid_straight.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/invalid_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/invalid_uturn.svg b/web/src/assets/directions/invalid_uturn.svg new file mode 100644 index 00000000..c788fdb1 --- /dev/null +++ b/web/src/assets/directions/invalid_uturn.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/merge_left.svg b/web/src/assets/directions/merge_left.svg new file mode 100644 index 00000000..83eda6a2 --- /dev/null +++ b/web/src/assets/directions/merge_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/merge_right.svg b/web/src/assets/directions/merge_right.svg new file mode 100644 index 00000000..fe5bbcba --- /dev/null +++ b/web/src/assets/directions/merge_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/merge_slight_left.svg b/web/src/assets/directions/merge_slight_left.svg new file mode 100644 index 00000000..5b690bd8 --- /dev/null +++ b/web/src/assets/directions/merge_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/merge_slight_right.svg b/web/src/assets/directions/merge_slight_right.svg new file mode 100644 index 00000000..8204fd69 --- /dev/null +++ b/web/src/assets/directions/merge_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/merge_straight.svg b/web/src/assets/directions/merge_straight.svg new file mode 100644 index 00000000..c77d889a --- /dev/null +++ b/web/src/assets/directions/merge_straight.svg @@ -0,0 +1,3 @@ + + direction + diff --git a/web/src/assets/directions/new_name_left.svg b/web/src/assets/directions/new_name_left.svg new file mode 100644 index 00000000..6097a55e --- /dev/null +++ b/web/src/assets/directions/new_name_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/new_name_right.svg b/web/src/assets/directions/new_name_right.svg new file mode 100644 index 00000000..111ca661 --- /dev/null +++ b/web/src/assets/directions/new_name_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/new_name_sharp_left.svg b/web/src/assets/directions/new_name_sharp_left.svg new file mode 100644 index 00000000..054f7855 --- /dev/null +++ b/web/src/assets/directions/new_name_sharp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/new_name_sharp_right.svg b/web/src/assets/directions/new_name_sharp_right.svg new file mode 100644 index 00000000..b5ebba16 --- /dev/null +++ b/web/src/assets/directions/new_name_sharp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/new_name_slight_left.svg b/web/src/assets/directions/new_name_slight_left.svg new file mode 100644 index 00000000..0f38fccc --- /dev/null +++ b/web/src/assets/directions/new_name_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/new_name_slight_right.svg b/web/src/assets/directions/new_name_slight_right.svg new file mode 100644 index 00000000..fe0b748f --- /dev/null +++ b/web/src/assets/directions/new_name_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/new_name_straight.svg b/web/src/assets/directions/new_name_straight.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/new_name_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_left.svg b/web/src/assets/directions/notification_left.svg new file mode 100644 index 00000000..6097a55e --- /dev/null +++ b/web/src/assets/directions/notification_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_right.svg b/web/src/assets/directions/notification_right.svg new file mode 100644 index 00000000..111ca661 --- /dev/null +++ b/web/src/assets/directions/notification_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_sharp_left.svg b/web/src/assets/directions/notification_sharp_left.svg new file mode 100644 index 00000000..da36ad1a --- /dev/null +++ b/web/src/assets/directions/notification_sharp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_sharp_right.svg b/web/src/assets/directions/notification_sharp_right.svg new file mode 100644 index 00000000..7679a1ce --- /dev/null +++ b/web/src/assets/directions/notification_sharp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_slight_left.svg b/web/src/assets/directions/notification_slight_left.svg new file mode 100644 index 00000000..0f38fccc --- /dev/null +++ b/web/src/assets/directions/notification_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_slight_right.svg b/web/src/assets/directions/notification_slight_right.svg new file mode 100644 index 00000000..fe0b748f --- /dev/null +++ b/web/src/assets/directions/notification_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/notification_straight.svg b/web/src/assets/directions/notification_straight.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/notification_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/off_ramp_left.svg b/web/src/assets/directions/off_ramp_left.svg new file mode 100644 index 00000000..a62bf592 --- /dev/null +++ b/web/src/assets/directions/off_ramp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/off_ramp_right.svg b/web/src/assets/directions/off_ramp_right.svg new file mode 100644 index 00000000..34577de4 --- /dev/null +++ b/web/src/assets/directions/off_ramp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/off_ramp_slight_left.svg b/web/src/assets/directions/off_ramp_slight_left.svg new file mode 100644 index 00000000..5c58f3ba --- /dev/null +++ b/web/src/assets/directions/off_ramp_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/off_ramp_slight_right.svg b/web/src/assets/directions/off_ramp_slight_right.svg new file mode 100644 index 00000000..c37db801 --- /dev/null +++ b/web/src/assets/directions/off_ramp_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_left.svg b/web/src/assets/directions/on_ramp_left.svg new file mode 100644 index 00000000..25f30f52 --- /dev/null +++ b/web/src/assets/directions/on_ramp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_right.svg b/web/src/assets/directions/on_ramp_right.svg new file mode 100644 index 00000000..55d6d5d8 --- /dev/null +++ b/web/src/assets/directions/on_ramp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_sharp_left.svg b/web/src/assets/directions/on_ramp_sharp_left.svg new file mode 100644 index 00000000..054f7855 --- /dev/null +++ b/web/src/assets/directions/on_ramp_sharp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_sharp_right.svg b/web/src/assets/directions/on_ramp_sharp_right.svg new file mode 100644 index 00000000..7679a1ce --- /dev/null +++ b/web/src/assets/directions/on_ramp_sharp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_slight_left.svg b/web/src/assets/directions/on_ramp_slight_left.svg new file mode 100644 index 00000000..a7b20822 --- /dev/null +++ b/web/src/assets/directions/on_ramp_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_slight_right.svg b/web/src/assets/directions/on_ramp_slight_right.svg new file mode 100644 index 00000000..658c11e8 --- /dev/null +++ b/web/src/assets/directions/on_ramp_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/on_ramp_straight.svg b/web/src/assets/directions/on_ramp_straight.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/on_ramp_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary.svg b/web/src/assets/directions/rotary.svg new file mode 100644 index 00000000..ed627215 --- /dev/null +++ b/web/src/assets/directions/rotary.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_left.svg b/web/src/assets/directions/rotary_left.svg new file mode 100644 index 00000000..95b8c29b --- /dev/null +++ b/web/src/assets/directions/rotary_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_right.svg b/web/src/assets/directions/rotary_right.svg new file mode 100644 index 00000000..12cbda73 --- /dev/null +++ b/web/src/assets/directions/rotary_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_sharp_left.svg b/web/src/assets/directions/rotary_sharp_left.svg new file mode 100644 index 00000000..f0907d5a --- /dev/null +++ b/web/src/assets/directions/rotary_sharp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_sharp_right.svg b/web/src/assets/directions/rotary_sharp_right.svg new file mode 100644 index 00000000..9edb8c37 --- /dev/null +++ b/web/src/assets/directions/rotary_sharp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_slight_left.svg b/web/src/assets/directions/rotary_slight_left.svg new file mode 100644 index 00000000..4b17429a --- /dev/null +++ b/web/src/assets/directions/rotary_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_slight_right.svg b/web/src/assets/directions/rotary_slight_right.svg new file mode 100644 index 00000000..afca7f32 --- /dev/null +++ b/web/src/assets/directions/rotary_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/rotary_straight.svg b/web/src/assets/directions/rotary_straight.svg new file mode 100644 index 00000000..3922c51c --- /dev/null +++ b/web/src/assets/directions/rotary_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout.svg b/web/src/assets/directions/roundabout.svg new file mode 100644 index 00000000..95e35ad9 --- /dev/null +++ b/web/src/assets/directions/roundabout.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_left.svg b/web/src/assets/directions/roundabout_left.svg new file mode 100644 index 00000000..d84d9b84 --- /dev/null +++ b/web/src/assets/directions/roundabout_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_right.svg b/web/src/assets/directions/roundabout_right.svg new file mode 100644 index 00000000..df96a62b --- /dev/null +++ b/web/src/assets/directions/roundabout_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_sharp_left.svg b/web/src/assets/directions/roundabout_sharp_left.svg new file mode 100644 index 00000000..26c32fcd --- /dev/null +++ b/web/src/assets/directions/roundabout_sharp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_sharp_right.svg b/web/src/assets/directions/roundabout_sharp_right.svg new file mode 100644 index 00000000..d8d99300 --- /dev/null +++ b/web/src/assets/directions/roundabout_sharp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_slight_left.svg b/web/src/assets/directions/roundabout_slight_left.svg new file mode 100644 index 00000000..601b61de --- /dev/null +++ b/web/src/assets/directions/roundabout_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_slight_right.svg b/web/src/assets/directions/roundabout_slight_right.svg new file mode 100644 index 00000000..5f8f84c6 --- /dev/null +++ b/web/src/assets/directions/roundabout_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/roundabout_straight.svg b/web/src/assets/directions/roundabout_straight.svg new file mode 100644 index 00000000..3d149e96 --- /dev/null +++ b/web/src/assets/directions/roundabout_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_left.svg b/web/src/assets/directions/turn_left.svg new file mode 100644 index 00000000..6097a55e --- /dev/null +++ b/web/src/assets/directions/turn_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_right.svg b/web/src/assets/directions/turn_right.svg new file mode 100644 index 00000000..111ca661 --- /dev/null +++ b/web/src/assets/directions/turn_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_sharp_left.svg b/web/src/assets/directions/turn_sharp_left.svg new file mode 100644 index 00000000..da36ad1a --- /dev/null +++ b/web/src/assets/directions/turn_sharp_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_sharp_right.svg b/web/src/assets/directions/turn_sharp_right.svg new file mode 100644 index 00000000..7679a1ce --- /dev/null +++ b/web/src/assets/directions/turn_sharp_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_slight_left.svg b/web/src/assets/directions/turn_slight_left.svg new file mode 100644 index 00000000..0f38fccc --- /dev/null +++ b/web/src/assets/directions/turn_slight_left.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_slight_right.svg b/web/src/assets/directions/turn_slight_right.svg new file mode 100644 index 00000000..fe0b748f --- /dev/null +++ b/web/src/assets/directions/turn_slight_right.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/turn_straight.svg b/web/src/assets/directions/turn_straight.svg new file mode 100644 index 00000000..47a8f31d --- /dev/null +++ b/web/src/assets/directions/turn_straight.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/updown.svg b/web/src/assets/directions/updown.svg new file mode 100644 index 00000000..e1cb421e --- /dev/null +++ b/web/src/assets/directions/updown.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/assets/directions/uturn.svg b/web/src/assets/directions/uturn.svg new file mode 100644 index 00000000..a353a20a --- /dev/null +++ b/web/src/assets/directions/uturn.svg @@ -0,0 +1,4 @@ + + direction + + diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 1b483f75..f8a3cbb7 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -1,5 +1,6 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; +import "./maneuver-image"; @customElement("instructions-view") export class InstructionsView extends LitElement { @@ -25,8 +26,7 @@ export class InstructionsView extends LitElement { if (this.tripState?.Navigating) { return html`
-

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverModifier}

-

${this.tripState.Navigating.visualInstruction.primaryContent.maneuverType}

+

${this.tripState.Navigating.visualInstruction.primaryContent.text}

${this.roundToNearestTen(this.tripState.Navigating.progress.distanceToNextManeuver)}m

diff --git a/web/src/maneuver-image.ts b/web/src/maneuver-image.ts new file mode 100644 index 00000000..34d1d176 --- /dev/null +++ b/web/src/maneuver-image.ts @@ -0,0 +1,34 @@ +import { LitElement, PropertyValues, css, html } from "lit"; +import { customElement, property } from "lit/decorators.js"; + +@customElement("maneuver-image") +export class ManeuverImage extends LitElement { + @property() + visualInstruction: any = null; + + static styles = [ + css` + img { + width: 100%; + height: auto; + } + `, + ]; + + getManeuverType() { + return this.visualInstruction.primaryContent.maneuverType; + } + + getManeuverModifier() { + return this.visualInstruction.primaryContent.maneuverModifier; + } + + getFilename() { + return `${this.getManeuverType().replace(" ", "_")}_${this.getManeuverModifier().replace(" ", "_")}.svg`; + } + + render() { + console.log(this.getFilename()) + return html`${this.getManeuverType()} ${this.getManeuverModifier()} maneuver`; + } +} From 6edfe08c9d7e69c7f500a10eee932f179ab21077 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Mon, 22 Jul 2024 17:55:27 -0600 Subject: [PATCH 11/17] Improve CSS of arrival-view and instructions-view --- web/src/arrival-view.ts | 27 ++++++++++++++-------- web/src/instructions-view.ts | 44 +++++++++++++++++++++++++++++------- 2 files changed, 54 insertions(+), 17 deletions(-) diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index d984831f..64b7f785 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -8,11 +8,19 @@ export class ArrivalView extends LitElement { static styles = [ css` - #view-card { - padding: 10px; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + .arrival-view-card { + display: flex; + align-items: center; + justify-content: space-around; + padding: 20px; + background-color: white; + border-radius: 50px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + .arrival-text { + font-size: x-large; + margin: 0 15px; } `, ]; @@ -38,11 +46,12 @@ export class ArrivalView extends LitElement { render() { if (this.tripState?.Navigating) { + console.log(this.tripState); return html` -
-

${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}

-

${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}

-

${this.getDurationRemaining(this.tripState.Navigating.progress.durationRemaining)}

+
+

${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}

+

${this.getDistanceRemaining(this.tripState.Navigating.progress.distanceRemaining)}

+

${this.getDurationRemaining(this.tripState.Navigating.progress.durationRemaining)}

`; } diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index f8a3cbb7..1a6d6914 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -9,11 +9,37 @@ export class InstructionsView extends LitElement { static styles = [ css` - #view-card { - padding: 10px; - background-color: rgba(255, 255, 255, 0.9); - border-radius: 8px; - box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); + .instructions-view-card { + display: flex; + align-items: center; + padding: 20px; + background-color: white; + border-radius: 10px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + } + + maneuver-image { + flex: 1; + max-width: 100px; + min-width: 50px; + height: auto; + margin-right: 20px; + } + + .text-container { + display: flex; + flex-direction: column; + font-size: x-large + } + + .distance-text { + color: purple; + margin: 0; + } + + .instruction-text { + color: black; + margin: 0; } `, ]; @@ -25,10 +51,12 @@ export class InstructionsView extends LitElement { render() { if (this.tripState?.Navigating) { return html` -
+
-

${this.tripState.Navigating.visualInstruction.primaryContent.text}

-

${this.roundToNearestTen(this.tripState.Navigating.progress.distanceToNextManeuver)}m

+
+

${this.tripState.Navigating.visualInstruction.primaryContent.text}

+

${this.roundToNearestTen(this.tripState.Navigating.progress.distanceToNextManeuver)}m

+
`; } From f8b4237fca76cb9d10af674a51895174c7154d08 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Mon, 22 Jul 2024 17:55:48 -0600 Subject: [PATCH 12/17] Remove unused placeholder functions --- web/src/ferrostar-core.ts | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index 9a746aff..d7f76a0c 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -135,7 +135,6 @@ export class FerrostarCore extends LitElement { const initialTripState = this.navigationController.getInitialState(startingLocation); this.tripState = initialTripState; - this.handleStateUpdate(initialTripState, startingLocation); this.resetMap(); @@ -145,14 +144,6 @@ export class FerrostarCore extends LitElement { this.currentLocationMapMarker = L.marker(route.geometry[0]).addTo(this.map!); } - async replaceRoute(route: any, config: any) { - // TODO - } - - async advanceToNextStep() { - // TODO - } - async stopNavigation() { this.resetMap(); this.routeAdapter = null; @@ -161,10 +152,6 @@ export class FerrostarCore extends LitElement { this.currentLocationMapMarker = null; } - private async handleStateUpdate(newState: any, location: any) { - // TODO - } - private onLocationUpdated() { this.tripState = this.navigationController!.updateUserLocation(this.locationProvider.lastLocation, this.tripState); this.currentLocationMapMarker!.setLatLng(this.locationProvider.lastLocation.coordinates); From 14d64532f3eb21785c15ce7ecc3d87c46b40f3fd Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Mon, 22 Jul 2024 18:00:11 -0600 Subject: [PATCH 13/17] Fix bad filename in maneuver-image --- web/src/maneuver-image.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/maneuver-image.ts b/web/src/maneuver-image.ts index 34d1d176..3018a004 100644 --- a/web/src/maneuver-image.ts +++ b/web/src/maneuver-image.ts @@ -24,7 +24,7 @@ export class ManeuverImage extends LitElement { } getFilename() { - return `${this.getManeuverType().replace(" ", "_")}_${this.getManeuverModifier().replace(" ", "_")}.svg`; + return `${this.getManeuverType().replaceAll(" ", "_")}_${this.getManeuverModifier().replaceAll(" ", "_")}.svg`; } render() { From 0edf8896ac8f8f64f8eb6466e3a00b3044dd9c60 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Mon, 22 Jul 2024 18:01:26 -0600 Subject: [PATCH 14/17] Remove debug print code --- web/src/arrival-view.ts | 1 - web/src/instructions-view.ts | 2 +- web/src/maneuver-image.ts | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index 64b7f785..4fcc0a9c 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -46,7 +46,6 @@ export class ArrivalView extends LitElement { render() { if (this.tripState?.Navigating) { - console.log(this.tripState); return html`

${this.getArrivalTime(this.tripState.Navigating.progress.durationRemaining)}

diff --git a/web/src/instructions-view.ts b/web/src/instructions-view.ts index 1a6d6914..fc1f5ba4 100644 --- a/web/src/instructions-view.ts +++ b/web/src/instructions-view.ts @@ -29,7 +29,7 @@ export class InstructionsView extends LitElement { .text-container { display: flex; flex-direction: column; - font-size: x-large + font-size: x-large; } .distance-text { diff --git a/web/src/maneuver-image.ts b/web/src/maneuver-image.ts index 3018a004..7007de18 100644 --- a/web/src/maneuver-image.ts +++ b/web/src/maneuver-image.ts @@ -28,7 +28,6 @@ export class ManeuverImage extends LitElement { } render() { - console.log(this.getFilename()) return html`${this.getManeuverType()} ${this.getManeuverModifier()} maneuver`; } } From 337bf1d6e799031e00dab006ed38db4810f4cb33 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Tue, 23 Jul 2024 23:54:36 -0600 Subject: [PATCH 15/17] Use CSS IDs instead of classes in web demo buttons --- web/index.html | 16 ++++++++-------- web/src/index.css | 2 +- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/web/index.html b/web/index.html index b2809ed1..5cd15eba 100644 --- a/web/index.html +++ b/web/index.html @@ -17,7 +17,7 @@ costingOptions="${{ bicycle: { use_roads: 0.2 } }}" > -

+

@@ -26,7 +26,7 @@

-

+

@@ -79,8 +79,8 @@ core.locationProvider = locationProvider; core.startNavigation(route, config); - document.getElementsByClassName("controls-start")[0].style.display = "none"; - document.getElementsByClassName("controls-stop")[0].style.display = "block"; + document.getElementById("controls-start").style.display = "none"; + document.getElementById("controls-stop").style.display = "block"; }); simulateNavigationButton.addEventListener("click", async () => { @@ -109,15 +109,15 @@ core.locationProvider = locationProvider; core.startNavigation(route, config); - document.getElementsByClassName("controls-start")[0].style.display = "none"; - document.getElementsByClassName("controls-stop")[0].style.display = "block"; + document.getElementById("controls-start").style.display = "none"; + document.getElementById("controls-stop").style.display = "block"; }); document.getElementById("stop").addEventListener("click", () => { core.stopNavigation(); - document.getElementsByClassName("controls-start")[0].style.display = "block"; - document.getElementsByClassName("controls-stop")[0].style.display = "none"; + document.getElementById("controls-start").style.display = "block"; + document.getElementById("controls-stop").style.display = "none"; }); }); diff --git a/web/src/index.css b/web/src/index.css index 8feeae87..67d0e47c 100644 --- a/web/src/index.css +++ b/web/src/index.css @@ -14,7 +14,7 @@ ferrostar-core { gap: 10px; } -.controls-stop { +#controls-stop { display: none; } From a58e604b8253ab96f58cc7464e5acf3b5a981a84 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Tue, 23 Jul 2024 23:56:15 -0600 Subject: [PATCH 16/17] Minor refactor in arrival-view Co-authored-by: Ian Wagner --- web/src/arrival-view.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index 4fcc0a9c..bf91a7dc 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -28,7 +28,7 @@ export class ArrivalView extends LitElement { getArrivalTime(seconds: number) { const now = new Date(); const minutesToAdd = Math.round(seconds / 60); - const arrivalTime = new Date(now.getTime() + minutesToAdd * 60000); + const arrivalTime = new Date(now.getTime() + minutesToAdd * 60 * 1000); const hours = arrivalTime.getHours(); const minutes = arrivalTime.getMinutes(); return `${hours}:${minutes < 10 ? "0" : ""}${minutes}`; From 3e2434e1ede3c1bb6a494ee71d6485fa8f7a4ff7 Mon Sep 17 00:00:00 2001 From: CatMe0w Date: Tue, 23 Jul 2024 23:56:33 -0600 Subject: [PATCH 17/17] Mark a TODO in ferrostar-core Co-authored-by: Ian Wagner --- web/src/ferrostar-core.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/web/src/ferrostar-core.ts b/web/src/ferrostar-core.ts index d7f76a0c..8aa3a6b0 100644 --- a/web/src/ferrostar-core.ts +++ b/web/src/ferrostar-core.ts @@ -145,6 +145,7 @@ export class FerrostarCore extends LitElement { } async stopNavigation() { + // TODO: Factor out the UI layer from the core this.resetMap(); this.routeAdapter = null; this.locationProvider.updateCallback = null;