From e419cd506e58e2e3d7b5a18914a4abad9a4fc10c Mon Sep 17 00:00:00 2001
From: Chris Frankland-Wright <christopherjfrankland@googlemail.com>
Date: Fri, 8 Aug 2025 00:04:52 +0100
Subject: [PATCH] feat: Add configurable tooltips to status icons

Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
---
 static/icon-map.js | 28 ++++++++++++++--------------
 static/script.js   | 18 +++++++++---------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/static/icon-map.js b/static/icon-map.js
index ac37b21..d394125 100644
--- a/static/icon-map.js
+++ b/static/icon-map.js
@@ -1,25 +1,25 @@
 // In this file, you can define the paths to your local icon image files.
 const iconMap = {
     ltcStatus: {
-        'LOCK': 'assets/timeturner_ltc_green.png',
-        'FREE': 'assets/timeturner_ltc_orange.png',
-        'default': 'assets/timeturner_ltc_red.png'
+        'LOCK': { src: 'assets/timeturner_ltc_green.png', tooltip: 'LTC signal is locked and stable.' },
+        'FREE': { src: 'assets/timeturner_ltc_orange.png', tooltip: 'LTC signal is in freewheel mode.' },
+        'default': { src: 'assets/timeturner_ltc_red.png', tooltip: 'LTC signal is not detected.' }
     },
     ntpActive: {
-        true: 'assets/timeturner_ntp_green.png',
-        false: 'assets/timeturner_ntp_red.png'
+        true: { src: 'assets/timeturner_ntp_green.png', tooltip: 'NTP service is active.' },
+        false: { src: 'assets/timeturner_ntp_red.png', tooltip: 'NTP service is inactive.' }
     },
     syncStatus: {
-        'IN SYNC': 'assets/timeturner_sync_green.png',
-        'CLOCK AHEAD': 'assets/timeturner_sync_orange.png',
-        'CLOCK BEHIND': 'assets/timeturner_sync_orange.png',
-        'TIMETURNING': 'assets/timeturner_timeturning.png',
-        'default': 'assets/timeturner_sync_red.png'
+        'IN SYNC': { src: 'assets/timeturner_sync_green.png', tooltip: 'System clock is in sync with LTC source.' },
+        'CLOCK AHEAD': { src: 'assets/timeturner_sync_orange.png', tooltip: 'System clock is ahead of the LTC source.' },
+        'CLOCK BEHIND': { src: 'assets/timeturner_sync_orange.png', tooltip: 'System clock is behind the LTC source.' },
+        'TIMETURNING': { src: 'assets/timeturner_timeturning.png', tooltip: 'Timeturner offset is active.' },
+        'default': { src: 'assets/timeturner_sync_red.png', tooltip: 'Sync status is unknown.' }
     },
     jitterStatus: {
-        'GOOD': 'assets/timeturner_jitter_green.png',
-        'AVERAGE': 'assets/timeturner_jitter_orange.png',
-        'BAD': 'assets/timeturner_jitter_red.png',
-        'default': 'assets/timeturner_jitter_red.png'
+        'GOOD': { src: 'assets/timeturner_jitter_green.png', tooltip: 'Clock jitter is within acceptable limits.' },
+        'AVERAGE': { src: 'assets/timeturner_jitter_orange.png', tooltip: 'Clock jitter is moderate.' },
+        'BAD': { src: 'assets/timeturner_jitter_red.png', tooltip: 'Clock jitter is high and may affect accuracy.' },
+        'default': { src: 'assets/timeturner_jitter_red.png', tooltip: 'Jitter status is unknown.' }
     }
 };
diff --git a/static/script.js b/static/script.js
index 7f82731..20c5571 100644
--- a/static/script.js
+++ b/static/script.js
@@ -76,8 +76,8 @@ document.addEventListener('DOMContentLoaded', () => {
 
     function updateStatus(data) {
         const ltcStatus = data.ltc_status || 'UNKNOWN';
-        const ltcIconSrc = iconMap.ltcStatus[ltcStatus] || iconMap.ltcStatus.default;
-        statusElements.ltcStatus.innerHTML = `<img src="${ltcIconSrc}" class="status-icon" alt=""><span>${ltcStatus}</span>`;
+        const ltcIconInfo = iconMap.ltcStatus[ltcStatus] || iconMap.ltcStatus.default;
+        statusElements.ltcStatus.innerHTML = `<img src="${ltcIconInfo.src}" class="status-icon" alt="" title="${ltcIconInfo.tooltip}"><span>${ltcStatus}</span>`;
         statusElements.ltcStatus.className = ltcStatus.toLowerCase();
         statusElements.ltcTimecode.textContent = data.ltc_timecode;
         statusElements.frameRate.textContent = data.frame_rate;
@@ -85,26 +85,26 @@ document.addEventListener('DOMContentLoaded', () => {
         statusElements.systemClock.textContent = data.system_clock;
         statusElements.systemDate.textContent = data.system_date;
 
-        const ntpIconSrc = iconMap.ntpActive[data.ntp_active];
+        const ntpIconInfo = iconMap.ntpActive[!!data.ntp_active];
         if (data.ntp_active) {
-            statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""><span>Active</span>`;
+            statusElements.ntpActive.innerHTML = `<img src="${ntpIconInfo.src}" class="status-icon" alt="" title="${ntpIconInfo.tooltip}"><span>Active</span>`;
             statusElements.ntpActive.className = 'active';
         } else {
-            statusElements.ntpActive.innerHTML = `<img src="${ntpIconSrc}" class="status-icon" alt=""><span>Inactive</span>`;
+            statusElements.ntpActive.innerHTML = `<img src="${ntpIconInfo.src}" class="status-icon" alt="" title="${ntpIconInfo.tooltip}"><span>Inactive</span>`;
             statusElements.ntpActive.className = 'inactive';
         }
 
         const syncStatus = data.sync_status || 'UNKNOWN';
-        const syncIconSrc = iconMap.syncStatus[syncStatus] || iconMap.syncStatus.default;
-        statusElements.syncStatus.innerHTML = `<img src="${syncIconSrc}" class="status-icon" alt=""><span>${syncStatus}</span>`;
+        const syncIconInfo = iconMap.syncStatus[syncStatus] || iconMap.syncStatus.default;
+        statusElements.syncStatus.innerHTML = `<img src="${syncIconInfo.src}" class="status-icon" alt="" title="${syncIconInfo.tooltip}"><span>${syncStatus}</span>`;
         statusElements.syncStatus.className = syncStatus.replace(/\s+/g, '-').toLowerCase();
 
         statusElements.deltaMs.textContent = data.timecode_delta_ms;
         statusElements.deltaFrames.textContent = data.timecode_delta_frames;
 
         const jitterStatus = data.jitter_status || 'UNKNOWN';
-        const jitterIconSrc = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default;
-        statusElements.jitterStatus.innerHTML = `<img src="${jitterIconSrc}" class="status-icon" alt=""><span>${jitterStatus}</span>`;
+        const jitterIconInfo = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default;
+        statusElements.jitterStatus.innerHTML = `<img src="${jitterIconInfo.src}" class="status-icon" alt="" title="${jitterIconInfo.tooltip}"><span>${jitterStatus}</span>`;
         statusElements.jitterStatus.className = jitterStatus.toLowerCase();
 
         statusElements.interfaces.innerHTML = '';