Projects:WebUSB and WebBluetooth receipt printers/Development

Introduction

The Openbravo Touchpoint supports out of the box several USB printers model and one Bluetooth printer model. But the WebUSB and WebBluetooth functionality has been created with extensibility in mind in case in case a new printer model is required to be supported.

This document describes how to create a new Openbravo module to include support to new printer models using the WebUSB and WebBluetooth functionality. You will need knowledge of Openbravo modularity and Javascript to create a new module and develop the code that adds support for a new printer model.

USB Printer

The following code adds support for the receipt printer Epson TM T88V. Lets see what line of code does:

 OB.PRINTERTYPES.GENERICUSB.register({
   name: 'EPSON TM T88V',
   vendorId: 0x04B8,
   productId: 0x0202,
   ESCPOS: OB.ESCPOS.Standard
 });

The firstline OB.PRINTERTYPES.GENERICUSB.register invokes the function that registers a new printer model. This function receives a Javascript object with the following properties.

name: Is the name of the printer, just for identification purposes.

vendorId and productId are the values that identifies the printer model. You have to find what are these values in the technical documentation or you can find it yourself using system tools.

In Windows, assuming your device is connected to the computer. Go to Device manager, find your device, right click on it, select Properties, go to Details tab, select Hardware IDs from the drop-down, and you will find an entry that in the case of the Epson TM T88V is:

USB\VID_04B8&PID_0202

In Linux, connect the printer to the computer, open a new terminal and execute the following command:

$ lsusb

This will list details of all USB devices connected. Here find the line corresponding to the printer you want to support. In the case of the Epson TM T88V the result is:

Bus 001 Device 009: ID 04b8:0202 Seiko Epson Corp. Receipt Printer M129C/TM-T70

Here you can see the vendorId and productId are displayed in hexadecimal. 04b8 for the vendorId and 0202 for the productId.

And finally ESCPOS that defines the function that creates a new ESCPOS javascript object that contains all methods that define how all different commands of a printed receipt must be sent to the printer. For example to print a line of text, to print an image, and also the commands to cut the paper or to open the drawer connected to the printer.

The function OB.ESCPOS.Standard is a good starting point if your printer claims to support the standard ESC/POS command set. In general all receipt printers adhere to the ESC/POS standard but usually there are slightly differences that require to overwrite one or more methods of the OB.ESCPOS.Standard function. But as said previously this function is a good starting point that you can test with your receipt printer, print a sample test and verify what works and what does not.

Creating a new ESCPOS function

If it is needed to create a new ESCPOS javascript object you can inherit OB.ESCPOS.Standard that contains an implementation of all features of a compatible ESC/POS and overwrite only the methods for the features the printer needed to support are different. Other option is to inherit OB.ESCPOS.Basic that contains only basic methods to print text, but not images, barcodes, qr codes, cut paper or open the drawer. Or finally to create a new ESCPOS from scratch and implement all the methods needed. Here it is the most simple ESCPOS object that only prints plain text but it contains all methods and fields required by an ESCPOS object.

 var MyVerySimpleESCPOS = function () {
     this.encoderText = new TextEncoder('utf-8');
     this.NEW_LINE = new Uint8Array([0x0D, 0x0A]);
     this.PARTIAL_CUT_1 = new Uint8Array();

     this.CHAR_SIZE_0 = new Uint8Array();
     this.CHAR_SIZE_1 = new Uint8Array();
     this.CHAR_SIZE_2 = new Uint8Array();
     this.CHAR_SIZE_3 = new Uint8Array();

     this.BOLD_SET = new Uint8Array();
     this.BOLD_RESET = new Uint8Array();
     this.UNDERLINE_SET = new Uint8Array();
     this.UNDERLINE_RESET = new Uint8Array();

     this.CENTER_JUSTIFICATION = new Uint8Array();
     this.LEFT_JUSTIFICATION = new Uint8Array();
     this.RIGHT_JUSTIFICATION = new Uint8Array();

     this.DRAWER_OPEN = new Uint8Array();

     this.transEAN13 = function (code, position) {
       return new Uint8Array();
     };

     this.transCODE128 = function (code, position) {
       return new Uint8Array();
     };

     this.transQR = function (code, quality, size) {
       return new Uint8Array();
     };

     this.transImage = function (imagedata) {
       return new Uint8Array();
     };
     };

This object contains one field named encoderText used to encode text. In this case it is a TextEncoder instance that encodes a text using the Unicode UTF-8 encoding. A list of fields that contains a typed array Uint8Array to format text like NEW_LINE that it is used when the template has to start a new line in the receipt. In this case 0x0D (Carriage Return) and 0x0A (Line Feed). BOLD_SET and BOLD_RESET that are used to start / end formatting the text in bold. And four methods to print barcodes in EAN13, CODE128, qr codes, and images.

An example of inheriting OB.ESCPOS.Standard to send a different Uint8Array to open the drawer is:

 var MyModifiedESCPOS = function () {
     OB.ESCPOS.Standard.call(this); // this inherits everything from OB.ESCPOS.Standard

     this.DRAWER_OPEN = new Uint8Array([0x1B, 0x78, 0x01]); // Sends the command ESC, x, 0x01 to open the drawer
     };