From 2083119d79dd85159bf4d914ffe24cb169c0aa70 Mon Sep 17 00:00:00 2001 From: Emanuele Trabattoni Date: Fri, 10 Apr 2026 09:27:41 +0200 Subject: [PATCH] Updated interface to show Box A+B --- RotaxMonitor/data/index.html | 218 ++++++++++++++++++++++++----------- RotaxMonitor/data/script.js | 95 ++++++++++----- RotaxMonitor/data/style.css | 49 +++++++- 3 files changed, 261 insertions(+), 101 deletions(-) diff --git a/RotaxMonitor/data/index.html b/RotaxMonitor/data/index.html index 31c61bf..fea8b87 100644 --- a/RotaxMonitor/data/index.html +++ b/RotaxMonitor/data/index.html @@ -13,6 +13,7 @@
+

Rotax Ignition Box Monitor

@@ -21,75 +22,156 @@ Waiting for data... -
-

Timestamp: -

-

Data Valid: -

-

Generator voltage: -

-

Engine RPM: -

-

ADC read time: -

-

Queue errors: -

+
+
+

Box_A

+
+

Timestamp: -

+

Data Valid: -

+

Generator voltage: -

+

ADC read time: -

+

Queue errors: -

+
+
+ Engine RPM: - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyPickup 12Pickup 34
Spark delay--
Spark status--
Soft start status--
Peak P in--
Peak N in--
Peak P out--
Peak N out--
Level spark--
Spark Events--
Missed Events--
+
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyPickup 12Pickup 34
Spark delay--
Spark status--
Soft start status--
Peak P in--
Peak N in--
Peak P out--
Peak N out--
Level spark--
Spark Events--
Missed Events--
+
+

Box_B

+
+

Timestamp: -

+

Data Valid: -

+

Generator voltage: -

+

ADC read time: -

+

Queue errors: -

+
+
+ Engine RPM: - +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
PropertyPickup 12Pickup 34
Spark delay--
Spark status--
Soft start status--
Peak P in--
Peak N in--
Peak P out--
Peak N out--
Level spark--
Spark Events--
Missed Events--
+
diff --git a/RotaxMonitor/data/script.js b/RotaxMonitor/data/script.js index 779c224..5ea3c66 100644 --- a/RotaxMonitor/data/script.js +++ b/RotaxMonitor/data/script.js @@ -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 ?? "-"; + } }; } diff --git a/RotaxMonitor/data/style.css b/RotaxMonitor/data/style.css index 47ab887..749df1f 100644 --- a/RotaxMonitor/data/style.css +++ b/RotaxMonitor/data/style.css @@ -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); }