forked from nagineni/webusb-serial
-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
125 lines (108 loc) · 3.13 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<html>
<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': 0x2fe3, 'productId': 0x0100 },
{ 'vendorId': 0x2fe3, 'productId': 0x00a },
{ 'vendorId': 0x8086, 'productId': 0xF8A1 },
];
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("#editor").value;
send(source);
}
}
</script>
<button id="connect" style="visibility: initial">Connect To WebUSB Device</button>
<br><br><label for="title">Sender: </label> <br>
<textarea id="editor", rows="25" cols="80" id="source">WebUSB!</textarea>
<br><button id="submit">Send</button>
<br><br>
<label for="title">Receiver: </label> </br>
<textarea id="output", rows="25" cols="80" id="source"></textarea>
</body>