forked from reillyeon/web-serial-polyfill
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdemo.html
135 lines (121 loc) · 4.49 KB
/
demo.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
126
127
128
129
130
131
132
133
134
135
<!--
- Copyright 2019 Google LLC
-
- Licensed under the Apache License, Version 2.0 (the
- "License"); you may not use this file except in
- compliance with the License. You may obtain a copy of
- the License at
-
- https://www.apache.org/licenses/LICENSE-2.0
-
- Unless required by applicable law or agreed to in
- writing, software distributed under the License is
- distributed on an "AS IS" BASIS, WITHOUT WARRANTIES
- OR CONDITIONS OF ANY KIND, either express or implied.
- See the License for the specific language governing
- permissions and limitations under the License.
-->
<!DOCTYPE html>
<html>
<head>
<title>Android Serial Polyfill Demo</title>
</head>
<body>
<h1>Serial API Polyfill Demo</h1>
<button id='request-device'>Request Device</button>
<button id='send'>Send Text(Tx)</button> <input type="text" id="inputText"/>
<button id='get'>Read(Rx)</button>
<p>baud rate: <span id="baudrate"/></p>
<p>stopbits: <span id="stopbits"/></p>
<p>parity: <span id="parity"/></p>
<button id='getInfo'>Read fdSerial Options</button>
<p id='ReceivedText'></p>
<script src="serial.js"></script>
<script>
var mySerial;
let receivedText = '';
let reader = {};
let writer = {};
//if there is already a device that we have been given permission for we can just grab it like this
document.addEventListener('DOMContentLoaded', async () => {
serial.getPorts().then(async (serialDevices) => {
if(serialDevices.length > 0) {
//probably want to do some checks here to make sure you get the correct device. We are just grabbing the first for the demo
mySerial = serialDevices[0];
await mySerial.open();
reader = mySerial.in.getReader();
writer = mySerial.out.getWriter();
}
})
});
//if we have not gotten permission yet we need to request for the port like this
let button = document.getElementById('request-device');
button.addEventListener('click', async () => {
serial.requestPort().then(async (serialPort) => {
mySerial = serialPort;
await mySerial.open();
reader = mySerial.in.getReader();
writer = mySerial.out.getWriter();
})
//the device can also be requested manuallly from the webUSB API and then set manually like this
// const filters = [
// { classCode: 10 },
// ];
//
// navigator.usb.requestDevice({ 'filters': filters }).then(
// async (device) => {
// mySerial = new serial.SerialPort(device);
// await mySerial.open();
//
// reader = mySerial.in.getReader();
// writer = mySerial.out.getWriter();
// }
// );
});
str2ab = function(str) {
var buf = new ArrayBuffer(str.length); // 2 bytes for each char
var bufView = new Uint8Array(buf);
for (var i=0, strLen=str.length; i < strLen; i++) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
ab2str = function(buf) {
return String.fromCharCode.apply(null, new Uint8Array(buf));
}
//send the text out after converting it to an array buffer.
//The conversion function above is simply for ascii.
//please convert to an array buffer in what ever way fits your application
let sendButton = document.getElementById('send');
sendButton.addEventListener('click', async () => {
writer.ready.then(() => {
let inputArrayBuffer = str2ab(document.getElementById("inputText").value);
return writer.write(inputArrayBuffer);
})
});
//reads a chunk of data from the stream at a max of 64 bytes
//again we are converting the data assuming it is ascii data
let getButton = document.getElementById('get');
getButton.addEventListener('click', async () => {
reader.read().then(({value}) => {
receivedText += ab2str(value.buffer);
document.getElementById("ReceivedText").innerHTML= receivedText
},
error => {console.error('error from read', error)}
);
});
//this reads the serial settings that are set on the device.
//Remember, to set these settings with an object that is structured the same as what is returned here
//using the setOptions(options) functions on your SerialPort instance.
let getInfoButton = document.getElementById('getInfo');
getInfoButton.addEventListener('click', async () => {
mySerial.getInfo().then((results) => {
console.log('get info results', results);
document.getElementById("baudrate").innerHTML = results.baudrate;
document.getElementById("stopbits").innerHTML = results.stopbits;
document.getElementById("parity").innerHTML = results.parity;
})
});
</script>
</body>
</html>