plugins/serial-term/index.html
<!DOCTYPE html>
<html lang="es" dir="ltr">
<head>
<title>Serial Terminal Icestudio Plugin 0.1</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/tailwind.css" />
<link rel="stylesheet" href="js/xterm/css/xterm.css" />
<style>
body {
padding: 30px;
}
</style>
</head>
<body>
<div id="panel-config" class="panel">
<div
id="device-info"
class="
hidden
bg-white
rounded-t-lg
overflow-hidden
border-b border-t border-l border-r border-gray-400
p-4
"
></div>
<button
class="
m-2
bg-blue-500
hover:bg-blue-700
text-white
font-bold
py-2
px-4
rounded
"
data-action="serial-getdevices"
>
Reload serial devices
</button>
<button
id="bt-connect"
class="
m-2
bg-green-500
hover:bg-green-700
text-white
font-bold
py-2
px-4
rounded
hidden
"
data-action="serial-connect"
>
🔌 Connect
</button>
<div>
<form class="mt-8 w-full max-w-lg">
<p class="mb-8">Connection settings:</p>
<div class="flex flex-wrap -mx-3 mb-2">
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="
block
uppercase
tracking-wide
text-gray-700 text-xs
font-bold
mb-2
"
for="grid-state"
>
bps
</label>
<div class="relative">
<select
class="
block
appearance-none
w-full
bg-gray-200
border border-gray-200
text-gray-700
py-3
px-4
pr-8
rounded
leading-tight
focus:outline-none focus:bg-white focus:border-gray-500
"
id="sconf-bps"
>
<option value="1200">1200</option>
<option value="2400">2400</option>
<option value="4800">4800</option>
<option value="9600">9600</option>
<option value="19200">19200</option>
<option value="38400">38400</option>
<option value="57600">57600</option>
<option value="115200" selected>115200</option>
<option value="-1">Custom</option>
</select>
<div
class="
pointer-events-none
absolute
inset-y-0
right-0
flex
items-center
px-2
text-gray-700
"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="
block
uppercase
tracking-wide
text-gray-700 text-xs
font-bold
mb-2
"
for="sconf-cbps"
>
Custom bps
</label>
<input
class="
appearance-none
block
w-full
bg-gray-200
text-gray-700
border border-gray-200
rounded
py-3
px-4
leading-tight
focus:outline-none focus:bg-white focus:border-gray-500
"
id="sconf-cbps"
type="text"
placeholder="Your custom bps"
/>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="
block
uppercase
tracking-wide
text-gray-700 text-xs
font-bold
mb-2
"
for="sconf-databits"
>
Data bits
</label>
<div class="relative">
<select
class="
block
appearance-none
w-full
bg-gray-200
border border-gray-200
text-gray-700
py-3
px-4
pr-8
rounded
leading-tight
focus:outline-none focus:bg-white focus:border-gray-500
"
id="sconf-databits"
>
<option value="seven">7</option>
<option value="eight" selected>8</option>
</select>
<div
class="
pointer-events-none
absolute
inset-y-0
right-0
flex
items-center
px-2
text-gray-700
"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="
block
uppercase
tracking-wide
text-gray-700 text-xs
font-bold
mb-2
"
for="sconf-paritybit"
>
Parity bit
</label>
<div class="relative">
<select
class="
block
appearance-none
w-full
bg-gray-200
border border-gray-200
text-gray-700
py-3
px-4
pr-8
rounded
leading-tight
focus:outline-none focus:bg-white focus:border-gray-500
"
id="sconf-paritybit"
>
<option value="no" selected>No</option>
<option value="odd">Odd</option>
<option value="even">Even</option>
</select>
<div
class="
pointer-events-none
absolute
inset-y-0
right-0
flex
items-center
px-2
text-gray-700
"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
</div>
<div class="w-full md:w-1/3 px-3 mb-6 md:mb-0">
<label
class="
block
uppercase
tracking-wide
text-gray-700 text-xs
font-bold
mb-2
"
for="sconf-stopbits"
>
Stop bits
</label>
<div class="relative">
<select
class="
block
appearance-none
w-full
bg-gray-200
border border-gray-200
text-gray-700
py-3
px-4
pr-8
rounded
leading-tight
focus:outline-none focus:bg-white focus:border-gray-500
"
id="sconf-stopbits"
>
<option value="one" selected>1</option>
<option value="two">2</option>
</select>
<div
class="
pointer-events-none
absolute
inset-y-0
right-0
flex
items-center
px-2
text-gray-700
"
>
<svg
class="fill-current h-4 w-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path
d="M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z"
/>
</svg>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
<div id="panel-xterm" class="panel hidden">
<div id="info"></div>
<div id="terminal"></div>
<button
id="bt-clean"
class="
m-2
bg-blue-500
hover:bg-blue-700
text-white
font-bold
py-2
px-4
rounded
"
data-action="serial-clean"
>
⎚ Clean
</button>
<button
id="bt-disconnect"
class="
m-2
bg-red-500
hover:bg-red-700
text-white
font-bold
py-2
px-4
rounded
"
data-action="serial-disconnect"
>
🔌 Disconnect
</button>
<span
> <label for="sconf-localecho">Echo local</label
> <input
type="checkbox"
name="sconf-localecho"
id="sconf-localecho"
/></span>
</div>
<script src="js/xterm/lib/xterm.js"></script>
<script src="js/main.js"></script>
</body>
</html>