> ## Documentation Index
> Fetch the complete documentation index at: https://docs.serial.okos.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Label Printing

> Explore the implementation of label printing functionality in Serial, including support for Dymo and Zebra printers.

## 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:

```typescript
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**:

   ```typescript
   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**:

   ```typescript
   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.