159 lines
3.4 KiB
HTML
159 lines
3.4 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<meta charset="UTF-8" />
|
|
<!-- <meta http-equiv="Content-Security-Policy" content="script-src 'self';" /> -->
|
|
<title>ESP communication</title>
|
|
<style>
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: calc(100vh - 10px);
|
|
padding: 5px;
|
|
margin: 0pt;
|
|
}
|
|
p {
|
|
margin: 0pt;
|
|
}
|
|
.connection-management {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 5px;
|
|
margin-bottom: 5px;
|
|
}
|
|
|
|
#clear-button {
|
|
margin-left: auto;
|
|
}
|
|
|
|
#inner-console {
|
|
background-color: #ccc;
|
|
padding: 10px;
|
|
height: 300px;
|
|
overflow: scroll;
|
|
overflow-x: hidden;
|
|
white-space: pre-wrap;
|
|
font-family: monospace;
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid black;
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.actionbuttons {
|
|
display: flex;
|
|
gap: 5px;
|
|
flex-grow: 1
|
|
}
|
|
|
|
#port-select {
|
|
min-width: 0px;
|
|
}
|
|
|
|
#sender {
|
|
min-width: 0px;
|
|
}
|
|
|
|
#console-input {
|
|
min-width: 0px;
|
|
}
|
|
|
|
.p-console {
|
|
width: 100%;
|
|
}
|
|
|
|
.p-log {
|
|
background-color: yellow;
|
|
}
|
|
|
|
.p-incoming {
|
|
background-color: lightgreen;
|
|
}
|
|
|
|
.p-outgoing {
|
|
background-color: lightblue;
|
|
}
|
|
|
|
.p-error {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
|
|
.console-management {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-top: 5px;
|
|
gap: 5px;
|
|
}
|
|
|
|
.console-management > div {
|
|
display: flex;
|
|
gap: 5px;
|
|
}
|
|
|
|
.console-management > div > input[type="text"] {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
#open-button {
|
|
background-color: green;
|
|
color: white;
|
|
}
|
|
#close-button {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
#clear-button {
|
|
background-color: red;
|
|
color: white;
|
|
}
|
|
#send-button {
|
|
background-color: blue;
|
|
color: white;
|
|
}
|
|
@media screen and (max-width: 380px) {
|
|
.connection-management {
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="connection-management">
|
|
<select id="port-select">
|
|
<option value="" disabled>No ports found</option>
|
|
</select>
|
|
<div class="actionbuttons">
|
|
<button id="rescan" onclick="listSerialPorts()">Rescan</button>
|
|
<button id="open-button" onclick="openConnection()">Open</button>
|
|
<button
|
|
id="close-button"
|
|
style="display: none"
|
|
onclick="closeConnection()"
|
|
>
|
|
Close
|
|
</button>
|
|
<div style="flex-grow: 1;"></div>
|
|
<button id="clear-button" onclick="clearConsole()">Clear console</button>
|
|
</div>
|
|
</div>
|
|
<div id="inner-console"></div>
|
|
<div class="console-management">
|
|
<div>
|
|
<input type="checkbox" id="message-mode" onchange="toogleMsgMode()" />
|
|
<p>Message mode</p>
|
|
<input type="text" id="sender" placeholder="Sender" disabled />
|
|
<div style="flex-grow: 1"></div>
|
|
</div>
|
|
<div style="flex-grow: 1">
|
|
<p>></p>
|
|
<input type="text" id="console-input" />
|
|
<button id="send-button" onclick="sendToSerial()">Send</button>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
|
|
<script src="./renderer.js"></script>
|
|
</html>
|