Intis/zebra-sticker-print
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Intis:4d6cd6406483990607a90609219ca9f54d073194
Branches Tags
Intis:main
...
compare: Intis:main
Branches Tags
Intis:main

4 Commits
4d6cd64064 ... main

Author SHA1 Message Date
Eden Kirin
ce10a8faa0 Add comments and createInternalStickerZPL() param 2023-08-18 11:22:44 +02:00
Eden Kirin
71506f60c2 Polish 2023-08-02 12:25:58 +02:00
Eden Kirin
de6410abb4 Update readme 2023-08-02 12:00:31 +02:00
Eden Kirin
9d8f2df0a9 Tweaks and update readme 2023-08-02 11:55:06 +02:00
3 changed files with 64 additions and 20 deletions
Expand all files Collapse all files

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)

39
index.html
View File

@ -12,44 +12,46 @@
<script type="text/javascript" src="lib/zpl-image/pako.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>
<!-- js libs for BrowserPrinter only - not used for Web API printing -->
<script src="./browser-print-api.js"></script>
<!-- end -->
</head>
<body>
<div class="container">
<h1>Sticker Print Demo</h1>
<h1 class="mb-4">Sticker Print Demo</h1>
<div class="row">
<div class="col">
<p>
<button class="btn btn-success render">
Render ZPL
</button>
</p>
<button class="btn btn-success browser-printer-print">
<div class="d-flex align-items-end">
<div class="w-100">
<label class="form-label">Rendered ZPL:</label>
<textarea class="form-control" name="zpl" rows="10"></textarea>
</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 class="col">
<div class="mb-3">
<label class="form-label">Rendered ZPL:</label>
<textarea class="form-control" name="zpl" rows="10"></textarea>
</div>
</div>
</div>
</div>
</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) {
@ -64,8 +66,9 @@
})
});
// print using Web API
document.querySelector("button.web-api-print").addEventListener("click", async (e) => {
let device = await navigator.usb.requestDevice({ filters: [{ vendorId: 0xA5F }] });
const device = await navigator.usb.requestDevice({ filters: [{ vendorId: ZEBRA_VENDOR_ID }] });
await device.open();
await device.selectConfiguration(1);
await device.claimInterface(0);
@ -74,7 +77,7 @@
const encoder = new TextEncoder();
const data = encoder.encode(zpl);
const res = await device.transferOut(1, data);
await device.transferOut(1, data);
})
}
@ -87,7 +90,7 @@
masterSystemId: "master-system-id",
extMasterSystemId: "ext-msid",
};
const zpl = await createInternalStickerZPL(options);
const zpl = await createInternalStickerZPL("sticker-70x35", options);
document.querySelector(`textarea[name="zpl"]`).value = zpl;
}

3
sticker-print.js
View File

@ -149,8 +149,7 @@ function imageToGRF(imgUrl, options) {
});
}
async function createInternalStickerZPL(options) {
const templateName = "sticker-70x35";
async function createInternalStickerZPL(templateName, options) {
const template = TEMPLATES[templateName];
const agencyLogoZPL = await imageToGRF(options.agencyLogoUrl, {