chaos/NTP-Timeturner
1
0
Fork 0
mirror of https://github.com/cjfranko/NTP-Timeturner.git synced 2025-11-08 18:32:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: Add dynamic FPS icon display to web UI

Browse source 
Co-authored-by: aider (gemini/gemini-2.5-pro) <aider@aider.chat>
This commit is contained in:
Chris Frankland-Wright 2025-08-08 00:40:21 +01:00
parent 9360e0011c
commit ba9b897157
4 changed files with 15 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
static/icon-map.js
View file

@ -26,5 +26,13 @@ const iconMap = {
'good': { src: 'assets/timeturner_delta_green.png', tooltip: 'Clock delta is 0ms.' }, 'good': { src: 'assets/timeturner_delta_green.png', tooltip: 'Clock delta is 0ms.' },
'average': { src: 'assets/timeturner_delta_orange.png', tooltip: 'Clock delta is less than 10ms.' }, 'average': { src: 'assets/timeturner_delta_orange.png', tooltip: 'Clock delta is less than 10ms.' },
'bad': { src: 'assets/timeturner_delta_red.png', tooltip: 'Clock delta is 10ms or greater.' } 'bad': { src: 'assets/timeturner_delta_red.png', tooltip: 'Clock delta is 10ms or greater.' }
},
frameRate: {
'23.98': { src: 'assets/timeturner_fps_2398.png', tooltip: '23.98 frames per second' },
'24.00': { src: 'assets/timeturner_fps_2400.png', tooltip: '24.00 frames per second' },
'25.00': { src: 'assets/timeturner_fps_2500.png', tooltip: '25.00 frames per second' },
'29.97': { src: 'assets/timeturner_fps_2997.png', tooltip: '29.97 frames per second' },
'30.00': { src: 'assets/timeturner_fps_3000.png', tooltip: '30.00 frames per second' },
'default': { src: 'assets/timeturner_fps_unknown.png', tooltip: 'Unknown frame rate' }
} }
}; };

2
static/index.html
View file

@ -25,7 +25,7 @@
<h2>LTC Status</h2> <h2>LTC Status</h2>
<p id="ltc-timecode">--:--:--:--</p> <p id="ltc-timecode">--:--:--:--</p>
<p id="ltc-status">--</p> <p id="ltc-status">--</p>
<p id="frame-rate">-- fps</p> <p><span id="frame-rate">-- fps</span></p>
<p>Lock Ratio: <span id="lock-ratio">--</span>%</p> <p>Lock Ratio: <span id="lock-ratio">--</span>%</p>
</div> </div>

6
static/script.js
View file

@ -85,7 +85,11 @@ document.addEventListener('DOMContentLoaded', () => {
statusElements.ltcStatus.innerHTML = `<img src="${ltcIconInfo.src}" class="status-icon" alt="" title="${ltcIconInfo.tooltip}"><span>${ltcStatus}</span>`; statusElements.ltcStatus.innerHTML = `<img src="${ltcIconInfo.src}" class="status-icon" alt="" title="${ltcIconInfo.tooltip}"><span>${ltcStatus}</span>`;
statusElements.ltcStatus.className = ltcStatus.toLowerCase(); statusElements.ltcStatus.className = ltcStatus.toLowerCase();
statusElements.ltcTimecode.textContent = data.ltc_timecode; statusElements.ltcTimecode.textContent = data.ltc_timecode;
statusElements.frameRate.textContent = data.frame_rate;
const frameRate = data.frame_rate || 'unknown';
const frameRateIconInfo = iconMap.frameRate[frameRate] || iconMap.frameRate.default;
statusElements.frameRate.innerHTML = `<img src="${frameRateIconInfo.src}" class="status-icon" alt="" title="${frameRateIconInfo.tooltip}"><span>${frameRate} fps</span>`;
statusElements.lockRatio.textContent = data.lock_ratio.toFixed(2); statusElements.lockRatio.textContent = data.lock_ratio.toFixed(2);
statusElements.systemClock.textContent = data.system_clock; statusElements.systemClock.textContent = data.system_clock;
statusElements.systemDate.textContent = data.system_date; statusElements.systemDate.textContent = data.system_date;

2
static/style.css
View file

@ -99,7 +99,7 @@ button:hover {
color: #555; color: #555;
} }
#ltc-status, #ntp-active, #sync-status, #jitter-status, #delta-status { #ltc-status, #ntp-active, #sync-status, #jitter-status, #delta-status, #frame-rate {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;