Add WebUSB console

espressif · Mar 6, 2024 · 5da82d5 · 5da82d5
1 parent 4123e20
commit 5da82d5
Show file tree

Hide file tree

Showing 6 changed files with 256 additions and 4 deletions.
diff --git a/cores/esp32/USB.cpp b/cores/esp32/USB.cpp
@@ -48,7 +48,7 @@
 #define USB_WEBUSB_ENABLED false
 #endif
 #ifndef USB_WEBUSB_URL
-#define USB_WEBUSB_URL "https://espressif.github.io/arduino-esp32/webusb.html"
+#define USB_WEBUSB_URL "https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html"
 #endif
 
 #if CFG_TUD_DFU

diff --git a/docs/_static/webusb.html b/docs/_static/webusb.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>WebUSB Serial Sample Application</title>
+  </head>
+
+<body>
+  <script>
+var serial = {};
+
+(function() {
+  'use strict';
+
+  serial.getPorts = function() {
+    return navigator.usb.getDevices().then(devices => {
+      return devices.map(device => new serial.Port(device));
+    });
+  };
+
+  serial.requestPort = function() {
+    const filters = [
+      { 'vendorId': 0x10c4, 'productId': 0xea60 },
+      { 'vendorId': 0x303a, 'productId': 0x1001 },
+      { 'vendorId': 0x303a, 'productId': 0x0002 },
+    ];
+    return navigator.usb.requestDevice({ 'filters': filters }).then(
+      device => new serial.Port(device)
+    );
+  }
+
+  serial.Port = function(device) {
+    this.device_ = device;
+  };
+
+  serial.Port.prototype.connect = function() {
+    let readLoop = () => {
+      const {
+        endpointNumber
+      } = this.device_.configuration.interfaces[0].alternate.endpoints[0]
+      this.device_.transferIn(endpointNumber, 64).then(result => {
+        this.onReceive(result.data);
+        readLoop();
+      }, error => {
+        this.onReceiveError(error);
+      });
+    };
+
+    return this.device_.open()
+        .then(() => {
+          if (this.device_.configuration === null) {
+            return this.device_.selectConfiguration(1);
+          }
+        })
+        .then(() => this.device_.claimInterface(0))
+        .then(() => {
+          readLoop();
+        });
+  };
+
+  serial.Port.prototype.disconnect = function() {
+    return this.device_.close();
+  };
+
+  serial.Port.prototype.send = function(data) {
+    const {
+      endpointNumber
+    } = this.device_.configuration.interfaces[0].alternate.endpoints[1]
+    return this.device_.transferOut(endpointNumber, data);
+  };
+})();
+
+let port;
+
+function connect() {
+  port.connect().then(() => {
+    port.onReceive = data => {
+      let textDecoder = new TextDecoder();
+      console.log("Received:", textDecoder.decode(data));
+      document.getElementById('output').value += textDecoder.decode(data);
+    }
+    port.onReceiveError = error => {
+      console.error(error);
+      document.querySelector("#connect").style = "visibility: initial";
+      port.disconnect();
+    };
+  });
+}
+
+function send(string) {
+  console.log("sending to serial:" + string.length);
+  if (string.length === 0)
+    return;
+  console.log("sending to serial: [" + string +"]\n");
+
+  let view = new TextEncoder('utf-8').encode(string);
+  console.log(view);
+  if (port) {
+    port.send(view);
+  }
+};
+
+window.onload = _ => {
+  document.querySelector("#connect").onclick = function() {
+    serial.requestPort().then(selectedPort => {
+      port = selectedPort;
+      this.style = "visibility: hidden";
+      connect();
+    });
+  }
+
+  document.querySelector("#submit").onclick = () => {
+    let source = document.querySelector("#input").value;
+    send(source);
+  }
+}
+
+</script>
+ <button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
+ <br><br><label for="input">Sender: </label> <br>
+ <textarea id="input" rows="25" cols="80">WebUSB!</textarea>
+ <br><button id="submit">Send</button>
+ <br><br>
+ <label for="output">Receiver: </label> <br>
+ <textarea id="output" rows="25" cols="80"></textarea>
+</body>
+</html>
diff --git a/docs/en/api/usb.rst b/docs/en/api/usb.rst
@@ -303,7 +303,7 @@ This function is used to get the ``webUSBURL``.
 
     const char * webUSBURL(void);
 
-The default ``webUSBURL`` is: https://espressif.github.io/arduino-esp32/webusb.html
+The default ``webUSBURL`` is: https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html
 
 enableDFU
 ^^^^^^^^^

diff --git a/libraries/USB/examples/USBVendor/USBVendor.ino b/libraries/USB/examples/USBVendor/USBVendor.ino
@@ -164,7 +164,7 @@ void setup() {
 
   USB.onEvent(usbEventCallback);
   USB.webUSB(true);
-  USB.webUSBURL("http://localhost/webusb");
+  USB.webUSBURL("https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html");
   USB.begin();
 }
 

diff --git a/libraries/USB/examples/USBVendor/index.html b/libraries/USB/examples/USBVendor/index.html
@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>WebUSB Serial Sample Application</title>
+  </head>
+
+<body>
+  <script>
+var serial = {};
+
+(function() {
+  'use strict';
+
+  serial.getPorts = function() {
+    return navigator.usb.getDevices().then(devices => {
+      return devices.map(device => new serial.Port(device));
+    });
+  };
+
+  serial.requestPort = function() {
+    const filters = [
+      { 'vendorId': 0x10c4, 'productId': 0xea60 },
+      { 'vendorId': 0x303a, 'productId': 0x1001 },
+      { 'vendorId': 0x303a, 'productId': 0x0002 },
+    ];
+    return navigator.usb.requestDevice({ 'filters': filters }).then(
+      device => new serial.Port(device)
+    );
+  }
+
+  serial.Port = function(device) {
+    this.device_ = device;
+  };
+
+  serial.Port.prototype.connect = function() {
+    let readLoop = () => {
+      const {
+        endpointNumber
+      } = this.device_.configuration.interfaces[0].alternate.endpoints[0]
+      this.device_.transferIn(endpointNumber, 64).then(result => {
+        this.onReceive(result.data);
+        readLoop();
+      }, error => {
+        this.onReceiveError(error);
+      });
+    };
+
+    return this.device_.open()
+        .then(() => {
+          if (this.device_.configuration === null) {
+            return this.device_.selectConfiguration(1);
+          }
+        })
+        .then(() => this.device_.claimInterface(0))
+        .then(() => {
+          readLoop();
+        });
+  };
+
+  serial.Port.prototype.disconnect = function() {
+    return this.device_.close();
+  };
+
+  serial.Port.prototype.send = function(data) {
+    const {
+      endpointNumber
+    } = this.device_.configuration.interfaces[0].alternate.endpoints[1]
+    return this.device_.transferOut(endpointNumber, data);
+  };
+})();
+
+let port;
+
+function connect() {
+  port.connect().then(() => {
+    port.onReceive = data => {
+      let textDecoder = new TextDecoder();
+      console.log("Received:", textDecoder.decode(data));
+      document.getElementById('output').value += textDecoder.decode(data);
+    }
+    port.onReceiveError = error => {
+      console.error(error);
+      document.querySelector("#connect").style = "visibility: initial";
+      port.disconnect();
+    };
+  });
+}
+
+function send(string) {
+  console.log("sending to serial:" + string.length);
+  if (string.length === 0)
+    return;
+  console.log("sending to serial: [" + string +"]\n");
+
+  let view = new TextEncoder('utf-8').encode(string);
+  console.log(view);
+  if (port) {
+    port.send(view);
+  }
+};
+
+window.onload = _ => {
+  document.querySelector("#connect").onclick = function() {
+    serial.requestPort().then(selectedPort => {
+      port = selectedPort;
+      this.style = "visibility: hidden";
+      connect();
+    });
+  }
+
+  document.querySelector("#submit").onclick = () => {
+    let source = document.querySelector("#input").value;
+    send(source);
+  }
+}
+
+</script>
+ <button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
+ <br><br><label for="input">Sender: </label> <br>
+ <textarea id="input" rows="25" cols="80">WebUSB!</textarea>
+ <br><button id="submit">Send</button>
+ <br><br>
+ <label for="output">Receiver: </label> <br>
+ <textarea id="output" rows="25" cols="80"></textarea>
+</body>
+</html>
diff --git a/variants/esp32s2usb/pins_arduino.h b/variants/esp32s2usb/pins_arduino.h
@@ -10,7 +10,7 @@
 #define USB_PRODUCT 		"ESP32-S2-USB"
 #define USB_SERIAL 			"0"
 #define USB_WEBUSB_ENABLED	false
-#define USB_WEBUSB_URL 		"https://espressif.github.io/arduino-esp32/webusb.html"
+#define USB_WEBUSB_URL 		"https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html"
 
 // Default USB FirmwareMSC Settings
 #define USB_FW_MSC_VENDOR_ID 		"ESP32-S2" 		//max 8 chars