From 80e4e37d433997139bafed59b4ff8d4ce424f78e Mon Sep 17 00:00:00 2001 From: Ian Wagner Date: Thu, 5 Sep 2024 13:40:33 +0900 Subject: [PATCH] Optimize web component display for mobile --- Package.swift | 2 +- android/build.gradle | 2 +- .../composeui/formatting/DistanceFormatter.kt | 2 +- common/Cargo.lock | 2 +- common/ferrostar/Cargo.toml | 2 +- .../src/routing_adapters/osrm/models.rs | 2 +- web/package-lock.json | 6 ++-- web/package.json | 3 +- web/src/arrival-view.ts | 35 ++++++++++++++++--- web/src/ferrostar-map.ts | 3 +- 10 files changed, 43 insertions(+), 16 deletions(-) diff --git a/Package.swift b/Package.swift index 2300fafb..a74f24ec 100644 --- a/Package.swift +++ b/Package.swift @@ -16,7 +16,7 @@ if useLocalFramework { path: "./common/target/ios/libferrostar-rs.xcframework" ) } else { - let releaseTag = "0.10.0" + let releaseTag = "0.10.1" let releaseChecksum = "e4eafc2331e5a6307cdd6257fe73ae8a977fca119938788d976d0218cfbfc5a8" binaryTarget = .binaryTarget( name: "FerrostarCoreRS", diff --git a/android/build.gradle b/android/build.gradle index 8b847e67..4050b373 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -12,5 +12,5 @@ plugins { allprojects { group = "com.stadiamaps.ferrostar" - version = "0.10.0" + version = "0.10.1" } diff --git a/android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/formatting/DistanceFormatter.kt b/android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/formatting/DistanceFormatter.kt index d055c75d..aabe1fff 100644 --- a/android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/formatting/DistanceFormatter.kt +++ b/android/composeui/src/main/java/com/stadiamaps/ferrostar/composeui/formatting/DistanceFormatter.kt @@ -150,7 +150,7 @@ class LocalizedDistanceFormatter( DecimalPrecision.NEAREST_TENTH } } else { - // Longer distances: use m + // Shorter distances: use m unit = MeasureUnit.METER distance = if (distanceInMeters > 100) { diff --git a/common/Cargo.lock b/common/Cargo.lock index a94a777e..9b2373ea 100644 --- a/common/Cargo.lock +++ b/common/Cargo.lock @@ -328,7 +328,7 @@ checksum = "5443807d6dff69373d433ab9ef5378ad8df50ca6298caf15de6e52e24aaf54d5" [[package]] name = "ferrostar" -version = "0.10.0" +version = "0.10.1" dependencies = [ "assert-json-diff", "geo", diff --git a/common/ferrostar/Cargo.toml b/common/ferrostar/Cargo.toml index ebda79eb..57e3bf25 100644 --- a/common/ferrostar/Cargo.toml +++ b/common/ferrostar/Cargo.toml @@ -2,7 +2,7 @@ lints.workspace = true [package] name = "ferrostar" -version = "0.10.0" +version = "0.10.1" readme = "README.md" description = "The core of modern turn-by-turn navigation." keywords = ["navigation", "routing", "valhalla", "osrm"] diff --git a/common/ferrostar/src/routing_adapters/osrm/models.rs b/common/ferrostar/src/routing_adapters/osrm/models.rs index f403de3b..c735451e 100644 --- a/common/ferrostar/src/routing_adapters/osrm/models.rs +++ b/common/ferrostar/src/routing_adapters/osrm/models.rs @@ -157,7 +157,7 @@ pub struct BannerInstruction { pub struct VoiceInstruction { pub announcement: String, pub ssml_announcement: Option, - /// How far (in meters) from the upcoming maneuver the instruction should start being displayed + /// How far (in meters) from the upcoming maneuver the instruction should be announced pub distance_along_geometry: f64, } diff --git a/web/package-lock.json b/web/package-lock.json index f192598f..0e29a802 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -1,12 +1,12 @@ { "name": "@stadiamaps/ferrostar-webcomponents", - "version": "0.9.2", + "version": "0.10.1", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@stadiamaps/ferrostar-webcomponents", - "version": "0.9.2", + "version": "0.10.1", "license": "BSD-3-Clause", "dependencies": { "@stadiamaps/ferrostar": "file:../common/ferrostar/pkg", @@ -25,7 +25,7 @@ }, "../common/ferrostar/pkg": { "name": "@stadiamaps/ferrostar", - "version": "0.9.2", + "version": "0.10.0", "license": "BSD-3-Clause" }, "node_modules/@ampproject/remapping": { diff --git a/web/package.json b/web/package.json index 66b68b08..aa898278 100644 --- a/web/package.json +++ b/web/package.json @@ -3,9 +3,10 @@ "collaborators": [ "Ian Wagner ", "Jacob Fielding ", + "CatMe0w (https://github.com/CatMe0w)", "Luke Seelenbinder " ], - "version": "0.9.2", + "version": "0.10.1", "license": "BSD-3-Clause", "type": "module", "main": "./dist/ferrostar-webcomponents.js", diff --git a/web/src/arrival-view.ts b/web/src/arrival-view.ts index dcd9bec8..0fe9bd19 100644 --- a/web/src/arrival-view.ts +++ b/web/src/arrival-view.ts @@ -1,6 +1,10 @@ import { LitElement, css, html } from "lit"; import { customElement, property } from "lit/decorators.js"; +function roundToNearest(value: number, unit: number): number { + return Math.round(value / unit) * unit +} + @customElement("arrival-view") export class ArrivalView extends LitElement { @property() @@ -19,7 +23,7 @@ export class ArrivalView extends LitElement { } .arrival-text { - font-size: x-large; + font-size: medium; margin: 0 15px; white-space: nowrap; } @@ -36,13 +40,34 @@ export class ArrivalView extends LitElement { } getDistanceRemaining(meters: number) { - return `${Math.round(meters).toLocaleString()}m`; + // TODO: Consider extracting this to Rust; Kotlin has the same logic + if (meters > 1_000) { + let value = meters / 1_000; + + if (value > 10_000) { + value = roundToNearest(value, 1); + } else { + value = roundToNearest(value, 0.1); + } + + return `${value.toLocaleString()}km` + } else { + let value; + if (meters > 100) { + value = roundToNearest(meters, 100); + } else if (meters > 10) { + value = roundToNearest(meters, 10); + } else { + value = roundToNearest(meters, 5); + } + + return `${value.toLocaleString()}m` + } } getDurationRemaining(seconds: number) { const minutes = Math.floor(seconds / 60); - const remainingSeconds = Math.floor(seconds % 60); - return `${minutes}m ${remainingSeconds}s`; + return `${minutes}m`; } render() { @@ -50,8 +75,8 @@ export class ArrivalView extends LitElement { return html`

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

-

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

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

+

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

`; } diff --git a/web/src/ferrostar-map.ts b/web/src/ferrostar-map.ts index 83be73e2..2cda947f 100644 --- a/web/src/ferrostar-map.ts +++ b/web/src/ferrostar-map.ts @@ -77,7 +77,7 @@ export class FerrostarMap extends LitElement { position: absolute; left: 50%; transform: translateX(-50%); - max-width: 80%; + width: 80%; z-index: 1000; } @@ -156,6 +156,7 @@ export class FerrostarMap extends LitElement { pitch: this.pitch, bearing: 0, zoom: this.zoom, + attributionControl: {compact: true} }); if (this.useIntegratedSearchBox) {