bubble/avr128da48_web-serial-example
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/avr128da48_web-serial-example.git synced 2026-10-11 18:28:58 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactored

Browse Source
This commit is contained in:
Sergey Yarkov 2022-09-21 20:41:42 +03:00
parent 24660ad531
commit 3dd1a98f1b
3 changed files with 12 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
web/app.js
View File

@ -26,8 +26,8 @@ class Application {
this.$terminalForm = this.$root.querySelector('#terminal_form');
this.$serialLog = this.$root.querySelector('#serial_log');
this.$status = this.$root.querySelector('#status');
this.$vendorId = this.$root.querySelector('#vendorId');
this.$productId = this.$root.querySelector('#productId');
this.$vendorId = this.$root.querySelector('#vendor_id');
this.$productId = this.$root.querySelector('#product_id');
this.#setupEvents();
}
@ -51,6 +51,7 @@ class Application {
const info = await this.serialPortHandler.open();
console.log('Port opened: ', info);
this.$terminalForm.elements.input.removeAttribute('disabled');
this.$terminalForm.elements.send.removeAttribute('disabled');
this.$vendorId.textContent = '0x' + info.usbVendorId.toString(16);
this.$productId.textContent = '0x' + info.usbProductId.toString(16);
this.$status.textContent = 'CONNECTED';
@ -66,6 +67,8 @@ class Application {
async #disconnectHandler() {
if (!this.serialPortHandler.isOpened) return;
await this.serialPortHandler.close();
this.$terminalForm.elements.input.setAttribute('disabled', 'true');
this.$terminalForm.elements.send.setAttribute('disabled', 'true');
this.$vendorId.textContent = '-';
this.$productId.textContent = '-';
this.$status.textContent = 'NOT CONNECTED';

18
web/index.html
View File

@ -15,16 +15,10 @@
<button id="disconnect">Disconnect</button>
</div>
<form id="terminal_form" action="#">
<label for="terminal">Enter command name:</label><br />
<div class="flex">
<input
id="input"
name="input"
placeholder="e.g led_toggle"
type="text"
disabled
/>
<button type="submit">Send</button>
<label for="input">Enter command name:</label><br />
<div>
<input id="input" name="input" placeholder="e.g led_toggle" type="text" disabled />
<button name="send" type="submit" disabled>Send</button>
</div>
</form>
<textarea id="serial_log" placeholder=">" readonly></textarea>
@ -33,8 +27,8 @@
<p id="status">not connected</p>
</div>
<div>
<span>vendorId: <span id="vendorId">-</span>&nbsp;|</span>
<span>deviceId: <span id="productId">-</span></span>
<span>vendorId: <span id="vendor_id">-</span>&nbsp;|</span>
<span>deviceId: <span id="product_id">-</span></span>
</div>
</div>
</div>

2
web/style.css
View File

@ -69,7 +69,7 @@ button {
padding: 5px 15px;
}
button:hover {
button:hover:not(:disabled) {
border: 1px solid var(--border-color-hover);
}