Filament tools that help upload bambu colors and filament types easily (#3)

* added cover image

* bambu color import manage tool added

* added AMS hex color trimming

* updated instructions

* touch up readme

* fixed line chart noise x axis and add more date marker to split them up

bambu_run/management/commands/bambu_collector.py

@@ -332,7 +332,6 @@ class Command(BaseCommand):
         color_code = strip_color_padding(mqtt_color)
         color_hex = f"#{color_code}" if color_code else None
 
-        color_name = mqtt_color
         filament_color = match_filament_color(
             filament_type=type_val,
             filament_sub_type=sub_type,
@@ -345,7 +344,7 @@ class Command(BaseCommand):
             if self.verbose:
                 logger.info(f"Matched color from database: {color_name} (#{color_code})")
         else:
-            color_name = mqtt_color
+            color_name = color_hex or mqtt_color
             if self.verbose:
                 logger.warning(
                     f"No color match in database for {type_val} {sub_type} #{color_code}. "

bambu_run/management/commands/bambu_import_colors.py

@@ -0,0 +1,418 @@
+"""
+Management command to import Bambu Lab filament color catalogs into the FilamentColor database.
+
+Parses .txt color catalog files (one file per filament sub-type) and creates or skips
+FilamentColor records. FilamentType records are auto-created as needed.
+
+Usage:
+    # Import a single file
+    python manage.py bambu_import_colors docs/Bambu_Color_Catalog/PLA\ Basic.txt
+
+    # Import all .txt files in a directory
+    python manage.py bambu_import_colors docs/Bambu_Color_Catalog/
+
+    # Dry-run (preview without writing)
+    python manage.py bambu_import_colors docs/Bambu_Color_Catalog/ --dry-run
+
+    # Fail instead of auto-creating missing FilamentType entries
+    python manage.py bambu_import_colors docs/Bambu_Color_Catalog/ --no-auto-create-filament-type
+
+File naming convention:
+    The stem determines filament type and sub-type:
+      PLA Basic.txt  → type=PLA,  sub_type=PLA Basic
+      PA6-GF.txt     → type=PA6,  sub_type=PA6-GF
+      ABS.txt        → type=ABS,  sub_type=ABS
+
+Supported file formats:
+    Format 1 (multi-line):    Format 2 (same-line / tab-separated):
+      Jade White                Black Walnut    #4F3F24
+      Hex:#FFFFFF               Rosewood        #4C241C
+
+    Hex values may appear as: Hex:#RRGGBB  Hex: #RRGGBB  #RRGGBB  RRGGBB
+"""
+
+import logging
+import re
+from pathlib import Path
+
+from django.core.management.base import BaseCommand, CommandError
+from django.db import transaction
+
+from bambu_run.models import FilamentColor, FilamentType
+
+logger = logging.getLogger("bambu_run.import_colors")
+
+BRAND = "Bambu Lab"
+
+# ─── Parsing helpers ──────────────────────────────────────────────────────────
+
+_SAME_LINE_RE = re.compile(
+    r'^(.+?)\s+(?:Hex\s*:\s*)?#?([0-9A-Fa-f]{6})\s*$', re.IGNORECASE
+)
+_HEX_ONLY_RE = re.compile(
+    r'^\s*(?:Hex\s*:\s*)?#?([0-9A-Fa-f]{6})\s*$', re.IGNORECASE
+)
+
+
+def _stem_to_type_and_subtype(stem):
+    """
+    Derive (filament_type, filament_sub_type) from a file stem.
+
+    The sub-type is the full stem. The type is everything before the first
+    space or hyphen.
+
+      "PLA Basic"      → ("PLA",  "PLA Basic")
+      "PA6-GF"         → ("PA6",  "PA6-GF")
+      "ABS"            → ("ABS",  "ABS")
+      "PETG HF"        → ("PETG", "PETG HF")
+    """
+    sub_type = stem
+    m = re.search(r'[ -]', stem)
+    filament_type = stem[: m.start()] if m else stem
+    return filament_type, sub_type
+
+
+def _parse_file(path):
+    """
+    Parse a color catalog file and return a list of (color_name, hex_code) tuples.
+
+    hex_code is always 6-char uppercase without '#'.
+
+    Raises ValueError if the file cannot be read.
+    """
+    try:
+        text = path.read_text(encoding="utf-8", errors="replace")
+    except OSError as exc:
+        raise ValueError(f"Cannot read file: {exc}") from exc
+
+    lines = text.splitlines()
+    colors = []
+    i = 0
+
+    while i < len(lines):
+        stripped = lines[i].strip()
+        i += 1
+
+        if not stripped:
+            continue
+
+        # ── Format 2: color name + hex on the same line ─────────────────────
+        m = _SAME_LINE_RE.match(stripped)
+        if m:
+            colors.append((m.group(1).strip(), m.group(2).upper()))
+            continue
+
+        # ── Orphaned hex line with no preceding name — skip ──────────────────
+        if _HEX_ONLY_RE.match(stripped):
+            logger.warning("  [parse] Orphaned hex line (no preceding name): '%s'", stripped)
+            continue
+
+        # ── Format 1: color name on this line, hex on the next ──────────────
+        color_name = stripped
+        found_hex = False
+
+        while i < len(lines):
+            next_stripped = lines[i].strip()
+            i += 1  # tentatively consume
+
+            if not next_stripped:
+                continue  # skip blank lines between name and hex
+
+            m_hex = _HEX_ONLY_RE.match(next_stripped)
+            if m_hex:
+                colors.append((color_name, m_hex.group(1).upper()))
+                found_hex = True
+            else:
+                # Not a hex line — put it back for the outer loop
+                i -= 1
+                logger.warning(
+                    "  [parse] Expected hex after '%s', got '%s' — skipping name",
+                    color_name,
+                    next_stripped,
+                )
+            break  # look-ahead done (one non-empty line checked)
+
+        if not found_hex:
+            logger.warning(
+                "  [parse] Color '%s' has no hex line following it — skipping", color_name
+            )
+
+    return colors
+
+
+# ─── Command ──────────────────────────────────────────────────────────────────
+
+
+class Command(BaseCommand):
+    help = (
+        "Import Bambu Lab filament color catalog .txt files into the FilamentColor database. "
+        "Accepts a single .txt file or a directory of .txt files."
+    )
+
+    def add_arguments(self, parser):
+        parser.add_argument(
+            "path",
+            help="Path to a single .txt catalog file or a directory containing .txt files.",
+        )
+        parser.add_argument(
+            "--auto-create-filament-type",
+            default=True,
+            action="store_true",
+            dest="auto_create",
+            help="Auto-create FilamentType entries when missing (default: enabled).",
+        )
+        parser.add_argument(
+            "--no-auto-create-filament-type",
+            action="store_false",
+            dest="auto_create",
+            help="Skip colors whose FilamentType entry does not exist instead of creating it.",
+        )
+        parser.add_argument(
+            "--dry-run",
+            action="store_true",
+            help="Preview what would be imported without writing to the database.",
+        )
+
+    def handle(self, *args, **options):
+        input_path = Path(options["path"]).expanduser().resolve()
+        auto_create = options["auto_create"]
+        dry_run = options["dry_run"]
+
+        if dry_run:
+            self.stdout.write(self.style.WARNING("DRY RUN — no changes will be written.\n"))
+
+        # ── Collect files to process ─────────────────────────────────────────
+        if input_path.is_dir():
+            files = sorted(input_path.glob("*.txt"))
+            if not files:
+                raise CommandError(f"No .txt files found in: {input_path}")
+            self.stdout.write(f"Found {len(files)} .txt file(s) in {input_path}\n")
+        elif input_path.is_file():
+            if input_path.suffix.lower() != ".txt":
+                raise CommandError(f"Expected a .txt file, got: {input_path.name}")
+            files = [input_path]
+        else:
+            raise CommandError(f"Path does not exist: {input_path}")
+
+        # ── Counters ─────────────────────────────────────────────────────────
+        total_created = 0
+        total_skipped_dup = 0
+        total_skipped_no_type = 0
+        total_errors = 0
+
+        for file_path in files:
+            created, skipped_dup, skipped_no_type, errors = self._process_file(
+                file_path, auto_create=auto_create, dry_run=dry_run
+            )
+            total_created += created
+            total_skipped_dup += skipped_dup
+            total_skipped_no_type += skipped_no_type
+            total_errors += errors
+
+        # ── Summary ──────────────────────────────────────────────────────────
+        self.stdout.write("\n" + "─" * 50)
+        self.stdout.write(
+            self.style.SUCCESS(f"  Created:              {total_created}")
+        )
+        self.stdout.write(f"  Skipped (duplicate):  {total_skipped_dup}")
+        if total_skipped_no_type:
+            self.stdout.write(
+                self.style.WARNING(f"  Skipped (no type):    {total_skipped_no_type}")
+            )
+        if total_errors:
+            self.stdout.write(
+                self.style.ERROR(f"  Errors:               {total_errors}")
+            )
+        if dry_run:
+            self.stdout.write(self.style.WARNING("\nDRY RUN complete — nothing was written."))
+
+    # ── Per-file processing ───────────────────────────────────────────────────
+
+    def _process_file(self, file_path, *, auto_create, dry_run):
+        """Process one catalog file. Returns (created, skipped_dup, skipped_no_type, errors)."""
+        stem = file_path.stem
+        filament_type, filament_sub_type = _stem_to_type_and_subtype(stem)
+
+        self.stdout.write(
+            f"\nProcessing: {file_path.name}  "
+            f"→  type={filament_type!r}  sub_type={filament_sub_type!r}"
+        )
+
+        # ── Parse file ───────────────────────────────────────────────────────
+        try:
+            colors = _parse_file(file_path)
+        except ValueError as exc:
+            self.stderr.write(self.style.ERROR(f"  ERROR reading file: {exc}"))
+            return 0, 0, 0, 1
+
+        if not colors:
+            self.stdout.write(self.style.WARNING("  No colors parsed — skipping file."))
+            return 0, 0, 0, 0
+
+        self.stdout.write(f"  Parsed {len(colors)} color(s).")
+
+        # ── Resolve FilamentType ─────────────────────────────────────────────
+        filament_type_obj = self._resolve_filament_type(
+            filament_type, filament_sub_type, auto_create=auto_create, dry_run=dry_run
+        )
+        if filament_type_obj is None and not auto_create:
+            self.stdout.write(
+                self.style.WARNING(
+                    f"  No FilamentType for type={filament_type!r} "
+                    f"sub_type={filament_sub_type!r} brand={BRAND!r} — "
+                    f"skipping all {len(colors)} color(s) in this file."
+                )
+            )
+            return 0, 0, len(colors), 0
+
+        # ── Import colors ────────────────────────────────────────────────────
+        created = skipped_dup = skipped_no_type = errors = 0
+
+        for color_name, hex_code in colors:
+            result = self._import_color(
+                color_name=color_name,
+                hex_code=hex_code,
+                filament_type=filament_type,
+                filament_sub_type=filament_sub_type,
+                filament_type_obj=filament_type_obj,
+                dry_run=dry_run,
+            )
+            if result == "created":
+                created += 1
+            elif result == "duplicate":
+                skipped_dup += 1
+            elif result == "no_type":
+                skipped_no_type += 1
+            elif result == "error":
+                errors += 1
+
+        self.stdout.write(
+            f"  → created={created}  duplicate={skipped_dup}  "
+            f"no_type={skipped_no_type}  errors={errors}"
+        )
+        return created, skipped_dup, skipped_no_type, errors
+
+    def _resolve_filament_type(self, filament_type, filament_sub_type, *, auto_create, dry_run):
+        """
+        Return the matching FilamentType instance.
+
+        If none exists:
+          - auto_create=True  → create it (or simulate in dry-run) and return it
+          - auto_create=False → return None
+        """
+        try:
+            obj = FilamentType.objects.get(
+                type=filament_type,
+                sub_type=filament_sub_type,
+                brand=BRAND,
+            )
+            return obj
+        except FilamentType.DoesNotExist:
+            pass
+
+        if not auto_create:
+            return None
+
+        if dry_run:
+            self.stdout.write(
+                self.style.NOTICE(
+                    f"  [dry-run] Would create FilamentType: "
+                    f"type={filament_type!r} sub_type={filament_sub_type!r} brand={BRAND!r}"
+                )
+            )
+            return None  # can't return a real object in dry-run
+
+        try:
+            with transaction.atomic():
+                obj, created = FilamentType.objects.get_or_create(
+                    type=filament_type,
+                    sub_type=filament_sub_type,
+                    brand=BRAND,
+                )
+            if created:
+                self.stdout.write(
+                    self.style.SUCCESS(
+                        f"  Created FilamentType: "
+                        f"type={filament_type!r} sub_type={filament_sub_type!r} brand={BRAND!r}"
+                    )
+                )
+            return obj
+        except Exception as exc:
+            self.stderr.write(
+                self.style.ERROR(
+                    f"  ERROR creating FilamentType "
+                    f"(type={filament_type!r} sub_type={filament_sub_type!r}): {exc}"
+                )
+            )
+            return None
+
+    def _import_color(
+        self,
+        *,
+        color_name,
+        hex_code,
+        filament_type,
+        filament_sub_type,
+        filament_type_obj,
+        dry_run,
+    ):
+        """
+        Import a single (color_name, hex_code) entry.
+
+        Returns one of: "created", "duplicate", "no_type", "error"
+        """
+        if filament_type_obj is None:
+            # dry-run path: FilamentType would have been created but isn't real yet
+            if dry_run:
+                self.stdout.write(
+                    f"  [dry-run] Would create: {color_name!r} #{hex_code}  "
+                    f"({filament_type} / {filament_sub_type})"
+                )
+                return "created"
+            return "no_type"
+
+        # ── Duplicate check ──────────────────────────────────────────────────
+        # All five fields must match to be considered a duplicate:
+        #   color_code (exact), color_name (case-insensitive), brand,
+        #   denormalised filament_type + filament_sub_type
+        duplicate = FilamentColor.objects.filter(
+            color_code=hex_code,
+            color_name__iexact=color_name,
+            brand=BRAND,
+            filament_type=filament_type,
+            filament_sub_type=filament_sub_type,
+        ).exists()
+
+        if duplicate:
+            logger.debug("  Duplicate — skipping: %s #%s", color_name, hex_code)
+            return "duplicate"
+
+        if dry_run:
+            self.stdout.write(
+                f"  [dry-run] Would create: {color_name!r} #{hex_code}  "
+                f"({filament_type} / {filament_sub_type})"
+            )
+            return "created"
+
+        # ── Write to database ────────────────────────────────────────────────
+        try:
+            with transaction.atomic():
+                FilamentColor.objects.create(
+                    color_code=hex_code,
+                    color_name=color_name,
+                    filament_type_fk=filament_type_obj,
+                    filament_type=filament_type,
+                    filament_sub_type=filament_sub_type,
+                    brand=BRAND,
+                )
+            self.stdout.write(
+                f"  + {color_name!r} #{hex_code}  ({filament_type} / {filament_sub_type})"
+            )
+            return "created"
+        except Exception as exc:
+            self.stderr.write(
+                self.style.ERROR(
+                    f"  ERROR saving {color_name!r} #{hex_code}: {exc}"
+                )
+            )
+            return "error"

bambu_run/static/bambu_run/js/filament_detail.js

@@ -0,0 +1,302 @@
+// Filament Detail Chart — Usage History
+// Depends on: chart.js, chartjs-plugin-annotation
+// Config injected by template: FILAMENT_USAGE_API_URL
+
+let usageChart = null;
+
+// Register annotation plugin once it's available
+if (typeof ChartAnnotation !== 'undefined') {
+    Chart.register(ChartAnnotation);
+}
+
+// ── Time-select population ──────────────────────────────────────────────────
+
+const startTimeSelect = document.getElementById('filamentStartTime');
+const endTimeSelect   = document.getElementById('filamentEndTime');
+if (startTimeSelect && endTimeSelect) {
+    for (let h = 0; h < 24; h++) {
+        for (let m = 0; m < 60; m += 30) {
+            const t = `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`;
+            startTimeSelect.add(new Option(t, t));
+            endTimeSelect.add(new Option(t, t));
+        }
+    }
+    // End-time gets one extra option so the last minute of the day is reachable
+    endTimeSelect.add(new Option('23:59', '23:59'));
+    startTimeSelect.value = '00:00';
+    endTimeSelect.value   = '23:59';
+}
+
+// ── Default date inputs (last 24 h) ────────────────────────────────────────
+
+(function setDefaultDates() {
+    const now       = new Date();
+    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+    const sd = document.getElementById('filamentStartDate');
+    const ed = document.getElementById('filamentEndDate');
+    if (sd) sd.value = yesterday.toISOString().split('T')[0];
+    if (ed) ed.value = now.toISOString().split('T')[0];
+}());
+
+// ── Full-day checkbox ───────────────────────────────────────────────────────
+
+const fullDayCheckbox = document.getElementById('filamentFullDayCheckbox');
+if (fullDayCheckbox) {
+    fullDayCheckbox.addEventListener('change', function () {
+        const isFullDay = this.checked;
+        if (startTimeSelect) startTimeSelect.disabled = isFullDay;
+        if (endTimeSelect)   endTimeSelect.disabled   = isFullDay;
+    });
+}
+
+// ── Helpers ─────────────────────────────────────────────────────────────────
+
+/**
+ * Build date-separator annotations from "YYYY-MM-DD HH:MM" timestamp strings.
+ * Places a vertical dotted line at each day boundary, label at the bottom.
+ */
+function buildFilamentDateSeparators(timestamps) {
+    const annotations = {};
+    if (!timestamps || timestamps.length < 2) return annotations;
+    let count = 0;
+    for (let i = 1; i < timestamps.length; i++) {
+        const prevDate = timestamps[i - 1].split(' ')[0];
+        const currDate = timestamps[i].split(' ')[0];
+        if (currDate !== prevDate) {
+            const d     = new Date(currDate + 'T00:00:00');
+            const label = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+            annotations['dateSep_' + count] = {
+                type:       'line',
+                scaleID:    'x',
+                value:      i,
+                borderColor: 'rgba(128, 128, 128, 0.45)',
+                borderWidth: 1,
+                borderDash:  [4, 4],
+                drawTime:   'beforeDatasetsDraw',
+                label: {
+                    display:         true,
+                    content:         label,
+                    position:        'end',
+                    backgroundColor: 'rgba(100, 100, 100, 0.65)',
+                    color:           '#fff',
+                    font:            { size: 9 },
+                    padding:         { x: 4, y: 2 }
+                }
+            };
+            count++;
+        }
+    }
+    return annotations;
+}
+
+/**
+ * Build x-axis tick options that adapt to the date span.
+ *
+ * autoSkip: true — Chart.js selects evenly-spaced tick positions.
+ * maxTicksLimit  — caps how many ticks are drawn.
+ * callback       — formats the label at each chosen tick position.
+ *
+ * ≤1 day  : up to 12 ticks, show "HH:MM"
+ * 2–7 days: up to dayCount×4 ticks (≤28), show "Feb 22 06:00"
+ * >7 days : up to min(dayCount, 20) ticks, show "Feb 22"
+ */
+function filamentXAxisTicks(isDarkMode, timestamps) {
+    const tickColor = isDarkMode ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.8)';
+
+    const dayCount = (timestamps && timestamps.length > 0)
+        ? new Set(timestamps.map(t => t.split(' ')[0])).size
+        : 1;
+
+    let maxTicksLimit, formatCb;
+
+    if (dayCount <= 1) {
+        maxTicksLimit = 12;
+        formatCb = function (val) {
+            const label = this.getLabelForValue(val);
+            return label ? label.slice(11, 16) : ''; // "HH:MM"
+        };
+    } else if (dayCount <= 7) {
+        maxTicksLimit = Math.min(dayCount * 4, 28);
+        formatCb = function (val) {
+            const label = this.getLabelForValue(val);
+            if (!label) return '';
+            const datePart = label.split(' ')[0];
+            const timePart = label.length >= 16 ? label.slice(11, 16) : '';
+            const d = new Date(datePart + 'T00:00:00');
+            return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) + ' ' + timePart;
+        };
+    } else {
+        maxTicksLimit = Math.min(dayCount, 20);
+        formatCb = function (val) {
+            const label = this.getLabelForValue(val);
+            if (!label) return '';
+            const datePart = label.split(' ')[0];
+            const d = new Date(datePart + 'T00:00:00');
+            return d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+        };
+    }
+
+    return {
+        color:         tickColor,
+        autoSkip:      true,
+        maxTicksLimit: maxTicksLimit,
+        maxRotation:   45,
+        minRotation:   0,
+        callback:      formatCb
+    };
+}
+
+// ── Chart fetch / render ────────────────────────────────────────────────────
+
+/**
+ * Fetch and render the usage chart.
+ *
+ * @param {boolean} sendDates  When false (initial load / reset), no date params
+ *                             are sent so the backend can apply its default
+ *                             "last 24h or fallback to last available" logic.
+ *                             When true (explicit Refresh), the current input
+ *                             values are sent as-is.
+ */
+async function fetchFilamentUsageData(sendDates = true) {
+    const startDate = document.getElementById('filamentStartDate').value;
+    const endDate   = document.getElementById('filamentEndDate').value;
+    const isFullDay = fullDayCheckbox ? fullDayCheckbox.checked : true;
+    const startTime = isFullDay ? '00:00' : (startTimeSelect ? startTimeSelect.value : '00:00');
+    const endTime   = isFullDay ? '23:59' : (endTimeSelect   ? endTimeSelect.value   : '23:59');
+
+    const params = new URLSearchParams();
+    if (sendDates) {
+        if (startDate) params.append('start_date', startDate);
+        if (endDate)   params.append('end_date',   endDate);
+        if (startTime) params.append('start_time', startTime);
+        if (endTime)   params.append('end_time',   endTime);
+    }
+
+    try {
+        const response = await fetch(FILAMENT_USAGE_API_URL + '?' + params.toString());
+        const data     = await response.json();
+
+        // If the backend used the fallback window, sync the date inputs so the
+        // user can see and extend the range from that starting point.
+        if (data.fallback_used && data.timestamps && data.timestamps.length > 0) {
+            const firstDate = data.timestamps[0].split(' ')[0];
+            const lastDate  = data.timestamps[data.timestamps.length - 1].split(' ')[0];
+            const sd = document.getElementById('filamentStartDate');
+            const ed = document.getElementById('filamentEndDate');
+            if (sd) sd.value = firstDate;
+            if (ed) ed.value = lastDate;
+        }
+
+        // Update date-range label
+        const dateRangeSpan = document.getElementById('filamentDateRange');
+        if (dateRangeSpan) {
+            if (data.fallback_used) {
+                dateRangeSpan.textContent = '(Last available data — 24h window)';
+            } else if (startDate && endDate && sendDates) {
+                dateRangeSpan.textContent = `(${startDate} to ${endDate})`;
+            } else {
+                dateRangeSpan.textContent = '(Last 24 Hours)';
+            }
+        }
+
+        const isDarkMode  = document.documentElement.getAttribute('data-coreui-theme') === 'dark';
+        const tickColor   = isDarkMode ? 'rgba(255,255,255,0.8)' : 'rgba(0,0,0,0.8)';
+        const gridColor   = isDarkMode ? 'rgba(255,255,255,0.1)' : 'rgba(0,0,0,0.1)';
+        const sepAnnotations = buildFilamentDateSeparators(data.timestamps);
+        const xTicks      = filamentXAxisTicks(isDarkMode, data.timestamps);
+
+        if (usageChart) {
+            usageChart.data.labels                                  = data.timestamps;
+            usageChart.data.datasets[0].data                       = data.remaining;
+            usageChart.options.plugins.annotation.annotations      = sepAnnotations;
+            usageChart.options.scales.x.ticks                      = xTicks;
+            usageChart.update();
+        } else {
+            const ctx = document.getElementById('usageChart').getContext('2d');
+            usageChart = new Chart(ctx, {
+                type: 'line',
+                data: {
+                    labels: data.timestamps,
+                    datasets: [{
+                        label:           'Remaining %',
+                        data:            data.remaining,
+                        borderColor:     'rgb(75, 192, 192)',
+                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
+                        tension:         0.3,
+                        fill:            true,
+                        pointRadius:     0,
+                        pointHoverRadius: 3,
+                        borderWidth:     2
+                    }]
+                },
+                options: {
+                    responsive:          true,
+                    maintainAspectRatio: false,
+                    interaction:         { mode: 'index', intersect: false },
+                    plugins: {
+                        annotation: { annotations: sepAnnotations },
+                        legend: {
+                            position: 'top',
+                            labels:   { color: tickColor }
+                        },
+                        tooltip: {
+                            callbacks: {
+                                label: function (ctx) {
+                                    return 'Remaining: ' + ctx.parsed.y + '%';
+                                }
+                            }
+                        }
+                    },
+                    scales: {
+                        x: {
+                            ticks: xTicks,
+                            grid:  { color: gridColor }
+                        },
+                        y: {
+                            beginAtZero: true,
+                            max: 100,
+                            ticks: {
+                                color:    tickColor,
+                                callback: function (v) { return v + '%'; }
+                            },
+                            grid: { color: gridColor }
+                        }
+                    }
+                }
+            });
+        }
+    } catch (error) {
+        console.error('Error fetching filament usage data:', error);
+    }
+}
+
+// ── Event listeners ─────────────────────────────────────────────────────────
+
+const refreshBtn = document.getElementById('refreshFilamentChart');
+const resetBtn   = document.getElementById('resetFilamentChart');
+
+if (refreshBtn) {
+    // Refresh: honour whatever the user has typed in the date inputs
+    refreshBtn.addEventListener('click', function () { fetchFilamentUsageData(true); });
+}
+
+if (resetBtn) {
+    resetBtn.addEventListener('click', function () {
+        // Reset inputs to "last 24 hours" defaults, then let the backend
+        // decide (fallback if no recent data).
+        const now       = new Date();
+        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
+        const sd = document.getElementById('filamentStartDate');
+        const ed = document.getElementById('filamentEndDate');
+        if (sd) sd.value = yesterday.toISOString().split('T')[0];
+        if (ed) ed.value = now.toISOString().split('T')[0];
+        if (fullDayCheckbox) fullDayCheckbox.checked = true;
+        if (startTimeSelect) startTimeSelect.disabled = true;
+        if (endTimeSelect)   endTimeSelect.disabled   = true;
+        fetchFilamentUsageData(false);
+    });
+}
+
+// ── Initial load — no dates so backend fallback can fire ───────────────────
+
+fetchFilamentUsageData(false);

bambu_run/static/bambu_run/js/printer_charts.js

@@ -55,7 +55,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 },
                 {
@@ -67,7 +67,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 }
             ]
@@ -90,7 +90,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 },
                 {
@@ -102,7 +102,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 }
             ]
@@ -125,7 +125,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     fill: true
                 }
             ]
@@ -148,7 +148,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 },
                 {
@@ -159,7 +159,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 }
             ]
@@ -182,7 +182,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 }
             ]
@@ -246,7 +246,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     yAxisID: 'y',
                     spanGaps: true
                 },
@@ -258,7 +258,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     yAxisID: 'y1',
                     spanGaps: true
                 }
@@ -342,7 +342,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     fill: true
                 },
                 {
@@ -354,7 +354,7 @@ function initPrinterCharts(printerData, apiUrl) {
                     tension: 0.3,
                     borderWidth: 2,
                     pointRadius: 0,
-                    pointHoverRadius: 5,
+                    pointHoverRadius: 3,
                     spanGaps: true
                 }
             ]
@@ -452,6 +452,11 @@ function initPrinterCharts(printerData, apiUrl) {
         }
     });
 
+    // Add date separator markers when data spans multiple days
+    if (printerData.dates && printerData.dates.length > 0) {
+        applyDateSeparatorsToAllPrinterCharts(printerData.timestamps, printerData.dates);
+    }
+
     // Set up theme observer for dynamic theme switching
     setupThemeObserver();
 }
@@ -623,7 +628,7 @@ function createFilamentDatasets(filamentTimeline, timestamps) {
             tension: 0.3,
             borderWidth: 2,
             pointRadius: 0,
-            pointHoverRadius: 5,
+            pointHoverRadius: 3,
             spanGaps: false  // Don't connect across null values (filament changes)
         });
     });
@@ -731,3 +736,79 @@ function setupThemeObserver() {
         attributeFilter: ['data-coreui-theme']
     });
 }
+
+/**
+ * Build date-separator annotations for multi-day charts.
+ * Detects where consecutive dates differ and returns a vertical dotted line
+ * annotation at each boundary index, labelled with the new date.
+ *
+ * @param {string[]} timestamps - HH:MM display labels (one per data point)
+ * @param {string[]} dates      - YYYY-MM-DD dates (same length as timestamps)
+ * @returns {Object} chartjs-plugin-annotation annotations keyed as "dateSep_N"
+ */
+function buildDateSeparatorAnnotations(timestamps, dates) {
+    const annotations = {};
+    if (!dates || dates.length < 2) return annotations;
+
+    let count = 0;
+    for (let i = 1; i < dates.length; i++) {
+        if (dates[i] !== dates[i - 1]) {
+            // Format date as "Feb 25" for a compact label
+            const d = new Date(dates[i] + 'T00:00:00');
+            const label = d.toLocaleDateString('en-US', { month: 'short', day: 'numeric' });
+
+            annotations['dateSep_' + count] = {
+                type: 'line',
+                scaleID: 'x',
+                value: i,
+                borderColor: 'rgba(128, 128, 128, 0.45)',
+                borderWidth: 1,
+                borderDash: [4, 4],
+                drawTime: 'beforeDatasetsDraw',
+                label: {
+                    display: true,
+                    content: label,
+                    position: 'end',
+                    backgroundColor: 'rgba(100, 100, 100, 0.65)',
+                    color: '#fff',
+                    font: { size: 9 },
+                    padding: { x: 4, y: 2 }
+                }
+            };
+            count++;
+        }
+    }
+    return annotations;
+}
+
+/**
+ * Apply date-separator annotations to all printer charts.
+ * Preserves any existing "marker_*" (project marker) annotations.
+ *
+ * @param {string[]} timestamps
+ * @param {string[]} dates
+ */
+function applyDateSeparatorsToAllPrinterCharts(timestamps, dates) {
+    const sepAnnotations = buildDateSeparatorAnnotations(timestamps, dates);
+
+    const charts = [
+        nozzleTempChart, bedTempChart, printProgressChart, fanSpeedsChart,
+        wifiSignalChart, amsConditionsChart, layerProgressChart, filamentTimelineChart
+    ];
+
+    charts.forEach(chart => {
+        if (!chart) return;
+        if (!chart.options.plugins.annotation) {
+            chart.options.plugins.annotation = { annotations: {} };
+        }
+        const existing = chart.options.plugins.annotation.annotations;
+
+        // Remove any old dateSep_* entries then re-add updated ones
+        Object.keys(existing).forEach(key => {
+            if (key.startsWith('dateSep_')) delete existing[key];
+        });
+        Object.assign(existing, sepAnnotations);
+
+        chart.update('none');
+    });
+}

bambu_run/static/bambu_run/js/printer_charts_control.js

@@ -77,11 +77,12 @@ function populateTimeDropdowns(startSelect, endSelect) {
     }
 
     times.forEach(time => {
-        const option1 = new Option(time, time);
-        const option2 = new Option(time, time);
-        startSelect.add(option1);
-        endSelect.add(option2);
+        startSelect.add(new Option(time, time));
+        endSelect.add(new Option(time, time));
     });
+
+    // End-time gets one extra option so the last minute of the day is reachable
+    endSelect.add(new Option('23:59', '23:59'));
 }
 
 /**
@@ -235,6 +236,11 @@ function updateAllPrinterCharts(data) {
         filamentTimelineChart.update();
     }
 
+    // Apply date separator markers (multi-day views)
+    if (data.dates && data.dates.length > 0) {
+        applyDateSeparatorsToAllPrinterCharts(data.timestamps, data.dates);
+    }
+
     // Add project markers to all charts
     if (data.project_markers) {
         addProjectMarkersToCharts(data.project_markers, data.timestamps);
@@ -275,8 +281,11 @@ function addProjectMarkersToCharts(markers, timestamps) {
             chart.options.plugins.annotation = { annotations: {} };
         }
 
-        // Clear existing project markers
-        chart.options.plugins.annotation.annotations = {};
+        // Clear existing project markers but preserve date-separator annotations
+        const allAnnotations = chart.options.plugins.annotation.annotations;
+        Object.keys(allAnnotations).forEach(key => {
+            if (!key.startsWith('dateSep_')) delete allAnnotations[key];
+        });
 
         // Track active tooltip
         let activeMarkerTooltip = null;

bambu_run/templates/bambu_run/filament_detail.html

@@ -84,7 +84,7 @@
         <div class="card-header">
             <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
                 <div>
-                    <strong>Chart Filters</strong>
+                    <strong>Filament Usage History</strong>
                     <span class="text-muted" id="filamentDateRange">(Last 24 Hours)</span>
                 </div>
                 <div class="d-flex align-items-center gap-2 flex-wrap">
@@ -111,11 +111,11 @@
                     </div>
                     <!-- Buttons -->
                     <button type="button" class="btn btn-primary btn-sm" id="refreshFilamentChart">
-                        <svg class="icon"><use xlink:href="https://cdn.jsdelivr.net/npm/@coreui/icons@3.0.1/sprites/free.svg#cil-reload"></use></svg>
+                        <svg class="icon"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-reload"></use></svg>
                         Refresh
                     </button>
                     <button type="button" class="btn btn-secondary btn-sm" id="resetFilamentChart">
-                        <svg class="icon"><use xlink:href="https://cdn.jsdelivr.net/npm/@coreui/icons@3.0.1/sprites/free.svg#cil-action-undo"></use></svg>
+                        <svg class="icon"><use href="{% static 'bambu_run/vendors/coreui-icons-free.svg' %}#cil-action-undo"></use></svg>
                         Reset
                     </button>
                 </div>
@@ -203,126 +203,39 @@
 
 {% block extra_js %}
 <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0"></script>
+<script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-annotation@3.0.1"></script>
 {% if not is_basic_user %}
+{# Inject Django-specific values that the static JS file cannot know #}
 <script>
-    const filamentId = {{ filament.pk }};
-    let usageChart = null;
-
-    // Populate time selects
-    const startTimeSelect = document.getElementById('filamentStartTime');
-    const endTimeSelect = document.getElementById('filamentEndTime');
-    for (let h = 0; h < 24; h++) {
-        for (let m = 0; m < 60; m += 30) {
-            const timeStr = `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
-            startTimeSelect.add(new Option(timeStr, timeStr));
-            endTimeSelect.add(new Option(timeStr, timeStr));
-        }
-    }
-    startTimeSelect.value = '00:00';
-    endTimeSelect.value = '23:30';
-
-    // Initialize date inputs to last 24 hours
-    const now = new Date();
-    const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
-    document.getElementById('filamentStartDate').value = yesterday.toISOString().split('T')[0];
-    document.getElementById('filamentEndDate').value = now.toISOString().split('T')[0];
-
-    // Full day checkbox handler
-    document.getElementById('filamentFullDayCheckbox').addEventListener('change', function() {
-        const isFullDay = this.checked;
-        startTimeSelect.disabled = isFullDay;
-        endTimeSelect.disabled = isFullDay;
-    });
-
-    // Fetch and render chart
-    async function fetchFilamentUsageData() {
-        const startDate = document.getElementById('filamentStartDate').value;
-        const endDate = document.getElementById('filamentEndDate').value;
-        const isFullDay = document.getElementById('filamentFullDayCheckbox').checked;
-        const startTime = isFullDay ? '00:00' : startTimeSelect.value;
-        const endTime = isFullDay ? '23:59' : endTimeSelect.value;
-
-        const params = new URLSearchParams();
-        if (startDate) params.append('start_date', startDate);
-        if (endDate) params.append('end_date', endDate);
-        if (startTime) params.append('start_time', startTime);
-        if (endTime) params.append('end_time', endTime);
-
-        try {
-            const response = await fetch(`{% url 'bambu_run:filament_usage_api' filament.pk %}?${params.toString()}`);
-            const data = await response.json();
-
-            // Update date range display
-            const dateRangeSpan = document.getElementById('filamentDateRange');
-            if (startDate && endDate) {
-                dateRangeSpan.textContent = `(${startDate} to ${endDate})`;
-            } else {
-                dateRangeSpan.textContent = '(Last 24 Hours)';
-            }
-
-            // Update chart
-            if (usageChart) {
-                usageChart.data.labels = data.timestamps;
-                usageChart.data.datasets[0].data = data.remaining;
-                usageChart.update();
-            } else {
-                const ctx = document.getElementById('usageChart').getContext('2d');
-                usageChart = new Chart(ctx, {
-                    type: 'line',
-                    data: {
-                        labels: data.timestamps,
-                        datasets: [{
-                            label: 'Remaining %',
-                            data: data.remaining,
-                            borderColor: 'rgb(75, 192, 192)',
-                            backgroundColor: 'rgba(75, 192, 192, 0.1)',
-                            tension: 0.3,
-                            fill: true
-                        }]
-                    },
-                    options: {
-                        responsive: true,
-                        maintainAspectRatio: false,
-                        scales: {
-                            y: {
-                                beginAtZero: true,
-                                max: 100
-                            }
-                        }
-                    }
-                });
-            }
-        } catch (error) {
-            console.error('Error fetching filament usage data:', error);
-        }
-    }
-
-    // Event listeners
-    document.getElementById('refreshFilamentChart').addEventListener('click', fetchFilamentUsageData);
-    document.getElementById('resetFilamentChart').addEventListener('click', function() {
-        const now = new Date();
-        const yesterday = new Date(now.getTime() - 24 * 60 * 60 * 1000);
-        document.getElementById('filamentStartDate').value = yesterday.toISOString().split('T')[0];
-        document.getElementById('filamentEndDate').value = now.toISOString().split('T')[0];
-        document.getElementById('filamentFullDayCheckbox').checked = true;
-        startTimeSelect.disabled = true;
-        endTimeSelect.disabled = true;
-        fetchFilamentUsageData();
-    });
-
-    // Initial load
-    fetchFilamentUsageData();
+    const FILAMENT_USAGE_API_URL = "{% url 'bambu_run:filament_usage_api' filament.pk %}";
 </script>
+<script src="{% static 'bambu_run/js/filament_detail.js' %}"></script>
 {% else %}
 <script>
-    // Basic user: render static chart from server-provided data if available
-    document.addEventListener('DOMContentLoaded', function() {
+    document.addEventListener('DOMContentLoaded', function () {
         const ctx = document.getElementById('usageChart');
         if (ctx) {
             new Chart(ctx.getContext('2d'), {
                 type: 'line',
-                data: { labels: [], datasets: [{ label: 'Remaining %', data: [], borderColor: 'rgb(75, 192, 192)', backgroundColor: 'rgba(75, 192, 192, 0.1)', tension: 0.3, fill: true }] },
-                options: { responsive: true, maintainAspectRatio: false, scales: { y: { beginAtZero: true, max: 100 } } }
+                data: {
+                    labels: [],
+                    datasets: [{
+                        label: 'Remaining %',
+                        data: [],
+                        borderColor: 'rgb(75, 192, 192)',
+                        backgroundColor: 'rgba(75, 192, 192, 0.1)',
+                        tension: 0.3,
+                        fill: true,
+                        pointRadius: 0,
+                        pointHoverRadius: 3,
+                        borderWidth: 2
+                    }]
+                },
+                options: {
+                    responsive: true,
+                    maintainAspectRatio: false,
+                    scales: { y: { beginAtZero: true, max: 100 } }
+                }
             });
         }
     });

bambu_run/utils.py

@@ -2,6 +2,10 @@
 Utility functions for filament color matching
 """
 
+# BambuLab AMS reports colors as 8-char hex with an alpha channel suffix (e.g. '489FDFFF').
+# The last two chars are always 'FF' (fully opaque). Only the first 6 chars are the RGB value.
+MQTT_COLOR_HEX_LENGTH = 6
+
 
 def strip_color_padding(mqtt_color):
     """
@@ -12,8 +16,8 @@ def strip_color_padding(mqtt_color):
     if not mqtt_color:
         return None
     if len(mqtt_color) == 8:
-        return mqtt_color[:6].upper()
-    return mqtt_color[:6].upper() if len(mqtt_color) >= 6 else mqtt_color.upper()
+        return mqtt_color[:MQTT_COLOR_HEX_LENGTH].upper()
+    return mqtt_color[:MQTT_COLOR_HEX_LENGTH].upper() if len(mqtt_color) >= MQTT_COLOR_HEX_LENGTH else mqtt_color.upper()
 
 
 def match_filament_color(filament_type, filament_sub_type, color_code, brand='Bambu Lab'):

bambu_run/views.py

@@ -54,6 +54,9 @@ class PrinterDashboardView(LoginRequiredMixin, TemplateView):
             "timestamps": [
                 m.timestamp.astimezone(tz).strftime("%H:%M") for m in metrics
             ],
+            "dates": [
+                m.timestamp.astimezone(tz).strftime("%Y-%m-%d") for m in metrics
+            ],
             "nozzle_temp": [
                 float(m.nozzle_temp) if m.nozzle_temp else None for m in metrics
             ],
@@ -266,6 +269,7 @@ class PrinterDataAPIView(LoginRequiredMixin, View):
             data = {
                 "timestamps": [m.timestamp.astimezone(tz).strftime('%H:%M') for m in metrics],
                 "timestamps_iso": [m.timestamp.astimezone(tz).isoformat() for m in metrics],
+                "dates": [m.timestamp.astimezone(tz).strftime('%Y-%m-%d') for m in metrics],
                 "nozzle_temp": [float(m.nozzle_temp) if m.nozzle_temp else None for m in metrics],
                 "nozzle_target_temp": [float(m.nozzle_target_temp) if m.nozzle_target_temp else None for m in metrics],
                 "bed_temp": [float(m.bed_temp) if m.bed_temp else None for m in metrics],
@@ -410,15 +414,32 @@ class FilamentUsageDataAPIView(LoginRequiredMixin, View):
                 end_dt = end_dt_naive.replace(tzinfo=tz)
                 query = query.filter(printer_metric__timestamp__lte=end_dt)
 
+            fallback_used = False
             if not start_date and not end_date:
                 time_24h_ago = timezone.now() - timedelta(hours=24)
-                query = query.filter(printer_metric__timestamp__gte=time_24h_ago)
-
-            snapshots = query.order_by('printer_metric__timestamp')
+                default_query = query.filter(printer_metric__timestamp__gte=time_24h_ago)
+                if default_query.exists():
+                    snapshots = default_query.order_by('printer_metric__timestamp')
+                else:
+                    # Fallback: show 24h window ending at the most recent available snapshot
+                    last_snapshot = query.order_by('-printer_metric__timestamp').first()
+                    if last_snapshot:
+                        last_ts = last_snapshot.printer_metric.timestamp
+                        fallback_start = last_ts - timedelta(hours=24)
+                        snapshots = query.filter(
+                            printer_metric__timestamp__gte=fallback_start,
+                            printer_metric__timestamp__lte=last_ts
+                        ).order_by('printer_metric__timestamp')
+                        fallback_used = True
+                    else:
+                        snapshots = query.none()
+            else:
+                snapshots = query.order_by('printer_metric__timestamp')
 
             data = {
                 "timestamps": [s.printer_metric.timestamp.astimezone(tz).strftime('%Y-%m-%d %H:%M') for s in snapshots],
-                "remaining": [s.remain_percent for s in snapshots]
+                "remaining": [s.remain_percent for s in snapshots],
+                "fallback_used": fallback_used,
             }
 
             return JsonResponse(data)