mirror of
https://github.com/maziggy/bambuddy.git
synced 2026-10-09 23:45:40 +02:00
maziggy
632334953c
Reporter wanted to select a transparent filament colour in the spool
editor; CMW-ISS confirmed on v0.2.5b1 that AMS-detected transparent
spools were silently labelled "Black" in the filament-mapping dropdown
because the colour name resolver dropped the alpha byte and the underlying
RGB 000000 HSL-bucketed to "Black". Spoolman already supported 8-digit
hex; the built-in inventory didn't.
Eight collapsing sites fixed together so transparent reaches the user
intact:
- frontend/src/utils/colors.ts: hexToColorName / getColorName /
resolveSpoolColorName / isLightColor short-circuit to "Clear" for
alpha=00 before HSL bucketing or catalog lookup
- frontend/src/utils/amsHelpers.ts::normalizeColor preserves the alpha
byte when alpha < FF (normalizeColorForCompare unchanged so type/colour
matching is unaffected)
- frontend/src/components/spool-form/constants.ts: new
{ name: 'Clear', hex: '00000000' } preset in QUICK_COLORS
- frontend/src/components/spool-form/ColorSection.tsx: hex draft accepts
0-8 chars, commits at 6 (+FF) or 8 verbatim; blur pads 7-char to 8;
selectColor passes 6-char as +FF / 8-char verbatim; isSelected matches
on full rgba; swatch buttons paint a checkerboard for alpha=00
- backend/app/api/routes/printers.py::get_available_filaments preserves
the full rgba on both AMS and vt_tray branches (6-char dedup key
unchanged)
- backend/app/services/spoolman.py::parse_ams_tray drops the silent
00000000 -> F5E6D3FF cream rewrite — the swatch renderer paints a
checkerboard underlay for alpha < FF already (added in #1154), so the
rewrite was hidden technical debt that made every AMS-detected
transparent spool land in inventory as cream
- backend/app/services/spool_tag_matcher.py::create_spool_from_tray
short-circuits the colour-catalog lookup for alpha=00 and stores
color_name="Clear" directly — otherwise an RFID-tagged transparent
Bambu spool would resolve against the #000000 catalog row (or "Black"
via the HSL fallback) before the frontend's resolver ever saw it
- Two shared helpers in utils/colors.ts — getSwatchStyle(rgba) (style
object: checkerboard for alpha=00) and spoolColorString(rgba)
(8-char hex string for SVG fill) — applied to every simple-swatch
site that would otherwise have rendered Clear spools as solid black:
LabelTemplatePickerModal, SpoolBuddyInventoryPage (SpoolCircle + dot),
SpoolBuddyAmsPage (both branches), SpoolBuddyWriteTagPage (4 sites),
ForecastPanel, AssignToAmsModal, AssignSpoolModal (both branches),
InventorySpoolInfoCard, TagDetectedModal, SpoolInfoCard, LinkSpoolModal,
and the FilamentSwatch tooltip title fallback
Intentionally NOT changed: native <input type="color"> keeps 6-char hex
(can't pick alpha; onChange still emits +FF, correct); Spoolman's
_find_or_create_filament strips alpha (Spoolman catalog is 6-char only);
print_scheduler colour matching strips alpha (auto-mapping treats Clear
as Black for slot compatibility); label_renderer prints "#RRGGBB" on the
physical label (printers can't print transparency, swatch fill via
_color_from_hex still honours alpha).
110 lines
3.8 KiB
TypeScript
110 lines
3.8 KiB
TypeScript
import type { ColorPreset } from './types';
|
|
|
|
// Material options
|
|
export const MATERIALS = [
|
|
'PLA', 'PETG', 'ABS', 'TPU', 'ASA', 'PC', 'PA', 'PVA', 'HIPS',
|
|
'PA-CF', 'PETG-CF', 'PLA-CF',
|
|
];
|
|
|
|
// Common spool weights
|
|
export const WEIGHTS = [250, 500, 750, 1000, 2000, 3000];
|
|
|
|
// Default brand options (will be augmented with cloud presets)
|
|
export const DEFAULT_BRANDS = [
|
|
'Bambu', 'PolyLite', 'PolyTerra', 'eSUN', 'Overture',
|
|
'Fiberon', 'SUNLU', 'Inland', 'Hatchbox', 'Generic',
|
|
];
|
|
|
|
// Known filament variants/subtypes
|
|
export const KNOWN_VARIANTS = [
|
|
'Basic', 'Matte', 'Silk', 'Silk+', 'Tough', 'Tough+', 'HF', 'High Flow', 'Engineering',
|
|
// CF (Carbon Fiber) / GF (Glass Fiber) — match Bambu's PETG-CF / PA6-GF /
|
|
// ABS-GF naming so users adding a third-party CF/GF spool can pick the
|
|
// base material + subtype here instead of needing a -CF Material entry
|
|
// (#1345).
|
|
'CF', 'GF',
|
|
'Galaxy', 'Glow', 'Marble', 'Metal', 'Rainbow', 'Sparkle', 'Wood',
|
|
'Translucent', 'Transparent', 'Clear', 'Lite', 'Pro', 'Plus', 'Max',
|
|
'Super', 'Ultra', 'Flex', 'Soft', 'Hard', 'Strong', 'Impact',
|
|
'Heat Resistant', 'UV Resistant', 'ESD', 'Conductive', 'Magnetic',
|
|
'Gradient', 'Dual Color', 'Tri Color', 'Multicolor',
|
|
];
|
|
|
|
// Quick color swatches - most common colors (shown by default).
|
|
// `Clear` is the only 8-char preset (alpha 00) — native `<input type="color">`
|
|
// cannot pick alpha, so a dedicated preset is the only way to set it (#1545).
|
|
export const QUICK_COLORS: ColorPreset[] = [
|
|
{ name: 'Black', hex: '000000' },
|
|
{ name: 'White', hex: 'FFFFFF' },
|
|
{ name: 'Gray', hex: '808080' },
|
|
{ name: 'Red', hex: 'FF0000' },
|
|
{ name: 'Orange', hex: 'FFA500' },
|
|
{ name: 'Yellow', hex: 'FFFF00' },
|
|
{ name: 'Green', hex: '00AE42' },
|
|
{ name: 'Blue', hex: '0066FF' },
|
|
{ name: 'Purple', hex: '8B00FF' },
|
|
{ name: 'Pink', hex: 'FF69B4' },
|
|
{ name: 'Brown', hex: '8B4513' },
|
|
{ name: 'Silver', hex: 'C0C0C0' },
|
|
{ name: 'Clear', hex: '00000000' },
|
|
];
|
|
|
|
// Extended color palette (shown when expanded)
|
|
export const EXTENDED_COLORS: ColorPreset[] = [
|
|
// Reds
|
|
{ name: 'Dark Red', hex: '8B0000' },
|
|
{ name: 'Crimson', hex: 'DC143C' },
|
|
{ name: 'Coral', hex: 'FF7F50' },
|
|
{ name: 'Salmon', hex: 'FA8072' },
|
|
// Oranges
|
|
{ name: 'Dark Orange', hex: 'FF8C00' },
|
|
{ name: 'Peach', hex: 'FFDAB9' },
|
|
// Yellows
|
|
{ name: 'Gold', hex: 'FFD700' },
|
|
{ name: 'Khaki', hex: 'F0E68C' },
|
|
{ name: 'Lemon', hex: 'FFF44F' },
|
|
// Greens
|
|
{ name: 'Lime', hex: '32CD32' },
|
|
{ name: 'Forest Green', hex: '228B22' },
|
|
{ name: 'Olive', hex: '808000' },
|
|
{ name: 'Mint', hex: '98FF98' },
|
|
{ name: 'Teal', hex: '008080' },
|
|
// Blues
|
|
{ name: 'Navy', hex: '000080' },
|
|
{ name: 'Sky Blue', hex: '87CEEB' },
|
|
{ name: 'Royal Blue', hex: '4169E1' },
|
|
{ name: 'Cyan', hex: '00FFFF' },
|
|
{ name: 'Turquoise', hex: '40E0D0' },
|
|
// Purples
|
|
{ name: 'Violet', hex: 'EE82EE' },
|
|
{ name: 'Magenta', hex: 'FF00FF' },
|
|
{ name: 'Indigo', hex: '4B0082' },
|
|
{ name: 'Lavender', hex: 'E6E6FA' },
|
|
{ name: 'Plum', hex: 'DDA0DD' },
|
|
// Pinks
|
|
{ name: 'Hot Pink', hex: 'FF69B4' },
|
|
{ name: 'Rose', hex: 'FF007F' },
|
|
{ name: 'Blush', hex: 'FFB6C1' },
|
|
// Browns
|
|
{ name: 'Chocolate', hex: 'D2691E' },
|
|
{ name: 'Tan', hex: 'D2B48C' },
|
|
{ name: 'Beige', hex: 'F5F5DC' },
|
|
{ name: 'Maroon', hex: '800000' },
|
|
// Neutrals
|
|
{ name: 'Dark Gray', hex: '404040' },
|
|
{ name: 'Light Gray', hex: 'D3D3D3' },
|
|
{ name: 'Charcoal', hex: '36454F' },
|
|
{ name: 'Ivory', hex: 'FFFFF0' },
|
|
// Bambu specific
|
|
{ name: 'Bambu Green', hex: '00AE42' },
|
|
{ name: 'Jade White', hex: 'E8E8E8' },
|
|
{ name: 'Titan Gray', hex: '5A5A5A' },
|
|
];
|
|
|
|
// All colors combined
|
|
export const ALL_COLORS: ColorPreset[] = [...QUICK_COLORS, ...EXTENDED_COLORS];
|
|
|
|
// Local storage keys
|
|
export const RECENT_COLORS_KEY = 'bambuddy-recent-colors';
|
|
export const MAX_RECENT_COLORS = 8;
|