Rewrite of the web_serial example website.

[raldone01]

Fixes: #2632

This makes the web serial website code available and it adds lots of new features that make serial debugging fun!

If you find any bugs or want some changes just tell me.
I tried to keep it as simple as possible while still providing useful features.

[HiFiPhile]

Thank for your PR, it does indeed resolve the ZLP issue in #2632.

However I've some issues on Chrome 136 Windows 10:

• Disconnect button has no UI update, although sending and receiving is stopped
• Sometimes ASCII get translated to hex, entering aaaaa returns 6/9/2025, 4:07:29 PM 97,97,97,97,97 on serial console
• Serial console get stuck on 1st connection, 2nd connection returns Failed to execute 'open' on 'SerialPort': The port is already open., needs to refresh the page on 3rd attempt to make it work
  

[raldone01]

Sometimes ASCII get translated to hex

That's an odd one.
I will try to reproduce that on the weekend.
Did this happen with the stock webusb_serial example?
Are you sure this is not a firmware problem?
I can't find any obvious place in the js that could cause this (don't have access to a mcu currently).

Serial console get stuck on 1st connection, 2nd connection returns...

Ugh. Fair enough.

[HiFiPhile]

That's an odd one.
I will try to reproduce that on the weekend.
Did this happen with the stock webusb_serial example?

Yeah I'm not tricking you :) Tested on STM32L053 and STM32F723.

I just recorded a video demonstration on my home PC with Chrome 137 Windows 10, the symptome is a little different

• At 00:10 when I connect to serial, the input box is grayed out until something is received ¹
• For the hex coding issue, at 00:40 you can see the serial data out captured by USB analyzer is indeed something like 1051,1052,1053,1054,1055,1056,1057
• (2nd video) Click on disconnect button doesn't release the device even with a55e234, following connection got error Unable to claim interface

Chrome.Paq5suxchp-1.mp4

chrome_8ppkgJviKD.mp4

diff --git a/examples/device/webusb_serial/src/main.c b/examples/device/webusb_serial/src/main.c
index d189af91f..f0796e0e8 100644
--- a/examples/device/webusb_serial/src/main.c
+++ b/examples/device/webusb_serial/src/main.c
@@ -253,6 +253,7 @@ void tud_cdc_line_state_cb(uint8_t itf, bool dtr, bool rts) {
   if (dtr && rts) {
     // print initial message when connected
     tud_cdc_write_str("\r\nTinyUSB WebUSB device example\r\n");
+    tud_cdc_write_flush();
   }
 }

Footnotes

1. Can be mitigated by ↩

[raldone01]

Thanks for the video that makes it very easy to reproduce. 🤣

Having the dev tools open would have been even better (for the next time).

I will fix these four issues. Might take me a while though.