logo elektroda
logo elektroda
X
logo elektroda
Advanced Search
logo elektroda

Multi-platform support for USB to UART converter - Android, Web, Windows

p.kaczmarek2 1479 16
ADVERTISEMENT
This content has been translated flag-pl » flag-en View the original version here
Report a violation of the law
Reply Cool? Ranking DIY | New topic
Notify about new articles
📢 Listen (AI):
  • Smartphone and two USB‑to‑UART adapters on a gray surface, one with a red LED lit
    USB to UART converter - can it be operated from a browser or from an Android device via a USB OTG adapter? Here I will show a unified, multi-platform solution compatible with popular chips such as CH340, FT232, CP2102 etc. I will realise the whole thing in Flutter technology, which will allow me to use a single source code to build a native application for Android, Windows and a web version running in the Chrome browser, and then test it in practice on several devices.

    Flutter environment and Dart language
    Flutter is a modern framework from Google that allows you to create powerful, cross-platform applications using the Dart language. Its biggest advantage in this project is strong typing and built-in support for asynchronicity (Streams and Futures), which is ideal for continuously reading data from the serial port without blocking the user interface. This allows us to create a responsive terminal that behaves identically on phone, PC and browser, sharing most of the business logic.

    The USB to UART abstraction layer
    The biggest challenge here is the diversity of hardware access: the browser uses the Web Serial API, Android uses the USB Host API and Windows uses the system libraries. To manage this, I used an abstraction layer (interface) that hides these differences underneath, providing higher layers of the application with uniform methods such as connect or write. Thanks to Dart's 'conditional imports' mechanism, the compiler automatically selects the appropriate 'driver' depending on which platform we are building the application for.

    This is what the serial port interface looks like:
    Code: text
    Log in, to see the code

    It is implemented by three separate files, depending on the platform:
    - serial_transport_web.dart - Web: Uses the native Web Serial API (via the package:web library). This is a modern browser-based solution that allows direct access to serial ports in Chrome/Edge without additional plugins. The code supports JavaScript Interop (dart:js_interop) to communicate with the browser API.
    - serial_transport_desktop.dart - Desktop (Windows/Linux/macOS) - Uses the flutter_libserialport library. This is a wrapper for the C library libserialport, which automatically provides compiled binaries (e.g. serialport.dll for Windows) and supports low-level communication.
    - serial_transport_android.dart - Android - Uses the usb_serial library. This is a fully Java/Cotlin implementation running over USB OTG, using the Android UsbManager to communicate with devices such as FTDI, CP210x, CH34x etc.


    Presentation - Windows exe application
    Let's start with the simplest one - Windows. The application is compiled to an exe and opens as a windowed application.
    Windows File Explorer showing flutter_uart_demo.exe selected in the Release folder
    The application correctly detects the available COM ports and allows us to select one of them. For a test, I shorted the RX and TX pins to get an 'echo' effect, i.e. receiving what I sent.
    Screenshot of a UART terminal showing COM15 connected at 115200 and chat-style sent/received message bubbles


    Presentation - web application in Chrome
    In Chrome (and other supported browsers) it is slightly different. There, the serial port is selected by a mechanism from the browser.
    Chrome dialog asking to select a serial port for http://localhost:56765, with Connect and Cancel buttons
    The rest is unchanged - the business logic is the same and the echo test gives the correct result.
    Screenshot of “UART Terminal” app with chat bubbles, Connected status, and message “hey 123”.

    Presentation - .apk Android application
    For this you will need an OTG adapter, this is because normally the phone is in the role of a USB device and not a host. Such an adapter has USB C on one side and a typical USB female A socket on the other.
    Smartphone showing a USB permission dialog in “UART Terminal” with a USB-to-UART adapter plugged in
    The phone asks for permission for device connections and you have to manually allocate them. The rest without problems. Communication works.
    Android screenshot of “UART Terminal” app showing Connected status and “hey/hello” message bubbles


    Summary
    One programme - multiple platforms. I will be using this approach from now on. It all looks very promising, although I haven't yet checked what the stability of the communication is like and only then will I make a final decision.
    I'm considering whether to port our Elektrod Flasher to this platform - https://github.com/openshwprojects/BK7231GUIFlashTool
    What do you think, @divadiow , @DeDaMrAz , @insmod , @max4elektroda ?

    Have you used USB to UART converters e.g. from a browser or from Android?

    I attach the full Flutter project.
    Attachments:
    • FlutterUARTDemo.rar (331.89 KB) You must be logged in to download this attachment.

    Cool? Ranking DIY
    Helpful post? Buy me a coffee.
    About Author
    p.kaczmarek2
    Moderator Smart Home  
    Offline 
    p.kaczmarek2 wrote 14172 posts with rating 12050, helped 645 times. Been with us since 2014 year.
  • ADVERTISEMENT
  • #2 21829852
    katakrowa
    Level 23  
    It seems to me that all you had to do was make a PWA application / JavaScript and you would have the same thing automatically for all platforms.
    PWA is supported on Android, Windows, Mac, Linux and more....

    The API documentation for the serial port https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API?utm_source=chatgpt.com indicates what it works on.

    And here is just such an application: https://ms.xksi.pl/pwa-serial-port/
    And the sources in the appendix.
    * AI-generated code.


    In this approach you have one code for all platforms, apart from notepad you don't need any tools to write, you have debugging tools in every browser....
    I think that for the purposes of playing with electronics, this is today the most convenient way to write auxiliary tools or small applications.


    Browser screenshot of “Serial Chat” web app with USB port settings and chat messages Browser window with “Serial Chat” app and a dialog to select a USB‑Serial port (COM4)
    Attachments:
    • _PWA_SerialPort.zip (16.03 KB) You must be logged in to download this attachment.
  • #3 21829858
    p.kaczmarek2
    Moderator Smart Home  
    Thanks for the suggestion, but I think you're missing something though, because on my Androids the solution from the first post sees the UART port, while your site doesn't:
    Phone on a workbench showing UART connection settings with a blue “Connect” button
    Helpful post? Buy me a coffee.
  • ADVERTISEMENT
  • #4 21829883
    katakrowa
    Level 23  
    And that's interesting. Looks like I need to look for a usb-3 <-> usb adapter though and there's a problem because I can't remember when or where I last saw one.

    Added after 20 [minutes]:

    It seems that if I had read the documentation carefully, which I pointed out myself: https://developer.mozilla.org/en-US/docs/Web/API/Web_Serial_API then I would have seen that Chrome on Android does not support Web Serial API .
    So you have to compile... I was convinced that such a trivial thing as a serial port would also be implemented under Android.
    By the way, I wonder why they didn't make this available.
  • #5 21829910
    p.kaczmarek2
    Moderator Smart Home  
    I've double-checked on my side still and it seriously doesn't see this port with me.

    Now the question is, for example with ESPConnect will it see it?
    ESPConnect - a convenient tool for ESP8266/ESP32 in the browser - Flash, partitions, information

    Added after 16 [minutes]:

    No, ESPConnect won't work either:
    Phone on a box showing a browser message: no compatible devices found for a serial port

    So there is something to fight for.
    Helpful post? Buy me a coffee.
  • #6 21829924
    katakrowa
    Level 23  
    p.kaczmarek2 wrote:
    I've double-checked on my side and it seriously doesn't see this port with me.


    Well, because it turned out that under Android it has no right to see. I've already completed the post above so there's no messing about. I started reading why they don't implement this in Chrome on android and it turns out that they don't, because they don't, and in detail it's probably because they don't want to give chrome permissions to serial ports, because these are "somehow connected" to files and a serious vulnerability could arise.

    So if you want serial ports in the browser then on a Windows / Linux / Mac machine there is no problem and on Android no .
  • ADVERTISEMENT
  • #7 21830012
    Damian_Max
    Level 21  
    As for 'serial' communication, it might be interesting to use Bluetooth / Bluetooth Low Energy: https://developer.mozilla.org/en-US/docs/Web/API/Web_Bluetooth_API
    according to the documentation it should also work on android, except that:
    - the transfer can be unsatisfactory (for ble)
    - does not work on iPhone
    On the plus side, it does not require connecting converters to the phone.

    I used to think about building a prototype of a substitute for a wireless voltage meter (*), with a graph (kind of like an oscilloscope xD), all in the browser.
    (*) The measurement itself done by an attachment on some ESP, battery powered.
    Well, but no time xD (although now could strongly help AI); and I am an iPhone user.
    By the way, I'm surprised there isn't an app of some sort; that would 'add' such a bluetooth API for iOS; and allow you to enter a website address and the scripts from that website would have the bluetooth api available as it were.
    There are solutions; but they require compiling an iOS app, and even though it's executable; publishing the app requires a paid developer license :/ (although if you valued the time it would take to do that project; say ~a week, then the cost of an apple license would not be the highest xD)
  • #8 21830061
    katakrowa
    Level 23  
    >>21830012
    Honestly this looks like a 2 day project with coffee in hand and prompting AI.
    Most time will go down to the "attachment" itself because making a WEB app that will receive data from serial / bluetooth / wifi / or any other source and present it in the browser is a few hours of clicking at most.
    Assuming that such an ESP can serve WEB API/REST +WebSocket, the matter becomes quite trivial because the only thing that needs to be well thought out is the sheer scope of functionality that such an ESP can give.
  • #9 21831693
    kamil3211
    Level 10  
    So which is simpler pwa or flutter ? And is there perhaps something better? Have you considered anything else ? i don't know about now but I used to prefer flutter because it's not so spoiled just type flutter dart and everything is there.
    Google supposedly wants to make a system for pc again to compete with windows and probably android applications will run on it, I wonder what will come out, it was supposed to be fuchsia but nothing came out because they preferred to focus on profitable projects and not so experimental.
  • #10 21831973
    katakrowa
    Level 23  
    kamil3211 wrote:
    What is simpler pwa or flutter ? And is there perhaps something better ? Have you considered something else ? i don't know about now but I used to prefer flutter because it's not so fleshed out just type flutter dart and everything is there.


    There's nothing better here... These are two completely different approaches.
    PWA is not an environment but a type of application supported by different operating systems / browsers.
    You can make a PWA application in fluter too. And the PWA app itself can be written in different languages - of course JavaSciprit is the least demanding choice (tool-wise) but you can use: TypeScript, Angular, React, Kotlij/JS and even C++, Rust or Pascal as long as you use webAssembly.
  • #11 21832234
    chemik_16
    Level 27  
    Well, now rewrite the gui from openbeken and you can do the field ;)
    Edit: didn't even read that you suggested this. I use it on Linux and it works poorly. Also on win I have to practically every flash restart the application ;) because it does not detect the chip or just closes.
  • #12 21839213
    p.kaczmarek2
    Moderator Smart Home  
    DTR/RTS control also works, at least on web. I need to implement on Android:
    Screenshot of UART Terminal with green logs, DTR/RTS buttons, and Connected status
    Code: text Expand Select all Copy to clipboard
    

  @override
  Future<void> setDTR(bool value) async {
    if (_port == null) return;
    try {
      final signals = JSObject();
      signals.setProperty('dataTerminalReady'.toJS, value.toJS);
      await (_port!.callMethod('setSignals'.toJS, signals) as JSPromise).toDart;
    } catch (e) {
      debugPrint('setDTR error: $e');
    }
  }

  @override
  Future<void> setRTS(bool value) async {
    if (_port == null) return;
    try {
      final signals = JSObject();
      signals.setProperty('requestToSend'.toJS, value.toJS);
      await (_port!.callMethod('setSignals'.toJS, signals) as JSPromise).toDart;
    } catch (e) {
      debugPrint('setRTS error: $e');
    }
  }
    Helpful post? Buy me a coffee.
  • ADVERTISEMENT
  • #14 21857233
    p.kaczmarek2
    Moderator Smart Home  
    Why do you think so? The serial driver is not "aware" about the data application it proceses.
    Helpful post? Buy me a coffee.
  • #15 21857296
    momom33
    Level 2  
    >>21857233
    I agree that the serial driver itself is agnostic to the application. My point was about the Web Serial API implementation in the browser.

    Previously, Chrome for Android didn't expose serial port access to web apps at all. However, as shown in the following link, Chrome has recently added support for serial communication at Version145 , specifically focusing on Bluetooth RFCOMM.

    https://caniuse.com/?search=serial

    Screenshot of a “Web Serial API” browser support chart, with yellow highlight on Chrome for Android.

    This means the browser now acts as a bridge, allowing web applications to request user permission and communicate with serial devices directly via the browser's internal stack, without needing a native wrapper app.
  • #16 21858040
    katakrowa
    Level 23  
    >>21857296

    Always something. I personally, as I was writing a sample application, was surprised that this was not there at all. Also, there is a chance that in the not too distant future it will be possible to comfortably write tools in JS. Let's hope so...
  • #17 21858068
    p.kaczmarek2
    Moderator Smart Home  
    chemik_16 wrote:
    Well, now rewrite the gui from openbeken on this and you can do the field ;)
    Edit: didn't even read that you suggested this. I use it on Linux and it works poorly. Also on win I have to restart the application practically every flash ;) because it doesn't detect the chip or just closes.

    Early experiments:
    Multi-platform BK7231 BK7238 Beken Flash Tool - Web, Android, Windows - First prototype
    https://openshwprojects.github.io/EasyGUIFlashTool/
    Not all platforms are implemented, but should be able to cope with BK78231, ESP32 (and versions), BL602....
    Helpful post? Buy me a coffee.
Reply Cool? Ranking DIY | New topic
Notify about new articles
📢 Listen (AI):
Report a violation of the law
Today's popular
ADVERTISEMENT