Merge pull request #1181 from MeijiRestored/dev

Fog of war improvements

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

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 = `
-        <form id="settings-form" class="w-48 h-144 overflow-y-auto">
+        <form id="settings-form" style="overflow-y: auto; height: 36rem; width: 12rem;">
           <label for="route-opacity">Route Opacity</label>
           <div class="join">
             <input type="number" class="input input-ghost join-item focus:input-ghost input-xs input-bordered w-full max-w-xs" id="route-opacity" name="route_opacity" min="0" max="1" step="0.1" value="${this.routeOpacity}">
@@ -738,6 +739,12 @@ export default class extends BaseController {
             <label for="fog_of_war_meters_info" class="btn-xs join-item">?</label>
           </div>
 
+          <label for="fog_of_war_threshold">Seconds between Fog of War lines</label>
+          <div class="join">
+            <input type="number" class="join-item input input-ghost focus:input-ghost input-xs input-bordered w-full max-w-xs" id="fog_of_war_threshold" name="fog_of_war_threshold" step="1" value="${this.userSettings.fog_of_war_threshold}">
+            <label for="fog_of_war_threshold_info" class="btn-xs join-item">?</label>
+          </div>
+
 
           <label for="meters_between_routes">Meters between routes</label>
           <div class="join">
@@ -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,

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;
@@ -33,38 +33,60 @@ export function drawFogCanvas(map, markers, clearFogRadius) {
 
   const size = map.getSize();
 
-  // Clear the canvas
+  // 1) Paint base fog
   ctx.clearRect(0, 0, size.x, size.y);
-
-  // Keep the light fog for unexplored areas
   ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
   ctx.fillRect(0, 0, size.x, size.y);
 
-  // Set up for "cutting" holes
+  // 2) Cut out holes
   ctx.globalCompositeOperation = 'destination-out';
 
-  // Draw clear circles for each point
-  markers.forEach(point => {
-    const latLng = L.latLng(point[0], point[1]);
-    const pixelPoint = map.latLngToContainerPoint(latLng);
-    const radiusInPixels = metersToPixels(map, clearFogRadius);
+  // 3) Build & sort points
+  const pts = markers
+    .map(pt => {
+      const pixel = map.latLngToContainerPoint(L.latLng(pt[0], pt[1]));
+      return { pixel, time: parseInt(pt[4], 10) };
+    })
+    .sort((a, b) => a.time - b.time);
 
-    // Make explored areas completely transparent
-    const gradient = ctx.createRadialGradient(
-      pixelPoint.x, pixelPoint.y, 0,
-      pixelPoint.x, pixelPoint.y, radiusInPixels
-    );
-    gradient.addColorStop(0, 'rgba(255, 255, 255, 1)');      // 100% transparent
-    gradient.addColorStop(0.85, 'rgba(255, 255, 255, 1)');   // Still 100% transparent
-    gradient.addColorStop(1, 'rgba(255, 255, 255, 0)');      // Fade to fog at edge
+  const radiusPx = Math.max(metersToPixels(map, clearFogRadius), 2);
+  console.log(radiusPx);
 
-    ctx.fillStyle = gradient;
-    ctx.beginPath();
-    ctx.arc(pixelPoint.x, pixelPoint.y, radiusInPixels, 0, Math.PI * 2);
-    ctx.fill();
+  // 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 <= fogLinethreshold) {
+      connected[i]     = true;
+      connected[i + 1] = true;
+    }
+  }
+
+  // 5) Draw circles only for “alone” points
+  pts.forEach((pt, i) => {
+    if (!connected[i]) {
+      ctx.fillStyle = 'rgba(255,255,255,1)';
+      ctx.beginPath();
+      ctx.arc(pt.pixel.x, pt.pixel.y, radiusPx, 0, Math.PI * 2);
+      ctx.fill();
+    }
   });
 
-  // Reset composite operation
+  // 6) Draw rounded lines
+  ctx.lineWidth = radiusPx * 2;
+  ctx.lineCap   = 'round';
+  ctx.lineJoin  = 'round';
+  ctx.strokeStyle = 'rgba(255,255,255,1)';
+
+  for (let i = 0; i < pts.length - 1; i++) {
+    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);
+      ctx.stroke();
+    }
+  }
+
+  // 7) Reset composite operation
   ctx.globalCompositeOperation = 'source-over';
 }
 

app/views/map/_settings_modals.html.erb

@@ -27,6 +27,20 @@
   <label class="modal-backdrop" for="fog_of_war_meters_info">Close</label>
 </div>
 
+<input type="checkbox" id="fog_of_war_threshold_info" class="modal-toggle" />
+<div class="modal focus:z-99" role="dialog">
+  <div class="modal-box">
+    <h3 class="text-lg font-bold">Fog of War Line Threshold</h3>
+    <p class="py-4">
+      Value in seconds.
+    </p>
+    <p class="py-4">
+      Points in the fog are connected by lines. This value is the maximum time between two points to be connected by a line. If the time between two points is greater than this value, they will not be connected.
+    </p>
+  </div>
+  <label class="modal-backdrop" for="fog_of_war_threshold_info">Close</label>
+</div>
+
 <input type="checkbox" id="meters_between_routes_info" class="modal-toggle" />
 <div class="modal focus:z-99" role="dialog">
   <div class="modal-box">