main_logo

Web App Print

Overview

The SDK API provided by BIXOLON, is a JavaScript Library, which guides you to use B-gate’s special feature WebApp Print. This section is going to discuss about the features  and functions supported by the B-gate SDK APIs. 
The SDK APIs provided by BIXOLON has the ability to control and manage the B-gate Printer and the external BIXOLON printers (USB and Network) which are connected to the B-gate.
The SDK APIs are easy to integrate with your web applications allowing easy control, send and receive data from the B-gate and the printers which are connected to the B-gate as well.

API Download

SDK Download for Web App Print

Reference Guide

API Integration and Detailed Information

This section will explain the detailed information about our SDK API functions and how to integrate these into your web application. 
In order to integrate our SDK API Library into your web application, first our SDK API Library files (bGateWebPrintAPI_WS.js and WS_parser.js) have to be added into your web application’s js folder and then call those files via <script> tag on your web application’s index.html file. 
 

• Example

<!DOCTYPE html>

<html>

<head>

….

<script type="text/javascript" src="js/WS_parser.js"></script>

<script type="text/javascript" src="js/bGateWebPrintAPI_WS.js"></script>

 ….

</head>

<body>

 ….

</body>

</html>

Create SDK API Library Instance

In order to use our SDK API functions in the web application, first create our bGateWebPrintAPI Library on your JavaScript file and then use this instance to call our SDK API functions.
 

• Syntax

var bGateWebPrintAPI();

• Parameters

none

• Example

var bgtWebPrint = new bGateWebPrintAPI();

Send Data

The API sendData is use to send the print data to the designated B-gate.
 

• Syntax

var sendData(ipAddr,shopID,devID);

• Parameters

ipAddr = Represents the designated IP Address

WebApp Print : its B-gate IP Address

Cloud Server Print : Its Cloud IP Address

shopID = Represents the designated Shop Name.

devID = Represents the target printer ID. 

• Example

var ipAddr = "192.168.0.100";

var shopID = "BGATE_SAMPLE_SHOP";

var devID = "local_printer";

 

bgtWebPrint.sendData(ipAddr,shopID,devID);

Alignment

The API makeAlign used to align the print data.
 

• Syntax

var makeAlign (pos)

• Parameters

pos (position) = position Options: 'left' , 'right' , 'center'  (Default: 'left')

• Example

bgtWebPrint.makeAlign({pos:'center'});

Print Text

The API makeText used to print the text data.
 

• Syntax

var makeText(code, ics, font, wd, ht, uline, bold, reverse, updown, rotate, lsp, data)

• Parameters

code (code page) = Code Page Options: 'page0' ~ 'page5' ,  'page16' ~ 'page19',

'page21' ~ 'page31', 'page33' ~ 'page42', 'page47', 'page255'

(Default: page0)

ics (international code standard) = ICS Options: 'usa','france', 'germany', 'uk',

'denmark I' ,'sweden', 'italy', 'spain I' , 'japan', 'norway', 'denmark II',

'spain II', 'latinamerica', 'korea' (Default : usa)

font = font options : 'fonta', 'fontb'  'fontc' (Default : fonta)

wd = Text width options: '0' ~ '7' (Default : 0)

ht = Text height options : '0' ~ '7' (Default : 0)

uline = Under Line options : 'true' , 'false' (Default : false)

bold = Bold options: 'true' , 'false' (Default : false)

reverse(Interchange black and white) = Reverse options : 'true' , 'false' (Default : false)

updown = upside-down options : 'true', 'false' (Default: false)

rotate = Rotation Options : '0' , '90' (Default: 0)

lsp (line space) = Line Space options : '0' ~ '255', '256'(=set line space to printer default)

(Default : 256)

data = Text Data

• Example

bgtWebPrint.maketext({code:'page0',ics:'us',font:'fonta',wd:'1',ht:'1',uline:'false',bold:'false',

reverse:'false',rorate:'0',data:'Hello!World'});

bgtWebPrint.maketext({data:'Hello!World'});

bgtWebPrint.maketext({bold:'true',data:'Hello!World'});

bgtWebPrint.maketext({uline:'true', wd:'2',data:'Hello!World'});

Paper Feed

The API makePaperFeed used to feed the paper.
 

• Syntax

var makePaperFeed (type, value)

• Parameters

type = Feed Type Options : 'line' , 'unit'(Default : line)

value = Feed Value Options : '1' ~ '65535' (Default : 1)

• Example

bgtWebPrint.makePaperFeed({type:'line',value:'1'});

Print Image

The API makeImage used to print the Image Data.
 

• Syntax

var makeImage (context, x, y, width, height)

• Parameters

context = HTML5 canvas context

x = Image start x-coordinate position : '0' ~ '65535'

y = Image start y-coordinate position : '0' ~ '65535'

width = The Width of Image Data : '0' ~ '65535'

height = The Height of Image Data : '0' ~ '65535'

• Example

Include a canvas in your html file, if you don’t want to display it then make it hidden.

<!DOCTYPE html>

<html>

<head>

….

<script type="text/javascript" src="js/WS_parser.js"></script>

<script type="text/javascript" src="js/bGateWebPrintAPI_WS.js"></script>

….

</head>

<body>

….

<div style="display:none;">

<canvas id="myHiddenCanvas" width="512" height="480"> </canvas>

<img id="coupon" src="img/coupon.png" alt="canvas image">

</div>

</body>

</html>

On your JS file get the context of your canvas and draw your image on canvas and then call our makeImage API to send image data.

var dataURL="./img/coupon.png";

var image = new Image();

image.src = dataURL;

var canvas = document.getElementById('myHiddenCanvas');

var context = canvas.getContext('2d');

context.drawImage(image, 0, 0, 512, 480);

bgtWebPrint.makeImage(context, 0, 0, 512, 480);

Print NV Logo

The API makeNVlogo used to print the NV Logo images stored in printer memory.
 

• Syntax

var makeNVlogo (keycode, lsize)

• Parameters

keycode = Memory Location Options : '0' ~ '255' (Default: 0)

lsize = NV Logo Size Options: 'normal', 'quadruple','dwd'(double width),

'dht'(double height) (Default: normal)

• Example

bgtWebPrint.makeNVvlogo({keycode:’0’,lsize:’normal’})

Print 1D Barcode

The API makeBarcode12 used to print 1-dimentional Barcode.
 

• Syntax

var makeBarcode12 (type, hri, wd, ht, data)

• Parameters

type = Barcode Type Options : 'UPC_A' , 'UPC_E' , 'EAN13' ,  'JAN13','EAN8',’JAN8',

'CODE39', 'ITF','CODABAR','CODE93' , 'CODE128' (Default: CODE39)

hri (human readable interpretation)= HRI Print Location Options :

'none','above','below','both' (Default : none)

wd (width) = Barcode Width Options : '0' ~ '255' (Default : 2)

ht (height) = Barcode Height Options : '0' ~ '255'(Default : 162)

data = Barcode Data

• Example

bgtWebPrint.makeBarcode12({data:’123456789123’,

type:’code128’,hri:’none’,wd:’2’,ht:’162’});

Print 2-D Symbol PDF417

The API makePDF417 used to print 2-d symbol PDF471
 

• Syntax

var makePDF417 (col, row, wd, ht, level, mode, data)

• Parameters

col = Columns Options: '0' ~ '30' (Default: 0)

row = Row Options: '0', '3' ~ '90'(Default: 0)

wd = Module Width Options : '1' ~ '4'(Default : 3)

ht = Module Height Options : '2' ~ '4'(Default : 3)

level = Error Correction Level Options : '0' ~ '8' (Default : 0)

mode = PDF417 Mode options: '0'(Standard Mode), '1'(Simplified Mode) (Default : 0)

data = 2-D symbol data

• Example

bgtWebPrint.makePDF417({data:'http://bixolon.com',col:'0',row:'0',

wd:'3',ht:'3', mode:'0'});

Print 2-D Symbol QR Code

The API makeQRCODE used to print 2-d symbol QR Code
 

• Syntax

var makeQRCODE (model, size, level, data)

• Parameters

model = QR Code Model Options : 'mod1' , 'mod2' (Default : mod2)

size = QR Code Size Options : '1' ~ '8'(Default : 3)

level = Error Correction Level Options: '0' ~ '3' (Default: 0)

data = 2-D Symbol data

• Example

bgtWebPrint.makeQRCODE({data:'http://bixolon.com',model:'mod2',size:'3',level:'0'});

Paper Cut

The API makePaperCut used to print paper cut.
 

• Syntax

var makePaperCut (cuttype)

• Parameters

cuttype = Paper Cut Type Options :'feed','nofeed'(Default : feed)

• Example

bgtWebPrint.makePaperCut({cuttype:'feed'});

Make Cash Draw Kick Out

The API makeDKout used to manage Cash Draw Kick out information.
 

• Syntax

var makeDKout (connector, duration)

• Parameters

connector = Cash Draw Connector Pin Options : 'pin2' , 'pin5' (Default : pin2)

duration = Pulse time Duration milliseconds : '50','100','150','200','250','300','400','500'

(Default : 200)

• Example

bgtWebPrint.makeDKout({connector:'pin2',duration:'200'});

Internal Buzzer Sound

The API makeBuzzer used to make internal buzzer sound.
 

• Syntax

var makeBuzzer ()

• Parameters

none

• Example

bgtWebPrint.makeBuzzer();

Print Direct I/O Command

The API makeCmd used to print Direct I/O Commands.
 

• Syntax

var makeCmd (command)

• Parameters

command = ESC/POS data command in Hexadecimal (excluding 0x)

• Example

bgtWebPrint.makeCmd("1d 28 4c 06 00 30 45 30 30 01 01");

Printer ReInit

The API makeReinit used to reinitialize the printer settings.
 

• Syntax

var makeReinit ()

• Parameters

none

• Example

bgtWebPrint.makeReinit();

Get Connected Printer List

The API getDeviceList used to get the printers device ID information, which are connected with B-gate.
 

• Syntax

var getDeviceList (ipAddr,shopID, ListInputBoxID);

• Parameters

ipAddr = Represents the designated IP Address

WebApp Print : its B-gate IP Address

Cloud Server Print : Its Cloud IP Address

shopID = Represents the designated Shop Name.

ListInputBoxID = Represents the HTML Input Item ID name

(where you want to display the device list information)

• Example

<In your html file>

<!DOCTYPE html>

<html>

<head>

….

<script type="text/javascript" src="js/WS_parser.js"></script>

<script type="text/javascript" src="js/bGateWebPrintAPI_WS.js"></script>

 ….

</head>

<body>

 …

<select id="devicelist"> </select>

</body>

</html>

<In your js File>

var ipAddr = "192.168.0.100";

var shopID = "BGATE_SAMPLE_SHOP";

var ListInputBoxID = "devicelist";

bgtWebPrint.getDeviceList (ipAddr,shopID, ListInputBoxID);

Get Shop List

The API getShopList used to get the Shop ID information. In WebApp Print, it will get the B-gate Shop ID Information, However in Online Order print, it will get the all the shop ID, which are registered to Cloud Server.
 

• Syntax

var getShopList (ipAddr, ListInputBoxID);

• Parameters

ipAddr = Represents the designated IP Address

WebApp Print: B-gate it’s B-gate IP Address

Cloud Server Print: It’s Cloud IP Address

ListInputBoxID = Represents the HTML Input Item ID name

(where you want to display the shop list information).

• Example

<In your html file>

<!DOCTYPE html>

<html>

<head>

….

<script type="text/javascript" src="js/WS_parser.js"></script>

<script type="text/javascript" src="js/bGateWebPrintAPI_WS.js"></script>

 ….

</head>

<body>

 …

<select id="shoplist"> </select>

</body>

</html>

<In your js File>

var ipAddr = "192.168.0.100";

var ListInputBoxID = "shoplist";

bgtWebPrint.getShopList(ipAddr, ListInputBoxID);