Example projects

[radiant delta]

Hi i'm trying to learn working with electron by making an app that opens web page or another electron app (didn't figure out yet, what is better). I need custom UI for this application and the application needs to be able to send readings from Arduino (serial ports) to the web page (or another electron app) and also notify the app that translate button in the UI was clicked. Would anyone please help me with this or better, send me some similar project that have open code?

[balmy gorge]

Hello. Unfortunately I don't have a similar project so can't send you the code but I can try advice from the coding perspective. Could you please explain in more detail how do you want to send data from the arduino and where? What do you mean another electron app?

[radiant delta]

Well i might have figured out a way, i didnt know i could use a preload script for the webcontents in BrowserView, so that's how you can send data from main to BrowserViews content

Ok i will specify the app i'm trying to make. It is an app that has basic UI (Label, Buttons) and needs to display "third party" web pages that have like 3 or 4 variants. Some just display text/images, some are like quizes, some need to read data from serial port and some need to utilize python scripts. Also these webpages need to be able to recieve messages like that they need to be translated to exact language (EN/DE), these translations are read from json. Same with the UI, it needs to be translated as well.
I was trying to utilize MessagePorts and WebContents.send, but i didn't work and i haven't figured out why, until i was for like 6th day searching on the internet and then i found that it's possible to use preload script to do that, and it works, so i hope this might be useful for other people as well.
TLDR: Set a preload script when dealing with WebContents to send messages/events.

[hot scaffold]

First are you using a framework to host if so I cannot help but your using plain old dom or known as raw I could help

A bit

html:5 this will get a basic html

in body you put h1

This is the title for the page not the on the page but on the menubar

And then put p*3 this will give you three paragraphs

this will work in vscode

idk about others

If you want to learn more I suggest searching it up or learning html

next is CSS

this is for the style

but before you do CSS get the elements first

To add style you can do it with class or id

An example would be:

<br class=“name” >

Or

<br id=“name”>

Css:

.name{}

Or #Name{}

you put the style in brackets

Please bear in mind you need a basic knowledge

[radiant delta]

Thanks, but i didt have problem with html or css, i needed help with js and its integration with electron app, basically, i doubt anyone would be able to make an app without html and css knowledge

[thick sentinel]

you need html/css for ui

js for logic

[balmy gorge]

About the preload scripts you are able to enable node integration for the browser window and avoid preload scripts, although not recommended, as that could be an app vulnerability (from security perspective), which can be used for debugging but not for production.

To make your life easier with preloads you can create a constants.js file with variables that represent certain messages for cleaner code organization.

Sending data from an Arduino to an Electron app is more complicated. Arduino is a microcontroller, not a full computer like Raspberry Pi. To accomplish this, you can use USB communication and write an Arduino script for serial communication via USB. However, reading the data requires using a language like Python or C/C++ to parse the data and then send it to Electron.

Using a USB package with Electron may not directly read Arduino signals. One approach is setting up a Python/C server where you post the Arduino signals and make requests from Node.js, but it's not recommended for production. Another option is running a parallel thread from Electron with a C executable or Python script and establishing IPC communication between the threads, but this also has its challenges.

If you have questions about these methods, feel free to ask for further assistance.

[radiant delta]

Oh i thought that electron supports reading from serial port, not only informating that something is connected,, but thanks. Only thing i want to read is just text from serial port at certain baudrate so i hope it won't be that complicated. Would you be kind enough and send me some examples how to use python scripts with electron?

[balmy gorge]

The idea is the following:
Use child_process to create a child process from the main electron app. Use child_process.spawn or .exec to supply the path to the python file and the python interpreter. Then connect the input and output of the python file with the parent of the child_process. That's it. This method expects that you have a python interpreter installed. For production you will have to bind the python interpreter with the electron executable and use that.

Another option is to use python-shell module. This is a very good guide to get you started:
https://www.skcript.com/svr/how-to-execute-python-scripts-in-electron-and-nodejs

Below I have a small snippet for a child_process using python scripts. Try it and test it out. The modify it to your needs. It should work.

function runPythonScript() {
  const pythonScript = spawn('python', ['path/to/your/script.py']);

  pythonScript.stdout.on('data', (data) => {
    console.log(`Python script output: ${data}`);
  });

  pythonScript.stderr.on('data', (data) => {
    console.error(`Python script error: ${data}`);
  });

  pythonScript.on('close', (code) => {
    console.log(`Python script exited with code ${code}`);
  });
}

[radiant delta]

Thanks, i'll look into that 😄

[radiant delta]

Well i've managed to read every message trough PythonShell.on("message", ()), but i need to read from the shell only at certain times and save the message into a variable, would you be kind enough to help me again?

[radiant delta]

Nvm figured it out