3D-Druck/Filaman
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 110 Wiki Activity

refactor header and RFID display logic, add spool out functionality, and update image assets

Browse Source
This commit is contained in:
Manuel Weiser 2025-02-13 16:13:46 +01:00
parent f01a42d850
commit e5bf05ee43
14 changed files with 57 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
html/header.html
View File

@ -6,7 +6,6 @@
<title>FilaMan - Filament Management Tool</title> <title>FilaMan - Filament Management Tool</title>
<link rel="icon" type="image/png" href="/favicon.ico"> <link rel="icon" type="image/png" href="/favicon.ico">
<link rel="stylesheet" href="style.css"> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style2.css">
</head> </head>
<body> <body>
<div class="navbar"> <div class="navbar">

64
html/rfid.js
View File

@ -244,24 +244,39 @@ function displayAmsData(amsData) {
tray[field] !== 'null' tray[field] !== 'null'
); );
if (!hasAnyContent) { // Bestimme den Anzeigenamen für das Tray
return ` const trayDisplayName = (ams.ams_id === 255) ? 'External' : `Tray ${tray.id}`;
<div class="tray">
<p class="tray-head">Tray ${tray.id}</p>
<p>Empty</p>
</div>
<hr>`;
}
// Nur für nicht-leere Trays den Button-HTML erstellen // Nur für nicht-leere Trays den Button-HTML erstellen
const buttonHtml = ` const buttonHtml = `
<button class="spool-button" onclick="handleSpoolIn(${ams.ams_id}, ${tray.id})" <button class="spool-button" onclick="handleSpoolIn(${ams.ams_id}, ${tray.id})"
style="position: absolute; top: -35px; left: -15px; style="position: absolute; top: -30px; left: -15px;
background: none; border: none; padding: 0; background: none; border: none; padding: 0;
cursor: pointer; display: none;"> cursor: pointer; display: none;">
<img src="spool_in.png" alt="Spool In" style="width: 48px; height: 48px;"> <img src="spool_in.png" alt="Spool In" style="width: 48px; height: 48px;">
</button>`; </button>`;
// Nur für nicht-leere Trays den Button-HTML erstellen
const outButtonHtml = `
<button class="spool-button" onclick="handleSpoolOut()"
style="position: absolute; top: -35px; right: -15px;
background: none; border: none; padding: 0;
cursor: pointer; display: block;">
<img src="spool_in.png" alt="Spool In" style="width: 48px; height: 48px; transform: rotate(180deg) scaleX(-1);">
</button>`;
if (!hasAnyContent) {
return `
<div class="tray">
<p class="tray-head">${trayDisplayName}</p>
<p>
${(ams.ams_id === 255 && tray.tray_type === '') ? buttonHtml : ''}
Empty
</p>
</div>
<hr>`;
}
// Generiere den Type mit Color-Box zusammen // Generiere den Type mit Color-Box zusammen
const typeWithColor = tray.tray_type ? const typeWithColor = tray.tray_type ?
`<p>Typ: ${tray.tray_type} ${tray.tray_color ? `<span style=" `<p>Typ: ${tray.tray_type} ${tray.tray_color ? `<span style="
@ -297,9 +312,6 @@ function displayAmsData(amsData) {
? `<p>Nozzle Temp: ${tray.nozzle_temp_min}°C - ${tray.nozzle_temp_max}°C</p>` ? `<p>Nozzle Temp: ${tray.nozzle_temp_min}°C - ${tray.nozzle_temp_max}°C</p>`
: ''; : '';
// Bestimme den Anzeigenamen für das Tray
const trayDisplayName = (ams.ams_id === 255) ? 'External' : `Tray ${tray.id}`;
return ` return `
<div class="tray" ${tray.tray_color ? `style="border-left: 4px solid #${tray.tray_color};"` : 'style="border-left: 4px solid #007bff;"'}> <div class="tray" ${tray.tray_color ? `style="border-left: 4px solid #${tray.tray_color};"` : 'style="border-left: 4px solid #007bff;"'}>
<div style="position: relative;"> <div style="position: relative;">
@ -308,7 +320,9 @@ function displayAmsData(amsData) {
${typeWithColor} ${typeWithColor}
${trayDetails} ${trayDetails}
${tempHTML} ${tempHTML}
${(ams.ams_id === 255 && tray.tray_type !== '') ? outButtonHtml : ''}
</div> </div>
</div>`; </div>`;
}).join(''); }).join('');
@ -332,6 +346,30 @@ function updateSpoolButtons(show) {
}); });
} }
function handleSpoolOut() {
// Erstelle Payload
const payload = {
type: 'setBambuSpool',
payload: {
amsId: 255,
trayId: 254,
color: "FFFFFF",
nozzle_temp_min: 0,
nozzle_temp_max: 0,
type: "",
brand: ""
}
};
try {
socket.send(JSON.stringify(payload));
showNotification(`External Spool removed. Pls wait`, true);
} catch (error) {
console.error("Fehler beim Senden der WebSocket Nachricht:", error);
showNotification("Error while sending!", false);
}
}
// Neue Funktion zum Behandeln des Spool-In-Klicks // Neue Funktion zum Behandeln des Spool-In-Klicks
function handleSpoolIn(amsId, trayId) { function handleSpoolIn(amsId, trayId) {
// Prüfe WebSocket Verbindung zuerst // Prüfe WebSocket Verbindung zuerst
@ -390,7 +428,7 @@ function handleSpoolIn(amsId, trayId) {
showNotification(`Spool set in AMS ${amsId} Tray ${trayId}. Pls wait`, true); showNotification(`Spool set in AMS ${amsId} Tray ${trayId}. Pls wait`, true);
} catch (error) { } catch (error) {
console.error("Fehler beim Senden der WebSocket Nachricht:", error); console.error("Fehler beim Senden der WebSocket Nachricht:", error);
showNotification("Fehler beim Senden der Daten", false); showNotification("Error while sending", false);
} }
} }

BIN
img/IMG_2546.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.9 MiB

BIN
img/display_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 571 KiB

BIN
img/display_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 470 KiB

BIN
img/display_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 535 KiB

BIN
img/display_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 534 KiB

BIN
img/scale_1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 735 KiB

BIN
img/scale_2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 835 KiB

BIN
img/scale_3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 814 KiB

BIN
img/scale_4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 648 KiB

BIN
img/scale_side.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 594 KiB

BIN
img/scale_trans.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 664 KiB

6
src/bambu.cpp
View File

@ -192,7 +192,7 @@ bool setBambuSpool(String payload) {
int maxTemp = doc["nozzle_temp_max"]; int maxTemp = doc["nozzle_temp_max"];
String type = doc["type"].as<String>(); String type = doc["type"].as<String>();
String brand = doc["brand"].as<String>(); String brand = doc["brand"].as<String>();
String tray_info_idx = findFilamentIdx(brand, type); String tray_info_idx = (brand != "" && type != "") ? findFilamentIdx(brand, type) : "";
doc.clear(); doc.clear();
@ -330,7 +330,7 @@ void mqtt_callback(char* topic, byte* payload, unsigned int length) {
//Serial.println(); //Serial.println();
// Sende die aktualisierten AMS-Daten an alle WebSocket-Clients // Sende die aktualisierten AMS-Daten an alle WebSocket-Clients
sendAmsData(nullptr); //sendAmsData(nullptr);
// Verarbeite erst die normalen AMS-Daten // Verarbeite erst die normalen AMS-Daten
for (int i = 0; i < amsArray.size() && i < 16; i++) { for (int i = 0; i < amsArray.size() && i < 16; i++) {
@ -366,7 +366,7 @@ void mqtt_callback(char* topic, byte* payload, unsigned int length) {
} }
// Sende die aktualisierten AMS-Daten // Sende die aktualisierten AMS-Daten
sendAmsData(nullptr); //sendAmsData(nullptr);
// Erstelle JSON für WebSocket-Clients // Erstelle JSON für WebSocket-Clients
JsonDocument wsDoc; JsonDocument wsDoc;