422 lines
15 KiB
C
422 lines
15 KiB
C
#ifndef WEB_TEST_H
|
|
#define WEB_TEST_H
|
|
|
|
const char HTML_TEST[] = R"rawliteral(
|
|
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hardware Test - ESP32 CAN FD Logger</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
body {
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
background: #1a1a2e;
|
|
color: #eee;
|
|
line-height: 1.6;
|
|
}
|
|
.header {
|
|
background: #16213e;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
border-bottom: 2px solid #e94560;
|
|
}
|
|
.header h1 { color: #e94560; font-size: 1.5rem; }
|
|
.nav {
|
|
background: #0f3460;
|
|
padding: 0.5rem;
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
.nav a {
|
|
color: #fff;
|
|
text-decoration: none;
|
|
padding: 0.5rem 1rem;
|
|
border-radius: 4px;
|
|
transition: background 0.3s;
|
|
}
|
|
.nav a:hover, .nav a.active { background: #e94560; }
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
}
|
|
.test-card {
|
|
background: #16213e;
|
|
padding: 1.5rem;
|
|
border-radius: 8px;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.test-card h2 { color: #e94560; margin-bottom: 1rem; }
|
|
.test-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
}
|
|
.test-item {
|
|
background: #0f3460;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
}
|
|
.test-item h3 { color: #00d9ff; margin-bottom: 0.5rem; }
|
|
.test-item p { font-size: 0.875rem; color: #aaa; margin-bottom: 1rem; }
|
|
.btn {
|
|
background: #e94560;
|
|
color: #fff;
|
|
border: none;
|
|
padding: 0.75rem 1.5rem;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
transition: background 0.3s;
|
|
font-size: 1rem;
|
|
}
|
|
.btn:hover { background: #ff6b6b; }
|
|
.btn:disabled { background: #666; cursor: not-allowed; }
|
|
.btn-green { background: #00d9ff; color: #000; }
|
|
.btn-green:hover { background: #00b8d4; }
|
|
.form-group {
|
|
margin-bottom: 1rem;
|
|
}
|
|
.form-group label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: #00d9ff;
|
|
}
|
|
.form-group input, .form-group select {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: #0f3460;
|
|
border: 1px solid #e94560;
|
|
color: #fff;
|
|
border-radius: 4px;
|
|
}
|
|
.row {
|
|
display: flex;
|
|
gap: 1rem;
|
|
flex-wrap: wrap;
|
|
}
|
|
.row > * { flex: 1; min-width: 150px; }
|
|
.result-box {
|
|
background: #0f3460;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
margin-top: 1rem;
|
|
}
|
|
.result-row {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding: 0.5rem 0;
|
|
border-bottom: 1px solid #1a1a2e;
|
|
}
|
|
.result-row:last-child { border-bottom: none; }
|
|
.result-label { color: #aaa; }
|
|
.result-value { color: #00d9ff; font-weight: bold; }
|
|
.result-value.pass { color: #2ecc71; }
|
|
.result-value.fail { color: #e74c3c; }
|
|
.status-running {
|
|
animation: pulse 1s infinite;
|
|
}
|
|
@keyframes pulse {
|
|
0%, 100% { opacity: 1; }
|
|
50% { opacity: 0.5; }
|
|
}
|
|
.log {
|
|
background: #0f3460;
|
|
padding: 1rem;
|
|
border-radius: 8px;
|
|
height: 150px;
|
|
overflow-y: auto;
|
|
font-family: monospace;
|
|
font-size: 0.875rem;
|
|
margin-top: 1rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="header">
|
|
<h1>Hardware Test</h1>
|
|
</div>
|
|
<nav class="nav">
|
|
<a href="/">Dashboard</a>
|
|
<a href="/graph">Graph</a>
|
|
<a href="/files">Files</a>
|
|
<a href="/can">CAN Transmit</a>
|
|
<a href="/settings">Settings</a>
|
|
<a href="/test" class="active">Test</a>
|
|
</nav>
|
|
<div class="container">
|
|
<div class="test-card">
|
|
<h2>CAN FD Loopback Test</h2>
|
|
<p style="margin-bottom:1rem;color:#aaa">Tests internal CAN controller by sending frames in loopback mode.</p>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Frame Count</label>
|
|
<input type="number" id="loopbackFrames" value="1000" min="10" max="10000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Interval (μs)</label>
|
|
<input type="number" id="loopbackInterval" value="1000" min="0" max="100000">
|
|
</div>
|
|
</div>
|
|
<button class="btn" onclick="startLoopbackTest()">Start Loopback Test</button>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<h2>CAN FD Stress Test</h2>
|
|
<p style="margin-bottom:1rem;color:#aaa">Tests maximum throughput with continuous frame transmission.</p>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Frame Count</label>
|
|
<input type="number" id="stressFrames" value="5000" min="100" max="50000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Data Length</label>
|
|
<select id="stressDataLen">
|
|
<option value="8">8 bytes (Classic)</option>
|
|
<option value="16">16 bytes (FD)</option>
|
|
<option value="32">32 bytes (FD)</option>
|
|
<option value="64" selected>64 bytes (FD)</option>
|
|
</select>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>CAN FD Mode</label>
|
|
<select id="stressUseFD">
|
|
<option value="true" selected>CAN FD</option>
|
|
<option value="false">Classic CAN</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
<button class="btn" onclick="startStressTest()">Start Stress Test</button>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<h2>Sequence Test</h2>
|
|
<p style="margin-bottom:1rem;color:#aaa">Tests frame ordering and loss detection with sequence numbers.</p>
|
|
|
|
<div class="row">
|
|
<div class="form-group">
|
|
<label>Frame Count</label>
|
|
<input type="number" id="seqFrames" value="2000" min="100" max="20000">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>CAN ID (hex)</label>
|
|
<input type="text" id="seqCanId" value="0x100">
|
|
</div>
|
|
</div>
|
|
<button class="btn" onclick="startSequenceTest()">Start Sequence Test</button>
|
|
</div>
|
|
|
|
<div class="test-card">
|
|
<h2>Test Results</h2>
|
|
<div style="display:flex;gap:1rem;margin-bottom:1rem;">
|
|
<button class="btn btn-green" onclick="getTestStatus()">Refresh Status</button>
|
|
<button class="btn" onclick="stopTest()" id="btnStop" disabled>Stop Test</button>
|
|
</div>
|
|
|
|
<div class="result-box" id="testResults">
|
|
<div class="result-row">
|
|
<span class="result-label">Status:</span>
|
|
<span class="result-value" id="resStatus">Idle</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Frames Sent:</span>
|
|
<span class="result-value" id="resSent">0</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Frames Received:</span>
|
|
<span class="result-value" id="resReceived">0</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Frames Lost:</span>
|
|
<span class="result-value" id="resLost">0</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Frame Rate:</span>
|
|
<span class="result-value" id="resRate">0 fps</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Loss Rate:</span>
|
|
<span class="result-value" id="resLossRate">0%</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Duration:</span>
|
|
<span class="result-value" id="resDuration">0 ms</span>
|
|
</div>
|
|
<div class="result-row">
|
|
<span class="result-label">Result:</span>
|
|
<span class="result-value" id="resPass">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="log" id="testLog"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let testRunning = false;
|
|
let pollInterval = null;
|
|
|
|
function log(msg) {
|
|
const logDiv = document.getElementById('testLog');
|
|
const entry = document.createElement('div');
|
|
entry.textContent = new Date().toLocaleTimeString() + ' - ' + msg;
|
|
logDiv.appendChild(entry);
|
|
logDiv.scrollTop = logDiv.scrollHeight;
|
|
}
|
|
|
|
function startLoopbackTest() {
|
|
const frames = parseInt(document.getElementById('loopbackFrames').value);
|
|
const interval = parseInt(document.getElementById('loopbackInterval').value);
|
|
|
|
fetch('/api/test/start', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
type: 'loopback',
|
|
frames: frames,
|
|
interval: interval
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'started') {
|
|
log('Loopback test started: ' + frames + ' frames');
|
|
testRunning = true;
|
|
startPolling();
|
|
} else {
|
|
log('Error: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function startStressTest() {
|
|
const frames = parseInt(document.getElementById('stressFrames').value);
|
|
const dataLen = parseInt(document.getElementById('stressDataLen').value);
|
|
const useFD = document.getElementById('stressUseFD').value === 'true';
|
|
|
|
fetch('/api/test/start', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
type: 'stress',
|
|
frames: frames,
|
|
dataLen: dataLen,
|
|
useFD: useFD
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'started') {
|
|
log('Stress test started: ' + frames + ' frames, ' + dataLen + ' bytes');
|
|
testRunning = true;
|
|
startPolling();
|
|
} else {
|
|
log('Error: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function startSequenceTest() {
|
|
const frames = parseInt(document.getElementById('seqFrames').value);
|
|
const canId = parseInt(document.getElementById('seqCanId').value, 16);
|
|
|
|
fetch('/api/test/start', {
|
|
method: 'POST',
|
|
headers: {'Content-Type': 'application/json'},
|
|
body: JSON.stringify({
|
|
type: 'sequence',
|
|
frames: frames,
|
|
canId: canId
|
|
})
|
|
})
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
if (data.status === 'started') {
|
|
log('Sequence test started: ' + frames + ' frames, ID=0x' + canId.toString(16));
|
|
testRunning = true;
|
|
startPolling();
|
|
} else {
|
|
log('Error: ' + data.error);
|
|
}
|
|
});
|
|
}
|
|
|
|
function stopTest() {
|
|
fetch('/api/test/stop', {method: 'POST'})
|
|
.then(() => {
|
|
log('Test stopped');
|
|
testRunning = false;
|
|
stopPolling();
|
|
});
|
|
}
|
|
|
|
function getTestStatus() {
|
|
fetch('/api/test/status')
|
|
.then(r => r.json())
|
|
.then(data => {
|
|
updateResults(data);
|
|
});
|
|
}
|
|
|
|
function updateResults(data) {
|
|
document.getElementById('resStatus').textContent = data.running ? 'Running...' : 'Idle';
|
|
document.getElementById('resStatus').className = 'result-value' + (data.running ? ' status-running' : '');
|
|
|
|
if (data.result) {
|
|
document.getElementById('resSent').textContent = data.result.framesSent;
|
|
document.getElementById('resReceived').textContent = data.result.framesReceived;
|
|
document.getElementById('resLost').textContent = data.result.framesLost;
|
|
document.getElementById('resRate').textContent = data.result.frameRate.toFixed(1) + ' fps';
|
|
document.getElementById('resLossRate').textContent = data.result.lossRate.toFixed(2) + '%';
|
|
document.getElementById('resDuration').textContent = data.result.durationMs + ' ms';
|
|
|
|
const passEl = document.getElementById('resPass');
|
|
if (data.result.passed) {
|
|
passEl.textContent = 'PASS';
|
|
passEl.className = 'result-value pass';
|
|
} else if (data.result.framesSent > 0) {
|
|
passEl.textContent = 'FAIL';
|
|
passEl.className = 'result-value fail';
|
|
} else {
|
|
passEl.textContent = '-';
|
|
passEl.className = 'result-value';
|
|
}
|
|
}
|
|
|
|
document.getElementById('btnStop').disabled = !data.running;
|
|
|
|
if (!data.running && testRunning) {
|
|
testRunning = false;
|
|
stopPolling();
|
|
log('Test completed');
|
|
}
|
|
}
|
|
|
|
function startPolling() {
|
|
if (pollInterval) clearInterval(pollInterval);
|
|
pollInterval = setInterval(getTestStatus, 500);
|
|
}
|
|
|
|
function stopPolling() {
|
|
if (pollInterval) {
|
|
clearInterval(pollInterval);
|
|
pollInterval = null;
|
|
}
|
|
}
|
|
|
|
getTestStatus();
|
|
log('Test page loaded');
|
|
</script>
|
|
</body>
|
|
</html>
|
|
)rawliteral";
|
|
|
|
#endif // WEB_TEST_H
|