Skip to main content

​
Introduction to Label Printing in Serial

Label printing is a crucial feature in Serial, allowing users to generate and print labels for various manufacturing and tracking purposes. The system supports two major printer types: Dymo and Zebra. This article delves into the implementation details of label printing in Serial, focusing on the key components that make this functionality possible.

​
The LabelPrinterProvider

At the heart of Serial’s label printing functionality is the LabelPrinterProvider. This React context provider manages the state and operations for both Dymo and Zebra printers. Let’s look at its key features: 
export const LabelPrinterProvider = ({
  children,
}: {
  children: React.ReactNode;
}) => {
  // ... (configuration and state management)

  const {
    status: dymoStatus,
    getStatus: dymoGetStatus,
    printLabel: dymoPrintLabel,
    getPreviewUrl: dymoGetPreviewUrl,
  } = useDymoPrinter({
    enabled: company.config.enable_dymo_integration ?? false,
  });

  const {
    status: zebraStatus,
    getStatus: zebraGetStatus,
    printLabel: zebraPrintLabel,
  } = useZebraPrinter({
    enabled: company.config.enable_zebra_integration ?? false,
    autoStatusCheckInterval: AUTO_STATUS_CHECK_INTERVAL,
  });

  // ... (context value creation and provider rendering)
};
The LabelPrinterProvider uses custom hooks for each printer type (useDymoPrinter and useZebraPrinter) to manage printer-specific operations. It then provides a unified interface for both printer types through the React context.

​
Dymo Printer Integration

The useDymoPrinter hook manages the state and operations for Dymo printers. Here are some key features:
  1. Status Management: It tracks the printer’s status, including whether the driver is installed, the printer is connected, and if it’s ready to print.
  2. Print Label Function: 
    const printLabel = async (labelXml: string): Promise<boolean> => {
  // ... (status checks and error handling)
  window.dymo?.label.framework.printLabel(
    printers[0].name,
    "",
    labelXml,
    ""
  );
  // ... (wait for print job to complete)
  return true;
};
  3. Preview Generation: It can generate a preview URL for a label based on the provided XML.

​
Zebra Printer Integration

The useZebraPrinter hook handles Zebra printer operations. Notable features include:
  1. Device Discovery: It uses the BrowserPrint library to find and connect to Zebra printers.
  2. Print Label Function: 
    const printLabel = async (labelImageUrl: string) => {
  // ... (error checking)
  defaultDevice.current.convertAndSendFile(
    labelImageUrl ?? "",
    () => {},
    (error: any) => {
      console.error("Could not print label", error);
      throw new Error("Could not print label");
    },
    {
      toFormat: "zpl",
      fromFormat: "png",
      action: "print",
    }
  );
  return true;
};
  3. Status Polling: It periodically checks the printer’s status to ensure it’s ready for printing.

​
Shared Label Utilities

Serial includes several utility functions for working with labels:
  1. Label Format Helpers: Functions like formatLabelSize, generateBlankLabel, and generateBlankElement assist in creating and formatting label data.
  2. Label Element Types: The system supports various label element types, including Text, Image, Barcode, QR Code, and Identifier.
  3. Preview Generation: The generateLabelPreviewImageUrl function creates preview images for labels, which can be used for both display and printing purposes.

​
Integration in the Application

Label printing is integrated into various parts of the application, such as:
  1. Production Form Fields: The ProductionFormLabel component allows users to select a label format and print it with the current identifier.
  2. Label Formatter Editor: The LabelFormatterEditor component provides a user interface for designing and testing label formats.
  3. Debug Tools: The DebugDymoPrinter component offers a way to test Dymo printer functionality directly.

​
Conclusion

Serial’s label printing system is a robust and flexible solution that supports multiple printer types and label formats. By leveraging React contexts and custom hooks, it provides a unified interface for managing printers and printing labels across the application. The combination of printer-specific integrations and shared utilities allows for easy expansion and maintenance of the label printing functionality.