Compare commits

...

10 Commits

Author SHA1 Message Date
ce10a8faa0 Add comments and createInternalStickerZPL() param 2023-08-18 11:22:44 +02:00
71506f60c2 Polish 2023-08-02 12:25:58 +02:00
de6410abb4 Update readme 2023-08-02 12:00:31 +02:00
9d8f2df0a9 Tweaks and update readme 2023-08-02 11:55:06 +02:00
4d6cd64064 Merge branch 'web-api' 2023-08-02 11:04:10 +02:00
7be2dc2466 Web API print 2023-08-02 11:04:00 +02:00
87b17e3745 Working version 2023-08-01 14:20:00 +02:00
75242cda1d Add BrowserPrint example 2023-08-01 14:19:47 +02:00
fb34e83f6d Add zebra browser print libs 2023-07-31 15:40:21 +02:00
a8545c2546 Finished custom label 2023-07-31 15:17:20 +02:00
11 changed files with 334 additions and 32 deletions

42
README.md Normal file
View File

@ -0,0 +1,42 @@
# Sticker Print Demo
## Zebra Browser Print
### Linux
- ne radi
### Windows
- instalirati [drivere](https://www.zebra.com/us/en/support-downloads/printers/desktop/gk420t.html)
- instalirati [Browser Print](https://www.zebra.com/us/en/support-downloads/printer-software/by-request-software.html#browser-print)
## Web API
Potreban je Chrome ili Chrome based preglednik.
### Linux
- ne treba nikakvih posebnih akcija, radi out of box
### Windows
- deinstalirati Zebra driver ako je instaliran
- instalirati [Zadig](https://zadig.akeo.ie) utility
- pratiti [upute za instalaciju](https://stackoverflow.com/a/72469190/168187) drivera preko Zadiga
## Korisni linkovi
- [Zebra Programming Language](https://en.wikipedia.org/wiki/Zebra_Programming_Language)
- [Labelary - ZPL preview](http://labelary.com/viewer.html)
- [ZPL II Programming manual](https://www.zebra.com/content/dam/zebra_new_ia/en-us/manuals/printers/common/programming/zpl-zbi2-pm-en.pdf)
- [zpl-image](https://github.com/metafloor/zpl-image) - convert image to GRF encoded image
### Browser Print SDK
> Developers can now quickly add USB or Network based printing support to their browser-based apps on Windows 7, Windows 10 and Mac OSX systems, when using Internet Explorer v11, Chrome or Safari. The source code and documentation that come with Browser Print make adding print capabilities simple and straightforward. The ability to perform print time status checking is also included. This solution greatly simplifies the task of adding network or USB-based printing to your application—saving developers time. Developers can also enhance their apps with printer status checking at print time.
- Windows 7, Windows 10 and Mac OSX
- [Browser Print SDK](https://www.zebra.com/us/en/software/printer-software/browser-print.html)
- [Browser Print](https://developer.zebra.com/products/printers/browser-print)
- [Docs](https://www.zebra.com/content/dam/zebra_new_ia/en-us/solutions-verticals/product/Software/Printer%20Software/Link-OS/browser-print/zebra-browser-print-user-guide-v1-3-en-us.pdf)

Binary file not shown.

After

Width:  |  Height:  |  Size: 12 KiB

30
browser-print-api.js Normal file
View File

@ -0,0 +1,30 @@
function getAvailablePrinters() {
return new Promise((resolve, reject) => {
const devices = [];
BrowserPrint.getDefaultDevice(
"printer",
(device) => {
devices.push(device);
const defaultDevice = device;
BrowserPrint.getLocalDevices((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);
}
);
});
}

View File

@ -11,18 +11,93 @@
<script type="text/javascript" src="lib/zpl-image/pako.js"></script> <script type="text/javascript" src="lib/zpl-image/pako.js"></script>
<script type="text/javascript" src="lib/zpl-image/zpl-image.js"></script> <script type="text/javascript" src="lib/zpl-image/zpl-image.js"></script>
<!-- js libs for BrowserPrinter only - not used for Web API printing -->
<script type="text/javascript" src="lib/zebra-browser-print/BrowserPrint-3.1.250.min.js"></script>
<script type="text/javascript" src="lib/zebra-browser-print/BrowserPrint-Zebra-1.1.250.min.js"></script>
<!-- end -->
<script src="./sticker-print.js"></script> <script src="./sticker-print.js"></script>
<!-- js libs for BrowserPrinter only - not used for Web API printing -->
<script src="./browser-print-api.js"></script>
<!-- end -->
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>Sticker Print Demo</h1> <h1 class="mb-4">Sticker Print Demo</h1>
<div class="mb-3"> <div class="d-flex align-items-end">
<label for=""></label> <div class="w-100">
<label class="form-label">Rendered ZPL:</label>
<textarea class="form-control" name="zpl" rows="10"></textarea> <textarea class="form-control" name="zpl" rows="10"></textarea>
</div> </div>
<div class="ms-3 flex-shrink-0 d-flex flex-column">
<button class="btn btn-success mb-3 browser-printer-print">
Print using Browser Printer
</button>
<button class="btn btn-success web-api-print">
Print using Web API
</button>
</div>
</div>
</div> </div>
</body> </body>
<script>
const ZEBRA_VENDOR_ID = 0xA5F;
function createHooks() {
// print using BrowserPrint
document.querySelector("button.browser-printer-print").addEventListener("click", async (e) => {
const availableDevices = await getAvailablePrinters();
if (!availableDevices) {
console.error("No devices available");
return;
}
const selectedDevice = availableDevices[0];
const zpl = document.querySelector(`textarea[name="zpl"]`).value;
selectedDevice.send(zpl, undefined, (error) => {
console.error(error);
})
});
// print using Web API
document.querySelector("button.web-api-print").addEventListener("click", async (e) => {
const device = await navigator.usb.requestDevice({ filters: [{ vendorId: ZEBRA_VENDOR_ID }] });
await device.open();
await device.selectConfiguration(1);
await device.claimInterface(0);
const zpl = document.querySelector(`textarea[name="zpl"]`).value;
const encoder = new TextEncoder();
const data = encoder.encode(zpl);
await device.transferOut(1, data);
})
}
async function createStickerZPL() {
const options = {
qrCodeUrl: "/assets/qr-code-example.jpeg",
agencyLogoUrl: "/assets/agenzia-entrate-logo-mono.png",
companyName: "Vandelay Industries",
machineModel: "Model XL-123",
masterSystemId: "master-system-id",
extMasterSystemId: "ext-msid",
};
const zpl = await createInternalStickerZPL("sticker-70x35", options);
document.querySelector(`textarea[name="zpl"]`).value = zpl;
}
(async function () {
createHooks();
await createStickerZPL();
})();
</script>
</html> </html>

View File

@ -0,0 +1,17 @@
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.checkStringArgs=function(e,g,k){if(null==e)throw new TypeError("The 'this' value for String.prototype."+k+" must not be null or undefined");if(g instanceof RegExp)throw new TypeError("First argument to String.prototype."+k+" must not be a regular expression");return e+""};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;
$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(e,g,k){e!=Array.prototype&&e!=Object.prototype&&(e[g]=k.value)};$jscomp.getGlobal=function(e){return"undefined"!=typeof window&&window===e?e:"undefined"!=typeof global&&null!=global?global:e};$jscomp.global=$jscomp.getGlobal(this);
$jscomp.polyfill=function(e,g,k,h){if(g){k=$jscomp.global;e=e.split(".");for(h=0;h<e.length-1;h++){var f=e[h];f in k||(k[f]={});k=k[f]}e=e[e.length-1];h=k[e];g=g(h);g!=h&&null!=g&&$jscomp.defineProperty(k,e,{configurable:!0,writable:!0,value:g})}};
$jscomp.polyfill("String.prototype.startsWith",function(e){return e?e:function(e,k){var h=$jscomp.checkStringArgs(this,e,"startsWith");e+="";var f=h.length,g=e.length;k=Math.max(0,Math.min(k|0,h.length));for(var q=0;q<g&&k<f;)if(h[k++]!=e[q++])return!1;return q>=g}},"es6","es3");
var BrowserPrint=function(){function e(a,c){var b=new XMLHttpRequest;"withCredentials"in b?b.open(a,c,!0):"undefined"!=typeof XDomainRequest?(b=new XDomainRequest,b.open(a,c)):b=null;return b}function g(a,c,b,d){void 0!==a&&(void 0===b&&(b=a.sendFinishedCallback),void 0===d&&(d=a.sendErrorCallback));return h(c,b,d)}function k(a,c,b){void 0===c&&(c=f.defaultSuccessCallback);void 0===b&&(b=f.defaultErrorCallback);return h(a,c,b)}function h(a,c,b){a.onreadystatechange=function(){a.readyState===XMLHttpRequest.DONE&&
200===a.status?""===a.responseType?c(a.responseText):c(a.response):a.readyState===XMLHttpRequest.DONE&&(b?b(a.response):console.log("error occurred with no errorCallback set."))};return a}var f={},p={},q=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);navigator.userAgent.indexOf("Trident/7.0");var m="http://127.0.0.1:9100/";q&&"https:"===location.protocol&&(m="https://127.0.0.1:9101/");f.Device=function(a){var c=this;this.name=a.name;this.deviceType=a.deviceType;this.connection=a.connection;
this.uid=a.uid;this.version=2;this.provider=a.provider;this.manufacturer=a.manufacturer;this.readRetries="bluetooth"===this.connection?1:0;this.sendErrorCallback=function(b){};this.sendFinishedCallback=function(b){};this.readErrorCallback=function(b){};this.readFinishedCallback=function(b){};this.send=function(b,a,l){var d=e("POST",m+"write");d&&(g(c,d,a,l),d.send(JSON.stringify({device:{name:this.name,uid:this.uid,connection:this.connection,deviceType:this.deviceType,version:this.version,provider:this.provider,
manufacturer:this.manufacturer},data:b})))};this.sendUrl=function(b,a,l,r){var d=e("POST",m+"write");d&&(g(c,d,a,l),b={device:{name:this.name,uid:this.uid,connection:this.connection,deviceType:this.deviceType,version:this.version,provider:this.provider,manufacturer:this.manufacturer},url:b},null!=r&&void 0!=r&&(b.options=r),d.send(JSON.stringify(b)))};this.sendFile=function(b,a,l){if("string"===typeof b)f.loadFileFromUrl(b,function(b){c.sendFile(b,a,l)},l);else{var d=e("POST",m+"write");if(d){d.responseType=
"text";k(d,a,l);var n=new FormData,g={};g.device=c;n.append("json",JSON.stringify(g));n.append("blob",b);d.send(n)}}};this.convertAndSendFile=function(b,a,l,c){c||(c={});c.action||(c.action="print");f.convert(b,this,c,a,l)};this.read=function(b,a){var d=e("POST",m+"read");d&&(void 0!==c&&(void 0===b&&(b=c.readFinishedCallback),void 0===a&&(a=c.readErrorCallback)),h(d,b,a),d.send(JSON.stringify({device:{name:this.name,uid:this.uid,connection:this.connection,deviceType:this.deviceType,version:this.version,
provider:this.provider,manufacturer:this.manufacturer}})))};this.readUntilStringReceived=function(a,d,c,e,f){f||(f="");void 0===e&&(e=this.readRetries);d=function(b,d,c,l,e){return function(f){if(f&&0!==f.length)l=0;else if(0>=l){d(e);return}f=e+f;""!==a&&-1<f.indexOf(a)?d(f):b.readUntilStringReceived(a,d,c,l-1,f)}}(this,d,c,e,f);this.read(d,c)};this.readAllAvailable=function(a,d,c){this.readUntilStringReceived("",a,d,c)};this.sendThenRead=function(a,d,c){this.send(a,function(a){return function(){a.read(d,
c)}}(this),c)};this.sendThenReadUntilStringReceived=function(a,d,c,e,f){this.send(a,function(a){return function(){a.readUntilStringReceived(d,c,e,f)}}(this),e)};this.sendThenReadAllAvailable=function(a,d,c,e){this.send(a,function(a){return function(){a.readUntilStringReceived("",d,c,e)}}(this),c)}};f.defaultSuccessCallback=function(){};f.defaultErrorCallback=function(){};f.ApplicationConfiguration=function(){this.application={version:"1.2.0.3",build_number:3,api_level:2,platform:"",supportedConversions:{}}};
f.getLocalDevices=function(a,c,b){var d=e("GET",m+"available");d&&(finishedFunction=function(c){response=c;response=JSON.parse(response);for(var d in response)if(response.hasOwnProperty(d)&&response[d].constructor===Array)for(arr=response[d],c=0;c<arr.length;++c)arr[c]=new f.Device(arr[c]);void 0===b?a(response):(response.hasOwnProperty(b)||(response[b]=[]),a(response[b]))},k(d,finishedFunction,c),d.send())};f.getDefaultDevice=function(a,c,b){var d="default";void 0!==a&&null!=a&&(d=d+"?type="+a);
if(a=e("GET",m+d))finishedFunction=function(a){response=a;""===response?c(null):(response=JSON.parse(response),a=new f.Device(response),c(a))},a=k(a,finishedFunction,b),a.send()};f.getApplicationConfiguration=function(a,c){var b=e("GET",m+"config");b&&(finishedFunction=function(b){response=b;""===response?a(null):(response=JSON.parse(response),a(response))},k(b,finishedFunction,c),b.send())};f.readOnInterval=function(a,c,b){if(void 0===b||0===b)b=1;readFunc=function(){a.read(function(d){c(d);p[a]=
setTimeout(readFunc,b)},function(c){p[a]=setTimeout(readFunc,b)})};p[a]=setTimeout(readFunc,b)};f.stopReadOnInterval=function(a){p[a]&&clearTimeout(p[a])};f.bindFieldToReadData=function(a,c,b,d){f.readOnInterval(a,function(a){""!==a&&(c.value=a,void 0!==d&&null!=d&&d())},b)};f.loadFileFromUrl=function(a,c,b){request=e("get",a);console.log("ResponseType: "+request.responseType);request.responseType="blob";k(request,c,b);request.send()};f.convert=function(a,c,b,d,l){if(a)if("string"===typeof a)f.loadFileFromUrl(a,
function(e){b.fromFormat||(b.fromFormat=a.substring(a.length-3));f.convert(e,c,b,d,l)},l);else{var g=e("POST",m+"convert");a.type&&(a.type.startsWith("image/")||a.type.startsWith("application/"))&&(b.fromFormat=a.type.toLowerCase().replace("image/","").replace("application/","").replace("x-ms-",""));if(g){g.responseType="text";var h=void 0;void 0!=d&&(h=function(a){d(JSON.parse(a))});k(g,h,l);h=new FormData;var t={};null!=b&&void 0!==b&&(t.options=b);c&&(t.device=c);h.append("json",JSON.stringify(t));
h.append("blob",a);g.send(h)}}else l?l("Resource not specified"):f.defaultErrorCallback("Resource not specified")};f.scanImage=function(a,c,b,d){if(a)if("string"===typeof a)f.loadFileFromUrl(a,function(e){c.format||(c.format=a.substring(a.length-3));f.scanImage(e,c,b,d)},d);else{var g=e("POST",m+"convert/scan");a.type&&(a.type.startsWith("image/")||a.type.startsWith("application/"))&&(c.format=a.type.toLowerCase().replace("image/","").replace("application/","").replace("x-ms-",""));if(g){g.responseType=
"text";var h=void 0;void 0!=b&&(h=function(a){b(JSON.parse(a))});k(g,h,d);h=new FormData;var n={};n.options=c;h.append("json",JSON.stringify(n));h.append("blob",a);g.send(h)}}else d?d("Resource not specified"):f.defaultErrorCallback("Resource not specified")};return f}();

View File

@ -0,0 +1,26 @@
var $jscomp=$jscomp||{};$jscomp.scope={};$jscomp.ASSUME_ES5=!1;$jscomp.ASSUME_NO_NATIVE_MAP=!1;$jscomp.ASSUME_NO_NATIVE_SET=!1;$jscomp.defineProperty=$jscomp.ASSUME_ES5||"function"==typeof Object.defineProperties?Object.defineProperty:function(e,h,g){e!=Array.prototype&&e!=Object.prototype&&(e[h]=g.value)};$jscomp.getGlobal=function(e){return"undefined"!=typeof window&&window===e?e:"undefined"!=typeof global&&null!=global?global:e};$jscomp.global=$jscomp.getGlobal(this);$jscomp.SYMBOL_PREFIX="jscomp_symbol_";
$jscomp.initSymbol=function(){$jscomp.initSymbol=function(){};$jscomp.global.Symbol||($jscomp.global.Symbol=$jscomp.Symbol)};$jscomp.Symbol=function(){var e=0;return function(h){return $jscomp.SYMBOL_PREFIX+(h||"")+e++}}();
$jscomp.initSymbolIterator=function(){$jscomp.initSymbol();var e=$jscomp.global.Symbol.iterator;e||(e=$jscomp.global.Symbol.iterator=$jscomp.global.Symbol("iterator"));"function"!=typeof Array.prototype[e]&&$jscomp.defineProperty(Array.prototype,e,{configurable:!0,writable:!0,value:function(){return $jscomp.arrayIterator(this)}});$jscomp.initSymbolIterator=function(){}};$jscomp.arrayIterator=function(e){var h=0;return $jscomp.iteratorPrototype(function(){return h<e.length?{done:!1,value:e[h++]}:{done:!0}})};
$jscomp.iteratorPrototype=function(e){$jscomp.initSymbolIterator();e={next:e};e[$jscomp.global.Symbol.iterator]=function(){return this};return e};$jscomp.makeIterator=function(e){$jscomp.initSymbolIterator();var h=e[Symbol.iterator];return h?h.call(e):$jscomp.arrayIterator(e)};
$jscomp.polyfill=function(e,h,g,l){if(h){g=$jscomp.global;e=e.split(".");for(l=0;l<e.length-1;l++){var c=e[l];c in g||(g[c]={});g=g[c]}e=e[e.length-1];l=g[e];h=h(l);h!=l&&null!=h&&$jscomp.defineProperty(g,e,{configurable:!0,writable:!0,value:h})}};$jscomp.FORCE_POLYFILL_PROMISE=!1;
$jscomp.polyfill("Promise",function(e){function h(){this.batch_=null}function g(b){return b instanceof c?b:new c(function(a,f){a(b)})}if(e&&!$jscomp.FORCE_POLYFILL_PROMISE)return e;h.prototype.asyncExecute=function(b){null==this.batch_&&(this.batch_=[],this.asyncExecuteBatch_());this.batch_.push(b);return this};h.prototype.asyncExecuteBatch_=function(){var b=this;this.asyncExecuteFunction(function(){b.executeBatch_()})};var l=$jscomp.global.setTimeout;h.prototype.asyncExecuteFunction=function(b){l(b,
0)};h.prototype.executeBatch_=function(){for(;this.batch_&&this.batch_.length;){var b=this.batch_;this.batch_=[];for(var a=0;a<b.length;++a){var f=b[a];delete b[a];try{f()}catch(k){this.asyncThrow_(k)}}}this.batch_=null};h.prototype.asyncThrow_=function(b){this.asyncExecuteFunction(function(){throw b;})};var c=function(b){this.state_=0;this.result_=void 0;this.onSettledCallbacks_=[];var a=this.createResolveAndReject_();try{b(a.resolve,a.reject)}catch(f){a.reject(f)}};c.prototype.createResolveAndReject_=
function(){function b(b){return function(k){f||(f=!0,b.call(a,k))}}var a=this,f=!1;return{resolve:b(this.resolveTo_),reject:b(this.reject_)}};c.prototype.resolveTo_=function(b){if(b===this)this.reject_(new TypeError("A Promise cannot resolve to itself"));else if(b instanceof c)this.settleSameAsPromise_(b);else{a:switch(typeof b){case "object":var a=null!=b;break a;case "function":a=!0;break a;default:a=!1}a?this.resolveToNonPromiseObj_(b):this.fulfill_(b)}};c.prototype.resolveToNonPromiseObj_=function(b){var a=
void 0;try{a=b.then}catch(f){this.reject_(f);return}"function"==typeof a?this.settleSameAsThenable_(a,b):this.fulfill_(b)};c.prototype.reject_=function(b){this.settle_(2,b)};c.prototype.fulfill_=function(b){this.settle_(1,b)};c.prototype.settle_=function(b,a){if(0!=this.state_)throw Error("Cannot settle("+b+", "+a|"): Promise already settled in state"+this.state_);this.state_=b;this.result_=a;this.executeOnSettledCallbacks_()};c.prototype.executeOnSettledCallbacks_=function(){if(null!=this.onSettledCallbacks_){for(var b=
this.onSettledCallbacks_,a=0;a<b.length;++a)b[a].call(),b[a]=null;this.onSettledCallbacks_=null}};var d=new h;c.prototype.settleSameAsPromise_=function(b){var a=this.createResolveAndReject_();b.callWhenSettled_(a.resolve,a.reject)};c.prototype.settleSameAsThenable_=function(b,a){var f=this.createResolveAndReject_();try{b.call(a,f.resolve,f.reject)}catch(k){f.reject(k)}};c.prototype.then=function(b,a){function f(a,f){return"function"==typeof a?function(f){try{k(a(f))}catch(n){d(n)}}:f}var k,d,e=new c(function(a,
f){k=a;d=f});this.callWhenSettled_(f(b,k),f(a,d));return e};c.prototype.catch=function(b){return this.then(void 0,b)};c.prototype.callWhenSettled_=function(b,a){function f(){switch(k.state_){case 1:b(k.result_);break;case 2:a(k.result_);break;default:throw Error("Unexpected state: "+k.state_);}}var k=this;null==this.onSettledCallbacks_?d.asyncExecute(f):this.onSettledCallbacks_.push(function(){d.asyncExecute(f)})};c.resolve=g;c.reject=function(b){return new c(function(a,f){f(b)})};c.race=function(b){return new c(function(a,
f){for(var k=$jscomp.makeIterator(b),d=k.next();!d.done;d=k.next())g(d.value).callWhenSettled_(a,f)})};c.all=function(b){var a=$jscomp.makeIterator(b),f=a.next();return f.done?g([]):new c(function(b,d){function k(a){return function(f){c[a]=f;e--;0==e&&b(c)}}var c=[],e=0;do c.push(void 0),e++,g(f.value).callWhenSettled_(k(c.length-1),d),f=a.next();while(!f.done)})};return c},"es6","es3");function dbg(e){}
var Zebra=function(){function e(c,d){if(d instanceof g.Printer.Status&&l[c.device.uid]){if(d.offline){if(c.errors++,c.errors<c.errorsForOffline)return}else c.errors=0;var b=l[c.device.uid].status,a=JSON.stringify(b);c.status=d;statusStr=JSON.stringify(d);if(statusStr!==a)c.onchange(b,d)}}function h(c){return 2!==c.charCodeAt(0)||3!==c.charCodeAt(c.length-1)?(dbg("Response did not contain proper control characters"),!1):!0}var g={},l={};setInterval(function(){for(var c in l)l.hasOwnProperty(c)&&(c=
l[c],function(d){d.device.getStatus(function(b){e(d,b)},function(b){e(d,new g.Printer.Status(""))})}(c))},2E3);g.Printer=function(c){BrowserPrint.Device.call(this,c);g.Printer.Status=function(a){this.raw=a;this.isFlagSet=function(a){return"1"===this.raw.charAt(a)};this.offline=!1;a||(a="");a=a.trim();h(a)?(this.offline=!1,this.paperOut=this.isFlagSet(5),this.paused=this.isFlagSet(7),this.headOpen=this.isFlagSet(43),this.ribbonOut=this.isFlagSet(45)):(this.offline=!0,this.ribbonOut=this.headOpen=this.paused=
this.paperOut=!1);this.isPrinterReady=function(){return!(this.paperOut||this.paused||this.headOpen||this.ribbonOut||this.offline)};this.getMessage=function(){return this.isPrinterReady()?"Ready":this.offline?"Offline":this.paperOut?"Paper Out":this.headOpen?"Head Open":this.ribbonOut?"Ribbon Out":this.paused?"Paused":"Ready"}};g.Printer.Info=function(a){if(!a)throw"Invalid Response";this.raw=a;a=a.trim();if(!h(a))throw"Invalid Response";a=a.split(",");this.model=a[0].substring(1);this.firmware=a[1]};
g.Printer.Configuration=function(a){if(!a)throw"Invalid Response";this.raw=a=a.trim();this.settings={};if(!h(a))throw"Invalid Response";a=a.replace(String.fromCharCode(2),"");a=a.replace(String.fromCharCode(3),"");a=a.split("\n");for(var f=0;f<a.length;++f){var b=a[f].trim(),d=b.substring(20);b=b.substring(0,20).trim();this.settings[d]=b}this.darkness=parseFloat(this.settings.DARKNESS);this.printSpeed=parseInt(this.settings["PRINT SPEED"].replace("IPS","").trim());this.printWidth=parseInt(this.settings["PRINT WIDTH"]);
this.labelLength=parseInt(this.settings["LABEL LENGTH"]);this.firmwareVersion=this.settings.FIRMWARE.replace("<-","").trim();this.linkOSVersion=this.settings.hasOwnProperty("LINK-OS VERSION")?this.settings["LINK-OS VERSION"]:"0"};var d=this;this.configuration=void 0;this.device_request_queue=[];this.clearRequestQueue=function(){var a=this.device_request_queue[0];this.device_request_queue=[];a&&a.started&&(this.device_request_queue[0]=a)};this.Request=function(a,f,b,c,e){this.type=a;this.command=f;
this.received=b;this.success=c;this.error=function(a){return function(f){a(f);d.executeNextRequest()}}(e);this.execute=function(){this.started=!0;"info"==this.type||"config"==this.type||"status"==this.type?d.sendThenReadUntilStringReceived(this.command,String.fromCharCode(3),this.received,this.error):d.sendThenReadAllAvailable(this.command,this.received,this.error)}};this.executeNextRequest=function(){d.device_request_queue.shift();d.executeRequest()};this.executeRequest=function(){dbg("Requests in queue: "+
d.device_request_queue.length);0<d.device_request_queue.length&&(dbg("Executing next request..."),d.device_request_queue[0].execute())};this.queueRequest=function(a){dbg("Queueing request "+a.type+": "+d.device_request_queue.length);d.device_request_queue.push(a);1===d.device_request_queue.length&&a.execute()};this.onStatusResponse=function(a){dbg("received status response");var f=void 0;try{f=new g.Printer.Status(a)}catch(k){a=d.device_request_queue[0],a.error(k),d.executeNextRequest()}for(;0<d.device_request_queue.length;)if(a=
d.device_request_queue[0],"status"===a.type)dbg("delivering status..."),a.success(f),d.device_request_queue.shift();else{dbg("delivered to all status requests.");break}d.executeRequest()};this.onResponse=function(a,f){dbg("received info response");var b=d.device_request_queue[0];if(void 0!=f)try{a=new f(a)}catch(m){b.error&&b.error(m);d.executeNextRequest();return}b.success&&b.success(a);d.executeNextRequest()};this.onSGDResponse=function(a){dbg("received sgd response");d.onResponse(a)};this.onInfoResponse=
function(a){dbg("received info response");d.onResponse(a,g.Printer.Info)};this.onConfigurationResponse=function(a){dbg("received config response");try{d.configuration=new g.Printer.Configuration(a)}catch(f){}d.onResponse(a,g.Printer.Configuration)};this.setSGD=function(a,f,b,c){if(!b&&!c)return new Promise(function(b,c){d.setSGD(a,f,b,c)});d.send('! U1 setvar "'+a+'" "'+f+'"\r\n',b,c)};this.getSGD=function(a,b,c){if(!b&&!c)return new Promise(function(b,f){d.getSGD(a,b,f)});b=new this.Request("sgd",
'! U1 getvar "'+a+'"\r\n',this.onSGDResponse,b,c);this.queueRequest(b)};this.setThenGetSGD=function(a,b,c,e){if(!c&&!e)return new Promise(function(f,c){d.setThenGetSGD(a,b,f,c)});this.setSGD(a,b,function(){d.getSGD(a,c,e)},e)};this.getInfo=function(a,b){if(!a&&!b)return new Promise(function(a,b){d.getInfo(a,b)});a=new this.Request("info","~hi\r\n",this.onInfoResponse,a,b);this.queueRequest(a)};this.getConfiguration=function(a,b){if(!a&&!b)return new Promise(function(a,b){d.getConfiguration(a,b)});
a=new this.Request("config","^XA^HH^XZ",this.onConfigurationResponse,a,b);this.queueRequest(a)};this.getStatus=function(a,b){if(!a&&!b)return new Promise(function(a,b){d.getStatus(a,b)});a=new this.Request("status","~hs\r\n",this.onStatusResponse,a,b);d.queueRequest(a)};this.query=function(a,b,c){if(!b&&!c)return new Promise(function(b,c){d.query(a,b,c)});b=new this.Request("",a,this.onResponse,b,c);this.queueRequest(b)};this.isPrinterReady=function(a,b){if(!a&&!b)return new Promise(function(a,b){d.isPrinterReady(a,
b)});this.getStatus().then(function(c){c.isPrinterReady()?a(c.getMessage()):b(c.getMessage())})};this.printImageAsLabel=function(a,c,e,g){if(!e&&!g)return new Promise(function(b,f){d.printImageAsLabel(a,c,b,f)});b().then(function(b){c.fitTo={width:b.printWidth,height:b.labelLength};c.action="print";BrowserPrint.convert(a,d,c,e,g)}).catch(g)};this.getConvertedResource=function(a,c,e,g){if(!e&&!g)return new Promise(function(b,f){d.getConvertedResource(a,c,b,f)});b().then(function(b){c.action="return";
BrowserPrint.convert(a,d,c,e,g)}).catch(g)};this.storeConvertedResource=function(a,c,e,g){if(!e&&!g)return new Promise(function(b,e){d.storeConvertedResource(a,c,b,e)});b().then(function(b){c.action="store";BrowserPrint.convert(a,d,c,e,g)}).catch(g)};var b=function(){return new Promise(function(a,b){if(d.configuration)a(d.configuration);else return d.getConfiguration().then(function(a){d.configuration=a;return d.configuration}).catch(function(a){b(a)})})};this.configTimeout=function(){d.configuration||
d.getConfiguration().then(function(a){return d.configuration=a}).catch(function(){setTimeout(d.configTimeout,1E3)})};this.configTimeout()};g.watch=function(c,d,b){b||(b=2);l[c.uid]={device:c,status:"",onchange:d,errors:0,errorsForOffline:b}};g.stopWatching=function(c){delete l[c.uid]};return g}();

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 50 KiB

View 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>

View File

@ -0,0 +1 @@
~wc

View File

@ -6,7 +6,7 @@ const TEMPLATES = {
^FX Template label 70x35mm ^FX Template label 70x35mm
^FX --------- Agenzia Entrata logo ^FX --------- Agenzia Entrata logo
^FO20,85^GFA,2409,2409,33,,:::::I01LF8hL0806,I07LF8hK08812,I0MFChK0140B8,I0MFChI02384045E,001MFEhI0275802058,001MFEhI0AC6I0C44,001MFEhI0BFC004246,I0NFhH01768I0189,I0NFhI064K0C9,I07MF8hG0ACCK0E7C,J0MF8gI07V01B48K0422,L07JFCgI0FV02DDL0691,L0KFCgI0FW0EBI0800141,L0KFCgI0FV04FAI08001378,K01FI07EhG0FAL0102,K018J0Eh08F2I04I019,M03FE03J0FEF80FC03EFC03FFE03F8007F8P01E2L01414,L03IFEJ01IFC3FF03FFE03FFE07F801FFCP056O056,K01KFCI03IFC7FF83IF03FFE07F801FFEP01C5L01C42,K07LFI07C3F0F87C1F8F03FFE03F800E0FP0398M0648,K0MF800781E1E01E0F078387C0078J0FP03980041I0268,J03MFE00F00E1E01E0E07818F80078003FFP02B003C0E0017A,J07NF00F00E1IFE0E07801EI07800IFP03A08K0813C,J0OF80F00E1IFE0E07803CI07801IFP0D404J0100BC,I01OFC0F00E1IFE0E078078I07803E0FP0F4M0107C,I03OFC0701E1EJ0E0780F0E00780380FP0F8008L028,I03IF800IFE0783E0F00C1E0781F0E00780381FP0F0404001I039,I07FFCI01IF03FFE0IFE3F9FC3FFE0IFC3IFCO05060300200A91,I0IF8J0IF03FFE07FFE7F9FE3FFE0IFE3IFCN0130E0100201011,I0IFK07FF80FFE03FFC3F8FC3FFE0IFC1IFCO0B1B0200201511,001FFEK03FF8038E007CV038Q031BJ020141D,001FFCK01FFCI0EgS07B2M0D73,001FF8L0FFC001EgS03B1001CI0CCA,001QFC0FFEgS03F1003210104A,003QFC0FFCgR011F3J080124A,003QFE0FF8gS05FE01J0129,003QFE07CgT01EC0400180744,003QFEgX0FCM06D4,003QFEgW04ECM0DB,003QFEP0FU038O03ECM0BA8,003BPFEP0FU03CO01F402J01E9,003BPFEP0FU03CP0FAL017E,0033PFEP0FU03CP07AM058,0013PFEP0FU03CP03CM0E4,I03FCR01F3F003IF007E3F007F801IFC007F8I04DL034C,I03FCL07FF8003IFC07IF80FE7F83FFE03IFE01FFEI06F84I08089C,I03FCL03FF8003IFE0JF81JFC3IF03IFE03IF006241CI019804,00C3FFL03FFC003IFE07IF80JFC3IF01IFC07IF80021BCI01208,00C3FF8K03FFCI0FC1F00FJ01FE38I0F803CI07C0FC02605C004BC082,01E3FFEJ03IFCI0780F00FJ01FCK07803CI0F803C0320325IF001A,01E3IFE00JFEEI0700F00FJ01FJ07FF803CI0F003C0E881804870452,1FF1PFEFF00700F00FJ01EI01IF803CI0JFE03F400509818E4,7FF8PFE7F80700F00FJ01EI03IF803CI0JFE00780318604608,7FFCPFE7F80700F00FJ01EI07IF803CI0JFE014BDI26B433,IFE3OFC7FC0700F00FJ01EI0FC07803CI0FL049DA0D81404,JF1OFCFFC0700F00FJ01EI0F007803CI0FL021C0FEF0018,JF8OF1FFC0F00F00F01E01EI0F01F803C078FC01CI081E606FF6,JFE3MFC3FFC1FC1F80IFE0IFC0JFE03IF87IFEI078DC032,7JF0LFC1IF83FE3FC07FFE1IFE07JF03IF83IFEJ013001B8,7JFE1JF81JF83FE7FC03FFC1IFE03JF01IF01IFCJ03FI0F8,1KF8J03JFE01FC3FC01FE01IFC01FE7C007F8007FEL0E,,:::::^FS ^FO{agencyLogoXpos},{agencyLogoYpos}{agencyLogoZPL}^FS
^FX --------- QR Code image ^FX --------- QR Code image
^FO{qrCodeXpos},{qrCodeYpos}{qrCodeZPL}^FS ^FO{qrCodeXpos},{qrCodeYpos}{qrCodeZPL}^FS
@ -40,7 +40,7 @@ const TEMPLATES = {
}, },
pos: { pos: {
x: 20, x: 20,
y: 85, y: 90,
}, },
}, },
qrCode: { qrCode: {
@ -100,6 +100,9 @@ function renderInternalStickerTemplate(templateName, vars) {
qrCodeZPL: vars.qrCodeZPL, qrCodeZPL: vars.qrCodeZPL,
qrCodeXpos: template.qrCode.pos.x, qrCodeXpos: template.qrCode.pos.x,
qrCodeYpos: template.qrCode.pos.y, qrCodeYpos: template.qrCode.pos.y,
agencyLogoZPL: vars.agencyLogoZPL,
agencyLogoXpos: template.agencyLogo.pos.x,
agencyLogoYpos: template.agencyLogo.pos.y,
companyName: vars.companyName, companyName: vars.companyName,
companyNameXpos: template.companyName.pos.x, companyNameXpos: template.companyName.pos.x,
companyNameYpos: template.companyName.pos.y, companyNameYpos: template.companyName.pos.y,
@ -146,34 +149,22 @@ function imageToGRF(imgUrl, options) {
}); });
} }
function createInternalStickerZPL(options) { async function createInternalStickerZPL(templateName, options) {
const templateName = "sticker-70x35";
const template = TEMPLATES[templateName]; const template = TEMPLATES[templateName];
return new Promise((resolve, reject) => { const agencyLogoZPL = await imageToGRF(options.agencyLogoUrl, {
imageToGRF(options.qrCodeUrl, { width: template.agencyLogo.dimensions.width,
height: template.agencyLogo.dimensions.height,
});
const qrCodeZPL = await imageToGRF(options.qrCodeUrl, {
width: template.qrCode.dimensions.width, width: template.qrCode.dimensions.width,
height: template.qrCode.dimensions.height, height: template.qrCode.dimensions.height,
}).then((qrCodeZPL) => { });
const zpl = renderInternalStickerTemplate(templateName, {
return renderInternalStickerTemplate(templateName, {
agencyLogoZPL,
qrCodeZPL, qrCodeZPL,
...options, ...options,
}); });
resolve(zpl);
});
});
} }
const options = {
qrCodeUrl: "/assets/qr-code-example.jpeg",
agencyLogoUrl: "/assets/agenzia-entrate-logo-color.png",
companyName: "Vandelay Industries",
machineModel: "Model XL-123",
masterSystemId: "master-system-id",
extMasterSystemId: "ext-msid",
};
createInternalStickerZPL(options).then((zpl) => {
document.querySelector(`textarea[name="zpl"]`).value = zpl;
});