Select baudrate from Selector option in html to js electron app

[MaxESP]

SerialPort Version

10.3.0

Node Version

16.15

Electron Version

17.4.11

Platform

windows 10

Architecture

No response

Hardware or chipset of serialport

FTDI cp2102

What steps will reproduce the bug?

Some Definition const Port = { comPortsOutput : [], baudRateOutput:[], //comPortsOutputOld : [], path : '', //path for Port baudRate: parseInt(X), //Baudrate for Port //baudRate,options :parseInt(X), //baudRate : parseInt(document.getElementById("BaudRate1").value), //baudRate:

OpenPortButton : document.getElementById('Connect'), //HTML Name für Connect-Button ClosePortButton : document.getElementById('Disconnect'), //HTML Name für Disconnect-Button OpenPortButton1 : document.getElementById('Connect1'), //HTML Name für Connect-Button ClosePortButton1 : document.getElementById('Disconnect1'), //HTML Name für Disconnect-Button */

parser : '', parser1 : '', SelectedPort : '', SelectedPort1 : ''

} 1Liste port connected ok work great

await SerialPort.list().then((ports ,err) => { if(err) { document.getElementById('error').textContent = err.message dialog.showErrorBox(err) return } else { document.getElementById('error').textContent = '' }

//console.log('ports', ports); //später löschen

if (ports.length === 0) {
  document.getElementById('error').textContent = 'No ports discovered'
  dialog.showMessageBox("No ports discovered")
}  

  for( let i=0;i < ports.length;i++) {
    Port.comPortsOutput =Port.comPortsOutput + "<option value = "+ ports[i].path+ ">" + ports[i].path + "</option>"

    document.getElementById('comPorts').innerHTML = Port.comPortsOutput;  

   document.getElementById('comPorts1').innerHTML = Port.comPortsOutput;    

  }
  Port.comPortsOutput = [];

}) 2 Return the value of serial baudrate from html selector

async function GetB(BaudRate1) { //var selectedText = BaudRate1.options[BaudRate1.selectedIndex].innerHTML; var X = parseInt(BaudRate1.value); console.log (X); console log the right baudrate number statut ok //X =baudRate; return X;

} 3

Port.OpenPortButton.onclick = e =>{ Port.path = document.getElementById("comPorts").value, console.log(Port.path),

Port.SelectedPort = new SerialPort({ path:Port.path, baudRate:Port.baudRate, })

Port.parser = Port.SelectedPort.pipe(new ReadlineParser({ delimiter: '\r\n' }))

Port.OpenPortButton.disabled = true
Port.ClosePortButton.disabled = false  

DataReceived()

//

};

html interface:

pick 9600 115200

What happens?

C:\Users\do\Docu\node_modules\@serialport\bindings-cpp\dist\win32.js:34 Uncaught (in promise) TypeError: "baudRate" is not a valid baudRate at Object.open (C:\Users\do\node_modules\@serialport\bindings-cpp\dist\win32.js:34:19) at SerialPort.open (C:\Users\2021_2\node_modules\@serialport\stream\dist\index.js:101:31)

What should have happened?

to connect to serial baudrate choise

Additional information

No response

[sinister296]

Make sure to parse the baudRate to INT before passing it in the SerialPort options. This should solve the issue. This is a follow-up from my side, please let me know if you're able to read the data from the serial port after setting the path and baudRate in the runtime.

[MaxESP]

Thanks a lot sinister for your reply I was able to fix this that working good now . I am facing a new problem now .

My Main electron windows is working and i have create a child parent window index2.html from main but i was not able to read the serial port in the children window

[sinister296]

What is the method that you're using to send the port to the other window. Also, are you using serial port in the rederer process or the main process of your application?

[MaxESP]

Thank you very much for your reply I am a new in coding

I am using in the renderer.js https://github.com/electron/electron/issues/36522

I have progress a little

for my second windows i have make a new renderer js file *because serial port are allready opened in my main electron (async()=>{
try{ let ports = await SerialPort.list(); console.log(ports);

   var path= ports.find(port => port.vendorId === '10C4');
   console.log(path);

   var  baudRate = 9600;
   var x =baudRate;

   //port.BaudRate = 9600;          

    let portser = new SerialPort(path, {

        baudRate: x,
        autoOpen:true 
    });

}catch (error){
    console.log(error);

}

} )();

[GazHank]

Hi @MaxESP did you manage to resolve your issue, or do you need any extra support?

[MaxESP]

I did not resolve the issue and i keep all the data comming from serial ports in the main window... No child

[GazHank]

So if I understand correctly you fixed the issue of opening a single serialport, but when trying to open a second port in a new window you get an error that the baudrate is not a valid value?

[MaxESP]

yes is i can open multi Serial ports on main Electron app this issue is fixed , but if i want to open one of those serial port on a child windows I get an error . So I have to have all sensors in the same page like this https://user-images.githubusercontent.com/41333143/217280431-9ed467c4-3f9a-4ce4-accd-00c1c4b01b3c.png

[GazHank]

Am I right to think that you have all of your serialport logic in the renderer process? If so it might be worth taking a look at the electron IPC functionality https://www.electronjs.org/docs/latest/tutorial/ipc

With this you should be able to move your serialport logic into the main process, and then have the renderer processes (child windows) make calls to the main process to do their bidding.

We really need to update the electron-serialport example to make use of IPC as it is now the recommended appraoch (for security reasons) and I think would help for scenarios like this

[MaxESP]

Thanks for your comments but I am not an expert when you have to build all the process as a robust electronic pcb , sketch and the client app like photo I tried to be intuitive to make it work . It's impossible to be good in all domain of work.

[MaxESP]

The project is working I have a good time response between canvas gauge and Electron serial with node js . In the project just left the to make the electron exe... this i Haven't done yet hope that it would not be difficult to compile the electron app.

[MaxESP]

If you have some link to learn compile the elctron app i will save some time thanks again

[GazHank]

There are a few options for building the electron app, the main ones I see people using are electron-builder and electron forge

The choice largely comes down to the complexity of the project you are building, what platforms you want to build for, and how well the tools will be maintained in the future.

I think for simplicity I would point you to electron-builder at this stage, and suggest the quick setup guide to start with. If you have any problems then do reach out, the community is pretty friendly :-)

[MaxESP]

The main app will work on a small factor but power full pc with windows os on a yacth boat . I have made it work on my work Rhyzen 3900 Pc Hope that it's will work on a pc with less power is electron build is better with intel or Amd ?

[GazHank]

sorry by platform I meant Operating systems (Windows, Mac, Linux). It can be easier or more complicated to build for multiple OS. I don't think the build process will affect how well the executable runs on intel vs amd, but I may be wrong

[MaxESP]

Yes i have understand you i confirm windows os only