Skip to content

Commit a0d97ad

Browse files
lucasssvazlucasssvaz
committed
Improve Console Page
1 parent 5da82d5 commit a0d97ad

File tree

1 file changed

+114
-112
lines changed

1 file changed

+114
-112
lines changed

‎docs/_static/webusb.html

Lines changed: 114 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -1,126 +1,128 @@
1+
<!-- Based on https://github.com/zephyrproject-rtos/zephyr/tree/main/samples/subsys/usb/webusb -->
2+
13
<!DOCTYPE html>
24
<html lang="en">
35
<head>
4-
<title>WebUSB Serial Sample Application</title>
6+
<title>Espressif WebUSB Console Example</title>
57
</head>
68

79
<body>
810
<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);
11+
var serial = {};
12+
13+
(function() {
14+
'use strict';
15+
16+
serial.getPorts = function() {
17+
return navigator.usb.getDevices().then(devices => {
18+
return devices.map(device => new serial.Port(device));
19+
});
20+
};
21+
22+
serial.requestPort = function() {
23+
const filters = [
24+
{ 'vendorId': 0x10c4, 'productId': 0xea60 },
25+
{ 'vendorId': 0x303a, 'productId': 0x1001 },
26+
{ 'vendorId': 0x303a, 'productId': 0x0002 },
27+
];
28+
return navigator.usb.requestDevice({ 'filters': filters }).then(
29+
device => new serial.Port(device)
30+
);
31+
}
32+
33+
serial.Port = function(device) {
34+
this.device_ = device;
35+
};
36+
37+
serial.Port.prototype.connect = function() {
38+
let readLoop = () => {
39+
const {
40+
endpointNumber
41+
} = this.device_.configuration.interfaces[0].alternate.endpoints[0]
42+
this.device_.transferIn(endpointNumber, 64).then(result => {
43+
this.onReceive(result.data);
44+
readLoop();
45+
}, error => {
46+
this.onReceiveError(error);
47+
});
48+
};
49+
50+
return this.device_.open()
51+
.then(() => {
52+
if (this.device_.configuration === null) {
53+
return this.device_.selectConfiguration(1);
54+
}
55+
})
56+
.then(() => this.device_.claimInterface(0))
57+
.then(() => {
58+
readLoop();
59+
});
60+
};
61+
62+
serial.Port.prototype.disconnect = function() {
63+
return this.device_.close();
64+
};
65+
66+
serial.Port.prototype.send = function(data) {
67+
const {
68+
endpointNumber
69+
} = this.device_.configuration.interfaces[0].alternate.endpoints[1]
70+
return this.device_.transferOut(endpointNumber, data);
71+
};
72+
})();
73+
74+
let port;
75+
76+
function connect() {
77+
port.connect().then(() => {
78+
port.onReceive = data => {
79+
let textDecoder = new TextDecoder();
80+
console.log("Received:", textDecoder.decode(data));
81+
document.getElementById('output').value += textDecoder.decode(data);
82+
}
83+
port.onReceiveError = error => {
84+
console.error(error);
85+
document.querySelector("#connect").style = "visibility: initial";
86+
port.disconnect();
87+
};
4588
});
89+
}
90+
91+
function send(string) {
92+
console.log("sending to serial:" + string.length);
93+
if (string.length === 0)
94+
return;
95+
console.log("sending to serial: [" + string +"]\n");
96+
97+
let view = new TextEncoder('utf-8').encode(string);
98+
console.log(view);
99+
if (port) {
100+
port.send(view);
101+
}
46102
};
47103

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();
104+
window.onload = _ => {
105+
document.querySelector("#connect").onclick = function() {
106+
serial.requestPort().then(selectedPort => {
107+
port = selectedPort;
108+
this.style = "visibility: hidden";
109+
connect();
57110
});
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);
111+
}
112+
113+
document.querySelector("#submit").onclick = () => {
114+
let source = document.querySelector("#input").value;
115+
send(source);
116+
}
80117
}
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>
118+
</script>
119+
120+
<button id="connect" style="visibility: initial">Connect To ESP Device</button>
121+
<br><br><label for="input">Sender: </label> <br>
122+
<textarea id="input" rows="25" cols="80">Send to ESP Device</textarea>
123+
<br><button id="submit">Send</button>
124+
<br><br>
125+
<label for="output">Receiver: </label> <br>
126+
<textarea id="output" rows="25" cols="80"></textarea>
125127
</body>
126128
</html>

0 commit comments

Comments
 (0)