serversdown/seismo-relay
1
0
Fork 0
Code Issues 4 Pull Requests Actions Packages Projects Releases Wiki Activity

fix: convert raw psi 32 float into db(L).

Browse Source
This commit is contained in:
Brian Harrison
2026-04-14 01:13:21 -04:00
parent 27d9823cc1
commit b384ba66d1
1 changed files with 133 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sfm/sfm_webapp.html
+128 -27
View File
@@ -110,8 +110,7 @@
.btn-ghost:hover { border-color: var(--blue-lt); color: var(--blue-lt); } .btn-ghost:hover { border-color: var(--blue-lt); color: var(--blue-lt); }
.btn:disabled { background: var(--surface2) !important; color: var(--text-mute) !important; cursor: not-allowed; border-color: var(--border2) !important; } .btn:disabled { background: var(--surface2) !important; color: var(--text-mute) !important; cursor: not-allowed; border-color: var(--border2) !important; }
#connect-btn { background: var(--green); color: #fff; margin-left: auto; } /* #connect-btn styles moved to #live-connect-bar block */
#connect-btn:hover { background: var(--green-lt); }
/* ── Device info bar ── */ /* ── Device info bar ── */
#device-bar { #device-bar {
@@ -585,6 +584,59 @@
} }
.unit-card .uc-label { font-size: 11px; color: var(--text-mute); } .unit-card .uc-label { font-size: 11px; color: var(--text-mute); }
.unit-card .uc-val { font-size: 12px; color: var(--text); font-family: monospace; } .unit-card .uc-val { font-size: 12px; color: var(--text); font-family: monospace; }
/* ── Section switcher ── */
.section-switcher {
display: flex;
gap: 3px;
background: var(--bg);
border: 1px solid var(--border);
border-radius: 7px;
padding: 3px;
}
.section-btn {
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 12px;
font-weight: 600;
padding: 4px 14px;
transition: background 0.12s, color 0.12s;
background: none;
color: var(--text-dim);
white-space: nowrap;
}
.section-btn:hover { color: var(--text); }
.section-btn.active { background: var(--blue); color: #fff; }
/* ── Section containers ── */
#section-live, #section-db {
display: flex;
flex-direction: column;
flex: 1;
overflow: hidden;
min-height: 0;
}
#section-db { display: none; }
/* ── Live connect bar (host/port/connect, live section only) ── */
#live-connect-bar {
background: var(--surface);
border-bottom: 1px solid var(--border2);
padding: 8px 18px;
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
flex-wrap: wrap;
}
#live-connect-bar label.hdr { color: var(--text-dim); font-size: 11px; }
#live-connect-bar input[type="text"],
#live-connect-bar input[type="number"] { font-size: 12px; padding: 5px 8px; }
#live-connect-bar #dev-host { width: 150px; }
#live-connect-bar #dev-port { width: 70px; }
#connect-btn { margin-left: auto; background: var(--green); color: #fff; }
#connect-btn:hover { background: var(--green-lt); }
</style> </style>
</head> </head>
<body> <body>
@@ -597,14 +649,26 @@
<label class="hdr">API</label> <label class="hdr">API</label>
<input type="text" id="api-base" /> <input type="text" id="api-base" />
</div> </div>
<div class="hdr-group"> <div class="hdr-sep"></div>
<label class="hdr">Device host</label> <div class="section-switcher">
<button class="section-btn active" onclick="switchSection('live')">Live Device</button>
<button class="section-btn" onclick="switchSection('db')">Database</button>
</div>
</header>
<!-- ════════════════════════════════════════════════════════════════
SECTION: Live Device
═══════════════════════════════════════════════════════════════════ -->
<div id="section-live">
<!-- ── Live connect bar ────────────────────────────────────────────── -->
<div id="live-connect-bar">
<label class="hdr">Host</label>
<input type="text" id="dev-host" placeholder="e.g. 63.43.212.232" /> <input type="text" id="dev-host" placeholder="e.g. 63.43.212.232" />
<label class="hdr">Port</label> <label class="hdr">Port</label>
<input type="number" id="dev-port" value="9034" /> <input type="number" id="dev-port" value="9034" />
</div>
<button class="btn" id="connect-btn" onclick="connectUnit()">Connect</button> <button class="btn" id="connect-btn" onclick="connectUnit()">Connect</button>
</header> </div>
<!-- ── Device info bar ─────────────────────────────────────────────── --> <!-- ── Device info bar ─────────────────────────────────────────────── -->
<div id="device-bar"> <div id="device-bar">
@@ -670,15 +734,11 @@
<!-- ── Status bar ─────────────────────────────────────────────────── --> <!-- ── Status bar ─────────────────────────────────────────────────── -->
<div id="status-bar">Ready — enter device host and click Connect.</div> <div id="status-bar">Ready — enter device host and click Connect.</div>
<!-- ── Tab bar ────────────────────────────────────────────────────── --> <!-- ── Live tab bar ───────────────────────────────────────────────── -->
<div class="tab-bar"> <div class="tab-bar" id="live-tab-bar">
<button class="tab-btn active" onclick="switchTab('device')">Device</button> <button class="tab-btn active" data-tab="device" onclick="switchTab('device')">Device</button>
<button class="tab-btn" onclick="switchTab('events')">Events</button> <button class="tab-btn" data-tab="events" onclick="switchTab('events')">Events</button>
<button class="tab-btn" onclick="switchTab('config')">Config</button> <button class="tab-btn" data-tab="config" onclick="switchTab('config')">Config</button>
<button class="tab-btn" onclick="switchTab('history')">History</button>
<button class="tab-btn" onclick="switchTab('units')">Units</button>
<button class="tab-btn" onclick="switchTab('monlog')">Monitor Log</button>
<button class="tab-btn" onclick="switchTab('sessions')">Sessions</button>
</div> </div>
<!-- ════════════════════════════════════════════════════════════════ <!-- ════════════════════════════════════════════════════════════════
@@ -817,6 +877,21 @@
<span id="cfg-status"></span> <span id="cfg-status"></span>
</div> </div>
</div><!-- end #tab-config -->
</div><!-- end #section-live -->
<!-- ════════════════════════════════════════════════════════════════
SECTION: Database
═══════════════════════════════════════════════════════════════════ -->
<div id="section-db">
<!-- ── Database tab bar ──────────────────────────────────────────── -->
<div class="tab-bar" id="db-tab-bar">
<button class="tab-btn active" data-tab="history" onclick="switchTab('history')">History</button>
<button class="tab-btn" data-tab="units" onclick="switchTab('units')">Units</button>
<button class="tab-btn" data-tab="monlog" onclick="switchTab('monlog')">Monitor Log</button>
<button class="tab-btn" data-tab="sessions" onclick="switchTab('sessions')">Sessions</button>
</div> </div>
<!-- ════════════════════════════════════════════════════════════════ <!-- ════════════════════════════════════════════════════════════════
@@ -852,7 +927,7 @@
<th>Vert (in/s)</th> <th>Vert (in/s)</th>
<th>Long (in/s)</th> <th>Long (in/s)</th>
<th>PVS (in/s)</th> <th>PVS (in/s)</th>
<th>Mic</th> <th>Mic (dBL)</th>
<th>Project</th> <th>Project</th>
<th>Client</th> <th>Client</th>
<th>Type</th> <th>Type</th>
@@ -949,7 +1024,9 @@
</table> </table>
</div> </div>
</div> </div>
</div> </div><!-- end #tab-sessions -->
</div><!-- end #section-db -->
<!-- ── Script ─────────────────────────────────────────────────────── --> <!-- ── Script ─────────────────────────────────────────────────────── -->
<script> <script>
@@ -993,25 +1070,48 @@ function deviceParams() {
return `host=${encodeURIComponent(devHost())}&tcp_port=${devPort()}`; return `host=${encodeURIComponent(devHost())}&tcp_port=${devPort()}`;
} }
// ── Tab switching ────────────────────────────────────────────────────────────── // ── Section switching ─────────────────────────────────────────────────────────
const TAB_NAMES = ['device','events','config','history','units','monlog','sessions']; let currentSection = 'live';
function switchTab(name) { function switchSection(name) {
document.querySelectorAll('.tab-btn').forEach((b, i) => { currentSection = name;
b.classList.toggle('active', TAB_NAMES[i] === name); document.querySelectorAll('.section-btn').forEach(b => {
b.classList.toggle('active', b.textContent.toLowerCase().startsWith(name === 'live' ? 'live' : 'data'));
}); });
document.getElementById('section-live').style.display = name === 'live' ? 'flex' : 'none';
document.getElementById('section-db').style.display = name === 'db' ? 'flex' : 'none';
// Auto-load DB section on first visit
if (name === 'db') {
if (!histLoaded) loadHistory();
if (!unitsLoaded) loadUnits();
}
}
// ── Tab switching ──────────────────────────────────────────────────────────────
function switchTab(name) {
// Activate the matching tab button within its own tab bar
const btn = document.querySelector(`.tab-btn[data-tab="${name}"]`);
if (btn) {
btn.closest('.tab-bar').querySelectorAll('.tab-btn')
.forEach(b => b.classList.remove('active'));
btn.classList.add('active');
}
// Hide all panes in both sections, then show the target
document.querySelectorAll('.tab-pane').forEach(p => { document.querySelectorAll('.tab-pane').forEach(p => {
p.classList.remove('active'); p.classList.remove('active');
if (p.style.display === 'flex') p.style.display = 'none'; if (p.style.display === 'flex') p.style.display = 'none';
}); });
const pane = document.getElementById(`tab-${name}`); const pane = document.getElementById(`tab-${name}`);
if (pane.id === 'tab-events') { if (!pane) return;
pane.style.display = 'flex'; const needsFlex = pane.id === 'tab-events' || pane.classList.contains('db-tab-pane');
} else if (pane.classList.contains('db-tab-pane')) { if (needsFlex) {
pane.style.display = 'flex'; pane.style.display = 'flex';
} else { } else {
pane.classList.add('active'); pane.classList.add('active');
} }
// Auto-load DB tabs on first switch // Auto-load DB tabs on first switch
if (name === 'history') { if (!histLoaded) loadHistory(); } if (name === 'history') { if (!histLoaded) loadHistory(); }
if (name === 'units') { if (!unitsLoaded) loadUnits(); } if (name === 'units') { if (!unitsLoaded) loadUnits(); }
@@ -1651,7 +1751,7 @@ async function loadHistory() {
<td class="${_ppvClass(ev.vert_ppv)}">${_ppvFmt(ev.vert_ppv)}</td> <td class="${_ppvClass(ev.vert_ppv)}">${_ppvFmt(ev.vert_ppv)}</td>
<td class="${_ppvClass(ev.long_ppv)}">${_ppvFmt(ev.long_ppv)}</td> <td class="${_ppvClass(ev.long_ppv)}">${_ppvFmt(ev.long_ppv)}</td>
<td class="${_ppvClass(pvs)}">${_ppvFmt(pvs)}</td> <td class="${_ppvClass(pvs)}">${_ppvFmt(pvs)}</td>
<td class="td-dim">${ev.mic_ppv != null ? ev.mic_ppv.toExponential(3) : '—'}</td> <td class="td-dim">${ev.mic_ppv != null && ev.mic_ppv > 0 ? (20 * Math.log10(ev.mic_ppv / DBL_REF)).toFixed(1) + ' dBL' : '—'}</td>
<td class="td-text">${ev.project ?? '—'}</td> <td class="td-text">${ev.project ?? '—'}</td>
<td class="td-text">${ev.client ?? '—'}</td> <td class="td-text">${ev.client ?? '—'}</td>
<td class="td-dim">${ev.record_type ?? '—'}</td> <td class="td-dim">${ev.record_type ?? '—'}</td>
@@ -1830,7 +1930,8 @@ document.addEventListener('keydown', e => {
// hit localhost:8200, 10.0.0.44:8200, or anything else. // hit localhost:8200, 10.0.0.44:8200, or anything else.
document.getElementById('api-base').value = window.location.origin; document.getElementById('api-base').value = window.location.origin;
['api-base','dev-host','dev-port'].forEach(id => { // Press Enter in any live connect field to connect
['dev-host','dev-port'].forEach(id => {
document.getElementById(id)?.addEventListener('keydown', e => { if (e.key === 'Enter') connectUnit(); }); document.getElementById(id)?.addEventListener('keydown', e => { if (e.key === 'Enter') connectUnit(); });
}); });
</script> </script>