145 lines
4.0 KiB
JavaScript
145 lines
4.0 KiB
JavaScript
// 获取按钮和状态元素
|
|
const forwardBtn = document.getElementById('forwardBtn');
|
|
const backwardBtn = document.getElementById('backwardBtn');
|
|
const status = document.getElementById('status');
|
|
|
|
// 实际控制函数
|
|
function controlMotor(direction) {
|
|
// 根据方向设置状态消息
|
|
if (direction === 'stop') {
|
|
status.innerHTML = `<p>正在停止...</p>`;
|
|
} else {
|
|
status.innerHTML = `<p>正在${direction === 'forward' ? '前进' : '后退'}...</p>`;
|
|
}
|
|
|
|
// 记录操作（如果正在录制）
|
|
if (window.isRecording) {
|
|
const timestamp = Date.now() - window.recordingStartTime;
|
|
window.recordedActions.push({ direction, timestamp });
|
|
console.log('Recorded action:', { direction, timestamp });
|
|
} else {
|
|
console.log('Not recording, action:', direction);
|
|
}
|
|
|
|
// 发送AJAX请求到后端服务器
|
|
fetch('/control', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ direction: direction })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
status.innerHTML = `<p>${data.message}</p>`;
|
|
} else {
|
|
status.innerHTML = `<p>错误: ${data.message}</p>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
status.innerHTML = `<p>通信错误: ${error.message}</p>`;
|
|
});
|
|
}
|
|
|
|
// 按钮按下和松开事件
|
|
|
|
// 前进按钮 - 支持鼠标和触摸事件
|
|
forwardBtn.addEventListener('mousedown', () => {
|
|
// 发送前进请求
|
|
controlMotor('forward');
|
|
});
|
|
|
|
forwardBtn.addEventListener('mouseup', () => {
|
|
// 停止电机
|
|
stopMotor();
|
|
});
|
|
|
|
forwardBtn.addEventListener('mouseleave', () => {
|
|
// 鼠标离开按钮时也停止
|
|
stopMotor();
|
|
});
|
|
|
|
// 前进按钮 - 触摸事件
|
|
forwardBtn.addEventListener('touchstart', (e) => {
|
|
e.preventDefault(); // 防止默认行为
|
|
// 发送前进请求
|
|
controlMotor('forward');
|
|
});
|
|
|
|
forwardBtn.addEventListener('touchend', (e) => {
|
|
e.preventDefault(); // 防止默认行为
|
|
// 停止电机
|
|
stopMotor();
|
|
});
|
|
|
|
forwardBtn.addEventListener('touchcancel', (e) => {
|
|
e.preventDefault(); // 防止默认行为
|
|
// 触摸被取消时停止电机
|
|
stopMotor();
|
|
});
|
|
|
|
// 后退按钮 - 支持鼠标和触摸事件
|
|
backwardBtn.addEventListener('mousedown', () => {
|
|
// 发送后退请求
|
|
controlMotor('backward');
|
|
});
|
|
|
|
backwardBtn.addEventListener('mouseup', () => {
|
|
// 停止电机
|
|
stopMotor();
|
|
});
|
|
|
|
backwardBtn.addEventListener('mouseleave', () => {
|
|
// 鼠标离开按钮时也停止
|
|
stopMotor();
|
|
});
|
|
|
|
// 后退按钮 - 触摸事件
|
|
backwardBtn.addEventListener('touchstart', (e) => {
|
|
e.preventDefault(); // 防止默认行为
|
|
// 发送后退请求
|
|
controlMotor('backward');
|
|
});
|
|
|
|
backwardBtn.addEventListener('touchend', (e) => {
|
|
e.preventDefault(); // 防止默认行为
|
|
// 停止电机
|
|
stopMotor();
|
|
});
|
|
|
|
backwardBtn.addEventListener('touchcancel', (e) => {
|
|
e.preventDefault(); // 防止默认行为
|
|
// 触摸被取消时停止电机
|
|
stopMotor();
|
|
});
|
|
|
|
// 停止电机函数
|
|
function stopMotor() {
|
|
// 记录操作（如果正在录制）
|
|
if (window.isRecording) {
|
|
const timestamp = Date.now() - window.recordingStartTime;
|
|
window.recordedActions.push({ direction: 'stop', timestamp });
|
|
console.log('Recorded action:', { direction: 'stop', timestamp });
|
|
}
|
|
|
|
// 发送停止请求到服务器
|
|
fetch('/control', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify({ direction: 'stop' })
|
|
})
|
|
.then(response => response.json())
|
|
.then(data => {
|
|
if (data.status === 'success') {
|
|
// 停止成功，不显示消息
|
|
} else {
|
|
status.innerHTML = `<p>错误: ${data.message}</p>`;
|
|
}
|
|
})
|
|
.catch(error => {
|
|
status.innerHTML = `<p>通信错误: ${error.message}</p>`;
|
|
});
|
|
} |