Skip to content

Show a clear error on OS driver errors #70

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Cellivar merged 1 commit into from
Feb 11, 2025
Merged

Show a clear error on OS driver errors #70

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 50 additions & 27 deletions demo/advanced.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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 }) => {
Expand Down Expand Up @@ -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

Expand Down Expand Up @@ -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;
}
}

Expand Down
67 changes: 45 additions & 22 deletions demo/editor.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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
Expand All @@ -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.
Expand Down Expand Up @@ -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}`) ?? [];
Expand Down Expand Up @@ -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;
}
}

Expand Down
Loading