Label template designer — drag-and-drop editor for Dymo/Zebra labels #204

New Issue

2026-06-06T18:52:38Z

jmiller commented

2026-06-06 18:52:38 +00:00

Summary

Build a visual drag-and-drop label template designer within MokoWaaS+ERP that lets users create and customize labels for Dymo, Zebra, and generic printers. Users can place text, barcodes, images, and product fields on a canvas matching the physical label dimensions.

Parent issue: #192

Features

Canvas Editor

WYSIWYG drag-and-drop interface matching physical label dimensions (mm)
Snap-to-grid for alignment
Zoom controls for precision placement
Live preview with sample product data
Undo/redo support

Placeable Elements

Element	Description
Text	Static text with font, size, bold/italic, alignment
Product field	Dynamic placeholder: `{sku}`, `{name}`, `{price}`, `{stock_qty}`, `{barcode}`, `{category}`, `{weight}`
Barcode	Code128, EAN13, EAN8, UPC, QR Code, DataMatrix — auto-generated from product barcode/SKU
Image	Logo, product image, or static graphic
Line/Rectangle	Borders, dividers, boxes
Date	`{date}`, `{date_short}` dynamic date stamp

Label Sizes (Presets + Custom)

Preset	Dimensions	Printer
Dymo 30252	89 x 28mm	Dymo LabelWriter
Dymo 30336	89 x 36mm	Dymo LabelWriter
Dymo 30256	89 x 59mm	Dymo LabelWriter
Zebra 2x1	50.8 x 25.4mm	Zebra ZPL
Zebra 4x6	101.6 x 152.4mm	Zebra ZPL (shipping)
Custom	User-defined	Any

Output Formats

PDF — for generic printers (batch print multiple labels per page)
Dymo XML — native Dymo LabelWriter SDK format
ZPL — Zebra Programming Language for direct Zebra printing
PNG/SVG — for preview and digital use

Template Types

Product label (SKU, name, barcode, price)
Price tag (name, price, sale price)
Warehouse/bin label (SKU, barcode, location, stock qty)
Shipping label (contact name, address, order ref, barcode)
Spec sheet cover (product name, image, key specs)
Custom (user-defined)

Data Storage

The template_data column in #__mokowaas_erp_label_templates stores the canvas layout as JSON:

{
  "canvas": {"width": 89, "height": 36, "unit": "mm"},
  "elements": [
    {"type": "text", "content": "{name}", "x": 5, "y": 3, "fontSize": 12, "bold": true},
    {"type": "barcode", "field": "barcode", "format": "code128", "x": 5, "y": 18, "width": 60, "height": 15},
    {"type": "text", "content": "${price}", "x": 70, "y": 5, "fontSize": 14, "bold": true, "align": "right"},
    {"type": "text", "content": "SKU: {sku}", "x": 5, "y": 12, "fontSize": 8}
  ]
}

Batch Printing

Select multiple products → print labels for all
Configurable quantity per product
Print queue with preview before sending

Implementation

JavaScript canvas editor (HTML5 Canvas or SVG-based)
Admin view in com_mokowaas → ERP → Labels → Template Designer
REST API for template CRUD (already registered)
Server-side PDF/ZPL generation via PdfHelper extension

## Summary Build a visual drag-and-drop label template designer within MokoWaaS+ERP that lets users create and customize labels for Dymo, Zebra, and generic printers. Users can place text, barcodes, images, and product fields on a canvas matching the physical label dimensions. **Parent issue:** #192 ## Features ### Canvas Editor - **WYSIWYG drag-and-drop** interface matching physical label dimensions (mm) - **Snap-to-grid** for alignment - **Zoom** controls for precision placement - **Live preview** with sample product data - **Undo/redo** support ### Placeable Elements | Element | Description | |---------|-------------| | **Text** | Static text with font, size, bold/italic, alignment | | **Product field** | Dynamic placeholder: `{sku}`, `{name}`, `{price}`, `{stock_qty}`, `{barcode}`, `{category}`, `{weight}` | | **Barcode** | Code128, EAN13, EAN8, UPC, QR Code, DataMatrix — auto-generated from product barcode/SKU | | **Image** | Logo, product image, or static graphic | | **Line/Rectangle** | Borders, dividers, boxes | | **Date** | `{date}`, `{date_short}` dynamic date stamp | ### Label Sizes (Presets + Custom) | Preset | Dimensions | Printer | |--------|-----------|---------| | Dymo 30252 | 89 x 28mm | Dymo LabelWriter | | Dymo 30336 | 89 x 36mm | Dymo LabelWriter | | Dymo 30256 | 89 x 59mm | Dymo LabelWriter | | Zebra 2x1 | 50.8 x 25.4mm | Zebra ZPL | | Zebra 4x6 | 101.6 x 152.4mm | Zebra ZPL (shipping) | | Custom | User-defined | Any | ### Output Formats - **PDF** — for generic printers (batch print multiple labels per page) - **Dymo XML** — native Dymo LabelWriter SDK format - **ZPL** — Zebra Programming Language for direct Zebra printing - **PNG/SVG** — for preview and digital use ### Template Types - Product label (SKU, name, barcode, price) - Price tag (name, price, sale price) - Warehouse/bin label (SKU, barcode, location, stock qty) - Shipping label (contact name, address, order ref, barcode) - Spec sheet cover (product name, image, key specs) - Custom (user-defined) ### Data Storage The `template_data` column in `#__mokowaas_erp_label_templates` stores the canvas layout as JSON: ```json { "canvas": {"width": 89, "height": 36, "unit": "mm"}, "elements": [ {"type": "text", "content": "{name}", "x": 5, "y": 3, "fontSize": 12, "bold": true}, {"type": "barcode", "field": "barcode", "format": "code128", "x": 5, "y": 18, "width": 60, "height": 15}, {"type": "text", "content": "${price}", "x": 70, "y": 5, "fontSize": 14, "bold": true, "align": "right"}, {"type": "text", "content": "SKU: {sku}", "x": 5, "y": 12, "fontSize": 8} ] } ``` ### Batch Printing - Select multiple products → print labels for all - Configurable quantity per product - Print queue with preview before sending ### Implementation - JavaScript canvas editor (HTML5 Canvas or SVG-based) - Admin view in `com_mokowaas` → ERP → Labels → Template Designer - REST API for template CRUD (already registered) - Server-side PDF/ZPL generation via PdfHelper extension

jmiller commented

2026-06-06 18:55:33 +00:00

Update: Additional label types — customer labels and warehouse bin labels

Customer Labels

Labels for contacts/customers with ERP role data:

Contact name, company, address
Customer/vendor code (CU2026-001)
Phone, email
Barcode of customer code
Use case: mailing labels, file folder labels, customer asset tags

Available placeholders: {contact_name}, {company}, {address}, {phone}, {email}, {customer_code}, {vendor_code}

Warehouse Bin Labels

Labels for warehouse locations/bins (not just products IN the warehouse):

Bin/location code (e.g., A-01-03)
Warehouse name
QR code linking to bin contents view
Aisle, rack, shelf, position fields
Use case: stick on shelving, bins, racks for inventory organization

This requires a new table for bin locations:

#__mokowaas_erp_warehouse_bins

id, warehouse_id, code (e.g. A-01-03), 
aisle, rack, shelf, position,
description, barcode, published, created

Products can then be assigned to bins via the stock movements or a direct bin assignment on the product record.

Updated Template Types

Type	Data Source	Key Fields
product	erp_products	sku, name, barcode, price
price	erp_products	name, price, sale_price
warehouse	erp_products	sku, name, stock_qty, location
shipping	erp_orders + contacts	contact_name, address, order_ref
barcode	erp_products	sku, barcode only
spec_sheet	erp_products	name, image, specs
customer	contacts + erp_roles	name, company, address, customer_code
bin	erp_warehouse_bins	bin_code, aisle, rack, shelf, warehouse_name, qrcode

## Update: Additional label types — customer labels and warehouse bin labels ### Customer Labels Labels for contacts/customers with ERP role data: - Contact name, company, address - Customer/vendor code (CU2026-001) - Phone, email - Barcode of customer code - Use case: mailing labels, file folder labels, customer asset tags Available placeholders: `{contact_name}`, `{company}`, `{address}`, `{phone}`, `{email}`, `{customer_code}`, `{vendor_code}` ### Warehouse Bin Labels Labels for warehouse locations/bins (not just products IN the warehouse): - Bin/location code (e.g., A-01-03) - Warehouse name - QR code linking to bin contents view - Aisle, rack, shelf, position fields - Use case: stick on shelving, bins, racks for inventory organization This requires a new table for bin locations: **`#__mokowaas_erp_warehouse_bins`** ``` id, warehouse_id, code (e.g. A-01-03), aisle, rack, shelf, position, description, barcode, published, created ``` Products can then be assigned to bins via the stock movements or a direct bin assignment on the product record. ### Updated Template Types | Type | Data Source | Key Fields | |------|-----------|------------| | product | erp_products | sku, name, barcode, price | | price | erp_products | name, price, sale_price | | warehouse | erp_products | sku, name, stock_qty, location | | shipping | erp_orders + contacts | contact_name, address, order_ref | | barcode | erp_products | sku, barcode only | | spec_sheet | erp_products | name, image, specs | | **customer** | contacts + erp_roles | name, company, address, customer_code | | **bin** | erp_warehouse_bins | bin_code, aisle, rack, shelf, warehouse_name, qrcode |

jmiller referenced this issue from a commit

2026-06-06 19:05:20 +00:00

feat: warehouse bins, labels, reports, expiry tracking, FIFO/LIFO/FEFO (#192, #204)

jmiller referenced this issue from a commit

2026-06-06 19:51:57 +00:00

feat: Sprint 3 — E-Signature, Inventory, Labels, Email, Import admin views (#192, #197, #198, #196, #204)

jmiller referenced this issue from a commit

2026-06-06 20:46:05 +00:00

feat: OAuth email, label designer, web cron (#198, #204)

Sign in to join this conversation.