It works ¯\_(ツ)_/¯

index.html

@@ -17,7 +17,7 @@
               <select id="serial-select" name="serial-select" class="font-medium bg-white block w-full md:w-auto rounded-sm border-0 py-1.5 pl-3 pr-10 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-red-500 sm:text-sm sm:leading-6">
                 <option value="">Select a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
               </select>
-              <button id="add-port-button" class="ml-2 p-1 bg-gray-200 rounded-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
+              <button id="add-port" class="ml-2 p-1 bg-gray-200 rounded-sm hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">
                 <!-- <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="4">
                   <path stroke-linecap="square" stroke-linejoin="round" d="M12 4v16m8-8H4" />
                 </svg> -->

script.js

@@ -1,10 +1,42 @@
 
 const scrollableElement = document.getElementById('scrollable-element');
 const autoscrollCheckbox = document.getElementById('autoscroll-checkbox');
+const connectButton = document.getElementById('connect-button')
 const clearButton = document.getElementById('clear-button');
+const addPort = document.getElementById('add-port')
 const refreshPorts = document.getElementById('refresh-ports');
 const select = document.getElementById('serial-select');
+const baud = document.getElementById('baud');
 let autoscroll = true;
+let serialPorts = [];
+let reader;
+
+addPort.addEventListener('click', async () => {
+    const port = await navigator.serial.requestPort();
+    serialPorts.push(port);
+    updateSerialSelect(serialPorts);
+});
+
+function buildPortOption(port) {
+    const option = document.createElement('option');
+    option.value = port;
+
+    try {
+        const info = port.getInfo();
+        if (info && 'usbVendorId' in info && 'usbProductId' in info) {
+            const { usbVendorId, usbProductId } = info;
+            option.text = `Device ${usbVendorId}:${usbProductId}`;
+        } else {
+            console.error('getInfo() did not return expected properties:', info);
+            option.text = 'Unknown Device';
+        }
+    } catch (error) {
+        console.error('Error retrieving port information:', error);
+        option.text = 'Unknown Device';
+    }
+
+    return option;
+}
 
 
 refreshPorts.addEventListener('click', async () => {
@@ -13,12 +45,10 @@ refreshPorts.addEventListener('click', async () => {
     }
 
     ports = await navigator.serial.getPorts();
+
     console.log(ports)
     ports.forEach(port => {
-        const option = document.createElement('option');
-        option.value = port;
-        const { usbVendorId, usbProductId } = port.getInfo();
-        option.text = `Device ${usbVendorId}:${usbProductId}`;
+        const option = buildPortOption(port)
         select.appendChild(option);
     });
 });
@@ -36,9 +66,9 @@ clearButton.addEventListener('click', () => {
     }
 });
 
-function addText() {
+function addText(text) {
     const newText = document.createElement('p');
-    newText.textContent = `New text added at ${new Date().toLocaleTimeString()}`;
+    newText.textContent = `${new Date().toLocaleTimeString()} ${text}`;
     scrollableElement.appendChild(newText);
 
     if (autoscroll) {
@@ -50,19 +80,51 @@ function scrollToBottom() {
     scrollableElement.scrollTop = scrollableElement.scrollHeight;
 }
 
-
 async function updateSerialSelect(ports) {
-    const select = document.getElementById('serial-select');
-    // Clear existing options
-    select.innerHTML = '<option value="">Select a device...</option>';
-    
+    if (ports > 0) {
+        select.innerHTML = '<option value="">Add a device...</option>';
+    } else {
+        select.innerHTML = '<option value="">Select a device...</option>';
+    }
     ports.forEach(port => {
-        const option = document.createElement('option');
-        option.value = port;
-        option.text = `Serial device`;
+        const option = buildPortOption(port)
         select.appendChild(option);
     });
 }
 
+connectButton.addEventListener('click', async () => {
+    const selectedPort = serialPorts[select.selectedIndex - 1]
+    const baudRate = Math.round(baud.value)
+    if (selectedPort) {
+        await connectToSerialPort(selectedPort, baudRate);
+    }
+});
+
+async function connectToSerialPort(port, baud) {
+    await port.open({ baudRate: baud });
+
+    const textDecoder = new TextDecoderStream();
+    const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
+    const reader = textDecoder.readable.getReader();
+
+    try {
+        while (true) {
+            const { value, done } = await reader.read();
+            if (done) {
+                break;
+            }
+            addText(value);
+        }
+    } catch (error) {
+        console.error('Error reading data from serial port:', error);
+    } finally {
+        reader.releaseLock();
+        await readableStreamClosed.catch(() => { });
+        await port.close();
+    }
+}
+
+
+
 // Simulate adding text every 2 seconds
-setInterval(addText, 2000);
+// setInterval(addText, 2000);