johan
/
alert-dashboard
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move sensors vertical between cam and calendar in bottom strip

This commit is contained in:
James 2026-02-14 02:51:26 -05:00
parent 569963c02d
commit 10524d5d9b
1 changed files with 36 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

76
index.html
View File

@ -14,7 +14,7 @@ body { background: #0a0a0a; color: #e0ddd5; font-family: 'Sora', sans-serif; ove
#right { width: 42%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; } #right { width: 42%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 16px; gap: 12px; }
/* Camera */ /* Camera */
#cam-wrap { width: 70%; border-radius: 8px; overflow: hidden; border: 1px solid #222; flex-shrink: 0; } #cam-wrap { flex: 1; min-width: 0; border-radius: 8px; overflow: hidden; border: 1px solid #222; flex-shrink: 0; }
#pulse-cam { width: 100%; display: block; background: #111; } #pulse-cam { width: 100%; display: block; background: #111; }
/* Clock */ /* Clock */
@ -23,16 +23,19 @@ canvas#clock { width: 180px; height: 180px; }
#digital-time { text-align: center; color: #c8b273; font-size: 21px; font-weight: 300; letter-spacing: 2px; margin-top: 6px; font-variant-numeric: tabular-nums; } #digital-time { text-align: center; color: #c8b273; font-size: 21px; font-weight: 300; letter-spacing: 2px; margin-top: 6px; font-variant-numeric: tabular-nums; }
#digital-date { text-align: center; color: #666; font-size: 13px; font-weight: 400; letter-spacing: 1px; margin-top: 2px; } #digital-date { text-align: center; color: #666; font-size: 13px; font-weight: 400; letter-spacing: 1px; margin-top: 2px; }
/* Bottom strip: cam | sensors | calendar */
#bottom-strip { display: flex; align-items: center; gap: 16px; width: 100%; }
/* Room sensors */ /* Room sensors */
#room-sensors { display: flex; gap: 20px; justify-content: center; width: 100%; max-width: 280px; padding: 8px 0; } #room-sensors { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
#room-sensors .sensor { text-align: center; } #room-sensors .sensor { text-align: center; }
#room-sensors .sensor-val { font-size: 22px; font-weight: 300; color: #e0ddd5; font-variant-numeric: tabular-nums; } #room-sensors .sensor-val { font-size: 20px; font-weight: 300; color: #e0ddd5; font-variant-numeric: tabular-nums; line-height: 1.2; }
#room-sensors .sensor-label { font-size: 10px; color: #555; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; } #room-sensors .sensor-label { font-size: 9px; color: #555; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; }
#room-sensors .sensor-val.warn { color: #d4a050; } #room-sensors .sensor-val.warn { color: #d4a050; }
#room-sensors .sensor-val.crit { color: #c45; } #room-sensors .sensor-val.crit { color: #c45; }
/* Calendar */ /* Calendar */
#calendar { width: 100%; max-width: 280px; } #calendar { flex-shrink: 0; width: 180px; }
#cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; } #cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#cal-nav button { background: none; border: 1px solid #333; color: #c8b273; font-family: 'Sora'; font-size: 15px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } #cal-nav button { background: none; border: 1px solid #333; color: #c8b273; font-family: 'Sora'; font-size: 15px; width: 26px; height: 26px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
#cal-nav button:hover { background: #1a1a1a; border-color: #c8b273; } #cal-nav button:hover { background: #1a1a1a; border-color: #c8b273; }
@ -80,24 +83,26 @@ canvas#clock { width: 180px; height: 180px; }
<div id="alerts-header"><span class="dot"></span> STATUS</div> <div id="alerts-header"><span class="dot"></span> STATUS</div>
<div id="alert-list"></div> <div id="alert-list"></div>
</div> </div>
<div id="cam-wrap"><img id="pulse-cam" alt="Pulse-Ox"></div>
</div> </div>
<div id="right"> <div id="right">
<div id="clock-wrap"><canvas id="clock" width="440" height="440"></canvas></div> <div id="clock-wrap"><canvas id="clock" width="440" height="440"></canvas></div>
<div id="digital-time"></div> <div id="digital-time"></div>
<div id="digital-date"></div> <div id="digital-date"></div>
<div id="room-sensors" style="display:none"> <div id="bottom-strip" style="display:none">
<div class="sensor"><div class="sensor-val" id="s-temp">--</div><div class="sensor-label">Temp</div></div> <div id="cam-wrap"><img id="pulse-cam" alt="Pulse-Ox"></div>
<div class="sensor"><div class="sensor-val" id="s-hum">--</div><div class="sensor-label">Humidity</div></div> <div id="room-sensors" style="display:none">
<div class="sensor"><div class="sensor-val" id="s-co2">--</div><div class="sensor-label">CO₂</div></div> <div class="sensor"><div class="sensor-val" id="s-temp">--</div><div class="sensor-label">Temp</div></div>
</div> <div class="sensor"><div class="sensor-val" id="s-hum">--</div><div class="sensor-label">Humidity</div></div>
<div id="calendar"> <div class="sensor"><div class="sensor-val" id="s-co2">--</div><div class="sensor-label">CO₂</div></div>
<div id="cal-nav"> </div>
<button id="cal-prev">‹</button> <div id="calendar">
<div id="cal-title"></div> <div id="cal-nav">
<button id="cal-next">›</button> <button id="cal-prev">‹</button>
<div id="cal-title"></div>
<button id="cal-next">›</button>
</div>
<div id="cal-grid"></div>
</div> </div>
<div id="cal-grid"></div>
</div> </div>
</div> </div>
@ -352,8 +357,11 @@ evtSource.onerror = () => { setTimeout(() => location.reload(), 5000); };
// Resume audio on first interaction // Resume audio on first interaction
document.addEventListener('click', () => { if (audioCtx.state === 'suspended') audioCtx.resume(); }, { once: true }); document.addEventListener('click', () => { if (audioCtx.state === 'suspended') audioCtx.resume(); }, { once: true });
// === ROOM SENSORS (7pm - 8am only) === // === NIGHT STRIP: Camera + Sensors (7pm - 8am only) ===
const bottomStrip = document.getElementById('bottom-strip');
const sensorEl = document.getElementById('room-sensors'); const sensorEl = document.getElementById('room-sensors');
const camImg = document.getElementById('pulse-cam');
const camWrap = document.getElementById('cam-wrap');
function isNightTime() { function isNightTime() {
const h = new Date().getHours(); const h = new Date().getHours();
@ -361,8 +369,6 @@ function isNightTime() {
} }
async function updateSensors() { async function updateSensors() {
if (!isNightTime()) { sensorEl.style.display = 'none'; return; }
sensorEl.style.display = '';
try { try {
const r = await fetch('/api/sensors/bed1'); const r = await fetch('/api/sensors/bed1');
const d = await r.json(); const d = await r.json();
@ -370,12 +376,12 @@ async function updateSensors() {
const tempC = ((tempF - 32) * 5/9).toFixed(1); const tempC = ((tempF - 32) * 5/9).toFixed(1);
document.getElementById('s-temp').textContent = Math.round(tempF) + '°'; document.getElementById('s-temp').textContent = Math.round(tempF) + '°';
document.getElementById('s-temp').title = tempC + '°C'; document.getElementById('s-temp').title = tempC + '°C';
const hum = parseFloat(d.humidity); const hum = parseFloat(d.humidity);
const humEl = document.getElementById('s-hum'); const humEl = document.getElementById('s-hum');
humEl.textContent = Math.round(hum) + '%'; humEl.textContent = Math.round(hum) + '%';
humEl.className = 'sensor-val' + (hum < 30 || hum > 65 ? ' warn' : ''); humEl.className = 'sensor-val' + (hum < 30 || hum > 65 ? ' warn' : '');
const co2 = parseInt(d.co2); const co2 = parseInt(d.co2);
const co2El = document.getElementById('s-co2'); const co2El = document.getElementById('s-co2');
co2El.textContent = co2; co2El.textContent = co2;
@ -383,32 +389,22 @@ async function updateSensors() {
} catch(e) { console.error('Sensor fetch failed:', e); } } catch(e) { console.error('Sensor fetch failed:', e); }
} }
updateSensors(); function updateNightStrip() {
setInterval(updateSensors, 30000); if (isNightTime()) {
bottomStrip.style.display = '';
// === PULSE-OX CAMERA (7pm - 8am only) === sensorEl.style.display = '';
const camImg = document.getElementById('pulse-cam');
const camWrap = document.getElementById('cam-wrap');
function isCamTime() {
const h = new Date().getHours();
return h >= 19 || h < 8;
}
function updateCam() {
if (isCamTime()) {
camWrap.style.display = '';
if (!camImg.src.includes('/stream')) { if (!camImg.src.includes('/stream')) {
camImg.src = '/api/cam/pulse-ox/stream'; camImg.src = '/api/cam/pulse-ox/stream';
} }
updateSensors();
} else { } else {
camWrap.style.display = 'none'; bottomStrip.style.display = 'none';
camImg.src = ''; camImg.src = '';
} }
} }
updateCam(); updateNightStrip();
setInterval(updateCam, 60000); setInterval(updateNightStrip, 30000);
</script> </script>
</body> </body>
</html> </html>