2025-02-18 12:28:47 +01:00
|
|
|
<!-- head --><!DOCTYPE html>
|
|
|
|
|
<html lang="en">
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
|
|
<title>FilaMan - Filament Management Tool</title>
|
|
|
|
|
<link rel="icon" type="image/png" href="/favicon.ico">
|
|
|
|
|
<link rel="stylesheet" href="style.css">
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<div class="navbar">
|
|
|
|
|
<div style="display: flex; align-items: center; gap: 2rem;">
|
|
|
|
|
<img src="/logo.png" alt="FilaMan Logo" class="logo">
|
|
|
|
|
<div class="logo-text">
|
2025-02-21 09:25:00 +01:00
|
|
|
<h1>FilaMan<span class="version">v1.2.92</span></h1>
|
2025-02-18 12:28:47 +01:00
|
|
|
<h4>Filament Management Tool</h4>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<nav style="display: flex; gap: 1rem;">
|
|
|
|
|
<a href="/">Start</a>
|
|
|
|
|
<a href="/waage">Scale</a>
|
|
|
|
|
<a href="/spoolman">Spoolman/Bambu</a>
|
|
|
|
|
<a href="/about">About</a>
|
|
|
|
|
<a href="/upgrade">Upgrade</a>
|
|
|
|
|
</nav>
|
|
|
|
|
<div class="status-container">
|
|
|
|
|
<div class="status-item">
|
|
|
|
|
<span class="status-dot" id="bambuDot"></span>B
|
|
|
|
|
</div>
|
|
|
|
|
<div class="status-item">
|
|
|
|
|
<span class="status-dot" id="spoolmanDot"></span>S
|
|
|
|
|
</div>
|
|
|
|
|
<div class="ram-status" id="ramStatus"></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<!-- head -->
|
|
|
|
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
<h1>Firmware Upgrade</h1>
|
|
|
|
|
|
|
|
|
|
<div class="warning">
|
|
|
|
|
<strong>Warning:</strong> Please do not turn off or restart the device during the update.
|
2025-02-18 14:18:14 +01:00
|
|
|
The device will restart automatically after the update.
|
2025-02-18 12:28:47 +01:00
|
|
|
</div>
|
|
|
|
|
|
2025-02-18 14:18:14 +01:00
|
|
|
<div class="update-form">
|
|
|
|
|
<form id="updateForm" enctype='multipart/form-data'>
|
2025-02-18 12:28:47 +01:00
|
|
|
<input type='file' name='update' accept='.bin' required>
|
2025-02-18 14:18:14 +01:00
|
|
|
<input type='submit' value='Start Firmware Update'>
|
2025-02-18 12:28:47 +01:00
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div class="progress-container">
|
|
|
|
|
<div class="progress-bar">0%</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="status"></div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<script>
|
2025-02-18 14:18:14 +01:00
|
|
|
// Hide status indicators during update
|
|
|
|
|
const statusContainer = document.querySelector('.status-container');
|
|
|
|
|
if (statusContainer) {
|
|
|
|
|
statusContainer.style.display = 'none';
|
|
|
|
|
}
|
|
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
// Größenbeschränkung für Upload
|
|
|
|
|
const MAX_FILE_SIZE = 4000000; // 4MB
|
|
|
|
|
|
|
|
|
|
async function checkMagicByte(file) {
|
|
|
|
|
return new Promise((resolve, reject) => {
|
|
|
|
|
const reader = new FileReader();
|
|
|
|
|
reader.onload = () => {
|
|
|
|
|
const arr = new Uint8Array(reader.result);
|
|
|
|
|
// Prüfe auf Magic Byte 0xE9 für ESP32 Firmware
|
|
|
|
|
resolve(arr[0] === 0xE9);
|
|
|
|
|
};
|
|
|
|
|
reader.onerror = () => reject(reader.error);
|
|
|
|
|
reader.readAsArrayBuffer(file.slice(0, 1));
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
|
2025-02-18 12:28:47 +01:00
|
|
|
document.getElementById('updateForm').addEventListener('submit', async (e) => {
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
const form = e.target;
|
|
|
|
|
const file = form.update.files[0];
|
2025-02-18 14:18:14 +01:00
|
|
|
if (!file) {
|
|
|
|
|
alert('Please select a firmware file.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
if (file.size > MAX_FILE_SIZE) {
|
|
|
|
|
alert('File too large. Maximum size is 4MB.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Prüfe Magic Byte für normale Firmware-Dateien
|
|
|
|
|
if (!file.name.endsWith('_spiffs.bin')) {
|
|
|
|
|
try {
|
|
|
|
|
const isValidFirmware = await checkMagicByte(file);
|
|
|
|
|
if (!isValidFirmware) {
|
|
|
|
|
alert('Invalid firmware file. Missing ESP32 magic byte.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error('Error checking magic byte:', error);
|
|
|
|
|
alert('Could not verify firmware file.');
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
}
|
2025-02-18 12:28:47 +01:00
|
|
|
|
|
|
|
|
const progress = document.querySelector('.progress-bar');
|
|
|
|
|
const progressContainer = document.querySelector('.progress-container');
|
|
|
|
|
const status = document.querySelector('.status');
|
|
|
|
|
|
|
|
|
|
progressContainer.style.display = 'block';
|
|
|
|
|
status.style.display = 'none';
|
|
|
|
|
status.className = 'status';
|
|
|
|
|
form.querySelector('input[type=submit]').disabled = true;
|
|
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
// Chunk-basierter Upload mit Retry-Logik
|
|
|
|
|
const chunkSize = 8192; // Optimale Chunk-Größe
|
|
|
|
|
const maxRetries = 3;
|
|
|
|
|
let offset = 0;
|
2025-02-18 12:28:47 +01:00
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
async function uploadChunk(chunk, retryCount = 0) {
|
2025-02-18 12:28:47 +01:00
|
|
|
try {
|
2025-02-21 09:24:54 +01:00
|
|
|
const response = await fetch('/update', {
|
|
|
|
|
method: 'POST',
|
|
|
|
|
body: chunk,
|
|
|
|
|
headers: {
|
|
|
|
|
'Content-Type': 'application/octet-stream',
|
|
|
|
|
'X-File-Name': file.name,
|
|
|
|
|
'X-Chunk-Offset': offset.toString(),
|
|
|
|
|
'X-Chunk-Size': chunk.size.toString(),
|
|
|
|
|
'X-Total-Size': file.size.toString()
|
|
|
|
|
},
|
|
|
|
|
timeout: 30000 // 30 Sekunden Timeout
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
const errorText = await response.text();
|
|
|
|
|
throw new Error(errorText || response.statusText);
|
2025-02-18 12:28:47 +01:00
|
|
|
}
|
2025-02-21 09:24:54 +01:00
|
|
|
|
|
|
|
|
return true;
|
|
|
|
|
} catch (error) {
|
|
|
|
|
console.error(`Chunk upload failed (attempt ${retryCount + 1}):`, error);
|
|
|
|
|
if (retryCount < maxRetries) {
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 1000)); // Warte 1 Sekunde vor Retry
|
|
|
|
|
return uploadChunk(chunk, retryCount + 1);
|
|
|
|
|
}
|
|
|
|
|
throw error;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
try {
|
|
|
|
|
while (offset < file.size) {
|
|
|
|
|
const end = Math.min(offset + chunkSize, file.size);
|
|
|
|
|
const chunk = file.slice(offset, end);
|
2025-02-18 12:28:47 +01:00
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
await uploadChunk(chunk);
|
2025-02-18 12:28:47 +01:00
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
offset = end;
|
|
|
|
|
const percentComplete = (offset / file.size) * 100;
|
|
|
|
|
progress.style.width = percentComplete + '%';
|
|
|
|
|
progress.textContent = Math.round(percentComplete) + '%';
|
|
|
|
|
|
|
|
|
|
// Kleine Pause zwischen den Chunks für bessere Stabilität
|
|
|
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
2025-02-18 12:28:47 +01:00
|
|
|
}
|
|
|
|
|
|
2025-02-21 09:24:54 +01:00
|
|
|
// Final success handler
|
|
|
|
|
status.textContent = 'Update successful! Device will restart...';
|
|
|
|
|
status.classList.add('success');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
|
|
|
|
|
// Warte auf Neustart und Redirect
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
window.location.href = '/';
|
|
|
|
|
}, 20000);
|
|
|
|
|
|
|
|
|
|
} catch (error) {
|
|
|
|
|
status.textContent = 'Update failed: ' + error.message;
|
2025-02-18 12:28:47 +01:00
|
|
|
status.classList.add('error');
|
|
|
|
|
status.style.display = 'block';
|
|
|
|
|
form.querySelector('input[type=submit]').disabled = false;
|
2025-02-21 09:24:54 +01:00
|
|
|
}
|
2025-02-18 12:28:47 +01:00
|
|
|
});
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
