You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
198 lines
8.0 KiB
HTML
198 lines
8.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>Photobioreactor Dashboard</title>
|
|
<link rel="stylesheet" href="dashboard.css">
|
|
</head>
|
|
|
|
<body>
|
|
<main class="dashboard-shell">
|
|
<header class="dashboard-header">
|
|
<div>
|
|
<p class="eyebrow">Atlas Scientific Monitoring</p>
|
|
<h1>Photobioreactor Dashboard</h1>
|
|
</div>
|
|
<div class="header-status" aria-live="polite">
|
|
<span class="pulse-dot" id="overall-dot"></span>
|
|
<span id="overall-status">INITIALIZING</span>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="metrics-grid" aria-label="Live sensor readings">
|
|
<article class="metric-card" id="card-temperature">
|
|
<div class="metric-topline">
|
|
<span class="metric-label">Temperature</span>
|
|
<span class="metric-state" id="temperature-state">WAITING</span>
|
|
</div>
|
|
<div class="metric-reading">
|
|
<span id="temperature-value">--</span>
|
|
<span class="metric-unit">°C</span>
|
|
</div>
|
|
<p class="metric-source">EZO-RTD · data/EZORTD.json</p>
|
|
</article>
|
|
|
|
<article class="metric-card" id="card-ph">
|
|
<div class="metric-topline">
|
|
<span class="metric-label">pH</span>
|
|
<span class="metric-state" id="ph-state">WAITING</span>
|
|
</div>
|
|
<div class="metric-reading">
|
|
<span id="ph-value">--</span>
|
|
<span class="metric-unit">pH</span>
|
|
</div>
|
|
<p class="metric-source">EZO-pH · data/EZOPH.json</p>
|
|
</article>
|
|
|
|
<article class="metric-card" id="card-do">
|
|
<div class="metric-topline">
|
|
<span class="metric-label">Dissolved Oxygen</span>
|
|
<span class="metric-state" id="do-state">WAITING</span>
|
|
</div>
|
|
<div class="metric-reading">
|
|
<span id="do-value">--</span>
|
|
<span class="metric-unit">mg/L</span>
|
|
</div>
|
|
<p class="metric-source">EZO-DO · data/EZODO.json</p>
|
|
</article>
|
|
|
|
<article class="metric-card" id="card-ec">
|
|
<div class="metric-topline">
|
|
<span class="metric-label">Conductivity</span>
|
|
<span class="metric-state" id="ec-state">WAITING</span>
|
|
</div>
|
|
<div class="metric-reading">
|
|
<span id="ec-value">--</span>
|
|
<span class="metric-unit">µS/cm</span>
|
|
</div>
|
|
<p class="metric-source">EZO-EC · data/EZOEC.json</p>
|
|
</article>
|
|
</section>
|
|
|
|
<section class="system-panel" aria-label="System status">
|
|
<div class="panel-heading">
|
|
<h2>System Status</h2>
|
|
<p>Last update: <span id="last-update">--</span></p>
|
|
</div>
|
|
|
|
<div class="status-grid">
|
|
<div class="status-item">
|
|
<span class="status-label">Polling interval</span>
|
|
<strong>1 second</strong>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Data source</span>
|
|
<strong>Static JSON files</strong>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Active sensors</span>
|
|
<strong id="active-count">0 / 4</strong>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Offline sensors</span>
|
|
<strong id="offline-count">0</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="sensor-health" id="sensor-health" aria-live="polite"></ul>
|
|
</section>
|
|
|
|
<section class="alarm-panel" aria-label="Alarm summary">
|
|
<div class="panel-heading">
|
|
<h2>Alarm Summary</h2>
|
|
<p>Thresholds: <span id="alarm-config-status">loading</span></p>
|
|
</div>
|
|
|
|
<div class="status-grid alarm-grid">
|
|
<div class="status-item">
|
|
<span class="status-label">Active Critical Alarms</span>
|
|
<strong id="critical-count">0</strong>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Active Warnings</span>
|
|
<strong id="warning-count">0</strong>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Offline Sensors</span>
|
|
<strong id="alarm-offline-count">0</strong>
|
|
</div>
|
|
<div class="status-item">
|
|
<span class="status-label">Overall Risk Level</span>
|
|
<strong id="overall-risk">NORMAL</strong>
|
|
</div>
|
|
</div>
|
|
|
|
<ul class="alarm-list" id="alarm-list" aria-live="polite">
|
|
<li class="alarm-empty">No active alarms</li>
|
|
</ul>
|
|
</section>
|
|
|
|
<section class="trends-panel" aria-label="Historical trends">
|
|
<div class="panel-heading">
|
|
<h2>Historical Trends</h2>
|
|
<p>Charts update every <span id="history-interval">10 seconds</span></p>
|
|
</div>
|
|
|
|
<div class="export-toolbar">
|
|
<button id="export-temperature">Export Temperature CSV</button>
|
|
<button id="export-ph">Export pH CSV</button>
|
|
<button id="export-do">Export DO CSV</button>
|
|
<button id="export-ec">Export EC CSV</button>
|
|
<button id="export-all">Export All CSV</button>
|
|
</div>
|
|
|
|
<div class="charts-grid">
|
|
<article class="chart-card">
|
|
<div class="chart-heading">
|
|
<h3>Temperature vs Time</h3>
|
|
<span>logs/temperature.csv</span>
|
|
</div>
|
|
<div class="chart-frame">
|
|
<canvas id="temperature-chart"></canvas>
|
|
<p class="chart-empty" id="temperature-chart-empty">No historical data available</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="chart-card">
|
|
<div class="chart-heading">
|
|
<h3>pH vs Time</h3>
|
|
<span>logs/ph.csv</span>
|
|
</div>
|
|
<div class="chart-frame">
|
|
<canvas id="ph-chart"></canvas>
|
|
<p class="chart-empty" id="ph-chart-empty">No historical data available</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="chart-card">
|
|
<div class="chart-heading">
|
|
<h3>Dissolved Oxygen vs Time</h3>
|
|
<span>logs/do.csv</span>
|
|
</div>
|
|
<div class="chart-frame">
|
|
<canvas id="do-chart"></canvas>
|
|
<p class="chart-empty" id="do-chart-empty">No historical data available</p>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="chart-card">
|
|
<div class="chart-heading">
|
|
<h3>Conductivity vs Time</h3>
|
|
<span>logs/ec.csv</span>
|
|
</div>
|
|
<div class="chart-frame">
|
|
<canvas id="ec-chart"></canvas>
|
|
<p class="chart-empty" id="ec-chart-empty">No historical data available</p>
|
|
</div>
|
|
</article>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="dashboard.js"></script>
|
|
</body>
|
|
|
|
</html> |