Add USB serial support for Android (Capacitor)

android/app/build.gradle

@@ -28,6 +28,9 @@ repositories {
     flatDir{
         dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
     }
+    google()
+    mavenCentral()
+    maven { url 'https://jitpack.io' }
 }
 
 dependencies {

android/app/capacitor.build.gradle

@@ -9,7 +9,7 @@ android {
 
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
-
+    implementation project(':capacitor-plugin-usb-serial')
 
 }
 

android/app/src/main/AndroidManifest.xml

@@ -22,6 +22,14 @@
                 <category android:name="android.intent.category.LAUNCHER" />
             </intent-filter>
 
+            <intent-filter>
+                <action android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED" />
+            </intent-filter>
+
+            <meta-data
+                android:name="android.hardware.usb.action.USB_DEVICE_ATTACHED"
+                android:resource="@xml/device_filter" />
+
         </activity>
 
         <provider
@@ -38,4 +46,7 @@
     <!-- Permissions -->
 
     <uses-permission android:name="android.permission.INTERNET" />
+
+    <!-- USB Host feature -->
+    <uses-feature android:name="android.hardware.usb.host" android:required="true" />
 </manifest>

android/app/src/main/res/xml/device_filter.xml

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <!-- USB device filters for Betaflight-compatible devices -->
+
+    <!-- FT232R USB UART -->
+    <usb-device vendor-id="1027" product-id="24577" />
+
+    <!-- STM32 devices -->
+    <usb-device vendor-id="1155" product-id="12886" />  <!-- STM32 in HID mode -->
+    <usb-device vendor-id="1155" product-id="14158" />  <!-- STLink Virtual COM Port (NUCLEO boards) -->
+    <usb-device vendor-id="1155" product-id="22336" />  <!-- STM Electronics Virtual COM Port -->
+    <usb-device vendor-id="1155" product-id="57105" />  <!-- STM Device in DFU Mode -->
+
+    <!-- CP210x devices -->
+    <usb-device vendor-id="4292" product-id="60000" />
+    <usb-device vendor-id="4292" product-id="60001" />
+    <usb-device vendor-id="4292" product-id="60002" />
+
+    <!-- GD32 devices -->
+    <usb-device vendor-id="10473" product-id="394" />   <!-- GD32 VCP -->
+    <usb-device vendor-id="10473" product-id="393" />   <!-- GD32 DFU Bootloader -->
+
+    <!-- AT32 devices -->
+    <usb-device vendor-id="11836" product-id="22336" /> <!-- AT32 VCP -->
+    <usb-device vendor-id="11836" product-id="57105" /> <!-- AT32F435 DFU Bootloader -->
+
+    <!-- APM32 devices -->
+    <usb-device vendor-id="12619" product-id="22336" /> <!-- APM32 VCP -->
+    <usb-device vendor-id="12619" product-id="262" />   <!-- APM32 DFU Bootloader -->
+
+    <!-- Raspberry Pi Pico devices -->
+    <usb-device vendor-id="11914" product-id="9" />     <!-- Raspberry Pi Pico VCP -->
+    <usb-device vendor-id="11914" product-id="15" />    <!-- Raspberry Pi Pico in Bootloader mode -->
+</resources> 

android/capacitor.settings.gradle

@@ -1,3 +1,6 @@
 // DO NOT EDIT THIS FILE! IT IS GENERATED EACH TIME "capacitor update" IS RUN
 include ':capacitor-android'
 project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/android/capacitor')
+
+include ':capacitor-plugin-usb-serial'
+project(':capacitor-plugin-usb-serial').projectDir = new File('../node_modules/capacitor-plugin-usb-serial/android')

android/settings.gradle

@@ -2,4 +2,12 @@ include ':app'
 include ':capacitor-cordova-android-plugins'
 project(':capacitor-cordova-android-plugins').projectDir = new File('./capacitor-cordova-android-plugins/')
 
+dependencyResolutionManagement {
+    repositories {
+        google()
+        mavenCentral()
+        maven { url 'https://jitpack.io' }
+    }
+}
+
 apply from: 'capacitor.settings.gradle'

package.json

@@ -22,7 +22,8 @@
     "android:release": "vite build && node capacitor.config.generator.mjs && npx cap build android --release",
     "format": "prettier --write {src,test}/**/*.{js,vue,css,less}",
     "storybook": "start-storybook -p 6006",
-    "prepare": "husky install"
+    "prepare": "husky install",
+    "postinstall": "patch-package"
   },
   "window": {
     "icon": "images/bf_icon_128.png",
@@ -45,6 +46,7 @@
     "@capacitor/core": "^7.0.1",
     "@fortawesome/fontawesome-free": "^6.5.2",
     "@vitejs/plugin-vue": "^6.0.1",
+    "capacitor-plugin-usb-serial": "^0.0.6",
     "crypto-es": "^2.1.0",
     "d3": "^7.9.0",
     "djv": "^2.1.4",
@@ -115,7 +117,9 @@
     "lint-staged": "^15.4.3",
     "nw-builder": "^3.8.6",
     "os": "^0.1.2",
+    "patch-package": "^8.0.1",
     "postcss": "^8.5.3",
+    "postinstall-postinstall": "^2.1.0",
     "prettier": "^3.5.2",
     "rollup": "^4.34.9",
     "rollup-plugin-copy": "^3.5.0",

src/js/gui.js

@@ -3,7 +3,7 @@ import MSP from "./msp";
 import Switchery from "switchery-latest";
 import tippy from "tippy.js";
 import $ from "jquery";
-import { getOS } from "./utils/checkBrowserCompatibility";
+import { getOS } from "./utils/checkCompatibility";
 
 const TABS = {};
 

src/js/port_handler.js

@@ -4,11 +4,11 @@ import { serial } from "./serial.js";
 import WEBUSBDFU from "./protocols/webusbdfu";
 import { reactive } from "vue";
 import {
-    checkBrowserCompatibility,
-    checkWebBluetoothSupport,
-    checkWebSerialSupport,
-    checkWebUSBSupport,
-} from "./utils/checkBrowserCompatibility.js";
+    checkCompatibility,
+    checkBluetoothSupport,
+    checkSerialSupport,
+    checkUsbSupport,
+} from "./utils/checkCompatibility.js";
 
 const DEFAULT_PORT = "noselection";
 const DEFAULT_BAUDS = 115200;
@@ -34,11 +34,11 @@ const PortHandler = new (function () {
     this.dfuAvailable = false;
     this.portAvailable = false;
 
-    checkBrowserCompatibility();
+    checkCompatibility();
 
-    this.showBluetoothOption = checkWebBluetoothSupport();
-    this.showSerialOption = checkWebSerialSupport();
-    this.showUsbOption = checkWebUSBSupport();
+    this.showBluetoothOption = checkBluetoothSupport();
+    this.showSerialOption = checkSerialSupport();
+    this.showUsbOption = checkUsbSupport();
 
     console.log(`${this.logHead} Bluetooth available: ${this.showBluetoothOption}`);
     console.log(`${this.logHead} Serial available: ${this.showSerialOption}`);
@@ -50,8 +50,8 @@ const PortHandler = new (function () {
 })();
 
 PortHandler.initialize = function () {
-    EventBus.$on("ports-input:request-permission-bluetooth", () => this.requestDevicePermission("webbluetooth"));
-    EventBus.$on("ports-input:request-permission-serial", () => this.requestDevicePermission("webserial"));
+    EventBus.$on("ports-input:request-permission-bluetooth", () => this.requestDevicePermission("bluetooth"));
+    EventBus.$on("ports-input:request-permission-serial", () => this.requestDevicePermission("serial"));
     EventBus.$on("ports-input:request-permission-usb", () => this.requestDevicePermission("usb"));
     EventBus.$on("ports-input:change", this.onChangeSelectedPort.bind(this));
 
@@ -60,9 +60,9 @@ PortHandler.initialize = function () {
         const detail = event.detail;
 
         if (detail?.path?.startsWith("bluetooth")) {
-            this.handleDeviceAdded(detail, "webbluetooth");
+            this.handleDeviceAdded(detail, "bluetooth");
         } else {
-            this.handleDeviceAdded(detail, "webserial");
+            this.handleDeviceAdded(detail, "serial");
         }
     });
 
@@ -81,8 +81,8 @@ PortHandler.initialize = function () {
 PortHandler.refreshAllDeviceLists = async function () {
     // Update all device lists in parallel
     return Promise.all([
-        this.updateDeviceList("webserial"),
-        this.updateDeviceList("webbluetooth"),
+        this.updateDeviceList("serial"),
+        this.updateDeviceList("bluetooth"),
         this.updateDeviceList("usb"),
     ]).then(() => {
         this.selectActivePort();
@@ -112,16 +112,16 @@ PortHandler.removedSerialDevice = function (device) {
     if (!devicePath) {
         console.warn(`${this.logHead} Device removal event missing path information`, device);
         // Still update ports, but don't try to use the undefined path
-        this.updateDeviceList("webserial").then(() => {
+        this.updateDeviceList("serial").then(() => {
             this.selectActivePort();
         });
         return;
     }
 
     // Update the appropriate ports list based on the device type
     const updatePromise = devicePath.startsWith("bluetooth")
-        ? this.updateDeviceList("webbluetooth")
-        : this.updateDeviceList("webserial");
+        ? this.updateDeviceList("bluetooth")
+        : this.updateDeviceList("serial");
 
     const wasSelectedPort = this.portPicker.selectedPort === devicePath;
 
@@ -274,7 +274,7 @@ PortHandler.handleDeviceAdded = function (device, deviceType) {
 
     // Update the appropriate device list
     const updatePromise =
-        deviceType === "webbluetooth" ? this.updateDeviceList("webbluetooth") : this.updateDeviceList("webserial");
+        deviceType === "bluetooth" ? this.updateDeviceList("bluetooth") : this.updateDeviceList("serial");
 
     updatePromise.then(() => {
         const selectedPort = this.selectActivePort(device);
@@ -295,19 +295,19 @@ PortHandler.updateDeviceList = async function (deviceType) {
 
     try {
         switch (deviceType) {
-            case "webbluetooth":
+            case "bluetooth":
                 if (this.showBluetoothOption) {
-                    ports = await serial.getDevices("webbluetooth");
+                    ports = await serial.getDevices("bluetooth");
                 }
                 break;
             case "usb":
                 if (this.showUsbOption) {
                     ports = await WEBUSBDFU.getDevices();
                 }
                 break;
-            case "webserial":
+            case "serial":
                 if (this.showSerialOption) {
-                    ports = await serial.getDevices("webserial");
+                    ports = await serial.getDevices("serial");
                 }
                 break;
             default:
@@ -320,7 +320,7 @@ PortHandler.updateDeviceList = async function (deviceType) {
 
         // Update the appropriate properties based on device type
         switch (deviceType) {
-            case "webbluetooth":
+            case "bluetooth":
                 this.bluetoothAvailable = orderedPorts.length > 0;
                 this.currentBluetoothPorts = [...orderedPorts];
                 console.log(`${this.logHead} Found bluetooth port(s)`, orderedPorts);
@@ -330,7 +330,7 @@ PortHandler.updateDeviceList = async function (deviceType) {
                 this.currentUsbPorts = [...orderedPorts];
                 console.log(`${this.logHead} Found DFU port(s)`, orderedPorts);
                 break;
-            case "webserial":
+            case "serial":
                 this.portAvailable = orderedPorts.length > 0;
                 this.currentSerialPorts = [...orderedPorts];
                 console.log(`${this.logHead} Found serial port(s)`, orderedPorts);