mirror of
https://github.com/espressif/arduino-esp32
synced 2024-09-21 10:28:04 +00:00
Improve USBVendor Example (#9349)
* 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:
parent
b92ad5574a
commit
dce754b693
@ -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
|
||||
|
128
docs/_static/webusb.html
vendored
Normal file
128
docs/_static/webusb.html
vendored
Normal 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>
|
@ -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
|
||||
^^^^^^^^^
|
||||
|
@ -164,7 +164,8 @@ void setup() {
|
||||
|
||||
USB.onEvent(usbEventCallback);
|
||||
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();
|
||||
}
|
||||
|
||||
@ -176,9 +177,11 @@ void loop() {
|
||||
if (buttonState == LOW) {
|
||||
Serial.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 {
|
||||
Vendor.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);
|
||||
}
|
||||
@ -188,6 +191,7 @@ void loop() {
|
||||
uint8_t b[l];
|
||||
l = Serial.read(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 */
|
||||
|
133
libraries/USB/examples/USBVendor/index.html
Normal file
133
libraries/USB/examples/USBVendor/index.html
Normal 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>
|
@ -212,7 +212,9 @@ size_t USBVendor::read(uint8_t *buffer, size_t size){
|
||||
return count;
|
||||
}
|
||||
|
||||
void USBVendor::flush(void){}
|
||||
void USBVendor::flush(void){
|
||||
tud_vendor_n_write_flush(itf);
|
||||
}
|
||||
|
||||
#endif /* CONFIG_TINYUSB_VENDOR_ENABLED */
|
||||
#endif /* SOC_USB_OTG_SUPPORTED */
|
||||
|
@ -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
|
||||
|
Loading…
Reference in New Issue
Block a user