Trash old code
Drew Bednar
1 year ago
parent
fd641e8655
commit
c7c28d65e4
@ -1,16 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Web Serial API Example</title>
|
|
||||||
<link rel="stylesheet" href="styles.css">
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h1>Web Serial Connect</h1>
|
|
||||||
<button id="connect">Connect to Serial Device</button>
|
|
||||||
<pre id="output"></pre>
|
|
||||||
|
|
||||||
<script src="script.js"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
@ -1,8 +0,0 @@
|
|||||||
import time
|
|
||||||
|
|
||||||
i = 0
|
|
||||||
|
|
||||||
while True:
|
|
||||||
print("Iteration: {}".format(i))
|
|
||||||
i+=1
|
|
||||||
time.sleep(1)
|
|
||||||
@ -1,37 +0,0 @@
|
|||||||
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.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,35 +0,0 @@
|
|||||||
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.');
|
|
||||||
}
|
|
||||||
});
|
|
||||||
@ -1,22 +0,0 @@
|
|||||||
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;
|
|
||||||
}
|
|
||||||
@ -1,72 +0,0 @@
|
|||||||
<!DOCTYPE html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8">
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
||||||
<title>Scrollable Element with Autoscroll</title>
|
|
||||||
<style>
|
|
||||||
body, html {
|
|
||||||
height: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
#container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
#top-half {
|
|
||||||
flex: 1;
|
|
||||||
padding: 20px;
|
|
||||||
}
|
|
||||||
#scrollable-element {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
padding: 10px;
|
|
||||||
background-color: #e2e8f0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="container">
|
|
||||||
<div id="top-half">
|
|
||||||
<h1>Scrollable Element Demo</h1>
|
|
||||||
<label>
|
|
||||||
<input type="checkbox" id="autoscroll-checkbox" checked> Autoscroll
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<div id="scrollable-element"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
const scrollableElement = document.getElementById('scrollable-element');
|
|
||||||
const autoscrollCheckbox = document.getElementById('autoscroll-checkbox');
|
|
||||||
let autoscroll = true;
|
|
||||||
|
|
||||||
autoscrollCheckbox.addEventListener('change', (e) => {
|
|
||||||
autoscroll = e.target.checked;
|
|
||||||
if (autoscroll) {
|
|
||||||
scrollToBottom();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
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;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Simulate adding text every 2 seconds
|
|
||||||
setInterval(addText, 2000);
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
Reference in New Issue