From 970748e9749da54225c5a1b08a65fef992c5aa6b Mon Sep 17 00:00:00 2001 From: Drew Bednar Date: Wed, 7 Aug 2024 11:39:20 -0400 Subject: [PATCH] Initial Commit --- README.md | 8 +++++ basic/index.html | 16 ++++++++++ basic/main.py | 8 +++++ basic/script.js | 37 ++++++++++++++++++++++ basic/script_v1.js | 35 +++++++++++++++++++++ basic/style.css | 22 +++++++++++++ index.html | 61 ++++++++++++++++++++++++++++++++++++ old/v1/old/index.html | 72 +++++++++++++++++++++++++++++++++++++++++++ old/v1/old/style.css | 0 script.js | 68 ++++++++++++++++++++++++++++++++++++++++ 10 files changed, 327 insertions(+) create mode 100644 basic/index.html create mode 100644 basic/main.py create mode 100644 basic/script.js create mode 100644 basic/script_v1.js create mode 100644 basic/style.css create mode 100644 index.html create mode 100644 old/v1/old/index.html create mode 100644 old/v1/old/style.css create mode 100644 script.js diff --git a/README.md b/README.md index e69de29..a2e0c7c 100644 --- a/README.md +++ b/README.md @@ -0,0 +1,8 @@ +# Web Serial Console + +Serial console access in the browser! This project uses and [experimental API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API) available as of 08/06/2024 only on Chrome 89, Edge 89, or Opera 75. + +## Building + + +## Use \ No newline at end of file diff --git a/basic/index.html b/basic/index.html new file mode 100644 index 0000000..a9e9d07 --- /dev/null +++ b/basic/index.html @@ -0,0 +1,16 @@ + + + + + + Web Serial API Example + + + +

Web Serial Connect

+ + 

+
+    
+
+
diff --git a/basic/main.py b/basic/main.py
new file mode 100644
index 0000000..d6e115e
--- /dev/null
+++ b/basic/main.py
@@ -0,0 +1,8 @@
+import time
+
+i = 0
+
+while True:
+    print("Iteration: {}".format(i))
+    i+=1
+    time.sleep(1)
\ No newline at end of file
diff --git a/basic/script.js b/basic/script.js
new file mode 100644
index 0000000..437d472
--- /dev/null
+++ b/basic/script.js
@@ -0,0 +1,37 @@
+document.getElementById('connect').addEventListener('click', async () => {
+    // Feature detection
+    if ('serial' in navigator) {
+        try {
+            // Request a port and open a connection
+            const port = await navigator.serial.requestPort();
+            await port.open({ baudRate: 115200 });
+
+            // Create a text decoder to decode the bytes from the serial device
+            const decoder = new TextDecoderStream();
+            const inputDone = port.readable.pipeTo(decoder.writable);
+            const inputStream = decoder.readable;
+
+            // Read data from the serial device
+            const reader = inputStream.getReader();
+            const outputElement = document.getElementById('output');
+            outputElement.textContent = '';
+
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) {
+                    // Allow the serial port to be closed later.
+                    reader.releaseLock();
+                    break;
+                }
+                // Print the output to the webpage
+                outputElement.textContent += value;
+                // Scroll to the bottom as new data comes in
+                outputElement.scrollTop = outputElement.scrollHeight;
+            }
+        } catch (error) {
+            console.error('There was an error:', error);
+        }
+    } else {
+        console.log('Web Serial API not supported in this browser.');
+    }
+});
diff --git a/basic/script_v1.js b/basic/script_v1.js
new file mode 100644
index 0000000..e6dbcb5
--- /dev/null
+++ b/basic/script_v1.js
@@ -0,0 +1,35 @@
+document.getElementById('connect').addEventListener('click', async () => {
+    // Feature detection
+    if ('serial' in navigator) {
+        try {
+            // Request a port and open a connection
+            const port = await navigator.serial.requestPort();
+            await port.open({ baudRate: 115200 });
+
+            // Create a text decoder to decode the bytes from the serial device
+            const decoder = new TextDecoderStream();
+            const inputDone = port.readable.pipeTo(decoder.writable);
+            const inputStream = decoder.readable;
+
+            // Read data from the serial device
+            const reader = inputStream.getReader();
+            const outputElement = document.getElementById('output');
+            outputElement.textContent = '';
+
+            while (true) {
+                const { value, done } = await reader.read();
+                if (done) {
+                    // Allow the serial port to be closed later.
+                    reader.releaseLock();
+                    break;
+                }
+                // Print the output to the webpage
+                outputElement.textContent += value;
+            }
+        } catch (error) {
+            console.error('There was an error:', error);
+        }
+    } else {
+        console.log('Web Serial API not supported in this browser.');
+    }
+});
diff --git a/basic/style.css b/basic/style.css
new file mode 100644
index 0000000..e27818c
--- /dev/null
+++ b/basic/style.css
@@ -0,0 +1,22 @@
+body {
+    margin: 0;
+    font-family: Arial, sans-serif;
+}
+
+button {
+    margin: 20px;
+}
+
+#output {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 33vh; /* Top third of the screen */
+    background-color: #333; /* Slightly darker background */
+    color: #fff;
+    overflow-y: scroll;
+    padding: 10px;
+    box-sizing: border-box;
+    border-bottom: 1px solid #555;
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..18a3c34
--- /dev/null
+++ b/index.html
@@ -0,0 +1,61 @@
+
+
+  
+    
+    
+    Web Serial Console
+    
+  
+  
+    

+      

+        
Web Serial Console

+        

+          

+            

+              
+              
+              
+              
+              
+              
+            

+            
+          

+          

+            
+            
+          

+        

+      

+      

+    

+    
+  
+
diff --git a/old/v1/old/index.html b/old/v1/old/index.html
new file mode 100644
index 0000000..c532597
--- /dev/null
+++ b/old/v1/old/index.html
@@ -0,0 +1,72 @@
+
+
+
+    
+    
+    Scrollable Element with Autoscroll
+    
+
+
+    

+        

+            
Scrollable Element Demo

+            
+        

+        

+    

+
+    
+
+
\ No newline at end of file
diff --git a/old/v1/old/style.css b/old/v1/old/style.css
new file mode 100644
index 0000000..e69de29
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..294dba0
--- /dev/null
+++ b/script.js
@@ -0,0 +1,68 @@
+
+const scrollableElement = document.getElementById('scrollable-element');
+const autoscrollCheckbox = document.getElementById('autoscroll-checkbox');
+const clearButton = document.getElementById('clear-button');
+const refreshPorts = document.getElementById('refresh-ports');
+const select = document.getElementById('serial-select');
+let autoscroll = true;
+
+
+refreshPorts.addEventListener('click', async () => {
+    while (select.children.length > 1) {
+        select.removeChild(select.lastChild);
+    }
+
+    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}`;
+        select.appendChild(option);
+    });
+});
+
+autoscrollCheckbox.addEventListener('change', (e) => {
+    autoscroll = e.target.checked;
+    if (autoscroll) {
+        scrollToBottom();
+    }
+});
+
+clearButton.addEventListener('click', () => {
+    while (scrollableElement.firstChild) {
+        scrollableElement.removeChild(scrollableElement.firstChild);
+    }
+});
+
+function addText() {
+    const newText = document.createElement('p');
+    newText.textContent = `New text added at ${new Date().toLocaleTimeString()}`;
+    scrollableElement.appendChild(newText);
+
+    if (autoscroll) {
+        scrollToBottom();
+    }
+}
+
+function scrollToBottom() {
+    scrollableElement.scrollTop = scrollableElement.scrollHeight;
+}
+
+
+async function updateSerialSelect(ports) {
+    const select = document.getElementById('serial-select');
+    // Clear existing options
+    select.innerHTML = '';
+    
+    ports.forEach(port => {
+        const option = document.createElement('option');
+        option.value = port;
+        option.text = `Serial device`;
+        select.appendChild(option);
+    });
+}
+
+// Simulate adding text every 2 seconds
+setInterval(addText, 2000);