Skip to content

Commit 5da82d5

Browse files
lucasssvazlucasssvaz
committed
Add WebUSB console
1 parent 4123e20 commit 5da82d5

File tree

6 files changed

+256
-4
lines changed

6 files changed

+256
-4
lines changed

‎cores/esp32/USB.cpp

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848
#define USB_WEBUSB_ENABLED false
4949
#endif
5050
#ifndef USB_WEBUSB_URL
51-
#define USB_WEBUSB_URL "https://espressif.github.io/arduino-esp32/webusb.html"
51+
#define USB_WEBUSB_URL "https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html"
5252
#endif
5353

5454
#if CFG_TUD_DFU

‎docs/_static/webusb.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>WebUSB Serial Sample Application</title>
5+
</head>
6+
7+
<body>
8+
<script>
9+
var serial = {};
10+
11+
(function() {
12+
'use strict';
13+
14+
serial.getPorts = function() {
15+
return navigator.usb.getDevices().then(devices => {
16+
return devices.map(device => new serial.Port(device));
17+
});
18+
};
19+
20+
serial.requestPort = function() {
21+
const filters = [
22+
{ 'vendorId': 0x10c4, 'productId': 0xea60 },
23+
{ 'vendorId': 0x303a, 'productId': 0x1001 },
24+
{ 'vendorId': 0x303a, 'productId': 0x0002 },
25+
];
26+
return navigator.usb.requestDevice({ 'filters': filters }).then(
27+
device => new serial.Port(device)
28+
);
29+
}
30+
31+
serial.Port = function(device) {
32+
this.device_ = device;
33+
};
34+
35+
serial.Port.prototype.connect = function() {
36+
let readLoop = () => {
37+
const {
38+
endpointNumber
39+
} = this.device_.configuration.interfaces[0].alternate.endpoints[0]
40+
this.device_.transferIn(endpointNumber, 64).then(result => {
41+
this.onReceive(result.data);
42+
readLoop();
43+
}, error => {
44+
this.onReceiveError(error);
45+
});
46+
};
47+
48+
return this.device_.open()
49+
.then(() => {
50+
if (this.device_.configuration === null) {
51+
return this.device_.selectConfiguration(1);
52+
}
53+
})
54+
.then(() => this.device_.claimInterface(0))
55+
.then(() => {
56+
readLoop();
57+
});
58+
};
59+
60+
serial.Port.prototype.disconnect = function() {
61+
return this.device_.close();
62+
};
63+
64+
serial.Port.prototype.send = function(data) {
65+
const {
66+
endpointNumber
67+
} = this.device_.configuration.interfaces[0].alternate.endpoints[1]
68+
return this.device_.transferOut(endpointNumber, data);
69+
};
70+
})();
71+
72+
let port;
73+
74+
function connect() {
75+
port.connect().then(() => {
76+
port.onReceive = data => {
77+
let textDecoder = new TextDecoder();
78+
console.log("Received:", textDecoder.decode(data));
79+
document.getElementById('output').value += textDecoder.decode(data);
80+
}
81+
port.onReceiveError = error => {
82+
console.error(error);
83+
document.querySelector("#connect").style = "visibility: initial";
84+
port.disconnect();
85+
};
86+
});
87+
}
88+
89+
function send(string) {
90+
console.log("sending to serial:" + string.length);
91+
if (string.length === 0)
92+
return;
93+
console.log("sending to serial: [" + string +"]\n");
94+
95+
let view = new TextEncoder('utf-8').encode(string);
96+
console.log(view);
97+
if (port) {
98+
port.send(view);
99+
}
100+
};
101+
102+
window.onload = _ => {
103+
document.querySelector("#connect").onclick = function() {
104+
serial.requestPort().then(selectedPort => {
105+
port = selectedPort;
106+
this.style = "visibility: hidden";
107+
connect();
108+
});
109+
}
110+
111+
document.querySelector("#submit").onclick = () => {
112+
let source = document.querySelector("#input").value;
113+
send(source);
114+
}
115+
}
116+
117+
</script>
118+
<button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
119+
<br><br><label for="input">Sender: </label> <br>
120+
<textarea id="input" rows="25" cols="80">WebUSB!</textarea>
121+
<br><button id="submit">Send</button>
122+
<br><br>
123+
<label for="output">Receiver: </label> <br>
124+
<textarea id="output" rows="25" cols="80"></textarea>
125+
</body>
126+
</html>

‎docs/en/api/usb.rst

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -303,7 +303,7 @@ This function is used to get the ``webUSBURL``.
303303
304304
const char * webUSBURL(void);
305305
306-
The default ``webUSBURL`` is: https://espressif.github.io/arduino-esp32/webusb.html
306+
The default ``webUSBURL`` is: https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html
307307

308308
enableDFU
309309
^^^^^^^^^

‎libraries/USB/examples/USBVendor/USBVendor.ino

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -164,7 +164,7 @@ void setup() {
164164

165165
USB.onEvent(usbEventCallback);
166166
USB.webUSB(true);
167-
USB.webUSBURL("http://localhost/webusb");
167+
USB.webUSBURL("https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html");
168168
USB.begin();
169169
}
170170

‎libraries/USB/examples/USBVendor/index.html

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<title>WebUSB Serial Sample Application</title>
5+
</head>
6+
7+
<body>
8+
<script>
9+
var serial = {};
10+
11+
(function() {
12+
'use strict';
13+
14+
serial.getPorts = function() {
15+
return navigator.usb.getDevices().then(devices => {
16+
return devices.map(device => new serial.Port(device));
17+
});
18+
};
19+
20+
serial.requestPort = function() {
21+
const filters = [
22+
{ 'vendorId': 0x10c4, 'productId': 0xea60 },
23+
{ 'vendorId': 0x303a, 'productId': 0x1001 },
24+
{ 'vendorId': 0x303a, 'productId': 0x0002 },
25+
];
26+
return navigator.usb.requestDevice({ 'filters': filters }).then(
27+
device => new serial.Port(device)
28+
);
29+
}
30+
31+
serial.Port = function(device) {
32+
this.device_ = device;
33+
};
34+
35+
serial.Port.prototype.connect = function() {
36+
let readLoop = () => {
37+
const {
38+
endpointNumber
39+
} = this.device_.configuration.interfaces[0].alternate.endpoints[0]
40+
this.device_.transferIn(endpointNumber, 64).then(result => {
41+
this.onReceive(result.data);
42+
readLoop();
43+
}, error => {
44+
this.onReceiveError(error);
45+
});
46+
};
47+
48+
return this.device_.open()
49+
.then(() => {
50+
if (this.device_.configuration === null) {
51+
return this.device_.selectConfiguration(1);
52+
}
53+
})
54+
.then(() => this.device_.claimInterface(0))
55+
.then(() => {
56+
readLoop();
57+
});
58+
};
59+
60+
serial.Port.prototype.disconnect = function() {
61+
return this.device_.close();
62+
};
63+
64+
serial.Port.prototype.send = function(data) {
65+
const {
66+
endpointNumber
67+
} = this.device_.configuration.interfaces[0].alternate.endpoints[1]
68+
return this.device_.transferOut(endpointNumber, data);
69+
};
70+
})();
71+
72+
let port;
73+
74+
function connect() {
75+
port.connect().then(() => {
76+
port.onReceive = data => {
77+
let textDecoder = new TextDecoder();
78+
console.log("Received:", textDecoder.decode(data));
79+
document.getElementById('output').value += textDecoder.decode(data);
80+
}
81+
port.onReceiveError = error => {
82+
console.error(error);
83+
document.querySelector("#connect").style = "visibility: initial";
84+
port.disconnect();
85+
};
86+
});
87+
}
88+
89+
function send(string) {
90+
console.log("sending to serial:" + string.length);
91+
if (string.length === 0)
92+
return;
93+
console.log("sending to serial: [" + string +"]\n");
94+
95+
let view = new TextEncoder('utf-8').encode(string);
96+
console.log(view);
97+
if (port) {
98+
port.send(view);
99+
}
100+
};
101+
102+
window.onload = _ => {
103+
document.querySelector("#connect").onclick = function() {
104+
serial.requestPort().then(selectedPort => {
105+
port = selectedPort;
106+
this.style = "visibility: hidden";
107+
connect();
108+
});
109+
}
110+
111+
document.querySelector("#submit").onclick = () => {
112+
let source = document.querySelector("#input").value;
113+
send(source);
114+
}
115+
}
116+
117+
</script>
118+
<button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
119+
<br><br><label for="input">Sender: </label> <br>
120+
<textarea id="input" rows="25" cols="80">WebUSB!</textarea>
121+
<br><button id="submit">Send</button>
122+
<br><br>
123+
<label for="output">Receiver: </label> <br>
124+
<textarea id="output" rows="25" cols="80"></textarea>
125+
</body>
126+
</html>

‎variants/esp32s2usb/pins_arduino.h

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@
1010
#define USB_PRODUCT "ESP32-S2-USB"
1111
#define USB_SERIAL "0"
1212
#define USB_WEBUSB_ENABLED false
13-
#define USB_WEBUSB_URL "https://espressif.github.io/arduino-esp32/webusb.html"
13+
#define USB_WEBUSB_URL "https://docs.espressif.com/projects/arduino-esp32/en/latest/_static/webusb.html"
1414

1515
// Default USB FirmwareMSC Settings
1616
#define USB_FW_MSC_VENDOR_ID "ESP32-S2" //max 8 chars

0 commit comments

Comments
 (0)