init
This commit is contained in:
130
front_old/index.html
Normal file
130
front_old/index.html
Normal file
@@ -0,0 +1,130 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<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;
|
||||
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;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="connection-management">
|
||||
<select id="port-select">
|
||||
<option value="" disabled>No ports found</option>
|
||||
</select>
|
||||
<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>
|
||||
<button id="clear-button" onclick="clearConsole()">Clear console</button>
|
||||
</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>
|
||||
129
front_old/renderer.js
Normal file
129
front_old/renderer.js
Normal file
@@ -0,0 +1,129 @@
|
||||
const { serialList, serialOpen } = require("./serialapi");
|
||||
|
||||
let serial;
|
||||
|
||||
async function listSerialPorts() {
|
||||
document.getElementById("port-select").innerHTML = "";
|
||||
const ports = await serialList();
|
||||
if (ports.length === 0) {
|
||||
document.getElementById("port-select").innerHTML =
|
||||
"<option value='' disabled>No ports found</option>";
|
||||
}
|
||||
|
||||
document.getElementById("port-select").innerHTML = ports
|
||||
.map(
|
||||
(port) =>
|
||||
`<option value="${port.path}">${port.path} - ${port.manufacturer} ${port.friendlyName}</option>`,
|
||||
)
|
||||
.join("");
|
||||
}
|
||||
|
||||
async function printToConsole(text, variant) {
|
||||
let classes = "p-console";
|
||||
if (variant === "error") classes = " p-error";
|
||||
if (variant === "log") classes = " p-log";
|
||||
if (variant === "incoming") classes = " p-incoming";
|
||||
if (variant === "outgoing") classes = " p-outgoing";
|
||||
document.getElementById("inner-console").innerHTML +=
|
||||
`<p class="${classes}">${text}</p>`;
|
||||
}
|
||||
|
||||
async function printIncoming(text) {
|
||||
if (
|
||||
document
|
||||
.getElementById("inner-console")
|
||||
.lastChild.classList.contains("p-incoming")
|
||||
) {
|
||||
document.getElementById("inner-console").lastChild.innerHTML += text;
|
||||
} else {
|
||||
printToConsole(text, "incoming");
|
||||
}
|
||||
}
|
||||
|
||||
async function clearConsole() {
|
||||
document.getElementById("inner-console").innerHTML = "";
|
||||
document.getElementById("console-input").value = "";
|
||||
}
|
||||
|
||||
async function openConnection() {
|
||||
if (serial) closeConnection();
|
||||
const selector = document.getElementById("port-select");
|
||||
selector.disabled = true;
|
||||
const port = selector.options[selector.selectedIndex].value;
|
||||
console.log(port);
|
||||
serial = await serialOpen(port);
|
||||
|
||||
serial.on("data", (line) => {
|
||||
// const linebrakedData = line.split("\n");
|
||||
// if (linebrakedData.length > 1) {
|
||||
|
||||
// } else {
|
||||
// addToLastLog(data.toString());
|
||||
// }
|
||||
// console.log(line);
|
||||
// printToConsole(line.toString(), "incoming");
|
||||
printIncoming(line.toString());
|
||||
});
|
||||
|
||||
serial.on("error", (err) => {
|
||||
printToConsole(err, "error");
|
||||
closeConnection();
|
||||
});
|
||||
|
||||
serial.on("close", () => {
|
||||
printToConsole("Connection closed", "log");
|
||||
closeConnection();
|
||||
});
|
||||
|
||||
serial.on("open", () => {
|
||||
printToConsole("Connection opened", "log");
|
||||
});
|
||||
|
||||
document.getElementById("open-button").style.display = "none";
|
||||
document.getElementById("close-button").style.display = "block";
|
||||
}
|
||||
|
||||
async function closeConnection() {
|
||||
if (serial) serial.close();
|
||||
serial = null;
|
||||
document.getElementById("open-button").style.display = "block";
|
||||
document.getElementById("close-button").style.display = "none";
|
||||
document.getElementById("port-select").disabled = false;
|
||||
}
|
||||
|
||||
async function sendToSerial() {
|
||||
if (!serial) return;
|
||||
document.getElementById("console-input").disabled = true;
|
||||
const data = document.getElementById("console-input").value;
|
||||
|
||||
if (document.getElementById("message-mode").checked) {
|
||||
document.getElementById("sender").disabled = true;
|
||||
const sender = document.getElementById("sender").value;
|
||||
const sendData = "ST" + sender + "D" + data;
|
||||
serial.write(sendData);
|
||||
printToConsole("> " + sendData, "outgoing");
|
||||
document.getElementById("sender").disabled = false;
|
||||
} else {
|
||||
serial.write(data);
|
||||
printToConsole("> " + data, "outgoing");
|
||||
}
|
||||
|
||||
document.getElementById("console-input").value = "";
|
||||
document.getElementById("console-input").disabled = false;
|
||||
}
|
||||
|
||||
async function toogleMsgMode() {
|
||||
if (document.getElementById("message-mode").checked) {
|
||||
document.getElementById("sender").disabled = false;
|
||||
} else {
|
||||
document.getElementById("sender").disabled = true;
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById("console-input").addEventListener("keyup", (event) => {
|
||||
if (event.key === "Enter") {
|
||||
sendToSerial();
|
||||
}
|
||||
});
|
||||
|
||||
listSerialPorts();
|
||||
16
front_old/serialapi.js
Normal file
16
front_old/serialapi.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const { SerialPort } = require("serialport");
|
||||
|
||||
async function serialList() {
|
||||
const ports = await SerialPort.list();
|
||||
return ports; // path, manufacturer, serialNumber, pnpId, locationId, friendlyName, vendorId, productId
|
||||
}
|
||||
|
||||
async function serialOpen(port) {
|
||||
const serial = new SerialPort({
|
||||
path: port,
|
||||
baudRate: 115200,
|
||||
});
|
||||
return serial;
|
||||
}
|
||||
|
||||
module.exports = { serialList, serialOpen };
|
||||
Reference in New Issue
Block a user