近期用单片机做了个IDE光驱控制器来放CD,一直琢磨串口的上位机用什么方案来搞。其实只需要几条简单的指令交互就可以。所以最开始想用delphi来编个串口通信小程序就OK。但居然微软MSCOMM控件死活编译不成功,没办法导入到delphi的IDE里面去。VC太繁琐不想碰,看到Google提供了Web API接口,理论上简单的JS脚本就可以解决问题,反正我对实时性没啥要求,赶紧来试试。先写了个类似串口调试助手的东东,还不错。后面再优化下界面就成定制版的CD player前台了。
网页脚本:
<html>
<head><meta http-equiv="Content-Type"content="text/html;charset=gb2312">
<style>
textarea{
resize:none;
}
</style>
</head>
<body>
<div>
<button id="butConnect" >打开串口</button>
<button id="butEnd" >关闭串口</button>
<button id="but_Senddata" >发送</button>
<button id="but_Clear_Received" onclick="Clear_Received()" >接收清屏</button>
<select id="selectlist" style="width:100px;" onchange="changeBAUD()">
<option>115200</option>
<option>38400</option>
<option>19200</option>
<option>9600</option>
<option>1200</option>
</select>
</div>
接收数据>><br />
<textarea id="recetext" rows="16" cols="100" style="overflow-y:auto">
</textarea><br />
发送数据>><br />
<textarea id="sendtext" rows="16" cols="100" style="overflow-y:auto">
</textarea><br />
<script>
let keepReading = false;
let reader;
let writer;
BAUDRATE=115200;
document.getElementById("recetext").value="";
document.getElementById("sendtext").value="";
/*-------------------------打开串口&循环接收数据------------------------*/
document.getElementById("butConnect").addEventListener("click", async () => {
const port = await navigator.serial.requestPort();
try {
await port.open({ baudRate: document.getElementById("selectlist").value });
} catch(err){alert("串口已打开");};
keepReading = true;
const textDecoder = new TextDecoderStream();
const readableStreamClosed = port.readable.pipeTo(textDecoder.writable);
const reader = textDecoder.readable.getReader();
writer = port.writable.getWriter();
while (port.readable && keepReading) {
const { value, done } = await reader.read();
if (done||keepReading==false) {
// Allow the serial port to be closed later.
reader.releaseLock();
break;
}
if (value) {
document.getElementById("recetext").value+=value;
}
}//while
});
/*-------------------------关闭处理----------------------------------*/
// const closedPromise = readUntilClosed();
document.getElementById("butEnd").addEventListener("click", async () => {
keepReading = false;
writer.close();
await port.close();
});
/*-------------------------发送数据------------------------------*/
document.getElementById("but_Senddata").addEventListener("click", async () => {
arr = [];
var string =Array.from(document.getElementById("sendtext").value);//发送数据存入数组
for(var i=0;i<string.length;i++){
arr.push(string[i].charCodeAt()); //数组中的数据转换为ASCII码
}
var tmpUint8Array = new Uint8Array(arr); //数组类型转换
await writer.write(tmpUint8Array);
});
/*-------------------------接收区域清屏-------------------------*/
function Clear_Received(){
document.getElementById("recetext").value="";
}
function changeBAUD(){
// BAUDRATE= document.getElementById("selectlist").value;
}
</script>
</body>
</html>
refer:Web Serial API