diff --git a/README.md b/README.md index df79f9f..b8deb42 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Web Serial Console -Serial console access in the browser! This project uses an [experimental Web Serial API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API) available, as of 08/06/2024, on Chrome 89+, Edge 89+, or Opera 75+. +Serial console access in the browser! This project uses an [experimental Web Serial API](https://wicg.github.io/serial/) available, as of 08/06/2024, on Chrome 89+, Edge 89+, or Opera 75+. This is a work in progress and a learning experiment. Feel free to file an issue if you encounter one. diff --git a/script.js b/script.js index bea8934..16c945e 100644 --- a/script.js +++ b/script.js @@ -35,18 +35,6 @@ clearButton.addEventListener('click', () => { } }); -function onPortConnect(){ - connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); - connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); - connectButton.textContent = 'Disconnect'; -} - -function onPortDisconnect(){ - connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); - connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); - connectButton.textContent = 'Connect'; -} - connectButton.addEventListener('click', async () => { const selectedPort = serialPorts[select.selectedIndex] const baudRate = Math.round(baud.value) @@ -64,6 +52,19 @@ refreshPorts.addEventListener('click', async () => { }); // Functions +function onPortConnect() { + connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); + connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); + connectButton.textContent = 'Disconnect'; +} + +function onPortDisconnect() { + connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); + connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); + connectButton.textContent = 'Connect'; +} + + function buildPortOption(port) { const option = document.createElement('option'); option.value = port; @@ -99,36 +100,14 @@ function scrollToBottom() { scrollableElement.scrollTop = scrollableElement.scrollHeight; } -// function onSerialConnect() { -// console.log("connected to port") -// connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); -// connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); -// connectButton.textContent = 'Disconnect'; -// isPortConnected = port; -// } - // Async Functions async function connectToSerialPort(port, baud) { - port.addEventListener("onconnect", () => { - console.log("connected to port") - connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); - connectButton.classList.add('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); - connectButton.textContent = 'Disconnect'; - isPortConnected = true; - }); - - port.addEventListener('ondisconnect', () => { - console.log("disconnect from port") - connectButton.classList.remove('bg-red-500', 'hover:bg-red-600', 'focus:ring-red-500'); - connectButton.classList.add('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500'); - connectButton.textContent = 'Connect'; - isPortConnected = false; - }); - - console.log("Opening port") await port.open({ baudRate: baud }); onPortConnect() + let buffer = '' + // The TextDecoderStream interface of the Encoding API converts a stream of text in a binary encoding, + // such as UTF-8 etc., to a stream of strings const textDecoder = new TextDecoderStream(); const readableStreamClosed = port.readable.pipeTo(textDecoder.writable); reader = textDecoder.readable.getReader(); @@ -137,7 +116,7 @@ async function connectToSerialPort(port, baud) { try { isPortConnected = true; while (isPortConnected) { - const { value, done } = await reader.read({signal}); + const { value, done } = await reader.read({ signal }); if (done) { break; } @@ -155,23 +134,25 @@ async function connectToSerialPort(port, baud) { } catch (error) { console.error('Error reading data from serial port:', error); } finally { - console.log("Calling abort on read") controller.abort(); - console.log("Calling releaseLock on reader") + reader.releaseLock(); try { - // Gracefully close the stream await textDecoder.readable.cancel(); } catch (error) { console.error("Error encountered in readableStreamClosed:", error); } + + try { + await readableStreamClosed; + } catch (error) { + } + try { - console.log("Trying to close port") await port.close(); } catch (error) { console.error("Error encountered closing port:", error); } - console.log("Disconnected from port") onPortDisconnect() } } @@ -189,5 +170,4 @@ async function updateSerialSelect(ports) { const option = buildPortOption(port) select.appendChild(option); }); - console.log('ports updated') } \ No newline at end of file