Preston Hunter
2bfb34724d
- Update HARDWARE.md to recommend ESP32-S3 over RP2040 to support Wi-Fi logging capabilities and better GPIO availability. - Initialize a Node.js Express server to receive and store test results from the hardware device. - Add a web-based dashboard to visualize HDMI pin status history, including basic pass/fail logic for voltage drops.
66 lines
2.6 KiB
HTML
66 lines
2.6 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>HDMI Tester Dashboard</title>
|
|
<style>
|
|
body { font-family: sans-serif; background: #f4f4f4; padding: 20px; }
|
|
.test-card { background: white; border-radius: 8px; padding: 15px; margin-bottom: 20px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
|
|
.pass { color: green; font-weight: bold; }
|
|
.fail { color: red; font-weight: bold; }
|
|
table { width: 100%; border-collapse: collapse; margin-top: 10px; }
|
|
th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
|
|
th { background-color: #f2f2f2; }
|
|
.short { background-color: #ffcccc; }
|
|
.open { background-color: #fff3cd; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>HDMI Tester History</h1>
|
|
<div id="results-container">Loading results...</div>
|
|
|
|
<script>
|
|
async function fetchResults() {
|
|
const response = await fetch('/api/results');
|
|
const data = await response.json();
|
|
const container = document.getElementById('results-container');
|
|
container.innerHTML = '';
|
|
|
|
data.reverse().forEach(test => {
|
|
const card = document.createElement('div');
|
|
card.className = 'test-card';
|
|
|
|
let isPass = true;
|
|
let rows = '';
|
|
|
|
test.results.forEach(r => {
|
|
let statusClass = '';
|
|
if (r.voltage < 0.1) { statusClass = 'short'; isPass = false; }
|
|
else if (r.voltage > 1.0 && r.pinName !== '+5V') { statusClass = 'open'; isPass = false; }
|
|
|
|
rows += `<tr class="${statusClass}">
|
|
<td>${r.pinName}</td>
|
|
<td>${r.voltage.toFixed(2)}V</td>
|
|
</tr>`;
|
|
});
|
|
|
|
card.innerHTML = `
|
|
<h3>Test #${test.testId} - ${new Date(test.timestamp).toLocaleString()}</h3>
|
|
<p>Device: ${test.deviceId} | Mode: ${test.mode}</p>
|
|
<p>Status: <span class="${isPass ? 'pass' : 'fail'}">${isPass ? 'PASS' : 'FAIL'}</span></p>
|
|
<table>
|
|
<thead><tr><th>Pin Name</th><th>Voltage</th></tr></thead>
|
|
<tbody>${rows}</tbody>
|
|
</table>
|
|
`;
|
|
container.appendChild(card);
|
|
});
|
|
}
|
|
|
|
fetchResults();
|
|
setInterval(fetchResults, 5000); // Auto-refresh every 5s
|
|
</script>
|
|
</body>
|
|
</html>
|