Compare commits
2 Commits
fb34e83f6d
...
87b17e3745
| Author | SHA1 | Date | |
|---|---|---|---|
| 87b17e3745 | |||
| 75242cda1d |
26
index.html
26
index.html
@ -25,7 +25,10 @@
|
||||
<div class="row">
|
||||
<div class="col">
|
||||
<button class="btn btn-success render">
|
||||
Render
|
||||
Render ZPL
|
||||
</button>
|
||||
<button class="btn btn-success print">
|
||||
Print
|
||||
</button>
|
||||
</div>
|
||||
<div class="col">
|
||||
@ -40,6 +43,8 @@
|
||||
|
||||
|
||||
<script>
|
||||
let selectedDevice = null;
|
||||
|
||||
function createHooks() {
|
||||
document.querySelector("button.render").addEventListener("click", (e) => {
|
||||
const options = {
|
||||
@ -54,10 +59,29 @@
|
||||
document.querySelector(`textarea[name="zpl"]`).value = zpl;
|
||||
});
|
||||
});
|
||||
|
||||
document.querySelector("button.print").addEventListener("click", (e) => {
|
||||
if (!selectedDevice) {
|
||||
console.error("Device not selected");
|
||||
}
|
||||
const zpl = document.querySelector(`textarea[name="zpl"]`).value;
|
||||
selectedDevice.send(zpl, undefined, (error) => {
|
||||
console.error(error);
|
||||
})
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
(function () {
|
||||
createHooks();
|
||||
|
||||
getAvailablePrinters().then(devices => {
|
||||
if (devices) {
|
||||
selectedDevice = devices[0];
|
||||
|
||||
}
|
||||
})
|
||||
|
||||
})();
|
||||
</script>
|
||||
|
||||
|
||||
BIN
lib/zebra-browser-print/sample/ZebraGray.jpg
Normal file
BIN
lib/zebra-browser-print/sample/ZebraGray.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
lib/zebra-browser-print/sample/Zebra_logobox.bmp
Normal file
BIN
lib/zebra-browser-print/sample/Zebra_logobox.bmp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 50 KiB |
120
lib/zebra-browser-print/sample/index.html
Normal file
120
lib/zebra-browser-print/sample/index.html
Normal file
@ -0,0 +1,120 @@
|
||||
<html>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
|
||||
<head>
|
||||
<script type="text/javascript" src="../BrowserPrint-3.1.250.min.js"></script>
|
||||
<script type="text/javascript">
|
||||
var selected_device;
|
||||
var devices = [];
|
||||
function setup()
|
||||
{
|
||||
//Get the default device from the application as a first step. Discovery takes longer to complete.
|
||||
BrowserPrint.getDefaultDevice("printer", function(device)
|
||||
{
|
||||
|
||||
//Add device to list of devices and to html select element
|
||||
selected_device = device;
|
||||
devices.push(device);
|
||||
var html_select = document.getElementById("selected_device");
|
||||
var option = document.createElement("option");
|
||||
option.text = device.name;
|
||||
html_select.add(option);
|
||||
|
||||
//Discover any other devices available to the application
|
||||
BrowserPrint.getLocalDevices(function(device_list){
|
||||
for(var i = 0; i < device_list.length; i++)
|
||||
{
|
||||
//Add device to list of devices and to html select element
|
||||
var device = device_list[i];
|
||||
if(!selected_device || device.uid != selected_device.uid)
|
||||
{
|
||||
devices.push(device);
|
||||
var option = document.createElement("option");
|
||||
option.text = device.name;
|
||||
option.value = device.uid;
|
||||
html_select.add(option);
|
||||
}
|
||||
}
|
||||
|
||||
}, function(){alert("Error getting local devices")},"printer");
|
||||
|
||||
}, function(error){
|
||||
alert(error);
|
||||
})
|
||||
}
|
||||
function getConfig(){
|
||||
BrowserPrint.getApplicationConfiguration(function(config){
|
||||
alert(JSON.stringify(config))
|
||||
}, function(error){
|
||||
alert(JSON.stringify(new BrowserPrint.ApplicationConfiguration()));
|
||||
})
|
||||
}
|
||||
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 sendImage(imageUrl)
|
||||
{
|
||||
url = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
|
||||
url = url + "/" + imageUrl;
|
||||
selected_device.convertAndSendFile(url, undefined, errorCallback)
|
||||
}
|
||||
function sendFile(fileUrl){
|
||||
url = window.location.href.substring(0, window.location.href.lastIndexOf("/"));
|
||||
url = url + "/" + fileUrl;
|
||||
selected_device.sendFile(url, undefined, errorCallback)
|
||||
}
|
||||
function onDeviceSelected(selected)
|
||||
{
|
||||
for(var i = 0; i < devices.length; ++i){
|
||||
if(selected.value == devices[i].uid)
|
||||
{
|
||||
selected_device = devices[i];
|
||||
return;
|
||||
}
|
||||
}
|
||||
}
|
||||
window.onload = setup;
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<span style="padding-right:50px; font-size:200%">Zebra Browser Print Test Page</span><br/>
|
||||
<span style="font-size:75%">This page must be loaded from a web server to function properly.</span><br><br>
|
||||
Selected Device: <select id="selected_device" onchange=onDeviceSelected(this);></select> <!-- <input type="button" value="Change" onclick="changeDevice();">--> <br/><br/>
|
||||
<input type="button" value="Get Application Configuration" onclick="getConfig()"><br/><br/>
|
||||
<input type="button" value="Send Config Label" onclick="writeToSelectedPrinter('~wc')"><br/><br/>
|
||||
<input type="button" value="Send ZPL Label" onclick="writeToSelectedPrinter('^XA^FO200,200^A0N36,36^FDTest Label^FS^XZ')"><br/><br/>
|
||||
<input type="button" value="Get Status" onclick="writeToSelectedPrinter('~hs'); readFromSelectedPrinter()"><br/><br/>
|
||||
<input type="button" value="Get Local Devices" onclick="BrowserPrint.getLocalDevices(getDeviceCallback, errorCallback);"><br/><br/>
|
||||
<input type="text" name="write_text" id="write_text"><input type="button" value="Write" onclick="writeToSelectedPrinter(document.getElementById('write_text').value)"><br/><br/>
|
||||
<input type="button" value="Read" onclick="readFromSelectedPrinter()"><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/>
|
||||
<input type="button" value="Send File" onclick="sendFile('wc.zpl');"><br/><br/>
|
||||
</body>
|
||||
</html>
|
||||
1
lib/zebra-browser-print/sample/wc.zpl
Normal file
1
lib/zebra-browser-print/sample/wc.zpl
Normal file
@ -0,0 +1 @@
|
||||
~wc
|
||||
@ -169,3 +169,29 @@ async function createInternalStickerZPL(options) {
|
||||
...options,
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
function getAvailablePrinters() {
|
||||
return new Promise((resolve, reject) => {
|
||||
const devices = [];
|
||||
BrowserPrint.getDefaultDevice("printer", device => {
|
||||
devices.push(device);
|
||||
const defaultDevice = device;
|
||||
|
||||
BrowserPrint.getLocalDevices(deviceList => {
|
||||
//console.log(deviceList)
|
||||
deviceList.printer.forEach(device => {
|
||||
if (!defaultDevice || device.uid != defaultDevice.uid) {
|
||||
devices.push(device);
|
||||
}
|
||||
}, error => {
|
||||
reject("Error getting local devices");
|
||||
}, "printer");
|
||||
resolve(devices);
|
||||
});
|
||||
}, error => {
|
||||
reject(error);
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user