esp_messenger/pc_app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Temporaly reverted old test variant

Browse Source
This commit is contained in:
AndreyDanyliuk
2026-06-11 07:41:59 +02:00
parent fef960d4ce
commit 246a08b941
18 changed files with 1950 additions and 788 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
front/index.html
View File

@@ -2,6 +2,7 @@
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="Content-Security-Policy" content="script-src 'self';" />
<title>ESP communication</title>
<style>
body {

3
front_new/css/chat.css Normal file
View File

@@ -0,0 +1,3 @@
.chat {
flex-grow: 1;
}

70
front_new/css/chats.css Normal file
View 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
View 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
View 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
View 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
View 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_old/serialapi.js → front_new/js/serialapi.js
View File

0
front_new/js/storage.js Normal file
View File

9
front_new/js/test.jsx Normal file
View 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
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 609 B

130
front_old/index.html
View File

@@ -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>

129
front_old/renderer.js
View File

@@ -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
View File

@@ -6,12 +6,14 @@ const url = require("url");
// be closed automatically when the JavaScript object is garbage collected.
let mainWindow;
const isDev = process.env.NODE_ENV === "development";
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
width: 800,
height: 600,
backgroundColor: "#ccc",
backgroundColor: "#fff",
autoHideMenuBar: true,
webPreferences: {
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(
url.format({
pathname: path.join(__dirname, "front", "index.html"),

2144
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

15
package.json
View File

@@ -4,7 +4,11 @@
"description": "A minimal Electron application with node serialport",
"main": "main.js",
"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": {
"type": "git",
@@ -20,9 +24,16 @@
"author": "GitHub",
"license": "CC0-1.0",
"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": {
"react": "^19.2.7",
"react-dom": "^19.2.7",
"serialport": "^10.3.0",
"tableify": "^1.1.1"
},

17
preload.js
View File

@@ -1,10 +1,15 @@
// All of the Node.js APIs are available in the preload process.
// It has the same sandbox as a Chrome extension.
window.addEventListener('DOMContentLoaded', () => {
for (const versionType of['chrome', 'electron', 'node']) {
document.getElementById(`${versionType}-version`).innerText = process.versions[versionType]
window.addEventListener("DOMContentLoaded", () => {
for (const versionType of ["chrome", "electron", "node"]) {
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
View File

@@ -0,0 +1,10 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
export default defineConfig({
plugins: [react()],
base: "./",
server: {
port: 5173,
},
});