برای این نیاز، یک داشبورد مدیریتی برای پرینترهای سه بعدی با Klipper و Mainsail ایجاد میکنیم که شامل موارد زیر است: Klipper Printers Dashboard

Klipper Printers Dashboard

Add New Printer

Printer Name

Printer IP Address

Upload G-code to All Printers

// Printer management const printers = JSON.parse(localStorage.getItem('klipperPrinters')) || []; // DOM elements const printersGrid = document.getElementById('printersGrid'); const printerNameInput = document.getElementById('printerName'); const printerIPInput = document.getElementById('printerIP'); const addPrinterBtn = document.getElementById('addPrinterBtn'); const gcodeFileInput = document.getElementById('gcodeFile'); const uploadAllBtn = document.getElementById('uploadAllBtn'); const uploadStatus = document.getElementById('uploadStatus'); // Render printers function renderPrinters() { printersGrid.innerHTML = ''; printers.forEach((printer, index) => { const printerCard = document.createElement('div'); printerCard.className = 'printer-card'; const statusDiv = document.createElement('div'); statusDiv.className = 'printer-status'; statusDiv.classList.add('offline'); // Default to offline const nameDiv = document.createElement('div'); nameDiv.className = 'printer-name'; nameDiv.textContent = printer.name; const ipDiv = document.createElement('div'); ipDiv.className = 'printer-ip'; ipDiv.textContent = printer.ip; const actionsDiv = document.createElement('div'); actionsDiv.className = 'printer-actions'; const viewBtn = document.createElement('button'); viewBtn.textContent = 'View'; viewBtn.onclick = () => window.open(`http://${printer.ip}`, '_blank'); const removeBtn = document.createElement('button'); removeBtn.textContent = 'Remove'; removeBtn.style.backgroundColor = '#F44336'; removeBtn.onclick = () => removePrinter(index); actionsDiv.appendChild(viewBtn); actionsDiv.appendChild(removeBtn); printerCard.appendChild(statusDiv); printerCard.appendChild(nameDiv); printerCard.appendChild(ipDiv); printerCard.appendChild(actionsDiv); printersGrid.appendChild(printerCard); // Check printer status checkPrinterStatus(printer.ip, statusDiv); }); } // Check printer status async function checkPrinterStatus(ip, statusElement) { try { const response = await fetch(`http://${ip}/server/info`, { method: 'GET', mode: 'no-cors' }); if (response.ok || response.status === 0) { statusElement.classList.remove('offline'); statusElement.classList.add('online'); } else { statusElement.classList.remove('online'); statusElement.classList.add('offline'); } } catch (error) { statusElement.classList.remove('online'); statusElement.classList.add('offline'); } } // Add new printer function addPrinter() { const name = printerNameInput.value.trim(); const ip = printerIPInput.value.trim(); if (!name || !ip) { alert('Please enter both printer name and IP address'); return; } printers.push({ name, ip }); localStorage.setItem('klipperPrinters', JSON.stringify(printers)); printerNameInput.value = ''; printerIPInput.value = ''; renderPrinters(); } // Remove printer function removePrinter(index) { if (confirm('Are you sure you want to remove this printer?')) { printers.splice(index, 1); localStorage.setItem('klipperPrinters', JSON.stringify(printers)); renderPrinters(); } } // Upload G-code to all printers async function uploadToAllPrinters(file) { if (!file) { alert('Please select a G-code file first'); return; } uploadStatus.innerHTML = ''; for (const printer of printers) { const formData = new FormData(); formData.append('file', file); formData.append('root', 'gcodes'); try { uploadStatus.innerHTML += `

Uploading to ${printer.name} (${printer.ip})...

`; const response = await fetch(`http://${printer.ip}/server/files/upload`, { method: 'POST', body: formData, mode: 'no-cors' }); if (response.ok || response.status === 0) { uploadStatus.innerHTML += `

Successfully uploaded to ${printer.name}

`; } else { uploadStatus.innerHTML += `

Failed to upload to ${printer.name}

`; } } catch (error) { uploadStatus.innerHTML += `

Error uploading to ${printer.name}: ${error.message}

`; } } } // Event listeners addPrinterBtn.addEventListener('click', addPrinter); uploadAllBtn.addEventListener('click', () => uploadToAllPrinters(gcodeFileInput.files[0])); // Initial render renderPrinters(); // Periodically check printer status (every 30 seconds) setInterval(() => { const statusElements = document.querySelectorAll('.printer-status'); printers.forEach((printer, index) => { checkPrinterStatus(printer.ip, statusElements[index]); }); }, 30000); این داشبورد به شما امکان میدهد: 1. پرینترها را با نام و آیپی اضافه کنید (در localStorage ذخیره میشود) 2. وضعیت آنلاین/آفلاین هر پرینتر را ببینید 3. به رابط Mainsail هر پرینتر دسترسی سریع داشته باشید 4. فایل G-code را به همه پرینترها همزمان آپلود کنید 5. پرینترها را حذف کنید برای استفاده: 1. فایل index.html را در مرورگر باز کنید 2. اطلاعات پرینترها را اضافه کنید 3. برای آپلود فایل به همه پرینترها، فایل را انتخاب و دکمه آپلود را بزنید