tonym/spoolman2
1
0
Fork 0
Code Issues 19 Pull Requests Actions Packages Projects Releases Wiki Activity

Smart Density Defaults - Auto-fill based on material type #2

New Issue
Closed
opened 2026-01-15 01:20:16 +00:00 by tonym · 0 comments
tonym commented 2026-01-15 01:20:16 +00:00
Owner
Copy Link
Copy Source

Problem

Density is required to create a filament, but users have to look up/remember standard values. This is tedious for common materials with well-known densities.

Solution

Auto-fill density when material is selected/entered, default diameter to 1.75mm.

Implementation Plan

1. Create Material Defaults Utility

New file: client/src/utils/materialDefaults.ts

export const MATERIAL_DENSITY_MAP: Record<string, number> = {
  "PLA": 1.24,
  "ABS": 1.04,
  "PETG": 1.27,
  "NYLON": 1.52,
  "TPU": 1.21,
  "PC": 1.3,
  "WOOD": 1.28,
  "CF": 1.3,
  "CARBON FIBER": 1.3,
  "PC/ABS": 1.19,
  "HIPS": 1.03,
  "PVA": 1.23,
  "ASA": 1.05,
  "PP": 0.9,
  "POM": 1.4,
  "PMMA": 1.18,
  "FPE": 2.16,
  // Common variations
  "PLA+": 1.24,
  "PETG+": 1.27,
  "ABS+": 1.04,
};

export const DEFAULT_DENSITY = 1.24; // PLA
export const DEFAULT_DIAMETER = 1.75;

// Fuzzy matching: "PLA Silk" → PLA, "PETG+" → PETG
export function getDensityForMaterial(material: string): number | null;

2. Material Field as Searchable Dropdown

Convert material from free text Input to AutoComplete or Select with:

  • Predefined options from MATERIAL_DENSITY_MAP keys
  • Allow custom entry (user can type new materials)
  • On select/blur, trigger density auto-fill

3. Files to Modify

client/src/pages/filaments/create.tsx

  • Import materialDefaults utility
  • Replace material Input with AutoComplete component
  • Add Form.useWatch on material field
  • Add useEffect to auto-fill density when material changes
  • Pre-populate diameter (1.75) and density (1.24) for new filaments

client/src/components/filamentCreateModal.tsx

  • Same changes as above
  • Already has DEFAULT_DIAMETER and DEFAULT_DENSITY constants - replace with imports

client/src/pages/filaments/edit.tsx

  • Consider: should editing material update density? Probably NOT (user may have customized)

4. UX Decisions

Decision Choice
Trigger On blur AND on dropdown select
Default diameter 1.75mm
Default density 1.24 (PLA)
Fuzzy matching Yes - "PLA Silk" matches PLA
Material field type AutoComplete (dropdown + free text)
Allow new materials Yes, easily
Apply to edit page No - don't override user customizations

5. Fuzzy Matching Logic

function getDensityForMaterial(material: string): number | null {
  const normalized = material.toUpperCase().trim();
  
  // Direct match first
  if (MATERIAL_DENSITY_MAP[normalized]) {
    return MATERIAL_DENSITY_MAP[normalized];
  }
  
  // Fuzzy: check if input starts with or contains a known material
  for (const [key, density] of Object.entries(MATERIAL_DENSITY_MAP)) {
    if (normalized.startsWith(key) || normalized.includes(key)) {
      return density;
    }
  }
  
  return null; // Unknown material, keep current density
}

6. Testing Checklist

  • New filament form: diameter defaults to 1.75
  • New filament form: density defaults to 1.24 (PLA)
  • Type "PETG" in material → density auto-fills to 1.27
  • Type "PLA Silk" → density auto-fills to 1.24 (fuzzy match)
  • Select material from dropdown → density auto-fills
  • Type unknown material ("MyCustom") → density stays at default/unchanged
  • FilamentCreateModal: same behavior as full form
  • Edit page: changing material does NOT change density

Priority

High - reduces friction significantly, pairs well with Issue #1

## Problem Density is required to create a filament, but users have to look up/remember standard values. This is tedious for common materials with well-known densities. ## Solution Auto-fill density when material is selected/entered, default diameter to 1.75mm. --- ## Implementation Plan ### 1. Create Material Defaults Utility **New file: `client/src/utils/materialDefaults.ts`** ```typescript export const MATERIAL_DENSITY_MAP: Record<string, number> = { "PLA": 1.24, "ABS": 1.04, "PETG": 1.27, "NYLON": 1.52, "TPU": 1.21, "PC": 1.3, "WOOD": 1.28, "CF": 1.3, "CARBON FIBER": 1.3, "PC/ABS": 1.19, "HIPS": 1.03, "PVA": 1.23, "ASA": 1.05, "PP": 0.9, "POM": 1.4, "PMMA": 1.18, "FPE": 2.16, // Common variations "PLA+": 1.24, "PETG+": 1.27, "ABS+": 1.04, }; export const DEFAULT_DENSITY = 1.24; // PLA export const DEFAULT_DIAMETER = 1.75; // Fuzzy matching: "PLA Silk" → PLA, "PETG+" → PETG export function getDensityForMaterial(material: string): number | null; ``` ### 2. Material Field as Searchable Dropdown Convert material from free text `Input` to `AutoComplete` or `Select` with: - Predefined options from MATERIAL_DENSITY_MAP keys - Allow custom entry (user can type new materials) - On select/blur, trigger density auto-fill ### 3. Files to Modify **`client/src/pages/filaments/create.tsx`** - Import materialDefaults utility - Replace material `Input` with `AutoComplete` component - Add `Form.useWatch` on material field - Add `useEffect` to auto-fill density when material changes - Pre-populate diameter (1.75) and density (1.24) for new filaments **`client/src/components/filamentCreateModal.tsx`** - Same changes as above - Already has DEFAULT_DIAMETER and DEFAULT_DENSITY constants - replace with imports **`client/src/pages/filaments/edit.tsx`** - Consider: should editing material update density? Probably NOT (user may have customized) ### 4. UX Decisions | Decision | Choice | |----------|--------| | Trigger | On blur AND on dropdown select | | Default diameter | 1.75mm | | Default density | 1.24 (PLA) | | Fuzzy matching | Yes - "PLA Silk" matches PLA | | Material field type | AutoComplete (dropdown + free text) | | Allow new materials | Yes, easily | | Apply to edit page | No - don't override user customizations | ### 5. Fuzzy Matching Logic ```typescript function getDensityForMaterial(material: string): number | null { const normalized = material.toUpperCase().trim(); // Direct match first if (MATERIAL_DENSITY_MAP[normalized]) { return MATERIAL_DENSITY_MAP[normalized]; } // Fuzzy: check if input starts with or contains a known material for (const [key, density] of Object.entries(MATERIAL_DENSITY_MAP)) { if (normalized.startsWith(key) || normalized.includes(key)) { return density; } } return null; // Unknown material, keep current density } ``` ### 6. Testing Checklist - [ ] New filament form: diameter defaults to 1.75 - [ ] New filament form: density defaults to 1.24 (PLA) - [ ] Type "PETG" in material → density auto-fills to 1.27 - [ ] Type "PLA Silk" → density auto-fills to 1.24 (fuzzy match) - [ ] Select material from dropdown → density auto-fills - [ ] Type unknown material ("MyCustom") → density stays at default/unchanged - [ ] FilamentCreateModal: same behavior as full form - [ ] Edit page: changing material does NOT change density ## Priority High - reduces friction significantly, pairs well with Issue #1
tonym closed this issue 2026-01-16 03:41:13 +00:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
No items
No labels
Milestone
No items
No Milestone
Projects
Clear projects
No projects
Assignees
Clear assignees
tonym (Tony Moon)
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: tonym/spoolman2#2