OSIT-AE-App-Svelte/documentation/PROJECT__AE_Events_Zebra_Hardware_Test_Day.md

PROJECT: Zebra ZC10L Hardware Test Day

Created: 2026-03-12 Planned date: ~week of 2026-03-16 (printer rented for one day) Hardware: Zebra ZC10L, 3.5" × 5.5" PVC card stock Goal: Validate real-world badge printing before Axonius (NYC, mid-April 2026) Owner: Scott Idem / One Sky IT

---

Before the Printer Arrives — Pre-Test Checklist

These must be done before the printer is on-site so you're not burning rental time on setup.

• Remove debug outlines from print/+page.svelte print CSS. The lime/blue/red/orange/purple/cyan debug outlines are still in the file. Remove the entire TEMPORARY DEBUG OUTLINES block. Commit before the test day.

• Zebra ZC10L Linux driver — install CUPS driver ahead of time.

  • Check Zebra's site for the Linux CUPS driver for ZC10L.
  • Install, configure in CUPS (http://localhost:631), do a test page print with a spare card.
  • Confirm the card feeds without jam and ink/dye-sub layer applies cleanly.
  • Driver may need the printer set to the correct card stock size (3.5" × 5.5").

• Wire style_href — add <link rel="stylesheet" href={...}> to <svelte:head> in print/+page.svelte when $lq__event_badge_template_obj?.style_href is set. Without this, any client-specific external CSS won't load. See documentation/MODULE__AE_Events_Badge_Templates.md → "External CSS Approach".

• Confirm single-sided print (duplex=0) — duplex backend field doesn't exist yet. For PVC cards, the badge back must NOT print. Verify this works by checking that .badge_back is hidden in @media print when the layout is badge_3.5x5.5_pvc. The PVC CSS (badge_layout_zebra_zc10l_pvc.css) may already handle this — confirm. If not, add a print rule: [data-layout="badge_3.5x5.5_pvc"] .badge_back { display: none !important; }

• Test event + template in dev DB — create/confirm:

  • Event with mod_badges_json configured
  • PVC template: layout: badge_3.5x5.5_pvc, duplex: 0 (once backend supports it), header_path set to a real image URL, badge_type_list JSON populated
  • Test badge records (see "Test Data Set" below)

• Test data set — create badge records covering:

  • Short name: "Kim Lee"
  • Long name: "Bartholomew Vandenberghe-Christopoulos"
  • HTML in name: <b>Dr.</b> Patricia Adams
  • HTML in affiliations: University of Minnesota<br>Dept. of Surgery
  • Badge with no affiliations, no location
  • Badge with all 8 ticket codes set
  • Three different badge_type_codes (e.g. member, staff, guest) — to verify footer stripe color for each

• Browser setup on kiosk machine — confirm Chrome and Firefox both installed. Test print dialog settings once driver is working:

  • Chrome: Margins → None (required), paper size set to 3.5×5.5 if available
  • Firefox: should just work — @page { size: 3.5in 5.5in } is honored

---

Test Day Checklist

1. Basic Print Path

• Card feeds and prints without jam
• Badge fills the card edge-to-edge (no white border, no clipping)
• Content horizontally centered on the card
• Content vertically centered on the card
• No debug outlines visible (confirm cleanup commit applied)

Chrome:

• Print → Margins: None → correct output
• Print → Margins: Default → bad (expected — documents the known issue)
• Print → Margins: Minimum → correct output
• "More settings" → paper size: does selecting 3.5×5.5 matter, or does Zebra driver override?

Firefox:

• Print → just works out of the box

2. Single-Sided PVC

• Only the front face prints — back does NOT print
• No second card ejected or blank card printed for the back

3. Visual Quality

• Font sizes readable at 3.5×5.5 physical scale (name, title, affiliations, location)
• Auto-scaling text (v2) — does it look natural, not crunched?
• Header image renders correctly (colors, resolution, no pixelation)
• Footer stripe color correct for each badge_type_code tested
• HTML in name/affiliations renders correctly (bold, line break, etc.)
• Badge with no affiliations — no awkward blank space

4. Edge Cases — Badge Content

• Long name auto-scales without overflow or clipping
• HTML markup in name field: <b>Dr.</b> renders bold on the physical card
• HTML line break in affiliations: two-line org renders cleanly
• Badge with no location — layout doesn't break
• Badge with all 8 ticket/option codes — back of badge (if applicable) lays out cleanly

5. Print Tracking

• print_count increments after printing via the Print Badge button
• print_first_datetime set on first print
• "Printed N×" amber chip appears in print page header after first print
• Reprint via Re-print shortcut (trusted + edit mode) does NOT increment count
• Second print via Print Badge button DOES increment count (to 2)

6. QR Code

• QR on printed card is scannable with a phone camera
• QR scans to the correct badge ID (test with /events/[id]/badges search by QR scan)
• QR on back (if show_qr_back=1) also scans correctly
• If show_qr_back=0 — no QR code visible on back

7. Font Size Controls

• Manual font size override (+ / − in controls panel) changes the badge render live
• Change is visible on the physical printed card
• Reset (↺) returns to auto-sizing
• Auto-sizing produces a reasonable default for all test names without manual adjustment

8. Edit Fields at Kiosk

• Badge info editable before printing: change full_name_override, verify change appears on card
• Save change → re-print → new value printed
• Cancel reverts to saved value
• Badge type dropdown changes footer stripe color on the rendered badge

---

Known Limitations on Test Day

These are not bugs — just gaps that won't be addressed during the test day:

• style_href external CSS: Must be wired before test day (see pre-checklist). If not done, client-specific CSS from the template won't load — fall back to default styles.
• duplex backend field: Not yet in the backend schema. Single-sided behavior depends on the PVC CSS hiding .badge_back in print. Verify manually.
• Per-template print margins (print_margin_cfg): UI doesn't exist yet. If the card needs a physical offset for the Zebra's feed, apply a manual CSS tweak to the PVC layout CSS file and revert after testing.
• Kiosk attendee editing (TASK 4.0): Edit panel is currently trusted_access only. Attendee self-edit at kiosk isn't finished — staff will need to do all edits on test day.
• @page { size } in Chrome: Chrome ignores the CSS page size for Save as PDF. For physical Zebra printing the driver controls paper size — this is fine.

---

Known Print Dialog Behavior (for reference)

Browser	Save to PDF	Physical Printer
Firefox	Paper size locked to CSS @page { size } ✅	Can select paper size in dialog
Chrome	Paper size = system default (letter/A4) ❌	Can select paper size under "More settings"

Chrome Margin Setting	Result
Default	❌ Inserts URL/date/page chrome, offsets badge centering
None	✅ Badge centered correctly
Minimum	✅ Badge centered correctly

---

Things to Note / Capture During Testing

Use this section to log observations on the day:

DATE: ___________

Driver version: ___________
Card stock type: ___________
CUPS printer name: ___________

Observations:
-
-
-

Font size adjustments needed:
  Name default: was __px, adjusted to __px
  Title default: was __px, adjusted to __px
  Affiliations: was __px, adjusted to __px
  Location: was __px, adjusted to __px

Physical offset needed (crop/margin): ___________

Bugs found:
-
-

---

Follow-Up After Test Day

• Update font size defaults in ae_comp__badge_print_controls.svelte based on observations
• Note any physical margin/offset needed into cfg_json: { print_margin: {...} } once that UI exists
• Document driver version and CUPS config that worked in this file
• Commit any fixes, re-run npx svelte-check, commit clean