262 lines
10 KiB
JavaScript
262 lines
10 KiB
JavaScript
let ws;
|
|
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;
|
|
}
|
|
|
|
loadingIndicator.classList.toggle("hidden", !visible);
|
|
}
|
|
|
|
function updateLoadingState() {
|
|
const isConnected = ws && ws.readyState === WebSocket.OPEN;
|
|
const idle = Date.now() - lastMessageTimestamp >= IDLE_THRESHOLD_MS;
|
|
|
|
setLoadingIndicator(isConnected && idle);
|
|
}
|
|
|
|
function connectWS() {
|
|
ws = new WebSocket("ws://" + location.host + "/ws");
|
|
|
|
ws.onopen = () => {
|
|
console.log("WebSocket connesso");
|
|
lastMessageTimestamp = Date.now();
|
|
setLoadingIndicator(false);
|
|
|
|
ws.send(JSON.stringify({
|
|
cmd: "setTime",
|
|
time: Math.floor(Date.now() / 1000)
|
|
}));
|
|
};
|
|
|
|
ws.onclose = () => {
|
|
console.log("WebSocket disconnesso, retry...");
|
|
setLoadingIndicator(false);
|
|
setTimeout(connectWS, 5000);
|
|
};
|
|
|
|
ws.onmessage = (event) => {
|
|
let data;
|
|
|
|
try {
|
|
data = JSON.parse(event.data);
|
|
} catch (e) {
|
|
console.error("Invalid JSON received", e);
|
|
return;
|
|
}
|
|
|
|
lastMessageTimestamp = Date.now();
|
|
setLoadingIndicator(false);
|
|
|
|
updateChart(data)
|
|
|
|
// Update Box_A
|
|
if (data.box_a) {
|
|
const boxA = data.box_a;
|
|
document.getElementById("a_datavalid").textContent = boxA.datavalid ?? "-";
|
|
document.getElementById("a_timestamp").textContent = boxA.timestamp ?? "-";
|
|
document.getElementById("a_volts_gen").textContent = boxA.volts_gen ?? "-";
|
|
document.getElementById("a_eng_rpm").textContent = boxA.eng_rpm ?? "-";
|
|
document.getElementById("a_adc_read_time").textContent = boxA.adc_read_time ?? "-";
|
|
document.getElementById("a_n_queue_errors").textContent = boxA.n_queue_errors ?? "-";
|
|
|
|
const coils12A = boxA.coils12 || {};
|
|
const coils34A = boxA.coils34 || {};
|
|
|
|
document.getElementById("a_coils12_spark_delay").textContent = coils12A.spark_delay ?? "-";
|
|
document.getElementById("a_coils34_spark_delay").textContent = coils34A.spark_delay ?? "-";
|
|
document.getElementById("a_coils12_spark_status").textContent = coils12A.spark_status ?? "-";
|
|
document.getElementById("a_coils34_spark_status").textContent = coils34A.spark_status ?? "-";
|
|
document.getElementById("a_coils12_sstart_status").textContent = coils12A.sstart_status ?? "-";
|
|
document.getElementById("a_coils34_sstart_status").textContent = coils34A.sstart_status ?? "-";
|
|
document.getElementById("a_coils12_peak_p_in").textContent = coils12A.peak_p_in ?? "-";
|
|
document.getElementById("a_coils34_peak_p_in").textContent = coils34A.peak_p_in ?? "-";
|
|
document.getElementById("a_coils12_peak_n_in").textContent = coils12A.peak_n_in ?? "-";
|
|
document.getElementById("a_coils34_peak_n_in").textContent = coils34A.peak_n_in ?? "-";
|
|
document.getElementById("a_coils12_peak_p_out").textContent = coils12A.peak_p_out ?? "-";
|
|
document.getElementById("a_coils34_peak_p_out").textContent = coils34A.peak_p_out ?? "-";
|
|
document.getElementById("a_coils12_peak_n_out").textContent = coils12A.peak_n_out ?? "-";
|
|
document.getElementById("a_coils34_peak_n_out").textContent = coils34A.peak_n_out ?? "-";
|
|
document.getElementById("a_coils12_level_spark").textContent = coils12A.level_spark ?? "-";
|
|
document.getElementById("a_coils34_level_spark").textContent = coils34A.level_spark ?? "-";
|
|
document.getElementById("a_coils12_n_events").textContent = coils12A.n_events ?? "-";
|
|
document.getElementById("a_coils34_n_events").textContent = coils34A.n_events ?? "-";
|
|
document.getElementById("a_coils12_n_missed_firing").textContent = coils12A.n_missed_firing ?? "-";
|
|
document.getElementById("a_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 ?? "-";
|
|
}
|
|
};
|
|
}
|
|
|
|
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);
|
|
chartData.datasets[1].data.push(0);
|
|
chartData.datasets[4].data.push(0);
|
|
chartData.datasets[5].data.push(0);
|
|
}
|
|
|
|
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);
|
|
chartData.datasets[0].data.push(0);
|
|
chartData.datasets[2].data.push(0);
|
|
chartData.datasets[3].data.push(0);
|
|
}
|
|
|
|
// limite punti (tipo buffer)
|
|
if (chartData.labels.length > 100) {
|
|
chartData.labels.shift();
|
|
chartData.datasets.forEach(d => d.data.shift());
|
|
}
|
|
|
|
chart.update();
|
|
}
|
|
|
|
function start() {
|
|
fetch("/start");
|
|
}
|
|
|
|
function stop() {
|
|
fetch("/stop");
|
|
}
|
|
|
|
function uploadLittleFS() {
|
|
const fileInput = document.getElementById("littlefsFile");
|
|
const status = document.getElementById("uploadStatus");
|
|
|
|
if (!fileInput || fileInput.files.length === 0) {
|
|
if (status) status.textContent = "Select a file first.";
|
|
return;
|
|
}
|
|
|
|
const file = fileInput.files[0];
|
|
const formData = new FormData();
|
|
formData.append("file", file, file.name);
|
|
|
|
if (status) status.textContent = "Uploading...";
|
|
|
|
fetch("/upload", {
|
|
method: "POST",
|
|
body: formData,
|
|
})
|
|
.then((resp) => {
|
|
if (!resp.ok) {
|
|
throw new Error("Upload failed: " + resp.status + " " + resp.statusText);
|
|
}
|
|
return resp.text();
|
|
})
|
|
.then(() => {
|
|
if (status) status.textContent = "Uploaded: " + file.name;
|
|
fileInput.value = "";
|
|
})
|
|
.catch((err) => {
|
|
if (status) status.textContent = err.message;
|
|
});
|
|
}
|
|
|
|
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();
|