From ad69c30df45820409643a18af5631fea987df71f Mon Sep 17 00:00:00 2001 From: Cx330 <1487537121@qq.com> Date: Mon, 13 Apr 2026 16:51:31 +0800 Subject: [PATCH] =?UTF-8?q?=E5=85=AB=E6=96=B9=E5=90=91=E8=BF=90=E5=8A=A8?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E4=BC=98=E5=8C=96=E5=AE=8C=E6=88=90?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- main/CSS/control.css | 40 +++++ main/Javascript/control.js | 305 ++++++++++++++++++++++++++++++++++++- main/index.html | 10 ++ main/motor.py | 124 +++++++++------ main/motor_test.py | 137 ++++++++++------- main/server.py | 40 +++++ 6 files changed, 555 insertions(+), 101 deletions(-) diff --git a/main/CSS/control.css b/main/CSS/control.css index 936b41d..20f9626 100644 --- a/main/CSS/control.css +++ b/main/CSS/control.css @@ -91,6 +91,46 @@ color: white; } +.btn-left { + background-color: #2196F3; + color: white; +} + +.btn-right { + background-color: #FF9800; + color: white; +} + +.btn-rotate-left { + background-color: #9C27B0; + color: white; +} + +.btn-rotate-right { + background-color: #607D8B; + color: white; +} + +.btn-forward-left { + background-color: #4CAF50; + color: white; +} + +.btn-forward-right { + background-color: #4CAF50; + color: white; +} + +.btn-backward-left { + background-color: #f44336; + color: white; +} + +.btn-backward-right { + background-color: #f44336; + color: white; +} + .btn:hover { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15); diff --git a/main/Javascript/control.js b/main/Javascript/control.js index f307d4c..b1da833 100644 --- a/main/Javascript/control.js +++ b/main/Javascript/control.js @@ -1,6 +1,14 @@ // 获取按钮和状态元素 const forwardBtn = document.getElementById('forwardBtn'); const backwardBtn = document.getElementById('backwardBtn'); +const leftBtn = document.getElementById('leftBtn'); +const rightBtn = document.getElementById('rightBtn'); +const rotateLeftBtn = document.getElementById('rotateLeftBtn'); +const rotateRightBtn = document.getElementById('rotateRightBtn'); +const forwardLeftBtn = document.getElementById('forwardLeftBtn'); +const forwardRightBtn = document.getElementById('forwardRightBtn'); +const backwardLeftBtn = document.getElementById('backwardLeftBtn'); +const backwardRightBtn = document.getElementById('backwardRightBtn'); const status = document.getElementById('status'); // 实际控制函数 @@ -9,7 +17,21 @@ function controlMotor(direction) { if (direction === 'stop') { status.innerHTML = `
正在停止...
`; } else { - status.innerHTML = `正在${direction === 'forward' ? '前进' : '后退'}...
`; + let actionText = ''; + switch (direction) { + case 'forward': actionText = '前进'; break; + case 'backward': actionText = '后退'; break; + case 'left': actionText = '左移'; break; + case 'right': actionText = '右移'; break; + case 'rotate_left': actionText = '左旋转'; break; + case 'rotate_right': actionText = '右旋转'; break; + case 'forward_left': actionText = '左前移动'; break; + case 'forward_right': actionText = '右前移动'; break; + case 'backward_left': actionText = '左后移动'; break; + case 'backward_right': actionText = '右后移动'; break; + default: actionText = '移动'; break; + } + status.innerHTML = `正在${actionText}...
`; } // 记录操作(如果正在录制) @@ -114,6 +136,287 @@ backwardBtn.addEventListener('touchcancel', (e) => { stopMotor(); }); +// 左移按钮 - 支持鼠标和触摸事件 +leftBtn.addEventListener('mousedown', () => { + // 发送左移请求 + controlMotor('left'); +}); + +leftBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +leftBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 左移按钮 - 触摸事件 +leftBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送左移请求 + controlMotor('left'); +}); + +leftBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +leftBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 右移按钮 - 支持鼠标和触摸事件 +rightBtn.addEventListener('mousedown', () => { + // 发送右移请求 + controlMotor('right'); +}); + +rightBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +rightBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 右移按钮 - 触摸事件 +rightBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送右移请求 + controlMotor('right'); +}); + +rightBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +rightBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 左旋转按钮 - 支持鼠标和触摸事件 +rotateLeftBtn.addEventListener('mousedown', () => { + // 发送左旋转请求 + controlMotor('rotate_left'); +}); + +rotateLeftBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +rotateLeftBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 左旋转按钮 - 触摸事件 +rotateLeftBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送左旋转请求 + controlMotor('rotate_left'); +}); + +rotateLeftBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +rotateLeftBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 右旋转按钮 - 支持鼠标和触摸事件 +rotateRightBtn.addEventListener('mousedown', () => { + // 发送右旋转请求 + controlMotor('rotate_right'); +}); + +rotateRightBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +rotateRightBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 右旋转按钮 - 触摸事件 +rotateRightBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送右旋转请求 + controlMotor('rotate_right'); +}); + +rotateRightBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +// 右旋转按钮 - 触摸事件 +rotateRightBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 左前按钮 - 支持鼠标和触摸事件 +forwardLeftBtn.addEventListener('mousedown', () => { + // 发送左前移动请求 + controlMotor('forward_left'); +}); + +forwardLeftBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +forwardLeftBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 左前按钮 - 触摸事件 +forwardLeftBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送左前移动请求 + controlMotor('forward_left'); +}); + +forwardLeftBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +forwardLeftBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 右前按钮 - 支持鼠标和触摸事件 +forwardRightBtn.addEventListener('mousedown', () => { + // 发送右前移动请求 + controlMotor('forward_right'); +}); + +forwardRightBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +forwardRightBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 右前按钮 - 触摸事件 +forwardRightBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送右前移动请求 + controlMotor('forward_right'); +}); + +forwardRightBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +forwardRightBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 左后按钮 - 支持鼠标和触摸事件 +backwardLeftBtn.addEventListener('mousedown', () => { + // 发送左后移动请求 + controlMotor('backward_left'); +}); + +backwardLeftBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +backwardLeftBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 左后按钮 - 触摸事件 +backwardLeftBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送左后移动请求 + controlMotor('backward_left'); +}); + +backwardLeftBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +backwardLeftBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + +// 右后按钮 - 支持鼠标和触摸事件 +backwardRightBtn.addEventListener('mousedown', () => { + // 发送右后移动请求 + controlMotor('backward_right'); +}); + +backwardRightBtn.addEventListener('mouseup', () => { + // 停止电机 + stopMotor(); +}); + +backwardRightBtn.addEventListener('mouseleave', () => { + // 鼠标离开按钮时也停止 + stopMotor(); +}); + +// 右后按钮 - 触摸事件 +backwardRightBtn.addEventListener('touchstart', (e) => { + e.preventDefault(); // 防止默认行为 + // 发送右后移动请求 + controlMotor('backward_right'); +}); + +backwardRightBtn.addEventListener('touchend', (e) => { + e.preventDefault(); // 防止默认行为 + // 停止电机 + stopMotor(); +}); + +backwardRightBtn.addEventListener('touchcancel', (e) => { + e.preventDefault(); // 防止默认行为 + // 触摸被取消时停止电机 + stopMotor(); +}); + // 停止电机函数 function stopMotor() { // 记录操作(如果正在录制) diff --git a/main/index.html b/main/index.html index 05b6029..fd85fd4 100644 --- a/main/index.html +++ b/main/index.html @@ -16,10 +16,20 @@