Samuele Locatelli
170 lines
8.8 KiB
HTML
170 lines
8.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>PlcVanguard | Industrial Dashboard</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
|
|
body { font-family: 'Inter', sans-serif; background-color: #f3f4f6; }
|
|
.warning-bg { background-color: #fef08a; } /* yellow-200 */
|
|
.error-bg { background-color: #fee2e2; } /* red-200 */
|
|
</style>
|
|
</head>
|
|
<body class="text-gray-800">
|
|
|
|
<!-- Navbar -->
|
|
<nav class="bg-slate-900 text-white p-4 shadow-lg">
|
|
<div class="container mx-auto flex justify-between items-center">
|
|
<div class="flex items-center space-x-2">
|
|
<div class="w-8 h-8 bg-blue-500 rounded-md flex items-center justify-center font-bold text-white">P</div>
|
|
<span class="text-xl font-bold tracking-tight">PlcVanguard</span>
|
|
</div>
|
|
<div class="flex items-center space-x-4">
|
|
<span class="text-sm text-green-400 flex items-center">
|
|
<span id="connStatusDot" class="w-2 h-2 bg-green-400 rounded-full mr-2 animate-pulse"></span>
|
|
Connected: <span id="plcIpDisplay">127.0.0.1</span>
|
|
</span>
|
|
<button class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded text-sm font-semibold transition">Settings</button>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="container mx-auto py-8 px-4">
|
|
<header class="mb-8">
|
|
<h1 id="mainTitle" class="text-3xl font-bold mb-2">Live Monitoring Dashboard</h1>
|
|
<p id="mainSubtitle" class="text-gray-600">Real-time polling of DB901 and event-triggered acquisition from DB900.</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
|
|
<!-- Status Cards -->
|
|
<div class="lg:col-span-2 bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h2 id="chartTitle" class="font-semibold text-lg">Live Acquisition (5Hz)</h2>
|
|
<div id="timerDisplay" class="text-blue-600 font-mono font-bold">Time Remaining: --</div>
|
|
</div>
|
|
<div class="h-[450px] relative">
|
|
<canvas id="liveChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Simulation Controls & Status -->
|
|
<div class="space-y-6">
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h2 class="font-semibold text-lg mb-4">Control Panel</h2>
|
|
<div class="space-y-4">
|
|
<p class="text-sm text-gray-500">Target Mean: 210mm<br>Control Limits: ±2mm (Warning), ±3mm (Error)</p>
|
|
<button id="startBtn" class="w-full bg-green-600 hover:bg-green-700 text-white font-bold py-3 rounded-lg transition shadow-md">
|
|
Start Acquisition
|
|
</button>
|
|
<div id="progressContainer" class="hidden">
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5">
|
|
<div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div>
|
|
</div>
|
|
<p class="text-xs text-gray-400 mt-2">Data collection in progress...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-blue-900 text-white p-6 rounded-xl shadow-lg">
|
|
<h2 class="font-semibold text-lg mb-2">System Overview</h2>
|
|
<ul class="text-sm space-y-2 opacity-90">
|
|
<li id="plcStatusList">• PLC: Siemens S7-1500</li>
|
|
<li id="acquisitionStatusList">• Mode: Polling (5Hz)</li>
|
|
<li id="latencyList">• Latency: --ms</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
<!-- LEFT COLUMN: Session Selection (History) -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h2 id="historyHeader" class="font-semibold text-lg mb-4">Recording Sessions</h2>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-xs">
|
|
<thead class="bg-gray-50">
|
|
<tr class="border-b">
|
|
<th class="p-2">ID</th>
|
|
<th class="p-2">Timestamp</th>
|
|
<th class="p-2">Status</th>
|
|
<th class="p-2">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="historyTableBody">
|
|
<!-- Sessions injected by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<button id="prevPage" class="px-2 py-1 bg-gray-200 rounded text-xs">Prev</button>
|
|
<span id="pageInfo" class="text-xs">Page 1</span>
|
|
<button id="nextPage" class="px-2 py-1 bg-gray-200 rounded text-xs">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- RIGHT COLUMN: Dynamic Detail View -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-200">
|
|
<h2 id="detailTitle" class="font-semibold text-lg mb-4">Detail View</h2>
|
|
|
|
<div id="detailPlaceholder" class="text-gray-400 italic text-center py-20">
|
|
Click a row in the history table to view all captured data points.
|
|
</div>
|
|
|
|
<!-- Live Data View (Only during acquisition) -->
|
|
<div id="liveDataContainer" class="hidden space-y-4">
|
|
<h3 class="text-[10px] uppercase font-bold text-gray-400">Live Session Stream</h3>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left text-xs">
|
|
<thead class="bg-gray-50">
|
|
<tr class="border-b">
|
|
<th class="p-2">Index</th>
|
|
<th class="p-2">Timestamp</th>
|
|
<th class="p-2">Value (mm)</th>
|
|
<th class="p-2">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="fullDataTableBody">
|
|
<!-- Data points injected by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div class="flex justify-between items-center mt-4">
|
|
<button id="fullPrevPage" class="px-2 py-1 bg-gray-200 rounded text-xs">Prev</button>
|
|
<span id="fullPageInfo" class="text-xs">Page 1</span>
|
|
<button id="fullNextPage" class="px-2 py-1 bg-gray-200 rounded text-xs">Next</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- History Detail View (Only for loaded sessions) -->
|
|
<div id="historyDetailContainer" class="hidden space-y-4">
|
|
<h3 class="text-[10px] uppercase font-bold text-gray-400">Session Summary</h3>
|
|
<div class="bg-gray-50 rounded-lg border border-gray-100 p-3">
|
|
<table class="w-full text-left text-xs">
|
|
<thead class="bg-gray-50">
|
|
<tr class="border-b">
|
|
<th class="p-3">Timestamp</th>
|
|
<th class="p-3">Value (mm)</th>
|
|
<th class="p-3">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="measurementsTable">
|
|
<!-- Last 3 rows injected by JS -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<!-- FIX: Added missing detailContent container -->
|
|
<div id="detailContent" class="hidden mt-4 p-4 bg-blue-50 border border-blue-200 rounded">
|
|
<div id="selectedData" class="text-xs font-mono"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script src="/static/js/script.js"></script>
|
|
</body>
|
|
</html>
|