Jose
0f5b098130
modified: data/www/dashboard.html modified: src/web_server.cpp dashboard.html working, but ram and psram are duplicated
66 lines
2.2 KiB
HTML
66 lines
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>ESP32 Dashboard</title>
|
|
<style>
|
|
.card {
|
|
background: #f0f0f0;
|
|
padding: 20px;
|
|
margin: 10px;
|
|
border-radius: 10px;
|
|
}
|
|
.error-message {
|
|
color: red;
|
|
padding: 20px;
|
|
margin: 10px;
|
|
border: 1px solid red;
|
|
border-radius: 10px;
|
|
background: #fff0f0;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div id="dashboard"></div>
|
|
<script>
|
|
function updateValues() {
|
|
console.log('Fetching ESP info...');
|
|
document.getElementById('dashboard').innerHTML = '<div class="card">Loading...</div>';
|
|
|
|
fetch('/api/espinfo')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw new Error(`HTTP error! status: ${response.status}`);
|
|
}
|
|
return response.json(); // Expect JSON response
|
|
})
|
|
.then(data => {
|
|
console.log('Data received:', data);
|
|
if (!data) throw new Error('Empty response');
|
|
|
|
let html = '';
|
|
Object.entries(data).forEach(([key, value]) => {
|
|
html += `
|
|
<div class="card">
|
|
<h3>${key}</h3>
|
|
<p>${value}</p>
|
|
</div>`;
|
|
});
|
|
document.getElementById('dashboard').innerHTML = html;
|
|
})
|
|
.catch(error => {
|
|
console.error('Error:', error);
|
|
document.getElementById('dashboard').innerHTML =
|
|
`<div class="error-message">
|
|
Error loading data: ${error.message}<br>
|
|
Please check if the ESP32 is connected and the server is running.
|
|
</div>`;
|
|
});
|
|
}
|
|
// Initial load
|
|
updateValues();
|
|
// Update every 5 seconds (increased from 2 to reduce server load)
|
|
setInterval(updateValues, 5000);
|
|
</script>
|
|
</body>
|
|
</html>
|