Show a clear error on OS driver errors (#70)

Add more handlers for catching when the OS denies access to the driver.
This is very likely to be one of the first issues anyone encounters and
it's more likely they'll see a clear error message with next steps.

Author: Cellivar

demo/advanced.html

@@ -75,8 +75,8 @@
 
         // We'll drop these into the Window object so we can play with them in
         // the DevTools console if we want to.
-        window.WebLabel = WebLabel;
-        window.WebDevices = WebDevices;
+        (window as any).WebLabel = WebLabel;
+        (window as any).WebDevices = WebDevices;
 
         // For this demo we're going to make use of the USB printer manager
         // so it can take care of concerns like the USB connect and disconnect events.
@@ -104,11 +104,50 @@
         // We'll wire up some basic event listeners to the printer manager.
         // First, a button to prompt a user to add a printer.
         const addPrinterBtn = document.getElementById('addprinter')!;
-        addPrinterBtn.addEventListener('click', async () => printerMgr.promptForNewDevice());
+        addPrinterBtn.addEventListener('click', async () => {
+          try {
+            await printerMgr.promptForNewDevice();
+          } catch (e) {
+            if (e instanceof WebDevices.DriverAccessDeniedError) {
+              deviceErrorAlert();
+            } else {
+              throw e;
+            }
+          }
+        });
+
+        // And a function to call if it fails
+        function deviceErrorAlert() {
+          // This happens when the operating system didn't let Chrome connect.
+          // Usually either another tab is open talking to the device, or the driver
+          // is already loaded by another application.
+          showAlert(
+            'danger',
+            'alert-printer-comm-error',
+            `Operating system denied device access`,
+            `<p>Chrome wasn't allowed to connect to a device. This usually happens because:
+            <ul>
+            <li>Another browser tab is already connected to that device.
+            <li>You're on Windows and <a href="https://cellivar.github.io/WebZLP/docs/windows_driver">need to replace the driver for the device</a>.
+            <li>Another application loaded a driver to talk to the device.
+            </ul>
+            Fix the issue and re-connect to the device.</p>`
+          );
+        }
 
         // Next a button to manually refresh all printers, just in case.
         const refreshPrinterBtn = document.getElementById('refreshPrinters')!;
-        refreshPrinterBtn.addEventListener('click', async () => printerMgr.forceReconnect());
+        refreshPrinterBtn.addEventListener('click', async () => {
+          try {
+            await printerMgr.forceReconnect();
+          } catch (e) {
+            if (e instanceof WebDevices.DriverAccessDeniedError) {
+              deviceErrorAlert();
+            } else {
+              throw e;
+            }
+          }
+        });
 
         // Next we wire up some events on the UsbDeviceManager itself.
         printerMgr.addEventListener('connectedDevice', ({ detail }) => {
@@ -174,13 +213,13 @@
           // commands or configs specific to their printers.
           // Sensors
           modalZplRibbonTHold: HTMLInputElement
-          modalZplRibbonGain  : HTMLInputElement
+          modalZplRibbonGain : HTMLInputElement
           modalZplWebTHold   : HTMLInputElement
           modalZplWebMedia   : HTMLInputElement
-          modalZplTransGain     : HTMLInputElement
+          modalZplTransGain  : HTMLInputElement
           modalZplMarkTHold  : HTMLInputElement
           modalZplMarkMedia  : HTMLInputElement
-          modalZplMarkGain    : HTMLInputElement
+          modalZplMarkGain   : HTMLInputElement
 
           modalZplWithSensorGraph: HTMLInputElement
 
@@ -748,33 +787,17 @@ <h4>${titleHtml}</h4>
         // and let it take over the UI.
         await app.init();
 
-        // Make the TypeScript type system happy by adding a property to the Window object.
-        declare global {
-          interface Window { label_app: BasicLabelDesignerApp }
-        }
         // Now we can access our printer in the dev console if we want to mess with it!
-        window.label_app = app;
+        (window as any).label_app = app;
 
         // Now we'll fire the reconnect since our UI is wired up.
         try {
           await printerMgr.forceReconnect();
         } catch (e) {
           if (e instanceof WebDevices.DriverAccessDeniedError) {
-            // This happens when the operating system didn't let Chrome connect.
-            // Usually either another tab is open talking to the device, or the driver
-            // is already loaded by another application.
-            showAlert(
-              'danger',
-              'alert-printer-comm-error',
-              `Operating system refused device access`,
-              `<p>This usually happens for one of these reasons:
-              <ul>
-              <li>Another browser tab is already connected.
-              <li>Another application loaded a driver to talk to the device.
-              <li>You're on Windows and need to replace the driver.
-              </ul>
-              Fix the issue and re-connect to the device.</p>`
-            );
+            deviceErrorAlert();
+          } else {
+            throw e;
           }
         }
 

demo/editor.html

@@ -72,9 +72,9 @@
       // Internally it makes use of an HTML canvas, and thus it's easy to plug into
       // WebZLP for label designing!
       // Import the canvas editor lib and create a canvas to use for printing.
-      import * as Editor from 'fabricjs-label-editor'
       import * as WebLabel from 'webzlp';
       import * as WebDevices from 'web-device-mux';
+      import * as Editor from 'fabricjs-label-editor'
       (window as any).FabricEditor = Editor;
       (window as any).WebLabel = WebLabel;
       (window as any).WebDevices = WebDevices;
@@ -85,9 +85,6 @@
       // For this demo we're going to make use of the USB printer manager
       // so it can take care of concerns like the USB connect and disconnect events.
 
-      // For this demo we're going to make use of the USB printer manager
-      // so it can take care of concerns like the USB connect and disconnect events.
-
       // We'll set a type alias so it's easier to read our code
       type PrinterManager = WebDevices.UsbDeviceManager<WebLabel.LabelPrinterUsb>;
       // Then we'll construct one to use
@@ -111,11 +108,50 @@
       // We'll wire up some basic event listeners to the printer manager.
       // First, a button to prompt a user to add a printer.
       const addPrinterBtn = document.getElementById('addprinter')!;
-      addPrinterBtn.addEventListener('click', async () => printerMgr.promptForNewDevice());
+      addPrinterBtn.addEventListener('click', async () => {
+        try {
+          await printerMgr.promptForNewDevice();
+        } catch (e) {
+          if (e instanceof WebDevices.DriverAccessDeniedError) {
+            deviceErrorAlert();
+          } else {
+            throw e;
+          }
+        }
+      });
+
+      // And a function to call if it fails
+      function deviceErrorAlert() {
+        // This happens when the operating system didn't let Chrome connect.
+        // Usually either another tab is open talking to the device, or the driver
+        // is already loaded by another application.
+        showAlert(
+          'danger',
+          'alert-printer-comm-error',
+          `Operating system denied device access`,
+          `<p>Chrome wasn't allowed to connect to a device. This usually happens because:
+          <ul>
+          <li>Another browser tab is already connected to that device.
+          <li>You're on Windows and <a href="https://cellivar.github.io/WebZLP/docs/windows_driver">need to replace the driver for the device</a>.
+          <li>Another application loaded a driver to talk to the device.
+          </ul>
+          Fix the issue and re-connect to the device.</p>`
+        );
+      }
 
       // Next a button to manually refresh all printers, just in case.
       const refreshPrinterBtn = document.getElementById('refreshPrinters')!;
-      refreshPrinterBtn.addEventListener('click', async () => printerMgr.forceReconnect());
+      refreshPrinterBtn.addEventListener('click', async () => {
+        try {
+          await printerMgr.forceReconnect();
+        } catch (e) {
+          if (e instanceof WebDevices.DriverAccessDeniedError) {
+            deviceErrorAlert();
+          } else {
+            throw e;
+          }
+        }
+      });
 
       // Get some bookkeeping out of the way..
       // First we create an interface to describe our settings form.
@@ -156,7 +192,6 @@
         modalZplHeadCloseAction: HTMLSelectElement
       }
 
-
       // A function to find and hide any alerts for a given alert ID.
       function hideAlerts(alertId: string) {
         const existingAlerts = document.getElementById('printerAlertSpace')?.querySelectorAll(`.${alertId}`) ?? [];
@@ -685,21 +720,9 @@ <h4>${titleHtml}</h4>
         await printerMgr.forceReconnect();
       } catch (e) {
         if (e instanceof WebDevices.DriverAccessDeniedError) {
-          // This happens when the operating system didn't let Chrome connect.
-          // Usually either another tab is open talking to the device, or the driver
-          // is already loaded by another application.
-          showAlert(
-            'danger',
-            'alert-printer-comm-error',
-            `Operating system refused device access`,
-            `<p>This usually happens for one of these reasons:
-            <ul>
-            <li>Another browser tab is already connected.
-            <li>Another application loaded a driver to talk to the device.
-            <li>You're on Windows and need to replace the driver.
-            </ul>
-            Fix the issue and re-connect to the device.</p>`
-          );
+          deviceErrorAlert();
+        } else {
+          throw e;
         }
       }