@signalk/charts-plugin 3.7.0 → 3.8.0

package/plugin/tokenProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tokenProvider.js","sourceRoot":"","sources":["../src/tokenProvider.ts"],"names":[],"mappings":"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"}

package/plugin/types.d.ts

@@ -1,10 +1,15 @@
 import type { OutgoingHttpHeaders } from 'http';
-type MapSourceType = 'tilelayer' | 'S-57' | 'WMS' | 'WMTS' | 'mapstyleJSON' | 'tileJSON';
+import type { DatabaseSync } from 'node:sqlite';
+export type MapSourceType = 'tilelayer' | 'S-57' | 'WMS' | 'WMTS' | 'mapstyleJSON' | 'tileJSON';
 export interface MBTilesHandle {
+    putTile: (z: number, x: number, y: number, tile: Buffer, callback: (err: Error | null) => void) => void;
+    startWriting: (callback: (err: Error | null) => void) => void;
+    putInfo: (info: MBTilesMetadata, callback: (err: Error | null) => void) => void;
     getTile: (z: number, x: number, y: number, callback: (err: Error | null, tile: Buffer, headers: OutgoingHttpHeaders) => void) => void;
     getInfo: (callback: (err: Error | null, metadata: MBTilesMetadata) => void) => void;
     close: (callback: (err: Error | null) => void) => void;
     on: (event: 'error', listener: (err: Error) => void) => MBTilesHandle;
+    _db?: DatabaseSync;
 }
 export interface MBTilesMetadata {
     name?: string;
@@ -24,6 +29,10 @@ export interface ChartProvider {
     _filePath: string;
     _mbtilesHandle?: MBTilesHandle;
     _flipY?: boolean;
+    _tokenProvider?: {
+        ensureFreshToken: () => Promise<void>;
+        invalidateToken: () => void;
+    };
     identifier: string;
     name: string;
     description: string;
@@ -62,5 +71,31 @@ export interface OnlineChartProvider {
     style: string;
     layers: string[];
 }
-export {};
+export interface TokenProviderConfig {
+    identifier: string;
+    name: string;
+    description?: string;
+    type?: MapSourceType;
+    format?: string;
+    scale?: number;
+    minzoom?: number;
+    maxzoom?: number;
+    bounds?: number[];
+    tokenEndpoint: {
+        url: string;
+        method?: 'GET' | 'POST';
+        headers?: {
+            [key: string]: string;
+        };
+        body?: string;
+        ttlSeconds: number;
+        timeoutMs?: number;
+    };
+    tile: {
+        url: string;
+        headers?: {
+            [key: string]: string;
+        };
+    };
+}
 //# sourceMappingURL=types.d.ts.map

package/plugin/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"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"}

package/public/index.html

@@ -1,129 +1,408 @@
 <!doctype html>
 <html>
   <head>
-    <link rel="stylesheet" href="style.css" />
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1"
+    />
     <title>Signalk charts-addin</title>
-  </head>
+    <link rel="stylesheet" href="style.css" />
+    <!-- <script src="js/jquery-3.5.1.min.js"></script> -->
+    <!-- <link rel="stylesheet" href="leaflet/leaflet.css" />
+    <script src="leaflet/leaflet.js"></script> -->
+    <link
+      rel="stylesheet"
+      href="leaflet/leaflet.css"
+      integrity="sha256-NUUnAaVo8SnoYWxXujGmOEPH77UfTAWnMoAdgvk7Llc="
+      crossorigin=""
+    />
+    <script
+      src="leaflet/leaflet.js"
+      integrity="sha256-+Vr0Lt/cDlE+ps7z+a656+YmyuGPiju0p3DfhReTI/w="
+      crossorigin=""
+    ></script>
 
+    <link rel="stylesheet" href="leaflet/leaflet.draw.css" />
+    <script src="leaflet/leaflet.draw.js"></script>
+  </head>
   <body>
-    <fieldset>
-      <legend>Seed charts to prefetch tiles for offline usage.</legend>
-      <strong>Select chart provider:</strong><br />
-      <label for="chart">Chart:</label>
-      <select id="chart" name="chart" required></select>
-      <br />
-      <strong>Select region type:</strong>
-      <br />
-      <!-- Choice 1: Predefined Region -->
-      <label>
-        <input type="radio" name="inputType" value="region" checked />
-        Region
-      </label>
-      <select id="region" name="region"></select>
+    <div id="map" style="width: 100%; height: 100vh"></div>
 
-      <br />
+    <div id="jobsModal" class="modal hidden">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h3>Job Progress</h3>
+          <button id="closeJobsModal" onclick="toggleJobsModal()">✖</button>
+        </div>
 
-      <!-- Choice 2: Bounding Box -->
-      <label>
-        <input type="radio" name="inputType" value="bbox" />
-        Bounding Box (minLon, minLat, maxLon, maxLat) West to East, South to
-        North
-      </label>
-      <div>
-        <input
-          type="number"
-          id="bboxMinLon"
-          placeholder="minLon"
-          step="0.0001"
-          disabled
-          value="16.51"
-        />
-        <input
-          type="number"
-          id="bboxMinLat"
-          placeholder="minLat"
-          step="0.0001"
-          disabled
-          value="58.59"
-        />
-        <input
-          type="number"
-          id="bboxMaxLon"
-          placeholder="maxLon"
-          step="0.0001"
-          disabled
-          value="16.60"
-        />
-        <input
-          type="number"
-          id="bboxMaxLat"
-          placeholder="maxLat"
-          step="0.0001"
-          disabled
-          value="58.65"
-        />
+        <div id="jobsScroll">
+          <div id="jobsGrid" class="job-cards"></div>
+        </div>
+        <span id="noJobsMessage" class="hidden"
+          >No jobs added, click on region to add seeding job</span
+        >
+        <template id="job-card-template">
+          <div class="job-card">
+            <div class="job-card-header">
+              <div>
+                <strong class="job-region"></strong>
+                <div class="job-chart"></div>
+              </div>
+              <button class="job-remove" title="Remove job from this list">
+                &times;
+              </button>
+            </div>
+
+            <div class="job-status"></div>
+            <div class="job-card-progress"></div>
+
+            <div class="job-card-stats-actions">
+              <div class="job-card-stats">
+                <div>Total: <span class="job-total"></span></div>
+                <div class="job-seed hidden">
+                  <div>Downloaded: <span class="job-downloaded"></span></div>
+                  <div>Cached: <span class="job-cached"></span></div>
+                  <div>Failed: <span class="job-failed"></span></div>
+                </div>
+                <div class="job-delete hidden">
+                  <div>Deleted: <span class="job-deleted"></span></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </template>
       </div>
-      <!-- Choice 3: Tile -->
-      <!-- <label>
-            <input type="radio" name="inputType" value="tile">
-            Tile (x, y, z)
-        </label>
-        <div>
-            <input type="number" id="tileX" placeholder="x" disabled>
-            <input type="number" id="tileY" placeholder="y" disabled>
-            <input type="number" id="tileZ" placeholder="z" disabled>
-        </div> -->
+    </div>
 
-      <strong>Select max zoom:</strong><br />
-      <label for="maxZoom">Max Zoom</label>
-      <select id="maxZoom" name="maxZoom" required>
-        <option value="4">4</option>
-        <option value="5">5</option>
-        <option value="6">6</option>
-        <option value="7">7</option>
-        <option value="8">8</option>
-        <option value="9">9</option>
-        <option value="10">10</option>
-        <option value="11">11</option>
-        <option value="12">12</option>
-        <option value="13">13</option>
-        <option value="14">14</option>
-        <option value="15" selected="selected">15</option>
-        <option value="16">16</option>
-        <option value="17">17</option>
-        <option value="18">18</option>
-        <option value="19">19</option>
-        <option value="20">20</option>
-      </select>
+    <div id="regionModal" class="modal hidden">
+      <div class="modal-content" style="max-width: fit-content">
+        <div class="modal-header">
+          <h3>Edit Region Job</h3>
+          <button id="cancelRegion" onclick="closeRegionModal()">✖</button>
+        </div>
+        <fieldset>
+          <legend>Region Information</legend>
+          <label for="regionName"><strong>Region Name:</strong></label>
+          <input type="text" id="regionName" oninput="updateRegionButtons()" />
+          <button id="saveRegion" class="btn btn--primary">Save</button>
+        </fieldset>
 
-      <br />
-      <button id="createJobButton">Create Seeding Job</button>
-    </fieldset>
+        <fieldset>
+          <legend>Seed charts to prefetch tiles for offline usage.</legend>
+          <label for="chartSelect"
+            ><strong>Select chart provider:</strong></label
+          >
+          <select id="chartSelect" name="chartSelect" required></select>
 
-    <div id="output">
-      <table id="activeJobsTable" aria-live="polite">
-        <thead>
-          <tr>
-            <th>#</th>
-            <th>Chart</th>
-            <th>Region</th>
-            <th>Total tiles</th>
-            <th>Downloaded</th>
-            <th>Cached</th>
-            <th>Failed</th>
-            <th>Progress</th>
-            <th>Status</th>
-            <th>Actions</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr>
-            <td colspan="7" class="muted">Loading progress…</td>
-          </tr>
-        </tbody>
-      </table>
+          <label for="minZoom"><strong>Min Zoom:</strong></label>
+          <input type="number" id="minZoom" min="0" max="22" value="1" />
+
+          <label for="maxZoom"><strong>Max Zoom:</strong></label>
+          <input type="number" id="maxZoom" min="0" max="22" value="15" />
+
+          <strong>Options:</strong><br />
+          <input type="checkbox" id="refetch" name="refetch" value="refetch" />
+          <label for="refetch"> Refresh all tiles</label><br />
+          <input type="checkbox" id="mbtiles" name="mbtiles" value="mbtiles" />
+          <label for="mbtiles"> Create a separate mbtiles for this region</label
+          ><br />
+          <input type="checkbox" id="vacuum" name="vacuum" value="vacuum" />
+          <label for="vacuum"> Compact file after seeding</label><br />
+          <button
+            id="createJobButton"
+            class="btn btn--primary"
+            disabled
+            onclick="createJob('start')"
+          >
+            Create Seeding Job
+          </button>
+          <button
+            id="deleteButton"
+            class="btn btn--danger"
+            type="button"
+            disabled
+            onclick="createJob('delete')"
+          >
+            Delete Cached Tiles for this region
+          </button>
+        </fieldset>
+        <span id="response" class="hidden"
+          >New seeding job added, Click jobs to view details</span
+        >
+      </div>
+    </div>
+
+    <div id="help" class="modal hidden">
+      <div class="modal-content" style="max-width: fit-content">
+        <div class="modal-header">
+          <h1 id="using-the-chart-plugin">Using the Chart Plugin</h1>
+          <button id="closeHelpModal" onclick="toggleHelpModal()">✖</button>
+        </div>
+
+        <h2 id="overview">Overview</h2>
+        <p>
+          The graphical interface provides several tools for navigating the
+          chart, defining cache regions, and managing chart data. The buttons
+          highlighted in the interface correspond to the main controls available
+          to the user.
+        </p>
+        <p><img src="images/overview.png" alt="Main UI" /></p>
+        <h3 id="zoom-controls">Zoom Controls</h3>
+        <p>
+          The <strong>Zoom In (+)</strong> and
+          <strong>Zoom Out (−)</strong> buttons allow the user to change the map
+          scale.
+        </p>
+        <ul>
+          <li>
+            <p>
+              <strong>Zoom In (+)</strong><br />Increases the zoom level to
+              display more detailed chart information.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Zoom Out (−)</strong><br />Decreases the zoom level to
+              show a larger geographic area.
+            </p>
+          </li>
+        </ul>
+        <p>
+          These controls behave similarly to standard map applications. Zooming
+          can also be performed using the mouse scroll wheel.
+        </p>
+        <h3 id="region-creation-tools">Region Creation Tools</h3>
+        <p>
+          The region creation tools allow the user to define areas of the map
+          for chart caching.
+        </p>
+        <ul>
+          <li>
+            <p>
+              <strong>Create Rectangular Region</strong><br />Enables the user
+              to draw a rectangular area on the chart. This region defines the
+              boundaries where chart data should be cached.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Create Polygon Region</strong><br />Allows the user to
+              draw a custom polygon by placing multiple points on the map. This
+              is useful when the area of interest does not fit a simple
+              rectangle.
+            </p>
+          </li>
+        </ul>
+        <p>
+          These regions determine which chart tiles or map data will be included
+          in the cache.
+        </p>
+        <h3 id="region-editing-tools">Region Editing Tools</h3>
+        <p>
+          Once regions are created, they can be modified using the editing
+          tools.
+        </p>
+        <ul>
+          <li>
+            <p>
+              <strong>Edit Region</strong><br />Allows the user to modify an
+              existing region by adjusting its shape or vertices.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Delete Region</strong><br />Removes the selected region
+              from the map.
+            </p>
+          </li>
+        </ul>
+        <h3 id="active-seeding-jobs">Active Seeding Jobs</h3>
+        <p>
+          The <strong>Active Seeding Jobs</strong> button displays currently
+          running caching or seeding processes.
+        </p>
+        <p>
+          From this panel, users can monitor the progress of jobs that are
+          downloading or preparing chart data for offline use.
+        </p>
+        <h3 id="chart-layers">Chart Layers</h3>
+        <p>
+          The <strong>Chart Layers</strong> button opens a layer selection menu.
+        </p>
+        <p>
+          Users can enable or disable different chart layers to control what
+          information is visible on the map. Only chart layers that support
+          proxy will be visible in this menu.
+        </p>
+        <h3 id="help">Help</h3>
+        <p>
+          The <strong>Help</strong> button opens the help overlay shown in the
+          interface.
+        </p>
+        <p>
+          This overlay provides a quick visual guide explaining the available
+          controls and their functions.
+        </p>
+        <h2 id="region-job-configuration">Region Job Configuration</h2>
+        <p>
+          The <strong>Edit Region Job</strong> dialog allows users to configure
+          caching (seeding) settings for a selected region. Seeding downloads
+          chart tiles for the defined region so they are available locally for
+          offline use.
+        </p>
+        <p><img src="images/region.png" alt="Region" /></p>
+        <h3 id="region-information">Region Information</h3>
+        <p>
+          <code>Region Name</code> field defines the name of the selected
+          region. This name is used to identify the region in the interface and
+          in the list of configured jobs.
+        </p>
+        <p>
+          <code>Save:</code> button stores any changes made to the region name.
+        </p>
+        <h3 id="chart-seeding-configuration">Chart Seeding Configuration</h3>
+        <p>
+          This section configures how chart tiles will be downloaded and stored
+          for the selected region.
+        </p>
+        <p>
+          <code>Select Chart Provider:</code> dropdown allows the user to choose
+          which chart source should be used when downloading tiles. Different
+          providers may supply different chart styles or datasets depending on
+          the configured system.
+        </p>
+        <p>
+          <code>Minimum Zoom:</code> value defines the lowest zoom level that
+          will be downloaded. Lower zoom levels cover larger geographic areas
+          with fewer tiles and are useful for viewing charts while zoomed far
+          out.
+        </p>
+        <p>
+          <code>Maximum Zoom:</code> value defines the highest zoom level that
+          will be downloaded. Higher zoom levels contain more detailed chart
+          data but require significantly more tiles and storage space.
+        </p>
+        <h4 id="options">Options</h4>
+        <p>
+          <code>Refresh All Tiles</code> If enabled, the seeding process will
+          re-download tiles even if they already exist in the cache. This is
+          useful when charts have been updated and the local cache needs to be
+          refreshed.
+        </p>
+        <p>
+          <code>Create a Separate MBTiles for This Region:</code> When enabled,
+          all tiles downloaded for this region will be copied to a dedicated
+          MBTiles database file. First the tiles will be downloaded to the
+          global cache, once the download is complete a new mbtiles file will be
+          created to include the downloaded tiles.
+        </p>
+        <p>This can be useful for:</p>
+        <ul>
+          <li>Sharing maps with outher sailors</li>
+          <li>
+            Creating offline maps to be used by other chart plotter software,
+            e.g. OpenCPN
+          </li>
+        </ul>
+        <p>
+          <code>Compact File After Seeding</code> If this option is enabled, the
+          MBTiles database will be compacted after the seeding process finishes.
+          Compaction reduces file size and improves storage efficiency by
+          cleaning up unused database space created during the tile download
+          process.
+        </p>
+        <p>
+          ⚠️ <strong>Warning:</strong> This will temporarily create a new
+          mbtiles file and copy the tiles to the new database. You must have
+          enough diskspace to perform this operation.
+        </p>
+        <h4 id="actions">Actions</h4>
+        <p>
+          <code>Create Seeding Job</code> button starts a caching job for the
+          selected region using the configured settings. The job will download
+          all tiles required for the region between the selected minimum and
+          maximum zoom levels. Progress and status information can be monitored
+          in the Job Progress panel.
+        </p>
+        <p>
+          <code>Delete Cached Tiles for This Region:</code> button removes all
+          cached tiles associated with the selected region. This operation frees
+          storage space from the mbtiles but not necesarily the diskspace.
+        </p>
+        <p>
+          ⚠️ <strong>Warning:</strong> This action permanently deletes the
+          cached data for the region.
+        </p>
+        <p>
+          ⚠️ <strong>Warning:</strong> Eventhough the tiles are removed from the
+          cache, the database size on disk will not shrink due to how sqlite
+          database are managed. Use compact file after seeding option to free
+          the diskspace.
+        </p>
+        <h2 id="job-progress">Job Progress</h2>
+        <p>
+          The Job Progress dialog displays the status of active chart seeding
+          jobs.<br />Each job represents a task that downloads chart tiles for a
+          defined region so they are available for offline use. Jobs are
+          ephemeral: If the signalk server is restarted these jobs will also be
+          removed, but the cached tiles will remain in the cache.
+        </p>
+        <p><img src="images/jobs.png" alt="Region" /></p>
+        <hr />
+        <h3 id="job-information">Job Information</h3>
+        <p>Each job card provides a summary of the seeding operation.</p>
+        <p>
+          <code>Region:</code> field shows the name of the region associated
+          with the job.<br />This corresponds to the region defined during the
+          region creation or editing process. The line below the region name
+          indicates the chart provider being used to download tiles.
+        </p>
+        <p>
+          <code>Job Status:</code> indicates the current activity of the job.
+          Possible statuses are: <strong>Seeding</strong> – Tiles are currently
+          being downloaded. and - <strong>Completed</strong> – The job has
+          finished successfully.
+        </p>
+        <p>
+          <code>Progress Bar:</code> visually represents how much of the job has
+          been completed. The percentage shown next to the bar indicates the
+          proportion of tiles processed relative to the total number of tiles
+          required for the region and zoom levels.
+        </p>
+        <p>
+          Each job displays several counters that provide detailed information
+          about the seeding process.
+        </p>
+        <p>
+          <code>Total:</code> Indicates an estimate of the total number of tiles
+          that must be processed for the job with up to %10 error depending on
+          the size and shape of the region.
+        </p>
+        <p>
+          <code>Downloaded:</code> Represents the number of tiles successfully
+          retrieved from the chart provider during the current seeding process.
+        </p>
+        <p>
+          <code>Cached:</code> Indicates the number of tiles that were already
+          present in the cache and did not need to be downloaded again. This can
+          occur when seeding overlaps with previously cached data.
+        </p>
+        <p>
+          <code>Failed:</code> Represents the number of tiles that could not be
+          downloaded due to network errors, provider issues, or other failures.
+        </p>
+        <h3 id="job-controls">Job Controls</h3>
+        <p>
+          <code>Cancel Job:</code> Each job card contains a
+          <strong>Cancel (×)</strong> button in the upper corner. Pressing this
+          button stops the seeding process for that job. Any tiles that were
+          already downloaded will remain in the cache.
+        </p>
+      </div>
     </div>
 
-    <script src="index.js"></script>
+    <script src="js/index.js"></script>
   </body>
 </html>