From e5075d59d3778ea5425cd358e9e3efaf97d53fc8 Mon Sep 17 00:00:00 2001 From: MeijiRestored <42336759+MeijiRestored@users.noreply.github.com> Date: Wed, 14 May 2025 21:04:47 +0200 Subject: [PATCH] configurable time threshold --- app/controllers/api/v1/settings_controller.rb | 2 +- app/javascript/controllers/maps_controller.js | 26 ++++++++++++------- app/javascript/maps/fog_of_war.js | 7 +++-- app/views/map/_settings_modals.html.erb | 14 ++++++++++ 4 files changed, 35 insertions(+), 14 deletions(-) diff --git a/app/controllers/api/v1/settings_controller.rb b/app/controllers/api/v1/settings_controller.rb index 4237e083..0471f49b 100644 --- a/app/controllers/api/v1/settings_controller.rb +++ b/app/controllers/api/v1/settings_controller.rb @@ -30,7 +30,7 @@ class Api::V1::SettingsController < ApiController :time_threshold_minutes, :merge_threshold_minutes, :route_opacity, :preferred_map_layer, :points_rendering_mode, :live_map_enabled, :immich_url, :immich_api_key, :photoprism_url, :photoprism_api_key, - :speed_colored_routes, :speed_color_scale + :speed_colored_routes, :speed_color_scale, :fog_of_war_threshold ) end end diff --git a/app/javascript/controllers/maps_controller.js b/app/javascript/controllers/maps_controller.js index 5c1eefab..c34c9de0 100644 --- a/app/javascript/controllers/maps_controller.js +++ b/app/javascript/controllers/maps_controller.js @@ -45,6 +45,7 @@ export default class extends BaseController { this.timezone = this.element.dataset.timezone; this.userSettings = JSON.parse(this.element.dataset.user_settings); this.clearFogRadius = parseInt(this.userSettings.fog_of_war_meters) || 50; + this.fogLinethreshold = parseInt(this.userSettings.fog_of_war_threshold) || 90; this.routeOpacity = parseFloat(this.userSettings.route_opacity) || 0.6; this.distanceUnit = this.element.dataset.distance_unit || "km"; this.pointsRenderingMode = this.userSettings.points_rendering_mode || "raw"; @@ -175,13 +176,13 @@ export default class extends BaseController { // Update event handlers this.map.on('moveend', () => { if (document.getElementById('fog')) { - this.updateFog(this.markers, this.clearFogRadius); + this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold); } }); this.map.on('zoomend', () => { if (document.getElementById('fog')) { - this.updateFog(this.markers, this.clearFogRadius); + this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold); } }); @@ -198,7 +199,7 @@ export default class extends BaseController { if (e.name === 'Fog of War') { fogEnabled = true; document.getElementById('fog').style.display = 'block'; - this.updateFog(this.markers, this.clearFogRadius); + this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold); } }); @@ -212,7 +213,7 @@ export default class extends BaseController { // Update fog circles on zoom and move this.map.on('zoomend moveend', () => { if (fogEnabled) { - this.updateFog(this.markers, this.clearFogRadius); + this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold); } }); @@ -350,7 +351,7 @@ export default class extends BaseController { // Update fog of war if enabled if (this.map.hasLayer(this.fogOverlay)) { - this.updateFog(this.markers, this.clearFogRadius); + this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold); } // Update the last marker @@ -587,7 +588,7 @@ export default class extends BaseController { // Update fog if enabled if (this.map.hasLayer(this.fogOverlay)) { - this.updateFog(this.markers, this.clearFogRadius); + this.updateFog(this.markers, this.clearFogRadius, this.fogLinethreshold); } }) .catch(error => { @@ -623,12 +624,12 @@ export default class extends BaseController { } } - updateFog(markers, clearFogRadius) { + updateFog(markers, clearFogRadius, fogLinethreshold) { const fog = document.getElementById('fog'); if (!fog) { initializeFogCanvas(this.map); } - requestAnimationFrame(() => drawFogCanvas(this.map, markers, clearFogRadius)); + requestAnimationFrame(() => drawFogCanvas(this.map, markers, clearFogRadius, fogLinethreshold)); } initializeDrawControl() { @@ -724,7 +725,7 @@ export default class extends BaseController { // Form HTML div.innerHTML = ` -
+
@@ -738,6 +739,12 @@ export default class extends BaseController {
+ +
+ + +
+
@@ -863,6 +870,7 @@ export default class extends BaseController { settings: { route_opacity: event.target.route_opacity.value, fog_of_war_meters: event.target.fog_of_war_meters.value, + fog_of_war_threshold: event.target.fog_of_war_threshold.value, meters_between_routes: event.target.meters_between_routes.value, minutes_between_routes: event.target.minutes_between_routes.value, time_threshold_minutes: event.target.time_threshold_minutes.value, diff --git a/app/javascript/maps/fog_of_war.js b/app/javascript/maps/fog_of_war.js index f46cb55e..b715c5f0 100644 --- a/app/javascript/maps/fog_of_war.js +++ b/app/javascript/maps/fog_of_war.js @@ -23,7 +23,7 @@ export function initializeFogCanvas(map) { return fog; } -export function drawFogCanvas(map, markers, clearFogRadius) { +export function drawFogCanvas(map, markers, clearFogRadius, fogLinethreshold) { const fog = document.getElementById('fog'); // Return early if fog element doesn't exist or isn't a canvas if (!fog || !(fog instanceof HTMLCanvasElement)) return; @@ -42,7 +42,6 @@ export function drawFogCanvas(map, markers, clearFogRadius) { ctx.globalCompositeOperation = 'destination-out'; // 3) Build & sort points - const thresholdSec = 90; // points will be joined if < 1m30 of time difference const pts = markers .map(pt => { const pixel = map.latLngToContainerPoint(L.latLng(pt[0], pt[1])); @@ -56,7 +55,7 @@ export function drawFogCanvas(map, markers, clearFogRadius) { // 4) Mark which pts are part of a line const connected = new Array(pts.length).fill(false); for (let i = 0; i < pts.length - 1; i++) { - if (pts[i + 1].time - pts[i].time <= thresholdSec) { + if (pts[i + 1].time - pts[i].time <= fogLinethreshold) { connected[i] = true; connected[i + 1] = true; } @@ -79,7 +78,7 @@ export function drawFogCanvas(map, markers, clearFogRadius) { ctx.strokeStyle = 'rgba(255,255,255,1)'; for (let i = 0; i < pts.length - 1; i++) { - if (pts[i + 1].time - pts[i].time <= thresholdSec) { + if (pts[i + 1].time - pts[i].time <= fogLinethreshold) { ctx.beginPath(); ctx.moveTo(pts[i].pixel.x, pts[i].pixel.y); ctx.lineTo(pts[i + 1].pixel.x, pts[i + 1].pixel.y); diff --git a/app/views/map/_settings_modals.html.erb b/app/views/map/_settings_modals.html.erb index 6703f5f2..24d965a5 100644 --- a/app/views/map/_settings_modals.html.erb +++ b/app/views/map/_settings_modals.html.erb @@ -27,6 +27,20 @@
+ + +