vhaudiquet/esp32-bmc
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

ota: add ota update capabilities

Browse Source
This commit is contained in:
Valentin Haudiquet
2026-03-12 10:59:35 +01:00
parent b3485fcb10
commit ee3ec3ac4f
10 changed files with 1118 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

404
main/html/index.html
View File

@@ -356,6 +356,151 @@
}
}
/* OTA Update Styles */
.ota-container {
display: flex;
flex-direction: column;
gap: 15px;
}
.ota-form {
display: flex;
flex-direction: column;
gap: 10px;
}
.ota-form label {
font-weight: 600;
color: #555;
}
.ota-form input {
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
font-size: 14px;
}
.ota-form input:focus {
outline: none;
border-color: #2196F3;
}
.ota-progress {
display: flex;
align-items: center;
gap: 10px;
}
.progress-bar {
flex: 1;
height: 20px;
background: #e0e0e0;
border-radius: 10px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: linear-gradient(90deg, #4CAF50, #8BC34A);
border-radius: 10px;
transition: width 0.3s ease;
width: 0%;
}
#ota-progress-text {
font-weight: 600;
min-width: 45px;
}
.ota-info {
margin-bottom: 10px;
}
/* OTA Upload Section */
.ota-upload-section {
display: flex;
flex-direction: column;
gap: 10px;
}
.drop-zone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 30px 20px;
text-align: center;
cursor: pointer;
transition: all 0.3s ease;
background: #fafafa;
}
.drop-zone:hover, .drop-zone.drag-over {
border-color: #2196F3;
background: #e3f2fd;
}
.drop-zone.drag-over {
transform: scale(1.02);
}
.drop-zone-icon {
font-size: 48px;
display: block;
margin-bottom: 10px;
}
.drop-zone p {
margin: 0;
font-weight: 600;
color: #333;
}
.drop-zone-hint {
font-size: 12px;
color: #666;
margin-top: 5px;
display: block;
}
.file-info {
display: flex;
justify-content: space-between;
padding: 10px;
background: #e8f5e9;
border-radius: 4px;
font-size: 14px;
}
.file-info #file-name {
font-weight: 600;
color: #2e7d32;
}
.file-info #file-size {
color: #666;
}
.ota-divider {
display: flex;
align-items: center;
text-align: center;
margin: 15px 0;
}
.ota-divider::before,
.ota-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #ddd;
}
.ota-divider span {
padding: 0 15px;
color: #999;
font-size: 12px;
font-weight: 600;
}
/* Responsive */
@media (max-width: 600px) {
h1 {
@@ -438,6 +583,77 @@
</div>
</div>
<div class="grid">
<!-- OTA Update Card -->
<div class="card">
<h2><span class="icon">🔄</span> OTA Update</h2>
<div class="ota-container">
<div class="ota-info">
<div class="info-item">
<div class="info-label">Running Partition</div>
<div class="info-value" id="ota-partition">-</div>
</div>
</div>
<!-- File Upload Section -->
<div class="ota-upload-section">
<div class="drop-zone" id="drop-zone">
<div class="drop-zone-content">
<span class="drop-zone-icon">📁</span>
<p>Drag & drop firmware file here</p>
<span class="drop-zone-hint">or click to browse</span>
</div>
<input type="file" id="ota-file-input" accept=".bin" style="display: none;" />
</div>
<div class="file-info" id="file-info" style="display: none;">
<span id="file-name">-</span>
<span id="file-size">-</span>
</div>
<button class="btn btn-primary" id="ota-upload-btn" onclick="uploadFirmware()" disabled>Upload Firmware</button>
</div>
<div class="ota-divider">
<span>OR</span>
</div>
<div class="ota-form">
<label for="ota-url">Firmware URL:</label>
<input type="text" id="ota-url" placeholder="http://server/firmware.bin" />
<button class="btn btn-secondary" id="ota-btn" onclick="startOTAUpdate()">Download from URL</button>
</div>
<div class="ota-progress" id="ota-progress-container" style="display: none;">
<div class="progress-bar">
<div class="progress-fill" id="ota-progress-bar"></div>
</div>
<span id="ota-progress-text">0%</span>
</div>
</div>
</div>
<!-- System Info Card (Additional) -->
<div class="card">
<h2><span class="icon">📊</span> System Status</h2>
<div class="info-grid">
<div class="info-item">
<div class="info-label">Free Heap</div>
<div class="info-value" id="free-heap">-</div>
</div>
<div class="info-item">
<div class="info-label">Uptime</div>
<div class="info-value" id="uptime">-</div>
</div>
<div class="info-item">
<div class="info-label">WiFi Mode</div>
<div class="info-value" id="wifi-mode">Ethernet</div>
</div>
<div class="info-item">
<div class="info-label">IP Address</div>
<div class="info-value" id="ip-address">-</div>
</div>
</div>
</div>
</div>
<div class="grid">
<!-- GPIO Monitor Card -->
<div class="card">
@@ -808,17 +1024,205 @@
}
}
// OTA Update Functions
let otaPollInterval = null;
async function updateOTAStatus() {
try {
const response = await fetch(`${API_BASE}/api/ota/status`);
const result = await response.json();
if (result.success && result.data) {
document.getElementById('ota-partition').textContent = result.data.partition || '-';
if (result.data.updating) {
document.getElementById('ota-progress-container').style.display = 'flex';
const progress = result.data.progress || 0;
document.getElementById('ota-progress-bar').style.width = `${progress}%`;
document.getElementById('ota-progress-text').textContent = `${progress}%`;
document.getElementById('ota-btn').disabled = true;
document.getElementById('ota-btn').textContent = 'Updating...';
} else {
document.getElementById('ota-progress-container').style.display = 'none';
document.getElementById('ota-btn').disabled = false;
document.getElementById('ota-btn').textContent = 'Start Update';
if (otaPollInterval) {
clearInterval(otaPollInterval);
otaPollInterval = null;
}
}
}
} catch (error) {
console.error('Failed to get OTA status:', error);
}
}
async function startOTAUpdate() {
const url = document.getElementById('ota-url').value.trim();
if (!url) {
showToast('Please enter a firmware URL', 'error');
return;
}
try {
const response = await fetch(`${API_BASE}/api/ota/update`, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({ url: url })
});
const result = await response.json();
if (result.success) {
showToast('OTA update started', 'success');
document.getElementById('ota-btn').disabled = true;
document.getElementById('ota-btn').textContent = 'Updating...';
document.getElementById('ota-progress-container').style.display = 'flex';
// Start polling for progress
otaPollInterval = setInterval(updateOTAStatus, 1000);
} else {
showToast(result.error || 'Failed to start OTA update', 'error');
}
} catch (error) {
console.error('OTA update error:', error);
showToast('Failed to start OTA update', 'error');
}
}
// File Upload Functions
let selectedFile = null;
function formatFileSize(bytes) {
if (bytes < 1024) return bytes + ' B';
if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
}
function handleFileSelect(file) {
if (!file) return;
if (!file.name.endsWith('.bin')) {
showToast('Please select a .bin firmware file', 'error');
return;
}
selectedFile = file;
document.getElementById('file-info').style.display = 'flex';
document.getElementById('file-name').textContent = file.name;
document.getElementById('file-size').textContent = formatFileSize(file.size);
document.getElementById('ota-upload-btn').disabled = false;
}
async function uploadFirmware() {
if (!selectedFile) {
showToast('Please select a firmware file first', 'error');
return;
}
const uploadBtn = document.getElementById('ota-upload-btn');
uploadBtn.disabled = true;
uploadBtn.textContent = 'Uploading...';
document.getElementById('ota-progress-container').style.display = 'flex';
document.getElementById('ota-progress-bar').style.width = '0%';
document.getElementById('ota-progress-text').textContent = '0%';
try {
const formData = new FormData();
formData.append('firmware', selectedFile);
const xhr = new XMLHttpRequest();
xhr.upload.onprogress = (e) => {
if (e.lengthComputable) {
const percent = Math.round((e.loaded / e.total) * 100);
document.getElementById('ota-progress-bar').style.width = percent + '%';
document.getElementById('ota-progress-text').textContent = percent + '%';
}
};
xhr.onload = () => {
if (xhr.status === 200) {
showToast('Firmware uploaded successfully! Device will restart...', 'success');
document.getElementById('ota-progress-bar').style.width = '100%';
document.getElementById('ota-progress-text').textContent = '100%';
} else {
let errorMsg = 'Upload failed';
try {
const result = JSON.parse(xhr.responseText);
errorMsg = result.error || errorMsg;
} catch (e) {}
showToast(errorMsg, 'error');
uploadBtn.disabled = false;
uploadBtn.textContent = 'Upload Firmware';
}
};
xhr.onerror = () => {
showToast('Upload failed - network error', 'error');
uploadBtn.disabled = false;
uploadBtn.textContent = 'Upload Firmware';
};
xhr.open('POST', `${API_BASE}/api/ota/upload`);
xhr.send(formData);
} catch (error) {
console.error('Upload error:', error);
showToast('Failed to upload firmware', 'error');
uploadBtn.disabled = false;
uploadBtn.textContent = 'Upload Firmware';
}
}
// Initialize
document.addEventListener('DOMContentLoaded', () => {
updateSystemInfo();
updateGPIOStates();
updatePowerStatus();
updateOTAStatus();
connectWebSocket();
// Setup drag and drop
const dropZone = document.getElementById('drop-zone');
const fileInput = document.getElementById('ota-file-input');
dropZone.addEventListener('click', () => fileInput.click());
dropZone.addEventListener('dragover', (e) => {
e.preventDefault();
dropZone.classList.add('drag-over');
});
dropZone.addEventListener('dragleave', () => {
dropZone.classList.remove('drag-over');
});
dropZone.addEventListener('drop', (e) => {
e.preventDefault();
dropZone.classList.remove('drag-over');
const files = e.dataTransfer.files;
if (files.length > 0) {
handleFileSelect(files[0]);
}
});
fileInput.addEventListener('change', (e) => {
if (e.target.files.length > 0) {
handleFileSelect(e.target.files[0]);
}
});
// Periodic updates
setInterval(updateSystemInfo, 5000);
setInterval(updateGPIOStates, 2000);
setInterval(updatePowerStatus, 2000);
setInterval(updateOTAStatus, 5000);
});
</script>
</body>