Temporaly reverted old test variant
This commit is contained in:
@@ -2,6 +2,7 @@
|
|||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
|
||||||
<title>ESP communication</title>
|
<title>ESP communication</title>
|
||||||
<style>
|
<style>
|
||||||
body {
|
body {
|
||||||
|
|||||||
3
front_new/css/chat.css
Normal file
3
front_new/css/chat.css
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
.chat {
|
||||||
|
flex-grow: 1;
|
||||||
|
}
|
||||||
70
front_new/css/chats.css
Normal file
70
front_new/css/chats.css
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
.chats {
|
||||||
|
width: 200pt;
|
||||||
|
border-right: 1px black solid;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 5pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.chatslist {
|
||||||
|
flex-grow: 1;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatslistuser {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 2pt;
|
||||||
|
padding: 5pt;
|
||||||
|
margin-top: 5pt;
|
||||||
|
margin-bottom: 5pt;
|
||||||
|
user-select: none;
|
||||||
|
border-radius: 12pt;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active-chatlistuser {
|
||||||
|
background-color: gainsboro !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatslistuser:hover {
|
||||||
|
background-color: aliceblue;
|
||||||
|
}
|
||||||
|
#chatslistuser:active {
|
||||||
|
background-color: gainsboro;
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatslistuser > #title {
|
||||||
|
font-size: 12pt;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
#chatslistuser > #subtitle {
|
||||||
|
font-size: 10pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.espselect {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
justify-items: center;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.espselect > .title {
|
||||||
|
flex-grow: 1;
|
||||||
|
padding: 5pt;
|
||||||
|
}
|
||||||
|
|
||||||
|
.espselect > .button {
|
||||||
|
background-color: rgba(0, 0, 0, 0);
|
||||||
|
padding: 5pt;
|
||||||
|
border: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.espselect > .button:hover {
|
||||||
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
|
||||||
|
}
|
||||||
|
.espselect > .button:active {
|
||||||
|
background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.4));
|
||||||
|
}
|
||||||
6
front_new/css/elements.css
Normal file
6
front_new/css/elements.css
Normal file
@@ -0,0 +1,6 @@
|
|||||||
|
.card {
|
||||||
|
border: 1px solid black;
|
||||||
|
padding: 5pt;
|
||||||
|
border-radius: 20pt;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
14
front_new/css/main.css
Normal file
14
front_new/css/main.css
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100dvh;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
33
front_new/index.html
Normal file
33
front_new/index.html
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
|
||||||
|
<title>ESP communication</title>
|
||||||
|
<link rel="stylesheet" href="./css/main.css" />
|
||||||
|
<link rel="stylesheet" href="./css/elements.css" />
|
||||||
|
<link rel="stylesheet" href="./css/chats.css" />
|
||||||
|
<link rel="stylesheet" href="./css/chat.css" />
|
||||||
|
|
||||||
|
<script type="module" src="./js/main.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- <div class="chats">
|
||||||
|
<div class="card espselect">
|
||||||
|
<p class="title">123</p>
|
||||||
|
<button class="button">
|
||||||
|
<img src="./media/icons/settings.svg" />
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="chatslist">
|
||||||
|
<div id="chatslistuser">
|
||||||
|
<p id="title">11221</p>
|
||||||
|
<p id="subtitle">1212</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="chat"></div> -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
141
front_new/js/main.js
Normal file
141
front_new/js/main.js
Normal file
@@ -0,0 +1,141 @@
|
|||||||
|
console.log(1);
|
||||||
|
|
||||||
|
const { createRoot } = require("react-dom/client");
|
||||||
|
const React = require("react");
|
||||||
|
const { Test } = require("./js/test.jsx");
|
||||||
|
|
||||||
|
createRoot(document.getElementById("root")).render(
|
||||||
|
<React.StrictMode>
|
||||||
|
<Test />
|
||||||
|
</React.StrictMode>,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 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();
|
||||||
0
front_new/js/storage.js
Normal file
0
front_new/js/storage.js
Normal file
9
front_new/js/test.jsx
Normal file
9
front_new/js/test.jsx
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
const React = require("react");
|
||||||
|
|
||||||
|
const Test = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<h1>Test</h1>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
1
front_new/media/icons/settings.svg
Normal file
1
front_new/media/icons/settings.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings-icon lucide-settings"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"/><circle cx="12" cy="12" r="3"/></svg>
|
||||||
|
After Width: | Height: | Size: 609 B |
@@ -1,130 +0,0 @@
|
|||||||
<!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>
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
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();
|
|
||||||
11
main.js
11
main.js
@@ -6,12 +6,14 @@ const url = require("url");
|
|||||||
// be closed automatically when the JavaScript object is garbage collected.
|
// be closed automatically when the JavaScript object is garbage collected.
|
||||||
let mainWindow;
|
let mainWindow;
|
||||||
|
|
||||||
|
const isDev = process.env.NODE_ENV === "development";
|
||||||
|
|
||||||
function createWindow() {
|
function createWindow() {
|
||||||
// Create the browser window.
|
// Create the browser window.
|
||||||
mainWindow = new BrowserWindow({
|
mainWindow = new BrowserWindow({
|
||||||
width: 800,
|
width: 800,
|
||||||
height: 600,
|
height: 600,
|
||||||
backgroundColor: "#ccc",
|
backgroundColor: "#fff",
|
||||||
autoHideMenuBar: true,
|
autoHideMenuBar: true,
|
||||||
webPreferences: {
|
webPreferences: {
|
||||||
nodeIntegration: true, // to allow require
|
nodeIntegration: true, // to allow require
|
||||||
@@ -20,7 +22,12 @@ function createWindow() {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
// and load the index.html of the app.
|
// if (isDev) {
|
||||||
|
// mainWindow.loadURL("http://localhost:5173");
|
||||||
|
// } else {
|
||||||
|
// mainWindow.loadFile(path.join(__dirname, "dist", "index.html"));
|
||||||
|
// }
|
||||||
|
|
||||||
mainWindow.loadURL(
|
mainWindow.loadURL(
|
||||||
url.format({
|
url.format({
|
||||||
pathname: path.join(__dirname, "front", "index.html"),
|
pathname: path.join(__dirname, "front", "index.html"),
|
||||||
|
|||||||
2148
package-lock.json
generated
2148
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
15
package.json
15
package.json
@@ -4,7 +4,11 @@
|
|||||||
"description": "A minimal Electron application with node serialport",
|
"description": "A minimal Electron application with node serialport",
|
||||||
"main": "main.js",
|
"main": "main.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"start": "electron ."
|
"start": "electron .",
|
||||||
|
"dev:vite": "vite",
|
||||||
|
"dev:electron": "wait-on tcp:5173 && cross-env NODE_ENV=development electron .",
|
||||||
|
"dev": "concurrently -k \"npm run dev:vite\" \"npm run dev:electron\"",
|
||||||
|
"build": "vite build"
|
||||||
},
|
},
|
||||||
"repository": {
|
"repository": {
|
||||||
"type": "git",
|
"type": "git",
|
||||||
@@ -20,9 +24,16 @@
|
|||||||
"author": "GitHub",
|
"author": "GitHub",
|
||||||
"license": "CC0-1.0",
|
"license": "CC0-1.0",
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"electron": "^26.4.0"
|
"@vitejs/plugin-react": "^6.0.2",
|
||||||
|
"concurrently": "^10.0.3",
|
||||||
|
"cross-env": "^10.1.0",
|
||||||
|
"electron": "^42.3.3",
|
||||||
|
"vite": "^8.0.16",
|
||||||
|
"wait-on": "^9.0.10"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"react": "^19.2.7",
|
||||||
|
"react-dom": "^19.2.7",
|
||||||
"serialport": "^10.3.0",
|
"serialport": "^10.3.0",
|
||||||
"tableify": "^1.1.1"
|
"tableify": "^1.1.1"
|
||||||
},
|
},
|
||||||
|
|||||||
17
preload.js
17
preload.js
@@ -1,10 +1,15 @@
|
|||||||
// All of the Node.js APIs are available in the preload process.
|
// All of the Node.js APIs are available in the preload process.
|
||||||
// It has the same sandbox as a Chrome extension.
|
// It has the same sandbox as a Chrome extension.
|
||||||
window.addEventListener('DOMContentLoaded', () => {
|
window.addEventListener("DOMContentLoaded", () => {
|
||||||
for (const versionType of['chrome', 'electron', 'node']) {
|
for (const versionType of ["chrome", "electron", "node"]) {
|
||||||
document.getElementById(`${versionType}-version`).innerText = process.versions[versionType]
|
const elm = document.getElementById(`${versionType}-version`);
|
||||||
|
if (elm) {
|
||||||
|
fist_elm.innerText = process?.versions?.[versionType];
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
document.getElementById('serialport-version').innerText = require('serialport/package').version
|
const second_elm = document.getElementById("serialport-version");
|
||||||
|
if (second_elm) {
|
||||||
})
|
second_elm.innerText = require("serialport/package").version;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|||||||
10
vite.config.js
Normal file
10
vite.config.js
Normal file
@@ -0,0 +1,10 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import react from "@vitejs/plugin-react";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [react()],
|
||||||
|
base: "./",
|
||||||
|
server: {
|
||||||
|
port: 5173,
|
||||||
|
},
|
||||||
|
});
|
||||||
Reference in New Issue
Block a user