198 lines
7.7 KiB
HTML
198 lines
7.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>ESP32 Dashboard</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial;
|
|
text-align: center;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
table {
|
|
margin: auto;
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
max-width: 900px;
|
|
}
|
|
|
|
th, td {
|
|
border: 1px solid #ccc;
|
|
padding: 10px;
|
|
font-size: 16px;
|
|
text-align: left;
|
|
}
|
|
|
|
th {
|
|
background-color: #f4f4f4;
|
|
}
|
|
|
|
button {
|
|
margin: 10px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h2>RotaxMonitor realtime data</h2>
|
|
|
|
<button onclick="start()">Start</button>
|
|
<button onclick="stop()">Stop</button>
|
|
|
|
<div style="max-width: 900px; margin: 0 auto; text-align: left;">
|
|
<p><strong>Timestamp:</strong> <span id="timestamp">-</span></p>
|
|
<p><strong>Generator voltage:</strong> <span id="volts_gen">-</span></p>
|
|
<p><strong>Engine RPM:</strong> <span id="eng_rpm">-</span></p>
|
|
<p><strong>ADC read time:</strong> <span id="adc_read_time">-</span></p>
|
|
<p><strong>Queue errors:</strong> <span id="n_queue_errors">-</span></p>
|
|
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>Property</th>
|
|
<th>Coils 12</th>
|
|
<th>Coils 34</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Trigger time</td>
|
|
<td id="coils12_trig_time">-</td>
|
|
<td id="coils34_trig_time">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spark time</td>
|
|
<td id="coils12_spark_time">-</td>
|
|
<td id="coils34_spark_time">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spark delay</td>
|
|
<td id="coils12_spark_delay">-</td>
|
|
<td id="coils34_spark_delay">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Spark status</td>
|
|
<td id="coils12_spark_status">-</td>
|
|
<td id="coils34_spark_status">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Soft start status</td>
|
|
<td id="coils12_sstart_status">-</td>
|
|
<td id="coils34_sstart_status">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Peak P in</td>
|
|
<td id="coils12_peak_p_in">-</td>
|
|
<td id="coils34_peak_p_in">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Peak N in</td>
|
|
<td id="coils12_peak_n_in">-</td>
|
|
<td id="coils34_peak_n_in">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Peak P out</td>
|
|
<td id="coils12_peak_p_out">-</td>
|
|
<td id="coils34_peak_p_out">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Peak N out</td>
|
|
<td id="coils12_peak_n_out">-</td>
|
|
<td id="coils34_peak_n_out">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Level spark</td>
|
|
<td id="coils12_level_spark">-</td>
|
|
<td id="coils34_level_spark">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Events</td>
|
|
<td id="coils12_n_events">-</td>
|
|
<td id="coils34_n_events">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Missed firings</td>
|
|
<td id="coils12_n_missed_firing">-</td>
|
|
<td id="coils34_n_missed_firing">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<script>
|
|
let ws;
|
|
|
|
function connectWS() {
|
|
ws = new WebSocket("ws://" + location.host + "/ws");
|
|
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connesso");
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log("WebSocket disconnesso, retry...");
|
|
setTimeout(connectWS, 1000);
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
let data;
|
|
|
|
try {
|
|
data = JSON.parse(event.data);
|
|
} catch (e) {
|
|
console.error("Invalid JSON received", e);
|
|
return;
|
|
}
|
|
|
|
document.getElementById("timestamp").textContent = data.timestamp ?? "-";
|
|
document.getElementById("volts_gen").textContent = data.volts_gen ?? "-";
|
|
document.getElementById("eng_rpm").textContent = data.eng_rpm ?? "-";
|
|
document.getElementById("adc_read_time").textContent = data.adc_read_time ?? "-";
|
|
document.getElementById("n_queue_errors").textContent = data.n_queue_errors ?? "-";
|
|
|
|
const coils12 = data.coils12 || {};
|
|
const coils34 = data.coils34 || {};
|
|
|
|
document.getElementById("coils12_trig_time").textContent = coils12.trig_time ?? "-";
|
|
document.getElementById("coils34_trig_time").textContent = coils34.trig_time ?? "-";
|
|
document.getElementById("coils12_spark_time").textContent = coils12.spark_time ?? "-";
|
|
document.getElementById("coils34_spark_time").textContent = coils34.spark_time ?? "-";
|
|
document.getElementById("coils12_spark_delay").textContent = coils12.spark_delay ?? "-";
|
|
document.getElementById("coils34_spark_delay").textContent = coils34.spark_delay ?? "-";
|
|
document.getElementById("coils12_spark_status").textContent = coils12.spark_status ?? "-";
|
|
document.getElementById("coils34_spark_status").textContent = coils34.spark_status ?? "-";
|
|
document.getElementById("coils12_sstart_status").textContent = coils12.sstart_status ?? "-";
|
|
document.getElementById("coils34_sstart_status").textContent = coils34.sstart_status ?? "-";
|
|
document.getElementById("coils12_peak_p_in").textContent = coils12.peak_p_in ?? "-";
|
|
document.getElementById("coils34_peak_p_in").textContent = coils34.peak_p_in ?? "-";
|
|
document.getElementById("coils12_peak_n_in").textContent = coils12.peak_n_in ?? "-";
|
|
document.getElementById("coils34_peak_n_in").textContent = coils34.peak_n_in ?? "-";
|
|
document.getElementById("coils12_peak_p_out").textContent = coils12.peak_p_out ?? "-";
|
|
document.getElementById("coils34_peak_p_out").textContent = coils34.peak_p_out ?? "-";
|
|
document.getElementById("coils12_peak_n_out").textContent = coils12.peak_n_out ?? "-";
|
|
document.getElementById("coils34_peak_n_out").textContent = coils34.peak_n_out ?? "-";
|
|
document.getElementById("coils12_level_spark").textContent = coils12.level_spark ?? "-";
|
|
document.getElementById("coils34_level_spark").textContent = coils34.level_spark ?? "-";
|
|
document.getElementById("coils12_n_events").textContent = coils12.n_events ?? "-";
|
|
document.getElementById("coils34_n_events").textContent = coils34.n_events ?? "-";
|
|
document.getElementById("coils12_n_missed_firing").textContent = coils12.n_missed_firing ?? "-";
|
|
document.getElementById("coils34_n_missed_firing").textContent = coils34.n_missed_firing ?? "-";
|
|
};
|
|
}
|
|
|
|
function start() {
|
|
fetch("/start");
|
|
}
|
|
|
|
function stop() {
|
|
fetch("/stop");
|
|
}
|
|
|
|
connectWS();
|
|
</script>
|
|
|
|
</body>
|
|
</html> |