Barcode Label Designer & Printer

A web-based solution for designing and printing custom barcode labels, specifically optimized for thermal printers like the Zebra ZD220.

Features

• Multi-field Label Design: Support for product code, name, price, batch number, expiry date, and custom fields
• Customizable Layout: Adjustable font sizes, barcode height, and field visibility
• Real-time Preview: Live preview of labels at actual size (3.5cm × 2.5cm)
• Thermal Printer Support: Generates ZPL code for Zebra thermal printers
• Template System: Save and load label templates for different product types
• User Authentication: Simple login system (can be integrated with existing ERP)

Quick Start

1. Start the web server:

   python -m http.server 8000

2. Open your browser and navigate to:

   http://localhost:8000
   

3. Login with any credentials (minimum 3 characters each)

4. Design your label:

   • Enter product details in the sidebar
   • Adjust layout settings as needed
   • Preview updates in real-time

5. Print your label:

   • For thermal printers: Use the generated ZPL code
   • For regular printers: Use the browser print function

Thermal Printer Setup

For Zebra ZD220 (203 DPI):

• Label size: 3.5cm × 2.5cm
• Use the generated ZPL code
• Send ZPL directly to printer via USB, Serial, or Network

ZPL Integration Methods:

1. Zebra Setup Utilities - Official Zebra software
2. Command Line - Send ZPL file directly to printer
3. Custom Application - Integrate ZPL generation into your ERP

Customization

Adding New Fields:

1. Add input field in index.html
2. Update the generatePreview() function in script.js
3. Modify ZPL generation in generateZPL() function

Changing Label Dimensions:

1. Update CSS dimensions in .label-preview class
2. Adjust ZPL ^PW (width) and ^LL (length) commands
3. Modify field positioning in ZPL generation

Integration with ERP:

• Replace the simple login with your ERP authentication
• Connect to your product database via API
• Modify data loading functions to fetch from your system

File Structure

├── index.html          # Main application interface
├── styles.css          # Styling and layout
├── script.js           # Application logic and barcode generation
├── package.json        # Project configuration
└── README.md          # This documentation

Browser Compatibility

• Chrome/Edge: Full support
• Firefox: Full support
• Safari: Full support
• Internet Explorer: Not supported

Troubleshooting

Barcode Not Generating:

• Ensure product code contains valid characters
• Check browser console for JavaScript errors

Print Quality Issues:

• Use ZPL code for thermal printers
• Adjust barcode height and font size settings
• Ensure printer DPI settings match label design

Layout Problems:

• Check label dimensions in CSS
• Verify field positioning in ZPL code
• Test with different font sizes

Support

For technical support or customization requests, please refer to the documentation or contact your system administrator.

License

MIT License - Feel free to modify and distribute as needed.