Webserial API with Chrome (serial port access)

[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

[plouf]

yes i have try once and worked
-> viewtopic.php?t=2620

[Chris]

Great, thanks a lot, works very well.

Cheers
Chris

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

[plouf]

very nice ! thanx for sharing
have no sensor to test but good o have examples around