signalk-chiplog 2.0.0 → 2.2.0

package/lib/tide-forecaster.js

@@ -1,4 +1,9 @@
-const { withTransaction } = require('./database');
+const {
+  createDepartureForecaster,
+  readForecast,
+  getJson,
+  utcTime
+} = require('./departure-forecast');
 
 const TIDE_DEFAULTS = {
   tidesEnabled: true,
@@ -13,53 +18,10 @@ const TIDE_DEFAULTS = {
 // level, not a substitute for a charted "hauteur d'eau".
 const DATUM = 'msl';
 
-const REQUEST_TIMEOUT_MS = 10 * 1000;
-const IDLE_MS = 60 * 1000;
-// Offline is the normal state at sea; retry patiently rather than hammering.
-const FIRST_RETRY_MS = 5 * 60 * 1000;
-const MAX_RETRY_MS = 60 * 60 * 1000;
-// A fetch this long after departure would no longer be "near departure" --
-// the forecast window has mostly gone by, so give up rather than keep trying.
-const MAX_FETCH_AGE_MS = 3 * 60 * 60 * 1000;
-const WINDOW_MS = 24 * 60 * 60 * 1000;
-
-function iso(ms) {
-  return new Date(ms).toISOString();
-}
-
-// The entry most recently departed that has no forecast yet -- fetched or
-// found to have none, either way recorded as a row, so this never re-selects
-// it. Bounded to recent departures: a fetch long after departure would mean
-// requesting a window mostly in the past, which the forecast API does not
-// have, and repeatedly retrying an entry the boat was offline for the whole
-// relevant window of would never succeed anyway.
-function nextPending(db, now) {
-  return db
-    .prepare(
-      `SELECT id, start_time, start_lat AS lat, start_lon AS lon FROM log_entries
-       WHERE start_lat IS NOT NULL AND start_lon IS NOT NULL
-         AND start_time >= ?
-         AND id NOT IN (SELECT entry_id FROM tide_forecasts)
-       ORDER BY id DESC LIMIT 1`
-    )
-    .get(iso(now - MAX_FETCH_AGE_MS));
-}
-
-function save(db, entryId, position, now, points) {
-  withTransaction(db, () => {
-    db.prepare(
-      `INSERT INTO tide_forecasts (entry_id, lat, lon, fetched_at, points)
-       VALUES (?, ?, ?, ?, ?)
-       ON CONFLICT (entry_id) DO NOTHING`
-    ).run(entryId, position.lat, position.lon, iso(now), JSON.stringify(points));
-  });
-}
+const TABLE = 'tide_forecasts';
 
 function createTideForecaster({ db, settings, userAgent, fetch = globalThis.fetch }) {
-  const stopping = new AbortController();
-  let failures = 0;
-
-  async function fetchHeights(position) {
+  async function fetchHeights(position, signal) {
     const endpoint = new URL(settings.tideUrl);
     endpoint.searchParams.set('latitude', String(position.lat));
     endpoint.searchParams.set('longitude', String(position.lon));
@@ -68,87 +30,32 @@ function createTideForecaster({ db, settings, userAgent, fetch = globalThis.fetc
     endpoint.searchParams.set('past_days', '1');
     endpoint.searchParams.set('forecast_days', '2');
 
-    const response = await fetch(endpoint, {
-      headers: { 'User-Agent': userAgent, Accept: 'application/json' },
-      signal: AbortSignal.any([stopping.signal, AbortSignal.timeout(REQUEST_TIMEOUT_MS)])
-    });
-    // Rate limiting or server trouble is worth retrying later; anything else
-    // (an unrecognised parameter, say) is a final answer of "nothing usable".
-    if (response.status === 429 || response.status >= 500) {
-      throw new Error(`Tide service answered HTTP ${response.status}`);
-    }
-    if (!response.ok) {
-      return [];
-    }
-    const result = await response.json();
-    const times = result.hourly?.time ?? [];
-    const heights = result.hourly?.sea_level_height_msl ?? [];
+    const result = await getJson(fetch, endpoint, { userAgent, signal, label: 'Tide service' });
+    const times = result?.hourly?.time ?? [];
+    const heights = result?.hourly?.sea_level_height_msl ?? [];
     return times
-      .map((time, index) => ({ time: `${time}:00.000Z`, height: heights[index] }))
+      .map((time, index) => ({ time: utcTime(time), height: heights[index] }))
       .filter((point) => typeof point.height === 'number' && Number.isFinite(point.height));
   }
 
-  return {
-    async resolveNext() {
-      if (!settings.tidesEnabled) {
-        return { outcome: 'disabled', retryInMs: IDLE_MS };
-      }
-      const now = Date.now();
-      const pending = nextPending(db, now);
-      if (!pending) {
-        return { outcome: 'idle', retryInMs: IDLE_MS };
-      }
-
-      const departure = Date.parse(pending.start_time);
-      const position = { lat: pending.lat, lon: pending.lon };
-
-      let all;
-      try {
-        all = await fetchHeights(position);
-      } catch (error) {
-        if (stopping.signal.aborted) {
-          return { outcome: 'stopped' };
-        }
-        failures += 1;
-        return {
-          outcome: 'failed',
-          error,
-          retryInMs: Math.min(FIRST_RETRY_MS * 2 ** (failures - 1), MAX_RETRY_MS)
-        };
-      }
-      if (stopping.signal.aborted) {
-        return { outcome: 'stopped' };
-      }
-      failures = 0;
-
-      const points = all.filter((point) => {
-        const time = Date.parse(point.time);
-        return time >= departure && time < departure + WINDOW_MS;
-      });
-      save(db, pending.id, position, now, points);
-      return { outcome: points.length > 0 ? 'fetched' : 'no_data', retryInMs: 0 };
-    },
-
-    stop() {
-      stopping.abort();
-    }
-  };
+  return createDepartureForecaster({
+    db,
+    table: TABLE,
+    isEnabled: () => settings.tidesEnabled,
+    fetchPoints: fetchHeights
+  });
 }
 
 function getTideForecast(db, entryId) {
-  const row = db.prepare('SELECT * FROM tide_forecasts WHERE entry_id = ?').get(entryId);
-  if (!row) {
-    return null;
-  }
-  const points = JSON.parse(row.points);
-  if (points.length === 0) {
+  const forecast = readForecast(db, TABLE, entryId);
+  if (!forecast) {
     return null;
   }
   return {
-    position: { lat: row.lat, lon: row.lon },
-    fetchedAt: row.fetched_at,
+    position: forecast.position,
+    fetchedAt: forecast.fetchedAt,
     datum: DATUM,
-    points
+    points: forecast.points
   };
 }
 

package/lib/weather-forecaster.js

@@ -0,0 +1,147 @@
+const {
+  createDepartureForecaster,
+  readForecast,
+  getJson,
+  utcTime
+} = require('./departure-forecast');
+
+const WEATHER_DEFAULTS = {
+  weatherEnabled: true,
+  weatherUrl: 'https://api.open-meteo.com/v1/forecast'
+};
+
+const TABLE = 'weather_forecasts';
+
+// Open-Meteo variable → stored field, per service. The marine one is the
+// same service as the tide (`tideUrl`). Directions keep the service's
+// conventions, which are also Signal K's: wind, waves and swell are where
+// they come *from*, the current where it flows *towards*.
+const ATMOSPHERE = {
+  wind_speed_10m: 'windSpeed',
+  wind_direction_10m: 'windDirection',
+  wind_gusts_10m: 'windGust',
+  pressure_msl: 'pressure',
+  weather_code: 'weatherCode',
+  visibility: 'visibility',
+  precipitation: 'precipitation',
+  cloud_cover: 'cloudCover',
+  temperature_2m: 'airTemperature'
+};
+const SEA = {
+  wave_height: 'waveHeight',
+  wave_direction: 'waveDirection',
+  wave_period: 'wavePeriod',
+  swell_wave_height: 'swellHeight',
+  swell_wave_direction: 'swellDirection',
+  swell_wave_period: 'swellPeriod',
+  sea_surface_temperature: 'seaTemperature',
+  ocean_current_velocity: 'currentSpeed',
+  ocean_current_direction: 'currentDirection'
+};
+const FIELDS = [...Object.values(ATMOSPHERE), ...Object.values(SEA)];
+
+// Values are converted to SI from the units each answer declares, rather than
+// from what was asked for: the marine service ignores `wind_speed_unit` for
+// the current, which comes in km/h.
+const TO_SI = {
+  'm/s': (v) => v,
+  'km/h': (v) => v / 3.6,
+  kn: (v) => (v * 1852) / 3600,
+  mph: (v) => v * 0.44704,
+  '°': (v) => (v * Math.PI) / 180,
+  hPa: (v) => v * 100,
+  '°C': (v) => v + 273.15,
+  '°F': (v) => ((v - 32) * 5) / 9 + 273.15,
+  mm: (v) => v / 1000,
+  inch: (v) => v * 0.0254,
+  '%': (v) => v / 100,
+  m: (v) => v,
+  ft: (v) => v * 0.3048,
+  s: (v) => v,
+  'wmo code': (v) => v
+};
+
+// { "2026-09-17T08:00:00.000Z": { windSpeed: 5.1, ... } } from one answer.
+function readSeries(result, variables, into) {
+  const times = result?.hourly?.time ?? [];
+  const units = result?.hourly_units ?? {};
+  for (const [variable, field] of Object.entries(variables)) {
+    const values = result?.hourly?.[variable];
+    const convert = TO_SI[units[variable]];
+    if (!Array.isArray(values) || !convert) {
+      continue;
+    }
+    times.forEach((time, index) => {
+      const value = values[index];
+      if (typeof value !== 'number' || !Number.isFinite(value)) {
+        return;
+      }
+      const key = utcTime(time);
+      if (!into.has(key)) {
+        into.set(key, {});
+      }
+      into.get(key)[field] = convert(value);
+    });
+  }
+}
+
+function createWeatherForecaster({ db, settings, userAgent, fetch = globalThis.fetch }) {
+  function request(base, variables, position) {
+    const endpoint = new URL(base);
+    endpoint.searchParams.set('latitude', String(position.lat));
+    endpoint.searchParams.set('longitude', String(position.lon));
+    endpoint.searchParams.set('hourly', Object.keys(variables).join(','));
+    endpoint.searchParams.set('timezone', 'UTC');
+    endpoint.searchParams.set('past_days', '1');
+    endpoint.searchParams.set('forecast_days', '2');
+    endpoint.searchParams.set('wind_speed_unit', 'ms');
+    return endpoint;
+  }
+
+  async function fetchWeather(position, signal) {
+    const options = { userAgent, signal };
+    const [atmosphere, sea] = await Promise.all([
+      getJson(fetch, request(settings.weatherUrl, ATMOSPHERE, position), {
+        ...options,
+        label: 'Weather service'
+      }),
+      // The sea state is a complement: far from the sea it has nothing, and a
+      // failure there is not worth losing the wind forecast for.
+      getJson(fetch, request(settings.tideUrl, SEA, position), {
+        ...options,
+        label: 'Marine service'
+      }).catch((error) => {
+        if (signal.aborted) {
+          throw error;
+        }
+        return null;
+      })
+    ]);
+
+    const byTime = new Map();
+    readSeries(atmosphere, ATMOSPHERE, byTime);
+    readSeries(sea, SEA, byTime);
+    return [...byTime.entries()]
+      .sort(([a], [b]) => a.localeCompare(b))
+      .map(([time, values]) => {
+        const point = { time };
+        for (const field of FIELDS) {
+          point[field] = values[field] ?? null;
+        }
+        return point;
+      });
+  }
+
+  return createDepartureForecaster({
+    db,
+    table: TABLE,
+    isEnabled: () => settings.weatherEnabled,
+    fetchPoints: fetchWeather
+  });
+}
+
+function getWeatherForecast(db, entryId) {
+  return readForecast(db, TABLE, entryId);
+}
+
+module.exports = { createWeatherForecaster, getWeatherForecast, WEATHER_DEFAULTS };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-chiplog",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "description": "Automated digital logbook plugin for Signal K, with keyboard/handwritten entry on tablet",
   "main": "index.js",
   "files": [
@@ -71,6 +71,7 @@
     "husky": "^9.1.7",
     "leaflet": "^1.9.4",
     "lint-staged": "^17.5.1",
+    "mediabunny": "1.58.0",
     "preact": "^10.29.8",
     "prettier": "^3.9.6"
   }

package/public/app.css

@@ -111,6 +111,7 @@ main,
 
 .topbar {
   display: flex;
+  flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
@@ -130,6 +131,7 @@ main,
 
 .topbar nav {
   display: flex;
+  flex-wrap: wrap;
   gap: 0.25rem;
 }
 
@@ -215,10 +217,11 @@ main {
   gap: 0.5rem;
 }
 
-/* Side by side on a wide screen, each about half width; stacked below that. */
+/* Side by side on a wide screen, each about half width; stacked below that,
+   never wider than the screen. */
 .card-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr));
   gap: 1rem;
   margin: 1rem 0;
 }
@@ -554,6 +557,15 @@ main {
   min-width: 14rem;
 }
 
+/* Where the position is in relation to the nearest landmark, under it: a
+   reading in its own right, not a heading, so it keeps the coordinates’
+   place and only its colour sets it back. */
+.timeline-landmark {
+  display: block;
+  color: var(--muted);
+  font-size: 0.85em;
+}
+
 .timeline-event .timeline-time {
   font-weight: 600;
 }
@@ -683,12 +695,90 @@ main {
   margin-bottom: 0;
 }
 
+.crew-list {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.crew-role {
+  color: var(--muted);
+  font-size: 0.9rem;
+}
+
 .tide-attribution {
   font-size: 0.8rem;
   margin-top: 0.3rem;
   margin-bottom: 0;
 }
 
+/* Weather forecast */
+
+/* The table scrolls sideways inside its card on a narrow screen; the page never does. */
+.weather-scroll {
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.weather-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+}
+
+.weather-table th,
+.weather-table td {
+  padding: 0.35rem 1rem 0.35rem 0;
+  text-align: left;
+  vertical-align: top;
+  border-bottom: 1px solid var(--border);
+}
+
+.weather-table thead th {
+  color: var(--muted);
+  font-weight: 500;
+}
+
+.weather-table tbody th {
+  font-weight: 400;
+}
+
+.weather-main {
+  display: block;
+  font-weight: 600;
+}
+
+.weather-sub {
+  display: block;
+  color: var(--muted);
+  font-size: 0.85rem;
+}
+
+.weather-alert .weather-main {
+  color: var(--danger);
+}
+
+.weather-direction {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.2rem;
+}
+
+.weather-arrow {
+  display: inline-block;
+  line-height: 1;
+}
+
+.weather-note {
+  font-size: 0.8rem;
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
+
 /* Corrections */
 
 .name-field {
@@ -740,6 +830,14 @@ main {
 }
 
 @media (max-width: 600px) {
+  .topbar {
+    gap: 0.25rem 1rem;
+  }
+
+  .topbar nav a {
+    padding: 0.35rem 0.5rem;
+  }
+
   .passage-header h1 {
     font-size: 1.25rem;
   }
@@ -807,3 +905,115 @@ main {
   color: var(--muted);
   font-weight: 500;
 }
+
+/* Passage animation */
+
+.card-header-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 0.8rem;
+}
+
+.animation-stage {
+  display: flex;
+  justify-content: center;
+}
+
+.animation-canvas {
+  display: block;
+  max-width: 100%;
+  border-radius: 8px;
+  /* The sea the renderer paints, so a tile that has not arrived is not a hole. */
+  background: #aad3df;
+}
+
+.animation-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 0.6rem;
+  margin-top: 0.75rem;
+}
+
+/* Wide enough that swapping Play for Pause does not shift the slider. */
+.animation-play {
+  min-width: 7.5rem;
+}
+
+.animation-slider {
+  flex: 1 1 12rem;
+  min-width: 8rem;
+}
+
+/* These change every frame; proportional digits jitter. */
+.animation-clock,
+.animation-facts dd {
+  font-variant-numeric: tabular-nums;
+}
+
+.animation-speeds {
+  display: flex;
+  gap: 0.3rem;
+}
+
+.animation-speed {
+  padding: 0.35rem 0.6rem;
+  background: none;
+  color: var(--accent);
+}
+
+.animation-speed[aria-pressed='true'] {
+  background: var(--accent);
+  color: var(--accent-contrast);
+}
+
+.animation-facts {
+  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  margin: 0.75rem 0 0;
+}
+
+.animation-seamarks {
+  display: flex;
+  align-items: center;
+  gap: 0.4rem;
+  margin-top: 0.75rem;
+  color: var(--muted);
+}
+
+.animation-export-controls {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  gap: 1rem;
+}
+
+.animation-export-format {
+  display: flex;
+  flex-direction: column;
+  gap: 0.25rem;
+}
+
+.animation-export-format select {
+  font: inherit;
+  padding: 0.4rem 0.6rem;
+  border-radius: 8px;
+  border: 1px solid var(--border);
+  background: var(--surface);
+  color: var(--text);
+}
+
+.animation-progress {
+  margin-top: 1rem;
+}
+
+.animation-progress progress {
+  width: 100%;
+  height: 0.6rem;
+}
+
+@media (max-width: 600px) {
+  .animation-facts {
+    grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
+  }
+}

package/public/entry/entry.css

@@ -350,6 +350,18 @@ textarea:focus-visible {
   margin-bottom: 0.75rem;
 }
 
+.panel-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+}
+
+.panel-header .panel-title {
+  margin-bottom: 0;
+}
+
 /* Manoeuvres */
 
 .pad-grid {
@@ -362,6 +374,65 @@ textarea:focus-visible {
   min-height: 5.5rem;
 }
 
+/* Crew */
+
+.crew-list {
+  list-style: none;
+  margin: 0 0 0.75rem;
+  padding: 0;
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem 1rem;
+}
+
+.crew-role {
+  /* Inherits its colour rather than fixing one, so it stays legible whether
+     it sits on the page background or inside a selected (primary) button. */
+  opacity: 0.75;
+  font-size: 0.85em;
+}
+
+.crew-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
+  gap: 0.75rem;
+}
+
+.crew-button-label {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  line-height: 1.3;
+}
+
+.crew-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.4rem;
+}
+
+.crew-item .big-button {
+  flex: 1;
+}
+
+.crew-item-actions {
+  display: flex;
+  gap: 0.4rem;
+}
+
+.crew-item-actions .icon-button {
+  flex: 1;
+  min-height: 2.5rem;
+}
+
+.crew-editing-note {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  color: var(--muted);
+  margin: 0;
+}
+
 /* Note and handwriting */
 
 .tabs {