androiddrew
/
webserial
Archived
1
0
Fork 0
Code Issues 3 Pull Requests Packages Projects Releases Wiki Activity

Better layout and code organization

Browse Source
pull/3/head
Drew Bednar 8 months ago
parent 99222d0524
commit fd641e8655
2 changed files with 76 additions and 68 deletions
Show Stats Download Patch File Download Diff File

15
index.html
Unescape Escape View File

@ -6,8 +6,8 @@
<title>Web Serial Console</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="h-full m-0 p-0 bg-neutral-100">
<div class="flex flex-col h-screen" id="container">
<body class="h-full m-0 p-0 bg-neutral-100 mx-5">
<div class="flex flex-col h-3/4" id="container">
<div class="p-5" id="top-half">
<h1 class="text-3xl font-bold mb-4">Web Serial Console</h1>
<div class="flex flex-col md:flex-row justify-between items-start md:items-center mb-4 space-y-4 md:space-y-0">
@ -15,12 +15,9 @@
<div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
<label for="serial-select" class="text-sm font-medium leading-6 text-gray-900">Port:</label>
<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>
<option value="">Add a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</option>
</select>
<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> -->
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M12 4.5v15m7.5-7.5h-15" />
</svg>
@ -43,18 +40,18 @@
<option value="">921600</option>
</select>
</div>
<button id="connect-button" class="px-4 py-1 bg-red-500 text-white rounded-sm hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Connect</button>
<button id="connect-button" class="px-4 py-1 bg-emerald-500 text-white rounded-sm hover:bg-emerald-600 focus:outline-none focus:ring-2 focus:ring-emerald-500 focus:ring-opacity-50">Connect</button>
</div>
<div class="flex flex-col md:flex-row items-start md:items-center space-y-4 md:space-y-0 md:space-x-4">
<label class="flex items-center space-x-2">
<input type="checkbox" id="autoscroll-checkbox" checked class="form-checkbox">
<span class="text-sm font-medium leading-6 text-gray-900">Autoscroll</span>
</label>
<button id="clear-button" class="px-4 py-1 bg-red-500 text-white rounded-sm hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50">Clear</button>
<button id="clear-button" class="px-4 py-1 bg-amber-500 text-white rounded-sm hover:bg-amber-600 focus:outline-none focus:ring-2 focus:ring-amber-500 focus:ring-opacity-50">Clear</button>
</div>
</div>
</div>
<div class="font-mono rounded-sm bg-white shadow-xl h-[calc(50vh-70px)] overflow-y-auto border border-gray-300 p-2.5 bg-gray-200 mx-5 mb-5" id="scrollable-element"></div>
<div class="font-mono rounded-sm bg-white shadow-xl h-[calc(75vh-70px)] overflow-y-auto border border-gray-300 p-2.5 bg-gray-200 mx-5 mb-5" id="scrollable-element"></div>
</div>
<script src="script.js"></script>
</body>

129
script.js
Unescape Escape View File

@ -1,43 +1,45 @@
const scrollableElement = document.getElementById('scrollable-element');
// Globals
const addDeviceMessage = `Add a device...&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;`
const addPort = document.getElementById('add-port')
const autoscrollCheckbox = document.getElementById('autoscroll-checkbox');
const connectButton = document.getElementById('connect-button')
const baud = document.getElementById('baud');
const clearButton = document.getElementById('clear-button');
const addPort = document.getElementById('add-port')
const connectButton = document.getElementById('connect-button')
const refreshPorts = document.getElementById('refresh-ports');
const scrollableElement = document.getElementById('scrollable-element');
const select = document.getElementById('serial-select');
const baud = document.getElementById('baud');
let autoscroll = true;
let serialPorts = [];
let reader;
// Event Listeners
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';
autoscrollCheckbox.addEventListener('change', (e) => {
autoscroll = e.target.checked;
if (autoscroll) {
scrollToBottom();
}
});
return option;
}
clearButton.addEventListener('click', () => {
while (scrollableElement.firstChild) {
scrollableElement.removeChild(scrollableElement.firstChild);
}
});
connectButton.addEventListener('click', async () => {
const selectedPort = serialPorts[select.selectedIndex]
const baudRate = Math.round(baud.value)
if (selectedPort) {
await connectToSerialPort(selectedPort, baudRate);
}
});
refreshPorts.addEventListener('click', async () => {
while (select.children.length > 1) {
@ -53,18 +55,27 @@ refreshPorts.addEventListener('click', async () => {
});
});
autoscrollCheckbox.addEventListener('change', (e) => {
autoscroll = e.target.checked;
if (autoscroll) {
scrollToBottom();
}
});
// Functions
function buildPortOption(port) {
const option = document.createElement('option');
option.value = port;
clearButton.addEventListener('click', () => {
while (scrollableElement.firstChild) {
scrollableElement.removeChild(scrollableElement.firstChild);
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;
}
function addText(text) {
const newText = document.createElement('p');
@ -80,29 +91,10 @@ function scrollToBottom() {
scrollableElement.scrollTop = scrollableElement.scrollHeight;
}
async function updateSerialSelect(ports) {
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 = 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 Functions
async function connectToSerialPort(port, baud) {
await port.open({ baudRate: baud });
let buffer = ''
const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();
@ -113,7 +105,16 @@ async function connectToSerialPort(port, baud) {
if (done) {
break;
}
addText(value);
buffer += value;
while (buffer.includes('\n')) {
const newlineIndex = buffer.indexOf('\n');
const line = buffer.slice(0, newlineIndex);
buffer = buffer.slice(newlineIndex + 1);
addText(line);
}
}
} catch (error) {
console.error('Error reading data from serial port:', error);
@ -124,7 +125,17 @@ async function connectToSerialPort(port, baud) {
}
}
// Simulate adding text every 2 seconds
// setInterval(addText, 2000);
async function updateSerialSelect(ports) {
if (ports.length < 1) {
const option = document.createElement('option');
option.text = addDeviceMessage;
select.innerHTML = ''
select.appendChild(option)
return;
}
ports.forEach(port => {
const option = buildPortOption(port)
select.appendChild(option);
});
select.removeChild(select.firstElementChild);
}