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

style: Remove redundant text labels from status icons

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:51:57 +01:00
parent 87e8ae7711
commit 840fca7bcf
3 changed files with 21 additions and 16 deletions
Download patch file Download diff file Expand all files Collapse all files

14
static/index.html
View file

@ -24,9 +24,9 @@
<div class="card"> <div class="card">
<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><span id="frame-rate">-- fps</span></p> <p id="frame-rate"></p>
<p><span id="lock-ratio">Lock Ratio: --%</span></p> <p id="lock-ratio"></p>
</div> </div>
<!-- System Clock & Sync --> <!-- System Clock & Sync -->
@ -34,15 +34,15 @@
<h2>System Clock</h2> <h2>System Clock</h2>
<p id="system-clock">--:--:--.---</p> <p id="system-clock">--:--:--.---</p>
<p>Date: <span id="system-date">---- -- --</span></p> <p>Date: <span id="system-date">---- -- --</span></p>
<p><span id="ntp-active">--</span></p> <p id="ntp-active"></p>
<p><span id="sync-status">--</span></p> <p id="sync-status"></p>
</div> </div>
<!-- Delta & Jitter --> <!-- Delta & Jitter -->
<div class="card"> <div class="card">
<h2>Clock Offset</h2> <h2>Clock Offset</h2>
<p><span id="delta-status">-- ms (-- frames)</span></p> <p id="delta-status">-- ms (-- frames)</p>
<p><span id="jitter-status"></span></p> <p id="jitter-status"></p>
</div> </div>
<!-- Network Interfaces --> <!-- Network Interfaces -->

15
static/script.js
View file

@ -82,13 +82,13 @@ document.addEventListener('DOMContentLoaded', () => {
function updateStatus(data) { function updateStatus(data) {
const ltcStatus = data.ltc_status || 'UNKNOWN'; const ltcStatus = data.ltc_status || 'UNKNOWN';
const ltcIconInfo = iconMap.ltcStatus[ltcStatus] || iconMap.ltcStatus.default; 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.innerHTML = `<img src="${ltcIconInfo.src}" class="status-icon" alt="" title="${ltcIconInfo.tooltip}">`;
statusElements.ltcStatus.className = ltcStatus.toLowerCase(); statusElements.ltcStatus.className = ltcStatus.toLowerCase();
statusElements.ltcTimecode.textContent = data.ltc_timecode; statusElements.ltcTimecode.textContent = data.ltc_timecode;
const frameRate = data.frame_rate || 'unknown'; const frameRate = data.frame_rate || 'unknown';
const frameRateIconInfo = iconMap.frameRate[frameRate] || iconMap.frameRate.default; 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.frameRate.innerHTML = `<img src="${frameRateIconInfo.src}" class="status-icon" alt="" title="${frameRateIconInfo.tooltip}">`;
const lockRatio = data.lock_ratio; const lockRatio = data.lock_ratio;
let lockRatioCategory; let lockRatioCategory;
@ -100,8 +100,7 @@ document.addEventListener('DOMContentLoaded', () => {
lockRatioCategory = 'bad'; lockRatioCategory = 'bad';
} }
const lockRatioIconInfo = iconMap.lockRatio[lockRatioCategory]; const lockRatioIconInfo = iconMap.lockRatio[lockRatioCategory];
const lockRatioText = `Lock Ratio: ${lockRatio.toFixed(2)}%`; statusElements.lockRatio.innerHTML = `<img src="${lockRatioIconInfo.src}" class="status-icon" alt="" title="${lockRatioIconInfo.tooltip}">`;
statusElements.lockRatio.innerHTML = `<img src="${lockRatioIconInfo.src}" class="status-icon" alt="" title="${lockRatioIconInfo.tooltip}"><span>${lockRatioText}</span>`;
statusElements.systemClock.textContent = data.system_clock; statusElements.systemClock.textContent = data.system_clock;
statusElements.systemDate.textContent = data.system_date; statusElements.systemDate.textContent = data.system_date;
@ -112,16 +111,16 @@ document.addEventListener('DOMContentLoaded', () => {
const ntpIconInfo = iconMap.ntpActive[!!data.ntp_active]; const ntpIconInfo = iconMap.ntpActive[!!data.ntp_active];
if (data.ntp_active) { if (data.ntp_active) {
statusElements.ntpActive.innerHTML = `<img src="${ntpIconInfo.src}" class="status-icon" alt="" title="${ntpIconInfo.tooltip}"><span>Active</span>`; statusElements.ntpActive.innerHTML = `<img src="${ntpIconInfo.src}" class="status-icon" alt="" title="${ntpIconInfo.tooltip}">`;
statusElements.ntpActive.className = 'active'; statusElements.ntpActive.className = 'active';
} else { } else {
statusElements.ntpActive.innerHTML = `<img src="${ntpIconInfo.src}" class="status-icon" alt="" title="${ntpIconInfo.tooltip}"><span>Inactive</span>`; statusElements.ntpActive.innerHTML = `<img src="${ntpIconInfo.src}" class="status-icon" alt="" title="${ntpIconInfo.tooltip}">`;
statusElements.ntpActive.className = 'inactive'; statusElements.ntpActive.className = 'inactive';
} }
const syncStatus = data.sync_status || 'UNKNOWN'; const syncStatus = data.sync_status || 'UNKNOWN';
const syncIconInfo = iconMap.syncStatus[syncStatus] || iconMap.syncStatus.default; 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.innerHTML = `<img src="${syncIconInfo.src}" class="status-icon" alt="" title="${syncIconInfo.tooltip}">`;
statusElements.syncStatus.className = syncStatus.replace(/\s+/g, '-').toLowerCase(); statusElements.syncStatus.className = syncStatus.replace(/\s+/g, '-').toLowerCase();
// Delta Status // Delta Status
@ -140,7 +139,7 @@ document.addEventListener('DOMContentLoaded', () => {
const jitterStatus = data.jitter_status || 'UNKNOWN'; const jitterStatus = data.jitter_status || 'UNKNOWN';
const jitterIconInfo = iconMap.jitterStatus[jitterStatus] || iconMap.jitterStatus.default; 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.innerHTML = `<img src="${jitterIconInfo.src}" class="status-icon" alt="" title="${jitterIconInfo.tooltip}">`;
statusElements.jitterStatus.className = jitterStatus.toLowerCase(); statusElements.jitterStatus.className = jitterStatus.toLowerCase();
statusElements.interfaces.innerHTML = ''; statusElements.interfaces.innerHTML = '';

8
static/style.css
View file

@ -100,12 +100,18 @@ button:hover {
color: #555; color: #555;
} }
#ltc-status, #ntp-active, #sync-status, #jitter-status, #delta-status, #frame-rate, #lock-ratio { #delta-status {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
gap: 0.5em; gap: 0.5em;
} }
#ltc-status, #ntp-active, #sync-status, #jitter-status, #frame-rate, #lock-ratio {
display: flex;
justify-content: center;
align-items: center;
}
.status-icon { .status-icon {
width: 60px; width: 60px;
height: 60px; height: 60px;