Skip to content

Instantly share code, notes, and snippets.

@robinsk
Last active August 27, 2023 00:45
Show Gist options
  • Save robinsk/a667a490b7ef8192bbb9fcfc87f15757 to your computer and use it in GitHub Desktop.
Save robinsk/a667a490b7ef8192bbb9fcfc87f15757 to your computer and use it in GitHub Desktop.
Zebra Browser Print SDK
var BrowserPrint = function() {
function e(e) {
return s + e
}
function n(e, n) {
var i = new XMLHttpRequest;
return "withCredentials" in i ? i.open(e, n, !0) : "undefined" != typeof XDomainRequest ? (i = new XDomainRequest, i.open(e, n)) : i = null, i
}
function i(e, n, i, t) {
return void 0 != e && (void 0 == i && (i = e.sendFinishedCallback), void 0 == t && (t = e.sendErrorCallback)), n.onreadystatechange = function() {
n.readyState === XMLHttpRequest.DONE && 200 === n.status ? i(n.responseText) : n.readyState === XMLHttpRequest.DONE && t(n.responseText)
}, n
}
var t = {},
r = 2,
s = "http://localhost:9100/";
return "https:" === location.protocol && (s = "https://localhost:9101/"), t.Device = function(t) {
var s = this;
this.name = t.name, this.deviceType = t.deviceType, this.connection = t.connection, this.uid = t.uid, this.version = r, this.provider = t.provider, this.manufacturer = t.manufacturer, this.sendErrorCallback = function(e) {}, this.sendFinishedCallback = function(e) {}, this.send = function(t, r, o) {
var a = n("POST", e("write"));
if (a) {
i(s, a, r, o);
var c = {
device: {
name: this.name,
uid: this.uid,
connection: this.connection,
deviceType: this.deviceType,
version: this.version,
provider: this.provider,
manufacturer: this.manufacturer
},
data: t
};
a.send(JSON.stringify(c))
}
}, this.sendUrl = function(t, r, o) {
var a = n("POST", e("write"));
if (a) {
i(s, a, r, o);
var c = {
device: {
name: this.name,
uid: this.uid,
connection: this.connection,
deviceType: this.deviceType,
version: this.version,
provider: this.provider,
manufacturer: this.manufacturer
},
url: t
};
a.send(JSON.stringify(c))
}
}, this.readErrorCallback = function(e) {}, this.readFinishedCallback = function(e) {}, this.read = function(t, r) {
var o = n("POST", e("read"));
if (o) {
i(s, o, t, r);
var a = {
device: {
name: this.name,
uid: this.uid,
connection: this.connection,
deviceType: this.deviceType,
version: this.version,
provider: this.provider,
manufacturer: this.manufacturer
}
};
o.send(JSON.stringify(a))
}
}, this.sendThenRead = function(e, n, i) {
this.send(e, function(e) {
return function() {
e.read(n, i)
}
}(this), i)
}
}, t.getLocalDevices = function(r, s, o) {
var a = n("GET", e("available"));
a && (finishedFunction = function(e) {
response = e, response = JSON.parse(response);
for (var n in response)
if (response.hasOwnProperty(n) && response[n].constructor === Array) {
arr = response[n];
for (var i = 0; i < arr.length; ++i) arr[i] = new t.Device(arr[i])
}
return void 0 == o ? void r(response) : void r(response[o])
}, i(void 0, a, finishedFunction, s), a.send())
}, t.getDefaultDevice = function(r, s, o) {
var a = "default";
void 0 != r && null != r && (a = a + "?type=" + r);
var c = n("GET", e(a));
c && (finishedFunction = function(e) {
if (response = e, "" == response) return void s(null);
response = JSON.parse(response);
var n = new t.Device(response);
s(n)
}, i(void 0, c, finishedFunction, o), c.send())
}, t.readOnInterval = function(e, n, i) {
void 0 != i && 0 != i || (i = 1), readFunc = function() {
e.read(function(e) {
n(e), setTimeout(readFunc, i)
}, function(e) {
setTimeout(readFunc, i)
})
}, setTimeout(readFunc, i)
}, t.bindFieldToReadData = function(e, n, i, r) {
t.readOnInterval(e, function(e) {
"" != e && (n.value = e, void 0 != r && null != r && r())
}, i)
}, t
}();
var available_printers = null;
var selected_category = null;
var default_printer = null;
var selected_printer = null;
var format_start = "^XA^LL200^FO80,50^A0N36,36^FD";
var format_end = "^FS^XZ";
var default_mode = true;
function setup_web_print()
{
$('#printer_select').on('change', onPrinterSelected);
showLoading("Loading Printer Information...");
default_mode = true;
selected_printer = null;
available_printers = null;
selected_category = null;
default_printer = null;
BrowserPrint.getDefaultDevice('printer', function(printer)
{
default_printer = printer
if((printer != null) && (printer.connection != undefined))
{
selected_printer = printer;
var printer_details = $('#printer_details');
var selected_printer_div = $('#selected_printer');
selected_printer_div.text("Using Default Printer: " + printer.name);
hideLoading();
printer_details.show();
$('#print_form').show();
}
BrowserPrint.getLocalDevices(function(printers)
{
available_printers = printers;
var sel = document.getElementById("printers");
var printers_available = false;
sel.innerHTML = "";
if (printers != undefined)
{
for(var i = 0; i < printers.length; i++)
{
if (printers[i].connection == 'usb')
{
var opt = document.createElement("option");
opt.innerHTML = printers[i].connection + ": " + printers[i].uid;
opt.value = printers[i].uid;
sel.appendChild(opt);
printers_available = true;
}
}
}
if(!printers_available)
{
showErrorMessage("No Zebra Printers could be found!");
hideLoading();
$('#print_form').hide();
return;
}
else if(selected_printer == null)
{
default_mode = false;
changePrinter();
$('#print_form').show();
hideLoading();
}
}, undefined, 'printer');
},
function(error_response)
{
showBrowserPrintNotFound();
});
};
function showBrowserPrintNotFound()
{
showErrorMessage("An error occured while attempting to connect to your Zebra Printer. You may not have Zebra Browser Print installed, or it may not be running. Install Zebra Browser Print, or start the Zebra Browser Print Service, and try again.");
};
function sendData()
{
showLoading("Printing...");
checkPrinterStatus( function (text){
if (text == "Ready to Print")
{
selected_printer.send(format_start + $('#entered_name').val() + format_end, printComplete, printerError);
}
else
{
printerError(text);
}
});
};
function checkPrinterStatus(finishedFunction)
{
selected_printer.sendThenRead("~HQES",
function(text){
var that = this;
var statuses = new Array();
var ok = false;
var is_error = text.charAt(70);
var media = text.charAt(88);
var head = text.charAt(87);
var pause = text.charAt(84);
// check each flag that prevents printing
if (is_error == '0')
{
ok = true;
statuses.push("Ready to Print");
}
if (media == '1')
statuses.push("Paper out");
if (media == '2')
statuses.push("Ribbon Out");
if (media == '4')
statuses.push("Media Door Open");
if (media == '8')
statuses.push("Cutter Fault");
if (head == '1')
statuses.push("Printhead Overheating");
if (head == '2')
statuses.push("Motor Overheating");
if (head == '4')
statuses.push("Printhead Fault");
if (head == '8')
statuses.push("Incorrect Printhead");
if (pause == '1')
statuses.push("Printer Paused");
if ((!ok) && (statuses.Count == 0))
statuses.push("Error: Unknown Error");
finishedFunction(statuses.join());
}, printerError);
};
function hidePrintForm()
{
$('#print_form').hide();
};
function showPrintForm()
{
$('#print_form').show();
};
function showLoading(text)
{
$('#loading_message').text(text);
$('#printer_data_loading').show();
hidePrintForm();
$('#printer_details').hide();
$('#printer_select').hide();
};
function printComplete()
{
hideLoading();
alert ("Printing complete");
}
function hideLoading()
{
$('#printer_data_loading').hide();
if(default_mode == true)
{
showPrintForm();
$('#printer_details').show();
}
else
{
$('#printer_select').show();
showPrintForm();
}
};
function changePrinter()
{
default_mode = false;
selected_printer = null;
$('#printer_details').hide();
if(available_printers == null)
{
showLoading("Finding Printers...");
$('#print_form').hide();
setTimeout(changePrinter, 200);
return;
}
$('#printer_select').show();
onPrinterSelected();
}
function onPrinterSelected()
{
selected_printer = available_printers[$('#printers')[0].selectedIndex];
}
function showErrorMessage(text)
{
$('#main').hide();
$('#error_div').show();
$('#error_message').html(text);
}
function printerError(text)
{
showErrorMessage("An error occurred while printing. Please try again." + text);
}
function trySetupAgain()
{
$('#main').show();
$('#error_div').hide();
setup_web_print();
//hideLoading();
}
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<head>
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet">
<link href="bootstrap/css/bootstrap-theme.min.css" rel="stylesheet">
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="js/BrowserPrint-1.0.4.min.js"></script>
<script type="text/javascript" src="js/DevDemo.js"></script>
<script type="text/javascript">
$(document).ready(setup_web_print);
</script>
</head>
<body style="background-color:#D8D8D8; font-size:24px;">
<div class="navbar navbar-inverse " role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"><p style="font-size: 150%;">Zebra Browser Print Demo</p></a>
<script type="text/javascript">
var OSName="Unknown OS";
if (navigator.appVersion.indexOf("Win")!=-1) OSName="Windows";
//{
//OSName="Windows";
//document.write('<a href="ZebraWebPrint.exe" class="navbar-brand" href="#">Download the '+OSName+' App</a>');
//}
if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName="UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName="Linux";
</script>
</div><!-- /navbar-header -->
</div><!-- /container -->
</div><!-- /navigation -->
<div class="container" style="width:500px">
<div id="main">
<div id="printer_data_loading" style="display:none"><span id="loading_message">Loading Printer Details...</span><br/>
<div class="progress" style="width:100%">
<div class="progress-bar progress-bar-striped active" role="progressbar" aria-valuenow="100" aria-valuemin="0" aria-valuemax="100" style="width: 100%">
</div>
</div>
</div> <!-- /printer_data_loading -->
<div id="printer_details" style="display:none">
<span id="selected_printer">No data</span>
<button type="button" class="btn btn-success" onclick="changePrinter()">Change</button>
</div><br /> <!-- /printer_details -->
<div id="printer_select" style="display:none">
Zebra Printer Options<br />
Printer: <select id="printers"></select>
</div> <!-- /printer_select -->
<div id="print_form" style="display:none">
Enter Name: <input type="text" id="entered_name"></input>
<br /><br />
<button type="button" class="btn btn-lg btn-primary" onclick="sendData();" value="Print">Print Label</button>
</div> <!-- /print_form -->
</div> <!-- /main -->
<div id="error_div" style="width:500px; display:none"><div id="error_message"></div>
<button type="button" class="btn btn-lg btn-success" onclick="trySetupAgain();">Try Again</button>
</div><!-- /error_div -->
</div><!-- /container -->
</body>
</html>
<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<head>
<!-- <script type="text/javascript" src="../../ZebraWebDriverJS/BrowserPrint.js"></script>-->
<script type="text/javascript" src="./js/BrowserPrint-1.0.4.min.js"></script>
<script type="text/javascript">
var selected_device;
function setup()
{
BrowserPrint.getDefaultDevice("printer", function(device)
{
selected_device = device;
var ele = document.getElementById("selected_device");
ele.innerHTML = device.name;
}, function(error){
alert(error);
});
}
function writeToSelectedPrinter(dataToWrite)
{
selected_device.send(dataToWrite, undefined, errorCallback);
}
var readCallback = function(readData) {
if(readData === undefined || readData === null || readData === "")
{
alert("No Response from Device");
}
else
{
alert(readData);
}
}
var errorCallback = function(errorMessage){
alert("Error: " + errorMessage);
}
function readFromSelectedPrinter()
{
selected_device.read(readCallback, errorCallback);
}
function getDeviceCallback(deviceList)
{
alert("Devices: \n" + JSON.stringify(deviceList, null, 4))
}
function selectDevice()
{
}
function sendImage(imageUrl)
{
url = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
url = url + "/" + imageUrl;
selected_device.sendUrl(url, undefined, errorCallback)
}
window.onload = setup;
</script>
</head>
<body>
<span style="padding-right:50px; font-size:200%">Zebra Browser Print Image Demo</span><br/>
Selected Device: <span id="selected_device"></span> <!-- <input type="button" value="Change" onclick="changeDevice();">--> <br/><br/>
<input type="button" value="Send BMP" onclick="sendImage('Zebra_logobox.bmp');"><br/><br/>
<input type="button" value="Send JPG" onclick="sendImage('ZebraGray.jpg');"><br/><br/>
</body>
</html>
@fanorenantsoa
Copy link

hello,

Please, can you show how to use/implement the readOnInterval method ?

Thanks!

@ihussain1024
Copy link

Hi,
I tried your code but got this error
An error occured while attempting to connect to your Zebra Printer. You may not have Zebra Browser Print installed, or it may not be running. Install Zebra Browser Print, or start the Zebra Browser Print Service, and try again.
I am using Zebra TLP 2844, OS Linux.

@shannlove
Copy link

shannlove commented Nov 22, 2018

I tried with Zebra GC420t, it did not work. Please help me to get it done.

@loretoruiz
Copy link

Hello. I would like to know how I can use BrowserPrint.js from my Reactjs application? I have not been able to integrate that library into my project. Do you have an example?

@deaa1111
Copy link

Hi, I have issues with cors-origin when im trying to send the http request from another ip in the network , is there any config should be passed in the request ?how to fix this problem, plz help.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment