webpage chats
This commit is contained in:
16
RotaxMonitor/data/chart.js
Normal file
16
RotaxMonitor/data/chart.js
Normal file
File diff suppressed because one or more lines are too long
@@ -13,176 +13,194 @@
|
||||
<img src="logo_astro_dev.svg" alt="Astro Tecnologie" class="logo">
|
||||
</div>
|
||||
<div>
|
||||
|
||||
<h1>Rotax Ignition Box Monitor</h1>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="loadingIndicator" class="loading-indicator">
|
||||
<span class="spinner"></span> Waiting for data...
|
||||
<!-- TAB BUTTONS -->
|
||||
<div class="tabs">
|
||||
<button class="tab-button active" onclick="openTab('tab1')">Monitor</button>
|
||||
<button class="tab-button" onclick="openTab('tab2')">Grafico</button>
|
||||
</div>
|
||||
|
||||
<div class="tables-container">
|
||||
<div class="box">
|
||||
<h2>Box_A</h2>
|
||||
<div class="box-data">
|
||||
<p><strong>Timestamp:</strong> <span id="a_timestamp">-</span></p>
|
||||
<p><strong>Data Valid:</strong> <span id="a_datavalid">-</span></p>
|
||||
<p><strong>Generator voltage:</strong> <span id="a_volts_gen">-</span></p>
|
||||
<p><strong>ADC read time:</strong> <span id="a_adc_read_time">-</span></p>
|
||||
<p><strong>Queue errors:</strong> <span id="a_n_queue_errors">-</span></p>
|
||||
</div>
|
||||
<div class="rpm-highlight">
|
||||
<strong>Engine RPM:</strong> <span id="a_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="a_coils12_spark_delay">-</td>
|
||||
<td id="a_coils34_spark_delay">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spark status</td>
|
||||
<td id="a_coils12_spark_status">-</td>
|
||||
<td id="a_coils34_spark_status">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Soft start status</td>
|
||||
<td id="a_coils12_sstart_status">-</td>
|
||||
<td id="a_coils34_sstart_status">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak P in</td>
|
||||
<td id="a_coils12_peak_p_in">-</td>
|
||||
<td id="a_coils34_peak_p_in">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak N in</td>
|
||||
<td id="a_coils12_peak_n_in">-</td>
|
||||
<td id="a_coils34_peak_n_in">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak P out</td>
|
||||
<td id="a_coils12_peak_p_out">-</td>
|
||||
<td id="a_coils34_peak_p_out">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak N out</td>
|
||||
<td id="a_coils12_peak_n_out">-</td>
|
||||
<td id="a_coils34_peak_n_out">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Level spark</td>
|
||||
<td id="a_coils12_level_spark">-</td>
|
||||
<td id="a_coils34_level_spark">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spark Events</td>
|
||||
<td id="a_coils12_n_events">-</td>
|
||||
<td id="a_coils34_n_events">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Missed Events</td>
|
||||
<td id="a_coils12_n_missed_firing">-</td>
|
||||
<td id="a_coils34_n_missed_firing">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<!-- TAB 1 (contenuto attuale) -->
|
||||
<div id="tab1" class="tab-content active">
|
||||
|
||||
<div id="loadingIndicator" class="loading-indicator">
|
||||
<span class="spinner"></span> Waiting for data...
|
||||
</div>
|
||||
|
||||
<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 class="tables-container">
|
||||
<div class="box">
|
||||
<h2>Box_A</h2>
|
||||
<div class="box-data">
|
||||
<p><strong>Timestamp:</strong> <span id="a_timestamp">-</span></p>
|
||||
<p><strong>Data Valid:</strong> <span id="a_datavalid">-</span></p>
|
||||
<p><strong>Generator voltage:</strong> <span id="a_volts_gen">-</span></p>
|
||||
<p><strong>ADC read time:</strong> <span id="a_adc_read_time">-</span></p>
|
||||
<p><strong>Queue errors:</strong> <span id="a_n_queue_errors">-</span></p>
|
||||
</div>
|
||||
<div class="rpm-highlight">
|
||||
<strong>Engine RPM:</strong> <span id="a_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="a_coils12_spark_delay">-</td>
|
||||
<td id="a_coils34_spark_delay">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spark status</td>
|
||||
<td id="a_coils12_spark_status">-</td>
|
||||
<td id="a_coils34_spark_status">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Soft start status</td>
|
||||
<td id="a_coils12_sstart_status">-</td>
|
||||
<td id="a_coils34_sstart_status">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak P in</td>
|
||||
<td id="a_coils12_peak_p_in">-</td>
|
||||
<td id="a_coils34_peak_p_in">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak N in</td>
|
||||
<td id="a_coils12_peak_n_in">-</td>
|
||||
<td id="a_coils34_peak_n_in">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak P out</td>
|
||||
<td id="a_coils12_peak_p_out">-</td>
|
||||
<td id="a_coils34_peak_p_out">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Peak N out</td>
|
||||
<td id="a_coils12_peak_n_out">-</td>
|
||||
<td id="a_coils34_peak_n_out">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Level spark</td>
|
||||
<td id="a_coils12_level_spark">-</td>
|
||||
<td id="a_coils34_level_spark">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Spark Events</td>
|
||||
<td id="a_coils12_n_events">-</td>
|
||||
<td id="a_coils34_n_events">-</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Missed Events</td>
|
||||
<td id="a_coils12_n_missed_firing">-</td>
|
||||
<td id="a_coils34_n_missed_firing">-</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div class="rpm-highlight">
|
||||
<strong>Engine RPM:</strong> <span id="b_eng_rpm">-</span>
|
||||
|
||||
<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>
|
||||
<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> <!-- END TAB1 -->
|
||||
|
||||
<!-- TAB 2 (grafico) -->
|
||||
<div id="tab2" class="tab-content">
|
||||
<canvas id="chart" height="100"></canvas>
|
||||
</div>
|
||||
|
||||
<div class="upload-section">
|
||||
<h3>Upload file to Flash</h3>
|
||||
<p>Select a file and upload it to Flash.</p>
|
||||
<input type="file" id="littlefsFile">
|
||||
<button onclick="uploadLittleFS()">Upload</button>
|
||||
<div id="uploadStatus" class="upload-status">No file uploaded yet.</div>
|
||||
</div>
|
||||
|
||||
<script src="chart.js"></script>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
<div class="upload-section">
|
||||
<h3>Upload file to Flash</h3>
|
||||
<p>Select a file and upload it to Flash.</p>
|
||||
<input type="file" id="littlefsFile">
|
||||
<button onclick="uploadLittleFS()">Upload</button>
|
||||
<div id="uploadStatus" class="upload-status">No file uploaded yet.</div>
|
||||
</div>
|
||||
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
@@ -3,6 +3,19 @@ let lastMessageTimestamp = 0;
|
||||
const IDLE_THRESHOLD_MS = 1000;
|
||||
const loadingIndicator = document.getElementById("loadingIndicator");
|
||||
|
||||
let chart;
|
||||
let chartData = {
|
||||
labels: [],
|
||||
datasets: [
|
||||
{ label: "BoxA RPM", data: [] },
|
||||
{ label: "BoxB RPM", data: [] },
|
||||
{ label: "Coils12A Delay", data: [] },
|
||||
{ label: "Coils34A Delay", data: [] },
|
||||
{ label: "Coils12B Delay", data: [] },
|
||||
{ label: "Coils34B Delay", data: [] }
|
||||
]
|
||||
};
|
||||
|
||||
function setLoadingIndicator(visible) {
|
||||
if (!loadingIndicator) {
|
||||
return;
|
||||
@@ -46,6 +59,8 @@ function connectWS() {
|
||||
lastMessageTimestamp = Date.now();
|
||||
setLoadingIndicator(false);
|
||||
|
||||
updateChart(data)
|
||||
|
||||
// Update Box_A
|
||||
if (data.box_a) {
|
||||
const boxA = data.box_a;
|
||||
@@ -118,6 +133,38 @@ function connectWS() {
|
||||
};
|
||||
}
|
||||
|
||||
function updateChart(data) {
|
||||
const time = new Date().toLocaleTimeString();
|
||||
|
||||
chartData.labels.push(time);
|
||||
|
||||
if (data.box_a) {
|
||||
const boxA = data.box_a;
|
||||
const coils12A = boxA.coils12 || {};
|
||||
const coils34A = boxA.coils34 || {};
|
||||
chartData.datasets[0].data.push(boxA.eng_rpm/10);
|
||||
chartData.datasets[2].data.push(coils12A.spark_delay);
|
||||
chartData.datasets[3].data.push(coils34A.spark_delay);
|
||||
}
|
||||
|
||||
if (data.box_b) {
|
||||
const boxB = data.box_b;
|
||||
const coils12B = boxB.coils12 || {};
|
||||
const coils34B = boxB.coils34 || {};
|
||||
chartData.datasets[1].data.push(boxB.eng_rpm/10);
|
||||
chartData.datasets[4].data.push(coils12B.spark_delay);
|
||||
chartData.datasets[5].data.push(coils34B.spark_delay);
|
||||
}
|
||||
|
||||
// limite punti (tipo buffer)
|
||||
if (chartData.labels.length > 50) {
|
||||
chartData.labels.shift();
|
||||
chartData.datasets.forEach(d => d.data.shift());
|
||||
}
|
||||
|
||||
chart.update();
|
||||
}
|
||||
|
||||
function start() {
|
||||
fetch("/start");
|
||||
}
|
||||
@@ -160,5 +207,44 @@ function uploadLittleFS() {
|
||||
});
|
||||
}
|
||||
|
||||
function openTab(tabId) {
|
||||
document.querySelectorAll('.tab-content').forEach(tab => {
|
||||
tab.classList.remove('active');
|
||||
});
|
||||
|
||||
document.querySelectorAll('.tab-button').forEach(btn => {
|
||||
btn.classList.remove('active');
|
||||
});
|
||||
|
||||
document.getElementById(tabId).classList.add('active');
|
||||
|
||||
event.target.classList.add('active');
|
||||
}
|
||||
|
||||
function initChart() {
|
||||
const ctx = document.getElementById('chart').getContext('2d');
|
||||
|
||||
chart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: chartData,
|
||||
options: {
|
||||
animation: false,
|
||||
responsive: true,
|
||||
scales: {
|
||||
x: {
|
||||
display: true
|
||||
},
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
window.onload = () => {
|
||||
initChart();
|
||||
};
|
||||
|
||||
setInterval(updateLoadingState, 200);
|
||||
connectWS();
|
||||
|
||||
@@ -219,3 +219,32 @@ button:hover {
|
||||
span {
|
||||
color: var(--text-dark);
|
||||
}
|
||||
|
||||
/* TABS */
|
||||
.tabs {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.tab-button {
|
||||
padding: 10px 20px;
|
||||
margin: 0 5px;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
background: var(--border-color);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.tab-button.active {
|
||||
background: var(--primary-blue);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.tab-content {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-content.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user