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

Basic transmit layout

Browse Source
drew/transmit
Drew Bednar 8 months ago committed by Drew Bednar
parent 0e1a45df13
commit d252cbf63a
4 changed files with 170 additions and 8 deletions
Show Stats Download Patch File Download Diff File

11
src/dev.css
Unescape Escape View File

@ -1,3 +1,12 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@tailwind utilities;
select:focus {
outline: none;
box-shadow: none;
}
input:focus {
outline: none;
box-shadow: none;
}

53
src/index.html
Unescape Escape View File

@ -6,12 +6,6 @@
<title>Web Serial Console</title>
<link rel="icon" type="image/x-icon" href="./favicon.ico">
<link rel="stylesheet" type="text/css" href="./main.css">
<style>
select:focus {
outline: none;
box-shadow: none;
}
</style>
</head>
<body class="min-h-screen m-0 p-0 bg-gradient-to-b from-neutral-100 to-neutral-50 dark:bg-slate-900">
<div class="flex flex-col h-3/4" id="container">
@ -60,7 +54,52 @@
</div>
</div>
</div>
<div class="font-mono rounded-md 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 class="font-mono rounded-md bg-white shadow-xl h-[calc(75vh-70px)] overflow-y-auto border border-gray-300 p-2.5 bg-gray-200 mx-5 mb-6 " id="scrollable-element"></div>
<!-- Transmit OLD-->
<!-- <div class="flex items-center space-x-2 px-5 mb-5">
<input type="text" id="transmit-input" class="font-mono flex-grow font-medium bg-white rounded-md py-1.5 px-3 border-0 border-gray-300 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 sm:text-sm sm:leading-6" placeholder="Enter text to send...">
<button id="transmit-button" class="relative inline-flex items-center gap-x-1.5 px-4 py-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="-ml-0.5 h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h11.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zM2 7.5a.75.75 0 01.75-.75h6.365a.75.75 0 010 1.5H2.75A.75.75 0 012 7.5zM14 7a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02l-1.95-2.1v6.59a.75.75 0 01-1.5 0V9.66l-1.95 2.1a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 0114 7zM2 11.25a.75.75 0 01.75-.75H7A.75.75 0 017 12H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg>
Send</button>
</div> -->
<!-- End Transmit OLD-->
<!-- Experiment -->
<div class="flex items-center space-x-2 px-5 mb-5">
<div contenteditable="true" class="shadow-xl flex-grow rounded-md font-mono py-1.5 px-3 ring-1 ring-inset ring-gray-300 text-gray-900 outline-none focus:ring-2 focus:ring-emerald-500">
<p data-placeholder="Enter text to send..." class="empty:before:content-[attr(data-placeholder)] empty:before:text-gray-500"></p>
</div>
<button id="transmit-button" class="shadow-xl relative inline-flex items-center gap-x-1.5 px-4 py-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="-ml-0.5 h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h11.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zM2 7.5a.75.75 0 01.75-.75h6.365a.75.75 0 010 1.5H2.75A.75.75 0 012 7.5zM14 7a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02l-1.95-2.1v6.59a.75.75 0 01-1.5 0V9.66l-1.95 2.1a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 0114 7zM2 11.25a.75.75 0 01.75-.75H7A.75.75 0 017 12H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg>
Send
</button>
</div>
<!-- <div class="flex items-center space-x-2 px-5 mb-5">
<div aria-label="Enter text to send..." class="flex-grow mt-1 max-h-96 w-full overflow-y-auto break-words">
<div contenteditable="true" translate="no" enterkeyhint="enter" tabindex="0"
class="font-mono flex-grow font-medium bg-white rounded-md py-1.5 px-3 text-gray-900 ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 sm:text-sm sm:leading-6 break-words max-w-[60ch]">
<p data-placeholder="Enter text to send..."
class="m-0 text-gray-900 focus:outline-none empty:before:content-[attr(data-placeholder)] empty:before:text-gray-500">
</p>
</div>
</div>
<button id="transmit-button" class="relative inline-flex items-center gap-x-1.5 px-4 py-1.5 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="-ml-0.5 h-5 w-5 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M2 3.75A.75.75 0 012.75 3h11.5a.75.75 0 010 1.5H2.75A.75.75 0 012 3.75zM2 7.5a.75.75 0 01.75-.75h6.365a.75.75 0 010 1.5H2.75A.75.75 0 012 7.5zM14 7a.75.75 0 01.55.24l3.25 3.5a.75.75 0 11-1.1 1.02l-1.95-2.1v6.59a.75.75 0 01-1.5 0V9.66l-1.95 2.1a.75.75 0 11-1.1-1.02l3.25-3.5A.75.75 0 0114 7zM2 11.25a.75.75 0 01.75-.75H7A.75.75 0 017 12H2.75a.75.75 0 01-.75-.75z" clip-rule="evenodd" />
</svg>
Send
</button>
</div> -->
<!-- End experiment -->
<!-- <div aria-label="Enter text to send..." class="mt-1 max-h-96 w-full overflow-y-auto break-words">
<div contenteditable="true" translate="no" enterkeyhint="enter" tabindex="0" class="break-words max-w-[60ch]">
<p data-placeholder="Enter text to send..." class="text-gray-900 ring-1 ring-gray-300 font-mono ring-1 ring-inset ring-gray-300 focus:ring-2 focus:ring-emerald-500 is-empty is-editor-empty before:!text-text-500 before:whitespace-nowrap"><br class="ProseMirror-trailingBreak"></p>
</div>
</div> -->
</div>
<footer>
<div class="mx-auto max-w-7xl overflow-hidden py-12 px-4 sm:px-6 lg:px-8">

103
src/main.css
Unescape Escape View File

@ -588,6 +588,10 @@ video {
}
}
.relative {
position: relative;
}
.m-0 {
margin: 0px;
}
@ -602,6 +606,10 @@ video {
margin-right: auto;
}
.-ml-0\.5 {
margin-left: -0.125rem;
}
.mb-2 {
margin-bottom: 0.5rem;
}
@ -626,6 +634,10 @@ video {
margin-top: 2rem;
}
.mt-1 {
margin-top: 0.25rem;
}
.block {
display: block;
}
@ -634,6 +646,10 @@ video {
display: flex;
}
.inline-flex {
display: inline-flex;
}
.size-6 {
width: 1.5rem;
height: 1.5rem;
@ -651,6 +667,10 @@ video {
height: calc(75vh - 70px);
}
.max-h-96 {
max-height: 24rem;
}
.min-h-screen {
min-height: 100vh;
}
@ -667,6 +687,14 @@ video {
max-width: 80rem;
}
.max-w-\[60ch\] {
max-width: 60ch;
}
.flex-grow {
flex-grow: 1;
}
.flex-col {
flex-direction: column;
}
@ -687,6 +715,11 @@ video {
justify-content: space-between;
}
.gap-x-1\.5 {
-moz-column-gap: 0.375rem;
column-gap: 0.375rem;
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
margin-right: calc(0.5rem * var(--tw-space-x-reverse));
@ -713,6 +746,10 @@ video {
overflow-y: auto;
}
.break-words {
overflow-wrap: break-word;
}
.rounded-md {
border-radius: 0.375rem;
}
@ -735,6 +772,11 @@ video {
background-color: rgb(245 158 11 / var(--tw-bg-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgb(59 130 246 / var(--tw-bg-opacity));
}
.bg-emerald-500 {
--tw-bg-opacity: 1;
background-color: rgb(16 185 129 / var(--tw-bg-opacity));
@ -755,6 +797,16 @@ video {
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-blue-100 {
--tw-bg-opacity: 1;
background-color: rgb(219 234 254 / var(--tw-bg-opacity));
}
.bg-blue-50 {
--tw-bg-opacity: 1;
background-color: rgb(239 246 255 / var(--tw-bg-opacity));
}
.bg-gradient-to-b {
background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
}
@ -785,11 +837,21 @@ video {
padding: 1.25rem;
}
.px-3 {
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.px-5 {
padding-left: 1.25rem;
padding-right: 1.25rem;
}
.py-1 {
padding-top: 0.25rem;
padding-bottom: 0.25rem;
@ -883,6 +945,11 @@ video {
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline-none {
outline: 2px solid transparent;
outline-offset: 2px;
}
.outline {
outline-style: solid;
}
@ -902,11 +969,42 @@ video {
--tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
}
select:focus {
outline: none;
box-shadow: none;
}
input:focus {
outline: none;
box-shadow: none;
}
.before\:whitespace-nowrap::before {
content: var(--tw-content);
white-space: nowrap;
}
.empty\:before\:text-gray-500:empty::before {
content: var(--tw-content);
--tw-text-opacity: 1;
color: rgb(107 114 128 / var(--tw-text-opacity));
}
.empty\:before\:content-\[attr\(data-placeholder\)\]:empty::before {
--tw-content: attr(data-placeholder);
content: var(--tw-content);
}
.hover\:bg-amber-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(217 119 6 / var(--tw-bg-opacity));
}
.hover\:bg-blue-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(37 99 235 / var(--tw-bg-opacity));
}
.hover\:bg-emerald-600:hover {
--tw-bg-opacity: 1;
background-color: rgb(5 150 105 / var(--tw-bg-opacity));
@ -938,6 +1036,11 @@ video {
--tw-ring-color: rgb(245 158 11 / var(--tw-ring-opacity));
}
.focus\:ring-blue-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(59 130 246 / var(--tw-ring-opacity));
}
.focus\:ring-emerald-500:focus {
--tw-ring-opacity: 1;
--tw-ring-color: rgb(16 185 129 / var(--tw-ring-opacity));

11
src/script.js
Unescape Escape View File

@ -8,12 +8,15 @@ 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 transmitInput = document.querySelector('div[contenteditable="true"]');
const transmitButton = document.getElementById('transmit-button');
let isPortConnected = false;
let controller;
let autoscroll = true;
let serialPorts = [];
let reader;
let writer;
// Event Listeners
addPort.addEventListener('click', async () => {
@ -51,6 +54,14 @@ refreshPorts.addEventListener('click', async () => {
updateSerialSelect(ports)
});
transmitInput.addEventListener('keyup', (event) => {
if (event.key === 'Enter' && !event.shiftKey) {
console.log("Transmitted input");
console.log(event)
transmitInput.innerHTML = ''
}
});
// Functions
function onPortConnect() {
connectButton.classList.remove('bg-emerald-500', 'hover:bg-emerald-600', 'focus:ring-emerald-500');