init
This commit is contained in:
1
.gitignore
vendored
Normal file
1
.gitignore
vendored
Normal file
@@ -0,0 +1 @@
|
||||
node_modules
|
||||
130
front/index.html
Normal file
130
front/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/renderer.js
Normal file
129
front/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/serialapi.js
Normal file
16
front/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 };
|
||||
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 };
|
||||
65
main.js
Normal file
65
main.js
Normal file
@@ -0,0 +1,65 @@
|
||||
const { app, BrowserWindow } = require("electron");
|
||||
const path = require("path");
|
||||
const url = require("url");
|
||||
|
||||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the JavaScript object is garbage collected.
|
||||
let mainWindow;
|
||||
|
||||
function createWindow() {
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({
|
||||
width: 800,
|
||||
height: 600,
|
||||
backgroundColor: "#ccc",
|
||||
autoHideMenuBar: true,
|
||||
webPreferences: {
|
||||
nodeIntegration: true, // to allow require
|
||||
contextIsolation: false, // allow use with Electron 12+
|
||||
preload: path.join(__dirname, "preload.js"),
|
||||
},
|
||||
});
|
||||
|
||||
// and load the index.html of the app.
|
||||
mainWindow.loadURL(
|
||||
url.format({
|
||||
pathname: path.join(__dirname, "front", "index.html"),
|
||||
protocol: "file:",
|
||||
slashes: true,
|
||||
}),
|
||||
);
|
||||
|
||||
// Open the DevTools.
|
||||
// mainWindow.webContents.openDevTools()
|
||||
|
||||
// Emitted when the window is closed.
|
||||
mainWindow.on("closed", function () {
|
||||
// Dereference the window object, usually you would store windows
|
||||
// in an array if your app supports multi windows, this is the time
|
||||
// when you should delete the corresponding element.
|
||||
mainWindow = null;
|
||||
});
|
||||
}
|
||||
|
||||
// This method will be called when Electron has finished
|
||||
// initialization and is ready to create browser windows.
|
||||
// Some APIs can only be used after this event occurs.
|
||||
app.on("ready", createWindow);
|
||||
|
||||
// Quit when all windows are closed.
|
||||
app.on("window-all-closed", function () {
|
||||
// On OS X it is common for applications and their menu bar
|
||||
// to stay active until the user quits explicitly with Cmd + Q
|
||||
app.quit();
|
||||
});
|
||||
|
||||
app.on("activate", function () {
|
||||
// On OS X it's common to re-create a window in the app when the
|
||||
// dock icon is clicked and there are no other windows open.
|
||||
if (mainWindow === null) {
|
||||
createWindow();
|
||||
}
|
||||
});
|
||||
|
||||
// In this file you can include the rest of your app's specific main process
|
||||
// code. You can also put them in separate files and require them here.
|
||||
1237
package-lock.json
generated
Normal file
1237
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
33
package.json
Normal file
33
package.json
Normal file
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "electron-serialport",
|
||||
"version": "1.0.2",
|
||||
"description": "A minimal Electron application with node serialport",
|
||||
"main": "main.js",
|
||||
"scripts": {
|
||||
"start": "electron ."
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git@github.com:serialport/electron-serialport.git"
|
||||
},
|
||||
"keywords": [
|
||||
"Electron",
|
||||
"quick",
|
||||
"start",
|
||||
"tutorial",
|
||||
"demo"
|
||||
],
|
||||
"author": "GitHub",
|
||||
"license": "CC0-1.0",
|
||||
"devDependencies": {
|
||||
"electron": "^26.4.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"serialport": "^10.3.0",
|
||||
"tableify": "^1.1.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": "18.16.1",
|
||||
"npm": "9.5.1"
|
||||
}
|
||||
}
|
||||
10
preload.js
Normal file
10
preload.js
Normal file
@@ -0,0 +1,10 @@
|
||||
// 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]
|
||||
}
|
||||
|
||||
document.getElementById('serialport-version').innerText = require('serialport/package').version
|
||||
|
||||
})
|
||||
Reference in New Issue
Block a user