Skip to content

Improve WebUSB page interaction flow with connection-aware action states #10

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

Draft
Copilot wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

Improve WebUSB page interaction flow with connection-aware action states #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90f6393
Initial plan
Copilot Mar 19, 2026
93af6dc
Improve web UI action state handling for connection flow
Copilot Mar 19, 2026
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
14 changes: 14 additions & 0 deletions web/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,14 @@ const readButton = document.getElementById("readButton");
const clearLogButton = document.getElementById("clearLogButton");
const switchMassStorageButton = document.getElementById("switchMassStorageButton");

function updateActionStates(isConnected) {
connectButton.disabled = isConnected;
disconnectButton.disabled = !isConnected;
sendButton.disabled = !isConnected;
readButton.disabled = !isConnected;
switchMassStorageButton.disabled = !isConnected;
}

function setStatus(text) {
statusElement.textContent = `Status: ${text}`;
}
Expand Down Expand Up @@ -76,6 +84,7 @@ async function connect() {

await ensureDeviceReady();
setStatus(`Connected to ${device.productName || "Gameband"}`);
updateActionStates(true);
appendLog("Connected.");
}

Expand All @@ -99,6 +108,7 @@ async function disconnect() {
}
device = null;
setStatus("Not connected");
updateActionStates(false);
appendLog("Disconnected.");
}

Expand Down Expand Up @@ -147,6 +157,7 @@ connectButton.addEventListener("click", async () => {
await connect();
} catch (error) {
setStatus("Connection failed");
updateActionStates(false);
appendLog(`Connect error: ${error.message}`);
}
});
Expand Down Expand Up @@ -192,5 +203,8 @@ navigator.usb?.addEventListener("disconnect", (event) => {
appendLog("Device disconnected by system.");
device = null;
setStatus("Not connected");
updateActionStates(false);
}
});

updateActionStates(false);
8 changes: 4 additions & 4 deletions web/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ <h1>OpenGameband Web USB</h1>
<h2>Connection</h2>
<div class="actions">
<button id="connectButton" type="button">Connect</button>
<button id="disconnectButton" type="button">Disconnect</button>
<button id="disconnectButton" type="button" disabled>Disconnect</button>
</div>
<p id="status" class="status">Status: Not connected</p>
</section>
Expand All @@ -24,13 +24,13 @@ <h2>Connection</h2>
<h2>Send Hex Payload</h2>
<label for="payloadInput">Hex bytes (example: <code>01 02 aa ff</code>)</label>
<input id="payloadInput" type="text" placeholder="01 02 aa ff">
<button id="sendButton" type="button">Send</button>
<button id="sendButton" type="button" disabled>Send</button>
</section>

<section class="card">
<h2>Read Response</h2>
<div class="actions">
<button id="readButton" type="button">Read Once</button>
<button id="readButton" type="button" disabled>Read Once</button>
<button id="clearLogButton" type="button">Clear Log</button>
</div>
<pre id="log" class="log" aria-live="polite"></pre>
Expand All @@ -40,7 +40,7 @@ <h2>Read Response</h2>
<h2>USB Mode</h2>
<p>Switch the Gameband USB interface to mass storage mode when available.</p>
<div class="actions">
<button id="switchMassStorageButton" type="button">Switch to Mass Storage</button>
<button id="switchMassStorageButton" type="button" disabled>Switch to Mass Storage</button>
</div>
</section>
</main>
Expand Down
6 changes: 6 additions & 0 deletions web/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,12 @@ button:hover {
background: #4365a8;
}

button:disabled {
opacity: 0.55;
cursor: not-allowed;
background: #2a3b60;
}

input {
width: 100%;
box-sizing: border-box;
Expand Down