bubble/avr128da48_web-serial-example
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/avr128da48_web-serial-example.git synced 2026-10-11 10:19:02 +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.$terminalForm = this.$root.querySelector('#terminal_form');
this.$serialLog = this.$root.querySelector('#serial_log'); this.$serialLog = this.$root.querySelector('#serial_log');
this.$status = this.$root.querySelector('#status'); this.$status = this.$root.querySelector('#status');
this.$vendorId = this.$root.querySelector('#vendorId'); this.$vendorId = this.$root.querySelector('#vendor_id');
this.$productId = this.$root.querySelector('#productId'); this.$productId = this.$root.querySelector('#product_id');
this.#setupEvents(); this.#setupEvents();
} }
@ -51,6 +51,7 @@ class Application {
const info = await this.serialPortHandler.open(); const info = await this.serialPortHandler.open();
console.log('Port opened: ', info); console.log('Port opened: ', info);
this.$terminalForm.elements.input.removeAttribute('disabled'); this.$terminalForm.elements.input.removeAttribute('disabled');
this.$terminalForm.elements.send.removeAttribute('disabled');
this.$vendorId.textContent = '0x' + info.usbVendorId.toString(16); this.$vendorId.textContent = '0x' + info.usbVendorId.toString(16);
this.$productId.textContent = '0x' + info.usbProductId.toString(16); this.$productId.textContent = '0x' + info.usbProductId.toString(16);
this.$status.textContent = 'CONNECTED'; this.$status.textContent = 'CONNECTED';
@ -66,6 +67,8 @@ class Application {
async #disconnectHandler() { async #disconnectHandler() {
if (!this.serialPortHandler.isOpened) return; if (!this.serialPortHandler.isOpened) return;
await this.serialPortHandler.close(); await this.serialPortHandler.close();
this.$terminalForm.elements.input.setAttribute('disabled', 'true');
this.$terminalForm.elements.send.setAttribute('disabled', 'true');
this.$vendorId.textContent = '-'; this.$vendorId.textContent = '-';
this.$productId.textContent = '-'; this.$productId.textContent = '-';
this.$status.textContent = 'NOT CONNECTED'; this.$status.textContent = 'NOT CONNECTED';

18
web/index.html
View File

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

2
web/style.css
View File

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