https://f451labs.com/dashboards/Recent content in Dashboards on F451 LabsHugoen-usSun, 31 May 2026 00:00:00 +0000https://f451labs.com/dashboards/alerts/Sun, 31 May 2026 00:00:00 +0000https://f451labs.com/dashboards/alerts/<div class="alarm-display" role="status" aria-live="polite" data-signals='{"ambient_temperature_f":"--","whisper_alert":"--","seashell_interference_pct":"--","updated":"--"}' data-init="@get('/api/sensors/stream?device=iot-hound-01')" data-class='{"alarm": $ambient_temperature_f >= 451 || $whisper_alert >= 1 || ($seashell_interference_pct !== "--" && $seashell_interference_pct <= 0)}'> <div class="alarm-display-head"> <span class="alarm-display-title">PRESERVATION OF ORDER</span> <span class="alarm-display-device">iot-hound-01</span> </div> <div class="alarm-display-sensors"> <div> <span class="alarm-display-sensor-label">TEMP °F</span> <span class="alarm-display-sensor-value" data-text="$ambient_temperature_f">--</span> </div> <div> <span class="alarm-display-sensor-label">WHISPER</span> <span class="alarm-display-sensor-value" data-text="$whisper_alert">--</span> </div> <div> <span class="alarm-display-sensor-label">SEASHELL %</span> <span class="alarm-display-sensor-value" data-text="$seashell_interference_pct">--</span> </div> </div> <div class="alarm-display-level" id="alarm-level-iot-hound-01">—</div> <div class="alarm-display-message" id="alarm-message-iot-hound-01">no alerts on record</div> <div class="alarm-display-meta">LAST ALERT <span id="alarm-ts-iot-hound-01">—</span></div> </div> <script> (() => { const lvl = document.getElementById("alarm-level-iot-hound-01"); const msg = document.getElementById("alarm-message-iot-hound-01"); const ts = document.getElementById("alarm-ts-iot-hound-01"); const es = new EventSource("/api/alerts/stream?backlog=5"); es.addEventListener("alert", (e) => { const a = JSON.parse(e.data); lvl.textContent = a.level.toUpperCase(); msg.textContent = a.message; ts.textContent = String(a.ts).replace("T", " ").slice(0, 19); }); window.addEventListener("beforeunload", () => es.close(), { once: true }); })(); </script>https://f451labs.com/dashboards/street-map/Sun, 31 May 2026 00:00:00 +0000https://f451labs.com/dashboards/street-map/<div class="street-map"> <svg class="street-map-svg" viewBox="0 0 600 400" xmlns="http://www.w3.org/2000/svg" aria-hidden="true"> <rect width="600" height="400" fill="#EFE7D5"/> <line x1="0" y1="130" x2="600" y2="130" stroke="#1A1715" stroke-width="6"/> <line x1="0" y1="270" x2="600" y2="270" stroke="#1A1715" stroke-width="6"/> <line x1="150" y1="0" x2="150" y2="400" stroke="#1A1715" stroke-width="6"/> <line x1="420" y1="0" x2="420" y2="400" stroke="#1A1715" stroke-width="6"/> <text x="20" y="120" font-family="monospace" font-size="9" fill="#1A1715" letter-spacing="2">FIREMEN'S WAY</text> <text x="20" y="260" font-family="monospace" font-size="9" fill="#1A1715" letter-spacing="2">MONTAG TERRACE</text> <text x="155" y="20" font-family="monospace" font-size="9" fill="#1A1715" letter-spacing="2">SECTOR 4</text> <text x="425" y="20" font-family="monospace" font-size="9" fill="#1A1715" letter-spacing="2">SECTOR 9</text> <circle cx="240" cy="195" r="6" fill="#D43A2E"/> <circle cx="495" cy="300" r="6" fill="#D43A2E"/> </svg> <div class="street-map-tiles"> <div class="map-tile" id="tile-iot-hound-01" style="left:33%;top:42%;transform:translate(-50%,-50%)"> <span class="map-tile-label">IOT-HOUND-01 / MONTAG</span> <div class="map-tile-temp" id="t01-temp">--°F</div> <div class="map-tile-meta" id="t01-meta">no signal</div> </div> <div class="map-tile" id="tile-iot-hound-02" style="left:78%;top:69%;transform:translate(-50%,-50%)"> <span class="map-tile-label">IOT-HOUND-02 / MILDRED</span> <div class="map-tile-temp" id="t02-temp">--°F</div> <div class="map-tile-meta" id="t02-meta">no signal</div> </div> </div> </div> <script> (() => { const SIG_PREFIX = "signals "; const parseSig = (data) => JSON.parse(data.startsWith(SIG_PREFIX) ? data.slice(SIG_PREFIX.length) : data); const tiles = [ { device: "iot-hound-01", tempEl: document.getElementById("t01-temp"), metaEl: document.getElementById("t01-meta"), tileEl: document.getElementById("tile-iot-hound-01") }, { device: "iot-hound-02", tempEl: document.getElementById("t02-temp"), metaEl: document.getElementById("t02-meta"), tileEl: document.getElementById("tile-iot-hound-02") }, ]; const connections = []; for (const { device, tempEl, metaEl, tileEl } of tiles) { const es = new EventSource( `/api/sensors/stream?device=${encodeURIComponent(device)}` ); connections.push(es); es.addEventListener("datastar-patch-signals", (e) => { const sig = parseSig(e.data); const temp = sig.ambient_temperature_f; const whisper = sig.whisper_alert; const seashell = sig.seashell_interference_pct; tileEl.classList.remove("disconnected"); if (temp != null) tempEl.textContent = `${temp}°F`; if (sig.updated != null) metaEl.textContent = String(sig.updated).slice(0, 8); const isAlarm = (temp != null && temp >= 451) || (whisper != null && whisper >= 1) || (seashell != null && seashell <= 0); tileEl.classList.toggle("alarm", isAlarm); }); es.onerror = () => { metaEl.textContent = "disconnected"; tileEl.classList.add("disconnected"); }; } window.addEventListener("beforeunload", () => connections.forEach((c) => c.close()), { once: true }); })(); </script>https://f451labs.com/dashboards/sim-01/Mon, 25 May 2026 00:00:00 +0000https://f451labs.com/dashboards/sim-01/<p>The synthetic first device — the simdev stand-in for hardware. Live values update over SSE as readings arrive; the table below is the recent backlog from the logger.</p> <div class="readout" role="status" aria-live="polite" data-signals="{temperature: '--', humidity: '--', updated: '--'}" data-init="@get('/api/sensors/stream?device=sim-01')"> <div class="readout-head"> <span class="readout-title">LIVE READOUT</span> <span class="readout-device">sim-01</span> </div> <div class="readout-grid"> <div class="readout-cell"> <span class="readout-label">TEMP</span> <span class="readout-value" data-text="$temperature">--</span> <span class="readout-unit">°C</span> </div> <div class="readout-cell"> <span class="readout-label">RH</span> <span class="readout-value" data-text="$humidity">--</span> <span class="readout-unit">%</span> </div> </div> <div class="readout-meta">LAST CONTACT <span data-text="$updated">--</span></div> </div> <div class="history" data-device="sim-01" data-limit="15"> <div class="history-head"> <span class="history-title">RECENT READINGS</span> <span class="history-device">sim-01</span> </div> <table class="history-table"> <thead><tr><th>TIME (UTC)</th><th>METRIC</th><th>VALUE</th></tr></thead> <tbody class="history-rows"><tr><td colspan="3">loading…</td></tr></tbody> </table> </div> <script> (() => { const el = document.currentScript.previousElementSibling; const tbody = el.querySelector(".history-rows"); const note = (msg) => { tbody.replaceChildren(); const tr = document.createElement("tr"), td = document.createElement("td"); td.colSpan = 3; td.textContent = msg; tr.appendChild(td); tbody.appendChild(tr); }; const url = `/api/sensors/${encodeURIComponent(el.dataset.device)}/history?limit=${encodeURIComponent(el.dataset.limit)}`; fetch(url, { headers: { Accept: "application/json" } }) .then((r) => (r.ok ? r.json() : Promise.reject(r.status))) .then((rows) => { if (!rows.length) return note("no readings on record"); tbody.replaceChildren(); for (const x of rows) { const tr = document.createElement("tr"); const cells = [ String(x.recorded_at).replace("T", " ").slice(0, 19), x.metric, `${x.value}${x.unit || ""}`, ]; for (const v of cells) { const td = document.createElement("td"); td.textContent = v; tr.appendChild(td); } tbody.appendChild(tr); } }) .catch(() => note("telemetry unavailable")); })(); </script>