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

215
assets/main.css
View File

@@ -0,0 +1,215 @@
/* 全局样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* 根元素变量定义 */
:root {
--primary-color: #3498db;
--primary-hover: #2980b9;
--secondary-color: #2ecc71;
--secondary-hover: #27ae60;
--danger-color: #e74c3c;
--danger-hover: #c0392b;
--warning-color: #f39c12;
--warning-hover: #e67e22;
--background-color: #f5f7fa;
--card-background: #ffffff;
--text-primary: #2c3e50;
--text-secondary: #7f8c8d;
--border-radius: 8px;
--box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
--transition: all 0.3s ease;
}
/* 基础样式 */
body {
font-family: 'HarmonyOS Sans SC', sans-serif;
background-color: var(--background-color);
color: var(--text-primary);
line-height: 1.6;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
}
/* 主容器 */
.container {
width: 100%;
max-width: 800px;
margin: 0 auto;
}
/* 标题样式 */
h1 {
text-align: center;
color: var(--text-primary);
margin-bottom: 30px;
font-size: 24px;
font-weight: 600;
}
/* 表单容器 */
.form-container {
background-color: var(--card-background);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 24px;
margin-bottom: 24px;
width: 100%;
}
/* 操作按钮区域 */
.actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: 12px;
margin-bottom: 24px;
}
/* 按钮样式 */
button {
padding: 12px 16px;
border: none;
border-radius: var(--border-radius);
font-size: 14px;
font-weight: 500;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
gap: 6px;
}
/* 禁用按钮样式 */
button.disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none !important;
box-shadow: none !important;
}
button.disabled:hover {
transform: none !important;
box-shadow: none !important;
}
/* 按钮类型样式 */
#connect-button {
background-color: var(--primary-color);
color: white;
}
#connect-button:hover {
background-color: var(--primary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}
#disconnect-button {
background-color: var(--danger-color);
color: white;
}
#disconnect-button:hover {
background-color: var(--danger-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(231, 76, 60, 0.4);
}
#start-button {
background-color: var(--secondary-color);
color: white;
}
#start-button:hover {
background-color: var(--secondary-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(46, 204, 113, 0.4);
}
#stop-button {
background-color: var(--warning-color);
color: white;
}
#stop-button:hover {
background-color: var(--warning-hover);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(243, 156, 18, 0.4);
}
/* 设置区域 */
.settings {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
/* 选择器容器 */
.resolution-selector,
.display-mode-selector {
display: flex;
flex-direction: column;
gap: 8px;
}
/* 标签样式 */
label {
font-size: 14px;
font-weight: 500;
color: var(--text-secondary);
}
/* 选择框样式 */
select {
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: var(--border-radius);
font-size: 14px;
background-color: white;
transition: var(--transition);
cursor: pointer;
}
select:hover {
border-color: var(--primary-color);
box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}
select:focus {
outline: none;
border-color: var(--primary-color);
box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2);
}
/* 画布容器 */
.canvas-container {
background-color: var(--card-background);
border-radius: var(--border-radius);
box-shadow: var(--box-shadow);
padding: 20px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 24px;
}
/* 选择文本样式 */
::selection {
background-color: var(--primary-color);
color: white;
}
/* 滚动条样式 */
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: #c1c1c1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #a8a8a8;
}

18
assets/main.js
View File

@@ -4,7 +4,7 @@ window.addEventListener('DOMContentLoaded', () => {
const disconnectButton = document.getElementById('disconnect-button');
const startButton = document.getElementById('start-button');
const stopButton = document.getElementById('stop-button');
const canvas = document.getElementById('monitor-canvas');
const canvas = document.getElementById('canvas-element');
const ctx = canvas.getContext('2d');
// 全局变量
@@ -17,6 +17,16 @@ window.addEventListener('DOMContentLoaded', () => {
let lastRefreshTime = 0;
let displayMode = 'data'; // 显示模式: 'data' 或 'spectrum'
// 初始化UI状态
function initUI() {
// 初始绘制
if (displayMode === 'data') {
monitor.createDisplayImage();
} else {
drawSpectrum();
}
}
// 音频相关变量
let audioContext = null;
let analyser = null;
@@ -186,6 +196,9 @@ window.addEventListener('DOMContentLoaded', () => {
// 创建全局监控器实例
const monitor = new SystemMonitor();
// 初始化UI
initUI();
// 初始化音频上下文和麦克风
async function initAudio() {
try {
@@ -333,6 +346,7 @@ window.addEventListener('DOMContentLoaded', () => {
// 连接按钮点击事件
connectButton.addEventListener('click', async () => {
try {
// 请求用户授权访问串口设备
port = await navigator.serial.requestPort();
@@ -434,6 +448,7 @@ window.addEventListener('DOMContentLoaded', () => {
// 断开连接按钮点击事件
disconnectButton.addEventListener('click', async () => {
// 断开连接前自动停止监控
if (animationId) {
console.log('自动停止监控...');
@@ -458,6 +473,7 @@ window.addEventListener('DOMContentLoaded', () => {
deviceState = 0;
console.log('设备已断开连接');
});
// 辅助函数：将32位整数拆分为4个字节

66
index.html
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>