Page 1 of 1
Webserial API with Chrome (serial port access)
Posted: Sat May 17, 2025 5:19 pm
by Chris
Hi,
I wonder if there is a worked out example for serial port access with the Webserial API for Chrome? This would be very hepful for creating tools to configure devices with serial port like microcontrollers via Web interface. Any help very much appreciated.
Best regards
Chris
Re: Webserial API with Chrome (serial port access)
Posted: Sun May 18, 2025 5:51 am
by plouf
yes i have try once and worked
->
viewtopic.php?t=2620
Re: Webserial API with Chrome (serial port access)
Posted: Sun May 18, 2025 9:09 am
by Chris
Great, thanks a lot, works very well.
Cheers
Chris
Re: Webserial API with Chrome (serial port access)
Posted: Sun May 18, 2025 6:51 pm
by Chris
Hi,
below is my code for those who are interested (some changes to the original code).
I send a command to a sensor (GetTemperature!), wait for answer and display
the results.
SerialAPI.sbi
Code: Select all
Global SerialInputDataStream.s= ""
Global portopen=0
Global serialsupport=1
Procedure OpenSerialPort()
!async function openserialport() {
! window.sbserialport = await navigator.serial.requestPort();
! var options = {
! baudRate: 9600
! };
! await window.sbserialport.open(options);
! if (window.sbserialport.readable) {
! g_portopen=1;
! };
! };
!async function pl_readsserialportstringline() {
!const pl_reader = window.sbserialport.readable.getReader();
!while (g_portopen) {
! const { value, done } = await pl_reader.read();
! if (done) {
! pl_reader.releaseLock();
! break;
! }
! if (value) {
! const pl_decoder = new TextDecoder();
! g_serialinputdatastream = g_serialinputdatastream+pl_decoder.decode(value);
! console.log("g_serialinputdatastream", g_serialinputdatastream);
! }
! }
!};
!async function startserial() {
! if (typeof navigator.serial!="undefined") {
! await openserialport();
! pl_readsserialportstringline();
! g_serialsupport=1;
! } else {
! g_serialsupport=0;
! }
!}
!startserial();
EndProcedure
Procedure WriteSerialPortString(datatosend.s)
SerialInputDataStream=""
! if (!window.sbserialport.readable) {
! g_portopen=0;
! };
! var a=1;
! pl_encoder = new TextEncoder();
! pl_writer = window.sbserialport.writable.getWriter();
! pl_writer.write(pl_encoder.encode(v_datatosend+"\r\n"));
! pl_writer.releaseLock();
EndProcedure
SMT100_ASCII.sbi
Code: Select all
IncludeFile "SerialAPI.sbi"
Procedure GadgetEvents()
Select EventGadget()
Case 1
OpenSerialPort()
Case 2
WriteSerialPortString("GetTemperature!")
EndSelect
EndProcedure
Procedure TimerEvents()
SetGadgetText(3,SerialInputDataStream)
If serialsupport=1
If portopen=0
DisableGadget(1, 0)
DisableGadget(2, 1)
DisableGadget(3, 1)
SetGadgetText(4,"Port closed")
Else
DisableGadget(1, 1)
DisableGadget(2, 0)
DisableGadget(3, 0)
SetGadgetText(4,"Port open")
EndIf
Else
SetGadgetText(4,"No serial support, use Chrome!")
EndIf
EndProcedure
Procedure EventHandler()
Select Event() ; Use Event() to determine which object raised the callback
Case #PB_Event_CloseWindow
RemoveTimer(1)
CloseWindow(#PB_All)
End
End
EndSelect
EndProcedure
OpenWindow(1,1,1,300,300,"SMT100 ASCII")
LoadFont(0, "Arial", 16)
ButtonGadget(1,50,50,200,30,"Open Serial Port")
SetGadgetFont(1, FontID(0))
ButtonGadget(2,50,100,200,30,"GetTemperature!")
SetGadgetFont(2, FontID(0))
DisableGadget(2, 1)
TextGadget(3,50,150,200,30,"",#PB_Text_Border | #PB_Text_Center )
SetGadgetFont(3, FontID(0))
DisableGadget(3, 1)
TextGadget(4,50,200,200,30,"", #PB_Text_Center )
;SetGadgetFont(4, FontID(0))
BindEvent(#PB_Event_Gadget, @GadgetEvents())
BindEvent(#PB_Event_Timer, @TimerEvents())
BindEvent(#PB_Event_CloseWindow, @EventHandler())
AddTimer(1,100)
Re: Webserial API with Chrome (serial port access)
Posted: Sun May 18, 2025 7:33 pm
by plouf
very nice ! thanx for sharing
have no sensor to test but good o have examples around
