Chapter 8. Print Designer

8.1 What the designer is

wxprint-designer is the visual template editor, supporting visual authoring and debugging of both template kinds:

• Overlay templates: create/open/save, drag elements into place, bind variables, preview live with sample data, and fire a test print;
• HTML templates: open .html/.htm files or a template with template.json (kind=html) directly and edit source and data in the dual editors (Section 8.7).

The embedded service core makes preview and test printing zero-configuration. The main window = a top toolbar + a left element list + the center canvas + a right property panel + bottom “Template code / Sample data” tabs (with an HTML template, the center column switches wholesale to the dual editors — see Section 8.7).

8.2 Toolbar

8.3 Canvas and elements

• The canvas reflects the template page size in millimeters; with a background imported, the scan sits underneath and elements on top — drag positions are physical mm coordinates directly.
• Element list (left): all elements, click to select (two-way synced with canvas selection); the context menu supports delete, rename control, and rename variable.
• Adding an element auto-fills the sample-data keys; the canvas shows the control name / sample value immediately.
• Alignment aids: grid snapping and alignment guides keep groups tidy.

8.4 Property panel

With an element selected, the right panel shows type-specific groups:

• Name & data: control name, variable name, sample value, data value (the printed content, applied live — text takes a string, tables take a JSON array).
• Position & size (mm): X / Y / width / height, applied with the “Apply” button.
• Text: font (family), font size (pt), style (bold/italic), alignment (left/center/right), overflow (shrink/clip/wrap).
• Barcode: symbology, text position; QR code: error correction (L/M/Q/H), quiet zone, size, border width and color, foreground/background colors.
• Line / rect: line size and style (solid/dashed/double), color, corner rounding, stroke width, fill color.
• Image: image URL (loaded on apply), fit mode (contain/stretch).
• Table: column management (header/variable/width/align/delete/ add column), row height, data limit (fixed rows/unlimited), table styling (zebra stripes, odd/even row colors).
• Chart: type (13 kinds), categories, series name, legend, title, theme.

“Generate sample data” creates 3 sample rows matching the column structure — handy for layout tuning.

8.5 Background calibration and paper

The “Calibrate” dialog (size settings):

• Custom paper: enter width, height, and the unit (mm; px is converted at 96dpi).
• Background calibration: enter the scan’s physical size to establish the pixel→mm mapping; use the reference-line or multi-point modes for skewed scans (see Section 7.9). After calibration the canvas coordinates are true millimeters, and the status bar reads “{w}×{h}mm calibrated”.

8.6 Template code and sample data (bottom tabs)

• Template code: view and edit the template JSON directly — programmatic template generation, version-control diffs, and copying elsewhere for registration all start here; “Apply” reloads the canvas instantly (parse failures show an error).
• Sample data: paste JSON and the canvas and preview render it; adding controls auto-fills keys, and missing variables surface as warnings in preview/jobs.

8.7 HTML template editing

After opening a .html/.htm file (automatically wrapped as a kind=html template with entry = the source and A4 paper by default) or a kind=html template.json, the center column switches to the dual editors:

• Left: HTML source editor — a native code editor (syntax highlighting / line numbers / folding) for editing the Twig/HTML source directly; previews re-render automatically after edits.
• Right: data editor — two forms: direct JSON editing (with a “Format” button that re-indents at 2 spaces) or URL loading (enter a data URL, fetched in the background, with the result dropped into the JSON editor for further tweaking). The URL and form are persisted in the template’s meta.data_url / meta.data_mode.
• Preview: the exact same pipeline as the server’s jobs (Twig render → HTML layout → PDF), one copy per record, copies=1; relative assets (images/CSS) resolve against the directory of the opened file.
• Save: writes template.json (with the entry source embedded) — register it with the server’s template library to reuse by id.
• In HTML-template mode the toolbar trims itself automatically (element buttons hidden) and the bottom bar collapses to a plain status bar.

8.8 Preview and test print

• Preview: a true render through wxprint-core (sample data) → PDF → rasterized display, WYSIWYG; multi-page documents page through (“page {cur} / {total}”).
• Test print: the embedded service submits a real print job (the status bar shows the job id and page count) — from design to paper without leaving the designer.

8.9 Dialogs, language, and theme

• The update/about/message dialogs are embedded in the main window (mask mode): always on top, clicking the blank area does nothing, and they never sink behind the main window.
• The title bar switches the interface language (21 options, effective immediately) and the dark/light theme; RTL languages such as Arabic mirror the interface layout automatically (the canvas and ruler stay LTR — the printed document itself is LTR).