diff --git a/docs/widgets/services/spoolman.md b/docs/widgets/services/spoolman.md
index da26b498be02..9e330fac7caa 100644
--- a/docs/widgets/services/spoolman.md
+++ b/docs/widgets/services/spoolman.md
@@ -5,11 +5,13 @@ description: Spoolman Widget Configuration
Learn more about [Spoolman](https://github.com/Donkie/Spoolman).
-Keep track of your inventory of 3D-printer filament spools.
-Spoolman is a self-hosted web service designed to help you efficiently manage your 3D printer filament spools and monitor their usage. It acts as a centralized database that seamlessly integrates with popular 3D printing software like OctoPrint and Klipper/Moonraker. When connected, it automatically updates spool weights as printing progresses, giving you real-time insights into filament usage.
+4 spools are displayed by default. If more than 4 spools are configured in spoolman you can use the filamentNames configuration option to filter for spools by their filament name.
```yaml
widget:
type: spoolman
url: http://spoolman.host.or.ip
+ filamentNames:
+ - orange
+ - blue
```
diff --git a/src/widgets/spoolman/component.jsx b/src/widgets/spoolman/component.jsx
index e502d079a6d5..bfc57f9a807a 100644
--- a/src/widgets/spoolman/component.jsx
+++ b/src/widgets/spoolman/component.jsx
@@ -10,10 +10,22 @@ export default function Component({ service }) {
const { data: spoolData, error: spoolError } = useWidgetAPI(widget, "spools");
+ // Helper to handle filtering based on filamentNames
+ const filterSpools = (data, filamentNames) => {
+ if (!filamentNames || filamentNames.length === 0) return data; // No filtering if no filamentNames
+ const limitedfilamentNames = filamentNames.slice(0, 4); // Limit to 4 names
+ return data.filter(spool => limitedfilamentNames.includes(spool.filament.name));
+ };
+
+ // Helper to limit spoolData length
+ const limitSpoolData = (data, limit = 4) => (data.length > limit ? data.slice(0, limit) : data);
+
+ // Error handling
if (spoolError) {
return ;
}
+ // Loading state
if (!spoolData) {
return (
@@ -23,17 +35,34 @@ export default function Component({ service }) {
);
}
+ // API error or unexpected response
if (spoolData.error || spoolData.message) {
return ;
}
+ // No spools available
+ if (spoolData.length === 0) {
+ return (
+
+
+
+ );
+ }
+
+ // Filter and limit spools
+ let filteredSpoolData = filterSpools(spoolData, widget.filamentNames);
+ filteredSpoolData = limitSpoolData(filteredSpoolData);
+
+ // Render filtered and limited spools
return (
- {spoolData.map((spool) => (
+ {filteredSpoolData.map((spool) => (
))}