camera-serial-utils
Version:
A utility package for camera capture and serial communication using Web Serial API
140 lines (120 loc) • 5.33 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>串口通信测试</title>
<style>
/* 保持原有样式不变 */
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
.control-panel { margin-bottom: 20px; padding: 15px; background-color: #f5f5f5; border-radius: 5px; }
button { padding: 10px 15px; margin-right: 10px; background-color: #4CAF50; color: white; border: none; border-radius: 4px; cursor: pointer; }
button:disabled { background-color: #cccccc; cursor: not-allowed; }
#status { margin: 15px 0; padding: 10px; border-radius: 4px; }
.status-connected { background-color: #dff0d8; color: #3c763d; }
.status-disconnected { background-color: #f2dede; color: #a94442; }
#log { height: 300px; overflow-y: auto; border: 1px solid #ddd; padding: 10px; background-color: #f9f9f9; font-family: monospace; }
.log-entry { margin-bottom: 5px; }
.log-send { color: #337ab7; }
.log-receive { color: #5cb85c; }
.log-error { color: #d9534f; }
</style>
</head>
<body>
<h1>串口通信测试</h1>
<div class="control-panel">
<h3>串口控制</h3>
<button id="openBtn">打开串口</button>
<button id="closeBtn" disabled>关闭串口</button>
<div id="status" class="status-disconnected">状态: 未连接</div>
</div>
<div class="control-panel">
<h3>数据通信</h3>
<button id="sendBtn" disabled>发送数据</button>
<button id="readBtn" disabled>读取数据</button>
</div>
<h3>通信日志</h3>
<div id="log"></div>
<script type="module">
import { serialHelper } from 'https://esm.sh/camera-serial-utils@1.0.7';
// DOM元素
const openBtn = document.getElementById('openBtn');
const closeBtn = document.getElementById('closeBtn');
const sendBtn = document.getElementById('sendBtn');
const readBtn = document.getElementById('readBtn');
const statusDiv = document.getElementById('status');
const logDiv = document.getElementById('log');
const dataToSendInput = document.getElementById('dataToSend');
// 添加日志
function addLog(message, type = 'info') {
const logEntry = document.createElement('div');
logEntry.className = `log-entry log-${type}`;
logEntry.textContent = `[${new Date().toLocaleTimeString()}] ${message}`;
logDiv.appendChild(logEntry);
logDiv.scrollTop = logDiv.scrollHeight;
}
// 更新状态
function updateStatus(connected) {
if (connected) {
statusDiv.textContent = '状态: 已连接';
statusDiv.className = 'status status-connected';
openBtn.disabled = true;
closeBtn.disabled = false;
sendBtn.disabled = false;
readBtn.disabled = false;
} else {
statusDiv.textContent = '状态: 未连接';
statusDiv.className = 'status status-disconnected';
openBtn.disabled = false;
closeBtn.disabled = true;
sendBtn.disabled = true;
readBtn.disabled = true;
}
}
// 打开串口
openBtn.addEventListener('click', async () => {
try {
addLog('正在打开串口...');
await serialHelper.open();
updateStatus(true);
addLog('串口已成功打开', 'receive');
} catch (error) {
addLog(`打开串口失败: ${error.message}`, 'error');
}
});
// 关闭串口
closeBtn.addEventListener('click', async () => {
try {
addLog('正在关闭串口...');
await serialHelper.close();
updateStatus(false);
addLog('串口已关闭', 'receive');
} catch (error) {
addLog(`关闭串口失败: ${error.message}`, 'error');
}
});
// 发送数据
sendBtn.addEventListener('click', async () => {
try {
await serialHelper.send();
addLog('数据发送成功', 'receive');
} catch (error) {
addLog(`发送失败: ${error.message}`, 'error');
}
});
// 读取数据（核心修复）
readBtn.addEventListener('click', async () => {
try {
addLog(`开始读取数据...`);
const data = await serialHelper.read();
addLog(`收到完整数据: ${data}`, 'receive');
} catch (error) {
addLog(`读取失败: ${error.message}`, 'error');
}
});
// 初始化
updateStatus(false);
addLog('准备就绪，请打开串口');
</script>
</body>
</html>