node-serialport icon indicating copy to clipboard operation
node-serialport copied to clipboard

Select baudrate from Selector option in html to js electron app

Open MaxESP opened this issue 3 years ago • 16 comments

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:

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

MaxESP avatar Oct 18 '22 12:10 MaxESP

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.

sinister296 avatar Dec 05 '22 07:12 sinister296

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

MaxESP avatar Dec 05 '22 08:12 MaxESP

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?

sinister296 avatar Dec 05 '22 08:12 sinister296

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);

}

} )(); error

MaxESP avatar Dec 05 '22 13:12 MaxESP

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

GazHank avatar Jun 27 '23 22:06 GazHank

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

MaxESP avatar Jul 01 '23 15:07 MaxESP

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?

GazHank avatar Jul 01 '23 18:07 GazHank

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

MaxESP avatar Jul 01 '23 19:07 MaxESP

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

GazHank avatar Jul 01 '23 19:07 GazHank

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 avatar Jul 01 '23 19:07 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 avatar Jul 01 '23 20:07 MaxESP

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

MaxESP avatar Jul 01 '23 20:07 MaxESP

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 :-)

GazHank avatar Jul 01 '23 20:07 GazHank

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 ?

MaxESP avatar Jul 01 '23 20:07 MaxESP

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

GazHank avatar Jul 01 '23 20:07 GazHank

Yes i have understand you i confirm windows os only

MaxESP avatar Jul 01 '23 20:07 MaxESP