blob: 41e9ffe97568f2d2eceea2806ede499b62bf83c8 (
plain) (
tree)
|
|
<!DOCTYPE html>
<html>
<head>
<script src="webusb.js"></script>
</head>
<body>
<h1>My First Web Page</h1>
<p>My First Paragraph</p>
<p id="demo"></p>
<div>Device Info Product name <div id="info-product-name"></div>Manufacturer <div id="info-manufacturer"></div> Vendor ID <div id="info-vendor-id"></div> Product ID <div id="info-product-id"></div>
<div id="info-"></div>
</div>
<div>Status: <div id="status"></div></div>
<button id="request-permission">Request "serial" permission</button>
<button id="usb-open">Open</button>
<button id="usb-claim">ClaimInterface</button>
<input style="display:inline;" id="in-claim" size=1 type="text" value="0">
<button id="initialisation">Initialisation</button>
<button id="usb-close">Close</button>
<button id="usb-reset">Reset</button>
<h1>CP201</h1>
<button id="usb-conf">Config serial</button>
<button id="usb-get-line">Get line request</button>
<button id="vendor-write">Write</button>
<input style="display:inline;" id="inw-idx" size=1 type="text" value="0">
<input style="display:inline;" id="inw-val" size=2 type="text" value="0">
<button id="vendor-read">Read</button>
<input id="inr-idx" size=1 type="text" value="0">
<input id="outr-val" size=2 type="text" value="0">
<h1>CH341</h1>
<button id="ch341-configure">Configure</button>
<button id="ch341-configure2">Cfg2</button>
<button id="ch341-get-status2">Get status</button>
<button id="ch341-set-baudrate">Set baudrate</button>
<button id="ch341-ep0">EP0 In 32</button>
<button id="ch341-ep1">EP1 Out 32</button><input style="display:inline;" id="ch341-ep1-in" size=32 type="text" value="0">
<button id="ch341-ep2">EP2 In 8</button>
<input style="display:inline;" id="ch341-ep2-out" size=32 type="text">
<button id="ch341-bulkout">BulkOut</button>
<button id="ch341-break-ctl">Break Ctrl</button>
<button id="ch341-set-handshake">Set handshake</button>
<script>
let r;
let port;
function getBgColors (tab) {
// But for now, let's just make sure what we have so
// far is working as expected.
alert('The browser action was clicked! Yay!');
}
function setStatus(s){
document.getElementById("status").innerHTML=s;
};
function setInfo(n,v){
document.getElementById("info-"+n).innerHTML=v;
};
document.querySelector('#request-permission').onclick = function() {
serial.requestPort().then(selectedPort => {
port = selectedPort;
setInfo("product-name",port.device.productName);
setInfo("manufacturer",port.device.manufacturer);
setInfo("vendor-id",port.device.vendorId);
setInfo("product-id",port.device.productId);
console.log(port);
document.getElementById("status").innerHTML="Connected";
}).catch(error => {
console.log(error);
})
};
document.querySelector('#initialisation').onclick = function(){
port.init();
};
document.querySelector("#usb-open").onclick = function(){
port.connect();
setStatus("Opened");
console.log("Open usb + "+ port.device.productName);
};
document.querySelector("#usb-claim").onclick = function(){
port.claim(document.getElementById("in-claim").value);
setStatus("Claimed Interface");
console.log("Claim Interface usb + "+ port.device.productName);
};
document.querySelector("#vendor-write").onclick = function(){
var i = document.getElementById("inw-idx").value;
var v = document.getElementById("inw-val").value;
port.vendorWrite(i,v);
setStatus("Write data");
console.log("Write idx "+i+" val "+v );
};
document.querySelector("#vendor-read").onclick = function(){
port.vendorRead(0,0);
setStatus("Read data");
console.log("Close usb + "+ port.device.productName);
};
document.querySelector("#usb-reset").onclick = function(){
port.reset();
setStatus("Reset port");
console.log("Reset port");
};
document.querySelector("#usb-conf").onclick = function(){
port.reset();
setStatus("USB configure");
console.log("USB configure");
};
document.querySelector("#usb-get-line").onclick = function(){
port.getLineRequest();
setStatus("Get line");
console.log("Get line");
};
document.querySelector("#ch341-configure").onclick = function(){
r = port.CH341configure();
setStatus("Configure");
console.log("Configure");
};
document.querySelector("#ch341-configure2").onclick = function(){
r = port.CH341configure2();
setStatus("Configure2");
console.log("Configure2");
};
/*
document.querySelector("#ch341-get-status").onclick = function(){
var r = port.CH341getStatus();
console.log(r);
setStatus("Get status");
console.log("Get status");
};*/
document.querySelector("#ch341-get-status2").onclick = async() => {
let r = await port.CH341getStatus2();
console.log(r);
var u8 = new Uint8Array(r.data.buffer)
console.log(u8);
setStatus("Get status2");
console.log("Get status2");
};
document.querySelector("#ch341-ep0").onclick = async() =>{
let r = port.CH341readEP0();
//var u8 = new Uint8Array(r.data.buffer)
//console.log(u8);
console.log(r);
setStatus("Endpoint 0");
console.log("Endpoint 0");
};
function str2ab(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;
}
document.querySelector("#ch341-ep1").onclick = async() =>{
data = str2ab(document.getElementById("ch341-ep1-in").value);
console.log(data);
port.CH341readEP1(data);
setStatus("Endpoint 1");
console.log("Endpoint 1");
};
document.querySelector("#ch341-ep2").onclick = async() =>{
let r = await port.CH341readEP2();
//var u8 = new Uint8Array(r.data.buffer)
document.getElementById("ch341-ep2-out").value = document.getElementById("ch341-ep2-out").value + r;
console.log(r);
setStatus("Endpoint 2");
console.log("Endpoint 2");
};
document.querySelector("#ch341-bulkout").onclick = async() =>{
//let r = await port.bulkOut(2);
let r = await port.bulkIn(2,1);
//var u8 = new Uint8Array(r.data.buffer)
console.log(r);
setStatus("Bulkout");
console.log("Bulkout");
};
document.querySelector("#ch341-set-baudrate").onclick = async() => {
port.CH341setBaudrateLCR();
setStatus("Set baudrate");
console.log("Set baudrate");
};
document.querySelector("#ch341-break-ctl").onclick = async() => {
port.CH341breakReg();
setStatus("Set break reg");
console.log("Set break reg");
};
document.querySelector("#ch341-set-handshake").onclick = async() => {
port.CH341setHandshake();
setStatus("Set handshake");
console.log("Set handshake");
};
</script>
</body>
</html>
|
