Updated interface to show Box A+B
This commit is contained in:
@@ -13,6 +13,7 @@
|
||||
<img src="logo_astro_dev.svg" alt="Astro Tecnologie" class="logo">
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<h1>Rotax Ignition Box Monitor</h1>
|
||||
</div>
|
||||
</header>
|
||||
@@ -21,75 +22,156 @@
|
||||
<span class="spinner"></span> Waiting for data...
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<p><strong>Queue errors:</strong> <span id="n_queue_errors">-</span></p>
|
||||
<div class="tables-container">
|
||||
<div class="box">
|
||||
<h2>Box_A</h2>
|
||||
<div class="box-data">
|
||||
<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>ADC read time:</strong> <span id="adc_read_time">-</span></p>
|
||||
<p><strong>Queue errors:</strong> <span id="n_queue_errors">-</span></p>
|
||||
</div>
|
||||
<div class="rpm-highlight">
|
||||
<strong>Engine RPM:</strong> <span id="eng_rpm">-</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Pickup 12</th>
|
||||
<th>Pickup 34</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>Spark Events</td>
|
||||
<td id="coils12_n_events">-</td>
|
||||
<td id="coils34_n_events">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Missed Events</td>
|
||||
<td id="coils12_n_missed_firing">-</td>
|
||||
<td id="coils34_n_missed_firing">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Pickup 12</th>
|
||||
<th>Pickup 34</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<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>Spark Events</td>
|
||||
<td id="coils12_n_events">-</td>
|
||||
<td id="coils34_n_events">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Missed Events</td>
|
||||
<td id="coils12_n_missed_firing">-</td>
|
||||
<td id="coils34_n_missed_firing">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<div class="box">
|
||||
<h2>Box_B</h2>
|
||||
<div class="box-data">
|
||||
<p><strong>Timestamp:</strong> <span id="b_timestamp">-</span></p>
|
||||
<p><strong>Data Valid:</strong> <span id="b_datavalid">-</span></p>
|
||||
<p><strong>Generator voltage:</strong> <span id="b_volts_gen">-</span></p>
|
||||
<p><strong>ADC read time:</strong> <span id="b_adc_read_time">-</span></p>
|
||||
<p><strong>Queue errors:</strong> <span id="b_n_queue_errors">-</span></p>
|
||||
</div>
|
||||
<div class="rpm-highlight">
|
||||
<strong>Engine RPM:</strong> <span id="b_eng_rpm">-</span>
|
||||
</div>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Property</th>
|
||||
<th>Pickup 12</th>
|
||||
<th>Pickup 34</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Spark delay</td>
|
||||
<td id="b_coils12_spark_delay">-</td>
|
||||
<td id="b_coils34_spark_delay">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spark status</td>
|
||||
<td id="b_coils12_spark_status">-</td>
|
||||
<td id="b_coils34_spark_status">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Soft start status</td>
|
||||
<td id="b_coils12_sstart_status">-</td>
|
||||
<td id="b_coils34_sstart_status">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak P in</td>
|
||||
<td id="b_coils12_peak_p_in">-</td>
|
||||
<td id="b_coils34_peak_p_in">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak N in</td>
|
||||
<td id="b_coils12_peak_n_in">-</td>
|
||||
<td id="b_coils34_peak_n_in">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak P out</td>
|
||||
<td id="b_coils12_peak_p_out">-</td>
|
||||
<td id="b_coils34_peak_p_out">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak N out</td>
|
||||
<td id="b_coils12_peak_n_out">-</td>
|
||||
<td id="b_coils34_peak_n_out">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Level spark</td>
|
||||
<td id="b_coils12_level_spark">-</td>
|
||||
<td id="b_coils34_level_spark">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spark Events</td>
|
||||
<td id="b_coils12_n_events">-</td>
|
||||
<td id="b_coils34_n_events">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Missed Events</td>
|
||||
<td id="b_coils12_n_missed_firing">-</td>
|
||||
<td id="b_coils34_n_missed_firing">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="upload-section">
|
||||
|
||||
@@ -46,36 +46,75 @@ function connectWS() {
|
||||
lastMessageTimestamp = Date.now();
|
||||
setLoadingIndicator(false);
|
||||
|
||||
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 ?? "-";
|
||||
// Update Box_A
|
||||
if (data.box_a) {
|
||||
const boxA = data.box_a;
|
||||
document.getElementById("datavalid").textContent = boxA.datavalid ?? "-";
|
||||
document.getElementById("timestamp").textContent = boxA.timestamp ?? "-";
|
||||
document.getElementById("volts_gen").textContent = boxA.volts_gen ?? "-";
|
||||
document.getElementById("eng_rpm").textContent = boxA.eng_rpm ?? "-";
|
||||
document.getElementById("adc_read_time").textContent = boxA.adc_read_time ?? "-";
|
||||
document.getElementById("n_queue_errors").textContent = boxA.n_queue_errors ?? "-";
|
||||
|
||||
const coils12 = data.coils12 || {};
|
||||
const coils34 = data.coils34 || {};
|
||||
const coils12A = boxA.coils12 || {};
|
||||
const coils34A = boxA.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 ?? "-";
|
||||
document.getElementById("coils12_spark_delay").textContent = coils12A.spark_delay ?? "-";
|
||||
document.getElementById("coils34_spark_delay").textContent = coils34A.spark_delay ?? "-";
|
||||
document.getElementById("coils12_spark_status").textContent = coils12A.spark_status ?? "-";
|
||||
document.getElementById("coils34_spark_status").textContent = coils34A.spark_status ?? "-";
|
||||
document.getElementById("coils12_sstart_status").textContent = coils12A.sstart_status ?? "-";
|
||||
document.getElementById("coils34_sstart_status").textContent = coils34A.sstart_status ?? "-";
|
||||
document.getElementById("coils12_peak_p_in").textContent = coils12A.peak_p_in ?? "-";
|
||||
document.getElementById("coils34_peak_p_in").textContent = coils34A.peak_p_in ?? "-";
|
||||
document.getElementById("coils12_peak_n_in").textContent = coils12A.peak_n_in ?? "-";
|
||||
document.getElementById("coils34_peak_n_in").textContent = coils34A.peak_n_in ?? "-";
|
||||
document.getElementById("coils12_peak_p_out").textContent = coils12A.peak_p_out ?? "-";
|
||||
document.getElementById("coils34_peak_p_out").textContent = coils34A.peak_p_out ?? "-";
|
||||
document.getElementById("coils12_peak_n_out").textContent = coils12A.peak_n_out ?? "-";
|
||||
document.getElementById("coils34_peak_n_out").textContent = coils34A.peak_n_out ?? "-";
|
||||
document.getElementById("coils12_level_spark").textContent = coils12A.level_spark ?? "-";
|
||||
document.getElementById("coils34_level_spark").textContent = coils34A.level_spark ?? "-";
|
||||
document.getElementById("coils12_n_events").textContent = coils12A.n_events ?? "-";
|
||||
document.getElementById("coils34_n_events").textContent = coils34A.n_events ?? "-";
|
||||
document.getElementById("coils12_n_missed_firing").textContent = coils12A.n_missed_firing ?? "-";
|
||||
document.getElementById("coils34_n_missed_firing").textContent = coils34A.n_missed_firing ?? "-";
|
||||
}
|
||||
|
||||
// Update Box_B
|
||||
if (data.box_b) {
|
||||
const boxB = data.box_b;
|
||||
document.getElementById("b_datavalid").textContent = boxB.datavalid ?? "-";
|
||||
document.getElementById("b_timestamp").textContent = boxB.timestamp ?? "-";
|
||||
document.getElementById("b_volts_gen").textContent = boxB.volts_gen ?? "-";
|
||||
document.getElementById("b_eng_rpm").textContent = boxB.eng_rpm ?? "-";
|
||||
document.getElementById("b_adc_read_time").textContent = boxB.adc_read_time ?? "-";
|
||||
document.getElementById("b_n_queue_errors").textContent = boxB.n_queue_errors ?? "-";
|
||||
|
||||
const coils12B = boxB.coils12 || {};
|
||||
const coils34B = boxB.coils34 || {};
|
||||
|
||||
document.getElementById("b_coils12_spark_delay").textContent = coils12B.spark_delay ?? "-";
|
||||
document.getElementById("b_coils34_spark_delay").textContent = coils34B.spark_delay ?? "-";
|
||||
document.getElementById("b_coils12_spark_status").textContent = coils12B.spark_status ?? "-";
|
||||
document.getElementById("b_coils34_spark_status").textContent = coils34B.spark_status ?? "-";
|
||||
document.getElementById("b_coils12_sstart_status").textContent = coils12B.sstart_status ?? "-";
|
||||
document.getElementById("b_coils34_sstart_status").textContent = coils34B.sstart_status ?? "-";
|
||||
document.getElementById("b_coils12_peak_p_in").textContent = coils12B.peak_p_in ?? "-";
|
||||
document.getElementById("b_coils34_peak_p_in").textContent = coils34B.peak_p_in ?? "-";
|
||||
document.getElementById("b_coils12_peak_n_in").textContent = coils12B.peak_n_in ?? "-";
|
||||
document.getElementById("b_coils34_peak_n_in").textContent = coils34B.peak_n_in ?? "-";
|
||||
document.getElementById("b_coils12_peak_p_out").textContent = coils12B.peak_p_out ?? "-";
|
||||
document.getElementById("b_coils34_peak_p_out").textContent = coils34B.peak_p_out ?? "-";
|
||||
document.getElementById("b_coils12_peak_n_out").textContent = coils12B.peak_n_out ?? "-";
|
||||
document.getElementById("b_coils34_peak_n_out").textContent = coils34B.peak_n_out ?? "-";
|
||||
document.getElementById("b_coils12_level_spark").textContent = coils12B.level_spark ?? "-";
|
||||
document.getElementById("b_coils34_level_spark").textContent = coils34B.level_spark ?? "-";
|
||||
document.getElementById("b_coils12_n_events").textContent = coils12B.n_events ?? "-";
|
||||
document.getElementById("b_coils34_n_events").textContent = coils34B.n_events ?? "-";
|
||||
document.getElementById("b_coils12_n_missed_firing").textContent = coils12B.n_missed_firing ?? "-";
|
||||
document.getElementById("b_coils34_n_missed_firing").textContent = coils34B.n_missed_firing ?? "-";
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
@@ -35,10 +35,13 @@ body {
|
||||
.logo {
|
||||
height: 50px;
|
||||
width: auto;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
margin: 5px;
|
||||
margin: auto;
|
||||
margin-top: 20px;
|
||||
text-align: center;
|
||||
font-size: 28px;
|
||||
font-weight: 600;
|
||||
}
|
||||
@@ -159,21 +162,57 @@ button:hover {
|
||||
}
|
||||
}
|
||||
|
||||
/* Data section */
|
||||
div[style*="max-width: 900px"] {
|
||||
.tables-container {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
max-width: 1800px;
|
||||
margin: 0 auto;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.box {
|
||||
flex: 1;
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.box h2 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px;
|
||||
color: var(--primary-blue);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box-data {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
div[style*="max-width: 900px"] p {
|
||||
.box-data p {
|
||||
margin: 8px 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
div[style*="max-width: 900px"] strong {
|
||||
.box-data strong {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
.rpm-highlight {
|
||||
background: #c6e4fa;
|
||||
border: 3px double var(--primary-blue);
|
||||
border-radius: 8px;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 20px;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
font-weight: bold;
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
.rpm-highlight strong {
|
||||
color: var(--primary-blue);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user