2.0 Getting Started

This is a tutorial for web developers to add a plugin to your web page capable of sending raw commands to your printer. This is common for Barcodes, Thermal Printing, Point-Of-Sales (POS), and other commercial/industry purposes.

This is possible by using JavaScript to talk to the QZ Tray 2.0 software using techniques supported provided by all major web browsers and all major Desktop operating systems.

##Preliminary Steps

This tutorial assumes you have already successfully completed the following tasks:

1. QZ Tray 2.0 is installed and is working properly in the web browser

   • Download QZ Tray 2.0

2. Your printer is connected as a raw print queue on your workstation with the name "zebra" (this can be changed later). Click on the appropriate link below for instructions.

   • Setting Up a Raw Printer in Windows
   • Setting Up a Raw Printer in OSX
   • Setting Up a Raw Printer in Ubuntu Linux

When these two steps have been completed, please move on to the next part of this tutorial.

---

##The Code

We will be looking at the sample.html file provided with the download. This file provides many sample buttons and features.

Note: To locate sample.html, navigate to the demo folder.

1. Launch QZ Tray
2. Advanced
3. Open File Location
4. Demo
5. Alternately, navigate directly to it via:

• Windows: %PROGRAMFILES%\QZ Tray\demo
• Mac: /Applications/QZ Tray/demo
• Linux: /opt/qz-tray/demo

Detecting readiness

1. PLACE HOLDER

   /// Page load ///
   $(document).ready(function() {
       resetRawOptions();
       resetPixelOptions();
       resetSerialOptions();
       resetUsbOptions();

       startConnection();

       $("#printerSearch").on('keyup', function(e) {
           if (e.which == 13 || e.keyCode == 13) {
               findPrinter($('#printerSearch').val(), true);
               return false;
           }
       })
   });

Finding the printer

This sample function can be used for both Raw and PostScript Printing.

qz-print's parameters are set through JavaScript commands.

1. PLACE HOLDER

function findPrinter(query, set) { $("#printerSearch").val(query); qz.printers.find(query).then(function(data) { if (data != undefined) { displayMessage("Found: " + data); if (set) { setPrinter(data); } } else { displayMessage("Could not find a printer using " + query + "", 'alert-warning'); } }).catch(displayError); } ``` * See also sample.html section `findPrinter()`

 > **Note:** To select another printer, you can also choose it by index using `qz.setPrinter(index);`

1. Use html code for a Find Printer button using standard HTML input button. This button has already been provided in sample.html.

<button type="button" class="btn btn-default btn-sm" onclick="findPrinter($('#printerSearch').val(), true);">Find Printer</button> 

1. To test the Find Printer button do the following:

• Load page in web browser and click "Find Printer"

• In the image below, "XPS" was searched and successfully detected by the script.

  

---

###Raw Printing / PostScript Printing

Depending on what type of printer you have, various functions can be used.

1. Raw Printing

The Raw Printing Guide goes over how to do the following with a Raw Printer:

• Sending Raw Commands (Java / php)
• Base64 Printing
• Epson/Citizen ESC/P Printing
• Advanced Print Spooling
• Print Special Characters
• File Printing
• XML Printing

1. PostScript Printing

The PostScript Printing Guide goes over how to do the following with a PostScript Printer:

• Print to a File
• HTML Printing
• PDF Printing
• Printing Images

---

###Serial Communication

1. If you would like to send and receive commands through a serial connection, please read the Serial Communication tutorial.