signalk-charts-provider-simple 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Changelog
 
-## [1.2.0] 2025-01-28
+## [1.3.0] 2025-11-30
+### New:
+- Chart Info button - View detailed MBTiles metadata directly in the Chart Manager
+  - Displays chart name, description, version, type, format
+  - Shows geographic bounds (SW/NE coordinates), zoom levels, center point
+  - Tile count with formatting
+  - Attribution, credits, tags, and legend information
+  - Beautiful modal dialog matching the existing Material Design 3 theme
+  - Works for both grid and list view
+
+## [1.2.0] 2025-11-28
 ### New:
 - Real-time delta notifications to all chart operations in the plugin, following the exact pattern used by SignalK Server's built-in resource provider, so server reloads not needed anymore.
 
@@ -8,15 +18,15 @@
 - "RFC-Ressource-Change" changed to [RFC: Resource Provider Delta Notification Best Practice](https://github.com/dirkwa/signalk-charts-provider-simple/blob/main/docs/RFC-Resource-Change-Notifications.md) - thanks Adrian!
 - Unnessecary server reload notifications removed
 
-## [1.1.1] 2025-01-28
+## [1.1.1] 2025-11-28
 ### New:
 - [RFC-Ressource-Change](https://github.com/dirkwa/signalk-charts-provider-simple/blob/main/docs/RFC-Resource-Change-Notifications.md) added to discuss with the community if we can make chart changes instant.
 
-## [1.1.0] 2025-01-28
+## [1.1.0] 2025-11-28
 ### New:
 - Press and hold, than drag and drop charts to folder on touch and mobile devices - tested win11 & iOS 26
 
-## [1.0.8] 2025-01-27
+## [1.0.8] 2025-11-27
 ### Fixes:
 - A newly generated folder in Chart Manager was not available in the Download area
 
@@ -24,22 +34,22 @@
 - No Scrolling for Chart Manager top buttons, breaks the design
 - CSS optimized between mobile and desktop
 
-## [1.0.7] 2025-01-27
+## [1.0.7] 2025-11-27
 ### Changes:
 - to avoid conflicts use defaultChartsPath as charts-simple
 
-## [1.0.6] 2025-01-27
+## [1.0.6] 2025-11-27
 ### Changes:
 - Plugin description
 
-## [1.0.5] 2025-01-27
+## [1.0.5] 2025-11-27
 ### Fixes:
 - Github publishing - remove npm test
 - Github publisihing - Firx workflow
 ### Changes:
 - Typo in README.md
 
-## [1.0.0] 2025-01-26
+## [1.0.0] 2025-11-26
 - Initial release
 - Material Design 3 UI
 - Optimized for touch and mobile

package/README.md

@@ -48,6 +48,7 @@ The interface provides two main tabs:
 
 1. **Manage Charts**:
    - View all charts in your library
+   - View detailed chart information (metadata, bounds, zoom levels, tile count, etc.)
    - Enable/disable charts
    - Organize charts into folders
    - Upload new chart files

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "signalk-charts-provider-simple",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Simple Signal K chart provider for local MBTiles with web and download management",
   "main": "src/index.js",
   "scripts": {
@@ -22,6 +22,7 @@
     "bluebird": "^3.5.1",
     "busboy": "^1.6.0",
     "lodash": "^4.17.11",
+    "sqlite3": "^5.1.7",
     "unzipper": "^0.12.3",
     "xml2js": "^0.6.2"
   },

package/public/css/manage-charts.css

@@ -1432,3 +1432,91 @@
     color: var(--accent-primary);
     font-weight: 500;
 }
+
+/* Info Button */
+.btn-info {
+    background: rgba(0, 212, 255, 0.1);
+    color: var(--accent-primary);
+    border: 1px solid var(--accent-primary);
+}
+
+.btn-info::before {
+    background: var(--accent-primary);
+}
+
+.btn-info:hover:not(:disabled)::before {
+    opacity: 0.08;
+}
+
+.btn-info:active:not(:disabled)::before {
+    opacity: 0.12;
+}
+
+.btn-info svg {
+    fill: var(--accent-primary);
+}
+
+/* Chart Info Modal */
+.chart-info-modal {
+    max-width: 600px;
+    max-height: 80vh;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+}
+
+.chart-info-modal .delete-modal-body {
+    overflow-y: auto;
+    max-height: calc(80vh - 200px);
+    margin-bottom: 0;
+    padding-bottom: 16px;
+}
+
+.chart-info-container {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.chart-info-row {
+    display: grid;
+    grid-template-columns: 140px 1fr;
+    gap: 16px;
+    padding: 12px;
+    background: var(--bg-secondary);
+    border-radius: 8px;
+    align-items: start;
+}
+
+.chart-info-label {
+    font-weight: 600;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+}
+
+.chart-info-value {
+    color: var(--text-primary);
+    font-size: 0.95rem;
+    word-break: break-word;
+}
+
+/* Responsive adjustments for mobile */
+@media (max-width: 768px) {
+    .chart-info-modal {
+        max-width: 95%;
+        max-height: 90vh;
+    }
+
+    .chart-info-row {
+        grid-template-columns: 1fr;
+        gap: 4px;
+    }
+
+    .chart-info-label {
+        font-size: 0.85rem;
+    }
+
+    .chart-info-value {
+        font-size: 0.9rem;
+    }
+}

package/public/js/emoji-utils.js

@@ -96,6 +96,11 @@ const icons = {
         emoji: '🕐',
         html: '🕐',
         svg: null
+    },
+    info: {
+        emoji: 'ℹ️',
+        html: 'ℹ',
+        svg: '<svg viewBox="0 0 24 24" width="16" height="16" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>'
     }
 };
 

package/public/js/manage-charts-enhanced.js

@@ -224,6 +224,9 @@ function renderChartCard(chart) {
                     </div>
                 </div>
                 <div class="chart-card-footer">
+                    <button class="btn btn-sm btn-info" onclick="showChartInfo('${chart.relativePath}')" title="View chart information">
+                        Info
+                    </button>
                     <button class="btn btn-sm btn-secondary" onclick="showRenameDialog('${chart.relativePath}', '${chart.name}', '${chart.folder}')" title="Rename chart">
                         Rename
                     </button>
@@ -252,6 +255,9 @@ function renderChartCard(chart) {
                     </div>
                 </div>
                 <div class="chart-list-actions">
+                    <button class="btn btn-sm btn-info" onclick="showChartInfo('${chart.relativePath}')" title="View chart information">
+                        Info
+                    </button>
                     <button class="btn btn-sm btn-secondary" onclick="showRenameDialog('${chart.relativePath}', '${chart.name}', '${chart.folder}')" title="Rename chart">
                         Rename
                     </button>
@@ -1288,3 +1294,113 @@ function showUploadNotification(fileCount) {
         }
     }, 5000);
 }
+
+// Chart info modal
+window.showChartInfo = async function(chartPath) {
+    try {
+        const response = await fetch(`/signalk/chart-tiles/chart-metadata/${encodeURIComponent(chartPath)}`);
+
+        if (!response.ok) {
+            const errorText = await response.text();
+            showErrorNotification(`Failed to load chart information: ${errorText}`);
+            return;
+        }
+
+        const metadata = await response.json();
+
+        // Format the metadata nicely
+        const formatValue = (key, value) => {
+            if (value === null || value === undefined || value === '') {
+                return '<span style="color: var(--text-secondary); font-style: italic;">Not specified</span>';
+            }
+
+            switch(key) {
+                case 'bounds':
+                    // Format: [minLon, minLat, maxLon, maxLat]
+                    try {
+                        const bounds = typeof value === 'string' ? value.split(',').map(v => parseFloat(v.trim())) : value;
+                        return `
+                            <div style="font-family: monospace; font-size: 0.9em;">
+                                SW: ${bounds[0].toFixed(4)}°, ${bounds[1].toFixed(4)}°<br>
+                                NE: ${bounds[2].toFixed(4)}°, ${bounds[3].toFixed(4)}°
+                            </div>
+                        `;
+                    } catch {
+                        return value;
+                    }
+                case 'tileCount':
+                    return parseInt(value).toLocaleString();
+                case 'minzoom':
+                case 'maxzoom':
+                    return `Level ${value}`;
+                case 'legend':
+                    return '<span style="color: var(--text-secondary); font-style: italic;">Available (not displayed)</span>';
+                default:
+                    return value;
+            }
+        };
+
+        // Build metadata rows
+        const metadataRows = [
+            { label: 'Chart Name', key: 'name' },
+            { label: 'Description', key: 'description' },
+            { label: 'Version', key: 'version' },
+            { label: 'Type', key: 'type' },
+            { label: 'Format', key: 'format' },
+            { label: 'Bounds', key: 'bounds' },
+            { label: 'Min Zoom', key: 'minzoom' },
+            { label: 'Max Zoom', key: 'maxzoom' },
+            { label: 'Center', key: 'center' },
+            { label: 'Tile Count', key: 'tileCount' },
+            { label: 'Attribution', key: 'attribution' },
+            { label: 'Credits', key: 'credits' },
+            { label: 'Tags', key: 'tags' },
+            { label: 'Legend', key: 'legend' }
+        ];
+
+        const metadataHTML = metadataRows
+            .filter(row => metadata[row.key] !== undefined)
+            .map(row => `
+                <div class="chart-info-row">
+                    <div class="chart-info-label">${row.label}:</div>
+                    <div class="chart-info-value">${formatValue(row.key, metadata[row.key])}</div>
+                </div>
+            `).join('');
+
+        const infoIcon = window.getIcon('info', true);
+
+        const modalHTML = `
+            <div class="delete-modal-overlay" id="chartInfoModal" onclick="closeChartInfoModal(event)">
+                <div class="delete-modal chart-info-modal" onclick="event.stopPropagation()">
+                    <div class="delete-modal-header">
+                        <div class="delete-modal-icon" style="color: var(--accent-primary);">${infoIcon}</div>
+                        <h3>Chart Information</h3>
+                    </div>
+                    <div class="delete-modal-body">
+                        <div class="chart-info-container">
+                            ${metadataHTML}
+                        </div>
+                    </div>
+                    <div class="delete-modal-actions">
+                        <button class="btn btn-primary" onclick="closeChartInfoModal()">Close</button>
+                    </div>
+                </div>
+            </div>
+        `;
+
+        document.body.insertAdjacentHTML('beforeend', modalHTML);
+
+    } catch (error) {
+        console.error('Error fetching chart info:', error);
+        showErrorNotification('Error loading chart information: ' + error.message);
+    }
+}
+
+window.closeChartInfoModal = function(event) {
+    if (event && event.target.id !== 'chartInfoModal') return;
+
+    const modal = document.getElementById('chartInfoModal');
+    if (modal) {
+        modal.remove();
+    }
+}

package/src/index.js

@@ -648,6 +648,81 @@ module.exports = (app) => {
       }
     });
 
+    // Get chart metadata (MBTiles only)
+    app.get(`${chartTilesPath}/chart-metadata/:chartPath`, async (req, res) => {
+      const chartPathParam = decodeURIComponent(req.params.chartPath);
+
+      try {
+        const basePath = props.chartPath || defaultChartsPath;
+        const fullPath = path.join(basePath, chartPathParam);
+
+        // Security check: ensure the path is within the base chart directory
+        const normalizedFullPath = path.normalize(fullPath);
+        const normalizedBasePath = path.normalize(basePath);
+        if (!normalizedFullPath.startsWith(normalizedBasePath)) {
+          return res.status(403).send('Access denied: Invalid path');
+        }
+
+        // Check if file exists
+        if (!fs.existsSync(fullPath)) {
+          return res.status(404).send('Chart not found');
+        }
+
+        // Only support .mbtiles files
+        if (!fullPath.endsWith('.mbtiles')) {
+          return res.status(400).send('Metadata only available for MBTiles charts');
+        }
+
+        // Read metadata from SQLite database
+        const sqlite3 = require('sqlite3').verbose();
+        const db = new sqlite3.Database(fullPath, sqlite3.OPEN_READONLY, (err) => {
+          if (err) {
+            console.error('Error opening database:', err);
+            return res.status(500).send('Error reading chart metadata');
+          }
+        });
+
+        db.all('SELECT name, value FROM metadata', [], (err, rows) => {
+          if (err) {
+            db.close();
+            console.error('Error querying metadata:', err);
+            return res.status(500).send('Error reading chart metadata');
+          }
+
+          // Convert rows to object
+          const metadata = {};
+          rows.forEach(row => {
+            metadata[row.name] = row.value;
+          });
+
+          // Try to get tile count - different MBTiles files use different table names
+          // Try 'map' first (standard), then 'tiles' (alternative)
+          db.get('SELECT COUNT(*) as count FROM map', [], (err, countRow) => {
+            if (err) {
+              // Try alternative table name
+              db.get('SELECT COUNT(*) as count FROM tiles', [], (err2, countRow2) => {
+                db.close();
+
+                if (!err2 && countRow2) {
+                  metadata.tileCount = countRow2.count;
+                }
+                // If both fail, silently omit tile count - some MBTiles formats don't have this
+                return res.json(metadata);
+              });
+            } else {
+              db.close();
+              metadata.tileCount = countRow.count;
+              res.json(metadata);
+            }
+          });
+        });
+
+      } catch (error) {
+        console.error('Error fetching chart metadata:', error);
+        res.status(500).send('Error fetching chart metadata');
+      }
+    });
+
     // Upload chart file
     app.post(`${chartTilesPath}/upload`, async (req, res) => {
       try {