Obbart/AstroRotaxMonitor
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fixed Filters, split file in html, script and css

Browse Source
This commit is contained in:
Emanuele Trabattoni
2026-04-08 16:55:03 +02:00
parent 4dc45954e9
commit 12e1e8e7a4
10 changed files with 167 additions and 155 deletions
Download Patch File Download Diff File Expand all files Collapse all files

116
RotaxMonitor/data/index.html
View File

@@ -3,37 +3,7 @@
<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>
<link rel="stylesheet" href="style.css">
</head>
<body>
@@ -44,6 +14,7 @@
<div style="max-width: 900px; margin: 0 auto; text-align: left;">
<p><strong>Timestamp:</strong> <span id="timestamp">-</span></p>
<p><strong>Data Valid:</strong> <span id="datavalid">-</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>
@@ -58,16 +29,6 @@
</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>
@@ -122,77 +83,6 @@
</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>
<script src="script.js"></script>
</body>
</html>

66
RotaxMonitor/data/script.js Normal file
View File

@@ -0,0 +1,66 @@
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, 5000);
};
ws.onmessage = (event) => {
let data;
try {
data = JSON.parse(event.data);
} catch (e) {
console.error("Invalid JSON received", e);
return;
}
document.getElementById("datavalid").textContent = data.datavalid ?? "-";
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_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();

29
RotaxMonitor/data/style.css Normal file
View File

@@ -0,0 +1,29 @@
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;
}