Add comments and createInternalStickerZPL() param

Polish
Update readme
2023-08-18 11:22:44 +02:00 · 2023-08-02 12:25:58 +02:00 · 2023-08-02 12:00:31 +02:00 · 2023-08-02 11:55:06 +02:00 · 2023-08-02 11:04:10 +02:00 · 2023-08-02 11:04:00 +02:00
8 changed files with 257 additions and 26 deletions
--- a/README.md
+++ b/README.md
@ -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)
--- a/browser-print-api.js
+++ b/browser-print-api.js
@ -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);
+            }
+        );
+    });
+}
--- a/index.html
+++ b/index.html
@ -12,52 +12,91 @@
    <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">
-                <button class="btn btn-success render">
-                    Render
+        <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() {
-        document.querySelector("button.render").addEventListener("click", (e) => {
-            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",
-            };
-            createInternalStickerZPL(options).then(zpl => {
-                document.querySelector(`textarea[name="zpl"]`).value = zpl;
-            });
+        // 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);
+        })
    }

-    (function () {
+    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>

--- a/lib/zebra-browser-print/sample/ZebraGray.jpg
+++ b/lib/zebra-browser-print/sample/ZebraGray.jpg
--- a/lib/zebra-browser-print/sample/Zebra_logobox.bmp
+++ b/lib/zebra-browser-print/sample/Zebra_logobox.bmp
--- a/lib/zebra-browser-print/sample/index.html
+++ b/lib/zebra-browser-print/sample/index.html
@ -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>
--- a/lib/zebra-browser-print/sample/wc.zpl
+++ b/lib/zebra-browser-print/sample/wc.zpl
@ -0,0 +1 @@
+~wc
--- a/sticker-print.js
+++ b/sticker-print.js
@ -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, {
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
Eden Kirin	4d6cd64064	Merge branch 'web-api'	2023-08-02 11:04:10 +02:00
Eden Kirin	7be2dc2466	Web API print	2023-08-02 11:04:00 +02:00
Eden Kirin	87b17e3745	Working version	2023-08-01 14:20:00 +02:00
Eden Kirin	75242cda1d	Add BrowserPrint example	2023-08-01 14:19:47 +02:00