Add ThinkBroadband BQM graph archiving

Daily fetch and archive of broadband quality monitor graphs with
gallery view, date navigation, calendar integration, and full
i18n support (EN/DE/FR/ES).

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: itsDNNS

CHANGELOG.md

@@ -4,6 +4,15 @@ All notable changes to this project will be documented in this file.
 
 Versioning: `YYYY-MM-DD.N` (date + sequential build number per day)
 
+## [2026-02-09.17]
+
+### Added
+- **ThinkBroadband BQM integration**: Daily fetch and archive of broadband quality monitor graphs (latency, packet loss)
+- **BQM gallery view**: New sidebar view to browse archived BQM graphs with date navigation and calendar integration
+- **BQM configuration**: `BQM_URL` env var and settings/setup UI field for the BQM share URL
+- **BQM API endpoints**: `GET /api/bqm/dates` and `GET /api/bqm/image/<date>` for graph retrieval
+- **BQM translations**: EN, DE, FR, ES support for all BQM-related UI strings
+
 ## [2026-02-09.16]
 
 ### Added

README.md

@@ -40,6 +40,7 @@
 - **Internationalization**: English, German, French, and Spanish UI
 - **LLM Export**: Generate structured reports for AI analysis (ChatGPT, Claude, Gemini, etc.)
 - **MQTT Auto-Discovery**: Zero-config integration with Home Assistant
+- **ThinkBroadband BQM**: Daily fetch and archive of broadband quality graphs with gallery view
 - **Optional Authentication**: Password-protected web UI with scrypt hashing
 - **Light/Dark Mode**: Persistent theme toggle
 
@@ -86,6 +87,7 @@ Copy `.env.example` to `.env` and edit:
 | `WEB_PORT` | `8765` | Web UI port |
 | `HISTORY_DAYS` | `0` | Snapshot retention in days (0 = unlimited) |
 | `ADMIN_PASSWORD` | - | Web UI password (optional) |
+| `BQM_URL` | - | ThinkBroadband BQM share URL (.png, optional) |
 
 </details>
 
@@ -145,7 +147,7 @@ Copy `.env.example` to `.env` and edit:
 ## Roadmap
 
 ### External Monitoring Integration
-- [ ] **ThinkBroadband BQM**: Daily fetch and archive of external broadband quality graphs (latency, packet loss)
+- [x] **ThinkBroadband BQM**: Daily fetch and archive of external broadband quality graphs (latency, packet loss)
 - [ ] **Speedtest Tracker**: Pull speed test results (download, upload, ping, jitter) from self-hosted [Speedtest Tracker](https://github.com/alexjustesen/speedtest-tracker)
 
 ### Enhanced Dashboard

app/config.py

@@ -34,6 +34,7 @@
     "language": "en",
     "isp_name": "",
     "admin_password": "",
+    "bqm_url": "",
 }
 
 ENV_MAP = {
@@ -50,6 +51,7 @@
     "history_days": "HISTORY_DAYS",
     "data_dir": "DATA_DIR",
     "admin_password": "ADMIN_PASSWORD",
+    "bqm_url": "BQM_URL",
 }
 
 # Deprecated env vars (FRITZ_* -> MODEM_*) - checked as fallback
@@ -228,6 +230,10 @@ def is_mqtt_configured(self):
         """True if mqtt_host is set (MQTT is optional)."""
         return bool(self.get("mqtt_host"))
 
+    def is_bqm_configured(self):
+        """True if bqm_url is set (BQM is optional)."""
+        return bool(self.get("bqm_url"))
+
     def get_theme(self):
         """Return 'dark' or 'light'."""
         theme = self.get("theme", "dark")

app/i18n/de.json

@@ -154,5 +154,11 @@
   "login_button": "Anmelden",
   "logout": "Abmelden",
   "admin_password": "Admin-Passwort",
-  "admin_password_hint": "Leer lassen um Authentifizierung zu deaktivieren"
+  "admin_password_hint": "Leer lassen um Authentifizierung zu deaktivieren",
+
+  "bqm_title": "BQM-Graphen",
+  "bqm_optional": "optional",
+  "bqm_share_url": "BQM Share-URL",
+  "bqm_url_hint": "ThinkBroadband BQM Share-Link einfuegen (.png)",
+  "bqm_no_data": "Kein BQM-Graph fuer dieses Datum."
 }

app/i18n/en.json

@@ -154,5 +154,11 @@
   "login_button": "Login",
   "logout": "Logout",
   "admin_password": "Admin Password",
-  "admin_password_hint": "Leave empty to disable authentication"
+  "admin_password_hint": "Leave empty to disable authentication",
+
+  "bqm_title": "BQM Graphs",
+  "bqm_optional": "optional",
+  "bqm_share_url": "BQM Share URL",
+  "bqm_url_hint": "Paste your ThinkBroadband BQM share link (.png)",
+  "bqm_no_data": "No BQM graph for this date."
 }

app/i18n/es.json

@@ -154,5 +154,11 @@
   "login_button": "Entrar",
   "logout": "Cerrar sesión",
   "admin_password": "Contraseña de admin",
-  "admin_password_hint": "Dejar vacío para desactivar la autenticación"
+  "admin_password_hint": "Dejar vacío para desactivar la autenticación",
+
+  "bqm_title": "Gráficos BQM",
+  "bqm_optional": "opcional",
+  "bqm_share_url": "URL de compartir BQM",
+  "bqm_url_hint": "Pega tu enlace de compartir ThinkBroadband BQM (.png)",
+  "bqm_no_data": "No hay gráfico BQM para esta fecha."
 }

app/i18n/fr.json

@@ -154,5 +154,11 @@
   "login_button": "Se connecter",
   "logout": "Déconnexion",
   "admin_password": "Mot de passe admin",
-  "admin_password_hint": "Laisser vide pour désactiver l'authentification"
+  "admin_password_hint": "Laisser vide pour désactiver l'authentification",
+
+  "bqm_title": "Graphiques BQM",
+  "bqm_optional": "optionnel",
+  "bqm_share_url": "URL de partage BQM",
+  "bqm_url_hint": "Collez votre lien de partage ThinkBroadband BQM (.png)",
+  "bqm_no_data": "Pas de graphique BQM pour cette date."
 }

app/main.py

@@ -5,7 +5,7 @@
 import threading
 import time
 
-from . import fritzbox, analyzer, web
+from . import fritzbox, analyzer, web, thinkbroadband
 from .config import ConfigManager
 from .mqtt_publisher import MQTTPublisher
 from .storage import SnapshotStorage
@@ -57,6 +57,7 @@ def polling_loop(config_mgr, storage, stop_event):
     device_info = None
     connection_info = None
     discovery_published = False
+    bqm_last_date = None
 
     while not stop_event.is_set():
         try:
@@ -92,6 +93,15 @@ def polling_loop(config_mgr, storage, stop_event):
             web.update_state(analysis=analysis)
             storage.save_snapshot(analysis)
 
+            # Fetch BQM graph once per day
+            if config_mgr.is_bqm_configured():
+                today = time.strftime("%Y-%m-%d")
+                if today != bqm_last_date:
+                    image = thinkbroadband.fetch_graph(config_mgr.get("bqm_url"))
+                    if image:
+                        storage.save_bqm_graph(image)
+                        bqm_last_date = today
+
         except Exception as e:
             log.error("Poll error: %s", e)
             web.update_state(error=e)

app/storage.py

@@ -33,6 +33,14 @@ def _init_db(self):
                 CREATE INDEX IF NOT EXISTS idx_snapshots_ts
                 ON snapshots(timestamp)
             """)
+            conn.execute("""
+                CREATE TABLE IF NOT EXISTS bqm_graphs (
+                    id INTEGER PRIMARY KEY AUTOINCREMENT,
+                    date TEXT NOT NULL UNIQUE,
+                    timestamp TEXT NOT NULL,
+                    image_blob BLOB NOT NULL
+                )
+            """)
 
     def save_snapshot(self, analysis):
         """Save current analysis as a snapshot. Runs cleanup afterwards."""
@@ -140,8 +148,38 @@ def get_intraday_data(self, date):
             results.append(entry)
         return results
 
+    def save_bqm_graph(self, image_data):
+        """Save BQM graph for today. Skips if already exists (UNIQUE date)."""
+        today = datetime.now().strftime("%Y-%m-%d")
+        ts = datetime.now().strftime("%Y-%m-%dT%H:%M:%S")
+        try:
+            with sqlite3.connect(self.db_path) as conn:
+                conn.execute(
+                    "INSERT OR IGNORE INTO bqm_graphs (date, timestamp, image_blob) VALUES (?, ?, ?)",
+                    (today, ts, image_data),
+                )
+            log.debug("BQM graph saved for %s", today)
+        except Exception as e:
+            log.error("Failed to save BQM graph: %s", e)
+
+    def get_bqm_dates(self):
+        """Return list of dates with BQM graphs (newest first)."""
+        with sqlite3.connect(self.db_path) as conn:
+            rows = conn.execute(
+                "SELECT date FROM bqm_graphs ORDER BY date DESC"
+            ).fetchall()
+        return [r[0] for r in rows]
+
+    def get_bqm_graph(self, date):
+        """Return BQM graph PNG bytes for a date, or None."""
+        with sqlite3.connect(self.db_path) as conn:
+            row = conn.execute(
+                "SELECT image_blob FROM bqm_graphs WHERE date = ?", (date,)
+            ).fetchone()
+        return bytes(row[0]) if row else None
+
     def _cleanup(self):
-        """Delete snapshots older than max_days. 0 = keep all."""
+        """Delete snapshots and BQM graphs older than max_days. 0 = keep all."""
         if self.max_days <= 0:
             return
         cutoff = (datetime.now() - timedelta(days=self.max_days)).strftime(
@@ -153,3 +191,10 @@ def _cleanup(self):
             ).rowcount
         if deleted:
             log.info("Cleaned up %d old snapshots (before %s)", deleted, cutoff)
+        cutoff_date = (datetime.now() - timedelta(days=self.max_days)).strftime("%Y-%m-%d")
+        with sqlite3.connect(self.db_path) as conn:
+            bqm_deleted = conn.execute(
+                "DELETE FROM bqm_graphs WHERE date < ?", (cutoff_date,)
+            ).rowcount
+        if bqm_deleted:
+            log.info("Cleaned up %d old BQM graphs (before %s)", bqm_deleted, cutoff_date)

app/templates/index.html

@@ -359,6 +359,11 @@
         <a class="sidebar-link" data-view="month">
             <span class="icon">&#128197;</span> {{ t.month_trend }}
         </a>
+        {% if bqm_configured %}
+        <a class="sidebar-link" data-view="bqm">
+            <span class="icon">&#128200;</span> {{ t.bqm_title }}
+        </a>
+        {% endif %}
         <div class="sidebar-divider"></div>
         <a class="sidebar-link" href="/settings">
             <span class="icon">&#9881;</span> {{ t.settings }}
@@ -605,6 +610,21 @@ <h2 class="section-title">{{ t.upstream }} ({{ us|length }} {{ t.channels }})</h
         </div>
     </div>
 </div>
+
+<!-- ═══ View: BQM Graphs ═══ -->
+{% if bqm_configured %}
+<div id="view-bqm" class="view">
+    <div class="trend-header">
+        <span class="trend-title">{{ t.bqm_title }}</span>
+    </div>
+    <div id="bqm-content">
+        <div id="bqm-image-wrap" style="text-align:center;">
+            <img id="bqm-image" style="max-width:100%; border-radius:8px; display:none;" alt="BQM Graph">
+        </div>
+        <div id="bqm-no-data" class="no-data-msg" style="display:none;"></div>
+    </div>
+</div>
+{% endif %}
 </div><!-- /main-content -->
 </div><!-- /app-main -->
 </div><!-- /app-layout -->
@@ -719,15 +739,21 @@ <h2>{{ t.export_title }}</h2>
         });
         var dashView = document.getElementById('view-dashboard');
         var trendView = document.getElementById('view-trends');
+        var bqmView = document.getElementById('view-bqm');
+        dashView.classList.remove('active');
+        trendView.classList.remove('active');
+        if (bqmView) bqmView.classList.remove('active');
+        stopAutoRefresh();
         if (view === 'live') {
             dashView.classList.add('active');
-            trendView.classList.remove('active');
             updateDateLabel();
             if (!isHistorical) startAutoRefresh();
+        } else if (view === 'bqm') {
+            if (bqmView) bqmView.classList.add('active');
+            updateDateLabel();
+            loadBqmGraph(selectedDate);
         } else {
-            dashView.classList.remove('active');
             trendView.classList.add('active');
-            stopAutoRefresh();
             updateDateLabel();
             loadTrends(view, selectedDate);
         }
@@ -741,6 +767,8 @@ <h2>{{ t.export_title }}</h2>
     function updateDateLabel() {
         if (currentView === 'live') {
             dateLabel.textContent = isHistorical ? formatDateDE('{{ snapshot_ts[:10] if snapshot_ts else "" }}') : T.live;
+        } else if (currentView === 'bqm') {
+            dateLabel.textContent = formatDateDE(selectedDate) + ' (BQM)';
         } else {
             var rangeLabel = {day: T.day, week: T.week, month: T.month}[currentView] || '';
             dateLabel.textContent = formatDateDE(selectedDate) + ' (' + rangeLabel + ')';
@@ -752,7 +780,7 @@ <h2>{{ t.export_title }}</h2>
 
     function dateNav(dir) {
         var d = new Date(selectedDate + 'T12:00:00');
-        if (currentView === 'live' || currentView === 'day') {
+        if (currentView === 'live' || currentView === 'day' || currentView === 'bqm') {
             d.setDate(d.getDate() + dir);
         } else if (currentView === 'week') {
             d.setDate(d.getDate() + dir * 7);
@@ -769,6 +797,8 @@ <h2>{{ t.export_title }}</h2>
                         window.location.href = '/?t=' + encodeURIComponent(snap.timestamp);
                     }
                 });
+        } else if (currentView === 'bqm') {
+            loadBqmGraph(selectedDate);
         } else {
             loadTrends(currentView, selectedDate);
         }
@@ -800,6 +830,8 @@ <h2>{{ t.export_title }}</h2>
         renderCalendar();
     });
 
+    var bqmDates = [];
+
     function loadCalendarData() {
         fetch('/api/calendar')
             .then(function(r) { return r.json(); })
@@ -808,6 +840,10 @@ <h2>{{ t.export_title }}</h2>
                 calendarLoaded = true;
                 renderCalendar();
             });
+        fetch('/api/bqm/dates')
+            .then(function(r) { return r.json(); })
+            .then(function(dates) { bqmDates = dates || []; })
+            .catch(function() {});
     }
 
     function renderCalendar() {
@@ -830,7 +866,8 @@ <h2>{{ t.export_title }}</h2>
             var el = document.createElement('span');
             el.className = 'cal-day';
             el.textContent = d;
-            if (datesWithData.indexOf(dateStr) !== -1) el.classList.add('has-data');
+            var activeDates = (currentView === 'bqm') ? bqmDates : datesWithData;
+            if (activeDates.indexOf(dateStr) !== -1) el.classList.add('has-data');
             if (dateStr === today) el.classList.add('today');
             if (dateStr === selectedDate) el.classList.add('selected');
             el.setAttribute('data-date', dateStr);
@@ -847,6 +884,9 @@ <h2>{{ t.export_title }}</h2>
                                 window.location.href = '/?t=' + encodeURIComponent(snap.timestamp);
                             }
                         });
+                } else if (currentView === 'bqm') {
+                    updateDateLabel();
+                    loadBqmGraph(selectedDate);
                 } else {
                     updateDateLabel();
                     loadTrends(currentView, selectedDate);
@@ -947,6 +987,22 @@ <h2>{{ t.export_title }}</h2>
         });
     }
 
+    /* ── BQM Graph ── */
+    function loadBqmGraph(date) {
+        var img = document.getElementById('bqm-image');
+        var noData = document.getElementById('bqm-no-data');
+        if (!img || !noData) return;
+        img.style.display = 'none';
+        noData.style.display = 'none';
+        img.onload = function() { img.style.display = 'inline-block'; };
+        img.onerror = function() {
+            img.style.display = 'none';
+            noData.textContent = T.bqm_no_data || 'No BQM graph for this date.';
+            noData.style.display = 'block';
+        };
+        img.src = '/api/bqm/image/' + date;
+    }
+
     /* ── Init ── */
     updateDateLabel();
 })();