frost-craft/msu2-usb-monitor-controller
1
0
Fork 0
Code Releases Activity

feat: 优化界面样式

Browse Source
This commit is contained in:
Frost-ZX
2026-02-14 17:57:31 +08:00
parent fc37fcbef0
commit 7fce13db1c
3 changed files with 277 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+45 -21
View File
@@ -3,33 +3,57 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>USB Monitor Controller</title>
<title>MSU2 USB Monitor Controller</title>
<link rel="stylesheet" href="./assets/main.css">
</head>
<body>
<div class="container">
<button id="connect-button">连接设备</button>
<button id="disconnect-button">断开连接</button>
<button id="start-button">开始发送</button>
<button id="stop-button">停止发送</button>
<div class="resolution-selector">
<label for="resolution">分辨率：</label>
<select id="resolution">
<option value="160x80" selected>160x80</option>
<option value="320x172">320x172</option>
<option value="320x240">320x240</option>
</select>
<!-- 标题 -->
<h1>MSU2 USB Monitor Controller</h1>
<!-- 表单容器 -->
<div class="form-container">
<!-- 操作 -->
<div class="actions">
<button id="connect-button">连接设备</button>
<button id="disconnect-button">断开连接</button>
<button id="start-button">开始发送</button>
<button id="stop-button">停止发送</button>
</div>
<!-- 配置 -->
<div class="settings">
<!-- 分辨率 -->
<div class="resolution-selector">
<label for="resolution">分辨率：</label>
<select id="resolution">
<option value="160x80" selected>160x80</option>
<option value="320x172">320x172</option>
<option value="320x240">320x240</option>
</select>
</div>
<!-- 显示模式 -->
<div class="display-mode-selector">
<label for="display-mode">显示模式：</label>
<select id="display-mode">
<option value="data" selected>文本数据</option>
<option value="spectrum">频谱分析</option>
</select>
</div>
</div>
</div>
<div class="display-mode-selector">
<label for="display-mode">显示模式：</label>
<select id="display-mode">
<option value="data" selected>文本数据</option>
<option value="spectrum">频谱分析</option>
</select>
<!-- 画布容器 -->
<div class="canvas-container">
<canvas id="canvas-element" width="320" height="240"></canvas>
</div>
</div>
<div class="canvas-container">
<canvas id="monitor-canvas" width="320" height="240"></canvas>
</div>
<script src="./assets/main.js"></script>
</body>