95 lines
2.8 KiB
JavaScript
95 lines
2.8 KiB
JavaScript
// 获取按钮和状态元素
|
|
const forwardBtn = document.getElementById('forwardBtn');
|
|
const backwardBtn = document.getElementById('backwardBtn');
|
|
const recordBtn = document.getElementById('recordBtn');
|
|
const playbackBtn = document.getElementById('playbackBtn');
|
|
const status = document.getElementById('status');
|
|
|
|
// 录制相关变量
|
|
let isRecording = false;
|
|
let recordedActions = [];
|
|
let recordingStartTime = 0;
|
|
|
|
// 实际控制函数
|
|
function controlMotor(direction) {
|
|
status.innerHTML = `<p>正在${direction === 'forward' ? '前进' : '后退'}...</p>`;
|
|
|
|
// 记录操作（如果正在录制）
|
|
if (isRecording) {
|
|
const timestamp = Date.now() - recordingStartTime;
|
|
recordedActions.push({ direction, timestamp });
|
|
}
|
|
|
|
// 发送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>`;
|
|
});
|
|
}
|
|
|
|
// 录制按钮点击事件
|
|
recordBtn.addEventListener('click', () => {
|
|
if (isRecording) {
|
|
// 停止录制
|
|
isRecording = false;
|
|
recordBtn.textContent = '开始录制';
|
|
status.innerHTML = `<p>录制完成，共记录 ${recordedActions.length} 个操作</p>`;
|
|
} else {
|
|
// 开始录制
|
|
isRecording = true;
|
|
recordedActions = [];
|
|
recordingStartTime = Date.now();
|
|
recordBtn.textContent = '停止录制';
|
|
status.innerHTML = `<p>开始录制...</p>`;
|
|
}
|
|
});
|
|
|
|
// 回放按钮点击事件
|
|
playbackBtn.addEventListener('click', () => {
|
|
if (recordedActions.length === 0) {
|
|
status.innerHTML = `<p>没有可回放的操作</p>`;
|
|
return;
|
|
}
|
|
|
|
status.innerHTML = `<p>开始回放...</p>`;
|
|
|
|
// 按时间顺序回放操作
|
|
let lastTimestamp = 0;
|
|
recordedActions.forEach((action, index) => {
|
|
setTimeout(() => {
|
|
controlMotor(action.direction);
|
|
|
|
// 最后一个操作完成后显示回放完成
|
|
if (index === recordedActions.length - 1) {
|
|
setTimeout(() => {
|
|
status.innerHTML = `<p>回放完成</p>`;
|
|
}, 2000);
|
|
}
|
|
}, action.timestamp - lastTimestamp);
|
|
|
|
lastTimestamp = action.timestamp;
|
|
});
|
|
});
|
|
|
|
// 按钮点击事件
|
|
forwardBtn.addEventListener('click', () => {
|
|
controlMotor('forward');
|
|
});
|
|
|
|
backwardBtn.addEventListener('click', () => {
|
|
controlMotor('backward');
|
|
}); |