adafruit-mirror/arduino-esp32
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Improve USBVendor Example (#9349)

Browse source 
* Add WebUSB console

* Improve Console Page

* Improve example

* Add comments

* Add flush method

---------

Co-authored-by: Jan Procházka <90197375+P-R-O-C-H-Y@users.noreply.github.com>
This commit is contained in:
Lucas Saavedra Vaz 2024-03-11 10:10:46 -03:00 committed by GitHub
parent b92ad5574a
commit dce754b693
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 273 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
cores/esp32/USB.cpp
View file

@ -48,7 +48,7 @@
#define USB_WEBUSB_ENABLED false #define USB_WEBUSB_ENABLED false
#endif #endif
#ifndef USB_WEBUSB_URL #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 #endif
#if CFG_TUD_DFU #if CFG_TUD_DFU

128
docs/_static/webusb.html vendored Normal file
View file

@ -0,0 +1,128 @@
<!-- Based on https://github.com/zephyrproject-rtos/zephyr/tree/main/samples/subsys/usb/webusb -->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Espressif WebUSB Console Example</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 ESP Device</button>
<br><br><label for="input">Sender: </label> <br>
<textarea id="input" rows="25" cols="80">Send to ESP Device</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>

2
docs/en/api/usb.rst
View file

@ -303,7 +303,7 @@ This function is used to get the ``webUSBURL``.
const char * webUSBURL(void); 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 enableDFU
^^^^^^^^^ ^^^^^^^^^

8
libraries/USB/examples/USBVendor/USBVendor.ino
View file

@ -164,7 +164,8 @@ void setup() {
USB.onEvent(usbEventCallback); USB.onEvent(usbEventCallback);
USB.webUSB(true); USB.webUSB(true);
USB.webUSBURL("http://localhost/webusb"); // Set the URL for your WebUSB landing page
USB.webUSBURL("https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html");
USB.begin(); USB.begin();
} }
@ -176,9 +177,11 @@ void loop() {
if (buttonState == LOW) { if (buttonState == LOW) {
Serial.println("Button Pressed"); Serial.println("Button Pressed");
Vendor.println("Button Pressed"); Vendor.println("Button Pressed");
Vendor.flush(); //Without flushing the data will only be sent when the buffer is full (64 bytes)
} else { } else {
Vendor.println("Button Released");
Serial.println("Button Released"); Serial.println("Button Released");
Vendor.println("Button Released");
Vendor.flush(); //Without flushing the data will only be sent when the buffer is full (64 bytes)
} }
delay(100); delay(100);
} }
@ -188,6 +191,7 @@ void loop() {
uint8_t b[l]; uint8_t b[l];
l = Serial.read(b, l); l = Serial.read(b, l);
Vendor.write(b, l); Vendor.write(b, l);
Vendor.flush(); //Without flushing the data will only be sent when the buffer is full (64 bytes)
} }
} }
#endif /* ARDUINO_USB_MODE */ #endif /* ARDUINO_USB_MODE */

133
libraries/USB/examples/USBVendor/index.html Normal file
View file

@ -0,0 +1,133 @@
<!-- Based on https://github.com/zephyrproject-rtos/zephyr/tree/main/samples/subsys/usb/webusb -->
<!--
Example of WebUSB web page to communicate with a USB device.
This can be used as a starting point for your self-hosted WebUSB landing page.
-->
<!DOCTYPE html>
<html lang="en">
<head>
<title>Espressif WebUSB Console Example</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 ESP Device</button>
<br><br><label for="input">Sender: </label> <br>
<textarea id="input" rows="25" cols="80">Send to ESP Device</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>

4
libraries/USB/src/USBVendor.cpp
View file

@ -212,7 +212,9 @@ size_t USBVendor::read(uint8_t *buffer, size_t size){
return count; return count;
} }
void USBVendor::flush(void){} void USBVendor::flush(void){
tud_vendor_n_write_flush(itf);
}
#endif /* CONFIG_TINYUSB_VENDOR_ENABLED */ #endif /* CONFIG_TINYUSB_VENDOR_ENABLED */
#endif /* SOC_USB_OTG_SUPPORTED */ #endif /* SOC_USB_OTG_SUPPORTED */

2
variants/esp32s2usb/pins_arduino.h
View file

@ -10,7 +10,7 @@
#define USB_PRODUCT "ESP32-S2-USB" #define USB_PRODUCT "ESP32-S2-USB"
#define USB_SERIAL "0" #define USB_SERIAL "0"
#define USB_WEBUSB_ENABLED false #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 // Default USB FirmwareMSC Settings
#define USB_FW_MSC_VENDOR_ID "ESP32-S2" //max 8 chars #define USB_FW_MSC_VENDOR_ID "ESP32-S2" //max 8 chars