112 lines
4.4 KiB
JavaScript
112 lines
4.4 KiB
JavaScript
// 确保在DOM加载完成后执行
|
|
window.addEventListener('DOMContentLoaded', function() {
|
|
console.log('DOMContentLoaded - Record.js executing');
|
|
|
|
// 录制相关全局变量
|
|
window.isRecording = false;
|
|
window.recordedActions = [];
|
|
window.recordingStartTime = 0;
|
|
|
|
// 获取录制和回放按钮
|
|
const recordBtn = document.getElementById('recordBtn');
|
|
const playbackBtn = document.getElementById('playbackBtn');
|
|
const status = document.getElementById('status');
|
|
|
|
// 调试信息
|
|
console.log('Record.js loaded');
|
|
console.log('recordBtn:', recordBtn);
|
|
console.log('playbackBtn:', playbackBtn);
|
|
console.log('status:', status);
|
|
|
|
// 录制按钮点击事件 - 支持鼠标和触摸事件
|
|
function toggleRecording() {
|
|
console.log('toggleRecording called, current isRecording:', window.isRecording);
|
|
if (window.isRecording) {
|
|
// 停止录制
|
|
window.isRecording = false;
|
|
recordBtn.textContent = '开始录制';
|
|
status.innerHTML = `<p>录制完成，共记录 ${window.recordedActions.length} 个操作</p>`;
|
|
console.log('Recording stopped, actions:', window.recordedActions);
|
|
} else {
|
|
// 开始录制
|
|
window.isRecording = true;
|
|
window.recordedActions = [];
|
|
window.recordingStartTime = Date.now();
|
|
recordBtn.textContent = '停止录制';
|
|
status.innerHTML = `<p>开始录制...</p>`;
|
|
console.log('Recording started');
|
|
}
|
|
}
|
|
|
|
console.log('Adding click event listener to recordBtn');
|
|
recordBtn.addEventListener('click', toggleRecording);
|
|
|
|
// 录制按钮 - 触摸事件
|
|
console.log('Adding touchstart event listener to recordBtn');
|
|
recordBtn.addEventListener('touchstart', (e) => {
|
|
console.log('Touchstart event on recordBtn');
|
|
e.preventDefault(); // 防止默认行为
|
|
toggleRecording();
|
|
});
|
|
|
|
// 回放按钮点击事件 - 支持鼠标和触摸事件
|
|
function startPlayback() {
|
|
console.log('startPlayback called, recordedActions:', window.recordedActions);
|
|
if (window.recordedActions.length === 0) {
|
|
status.innerHTML = `<p>没有可回放的操作</p>`;
|
|
console.log('No actions to playback');
|
|
return;
|
|
}
|
|
|
|
// 保存当前录制状态并禁用录制
|
|
const originalRecordingState = window.isRecording;
|
|
window.isRecording = false;
|
|
|
|
status.innerHTML = `<p>开始回放...</p>`;
|
|
console.log('Starting playback');
|
|
|
|
// 按时间顺序回放操作
|
|
let lastTimestamp = 0;
|
|
const totalDuration = window.recordedActions[window.recordedActions.length - 1].timestamp;
|
|
|
|
// 确保至少有一个操作
|
|
if (window.recordedActions.length > 0) {
|
|
// 执行第一个操作
|
|
console.log('Executing first action immediately:', window.recordedActions[0]);
|
|
controlMotor(window.recordedActions[0].direction);
|
|
|
|
// 执行剩余的操作
|
|
for (let i = 1; i < window.recordedActions.length; i++) {
|
|
const action = window.recordedActions[i];
|
|
const delay = action.timestamp - window.recordedActions[i-1].timestamp;
|
|
console.log('Scheduling action:', action, 'at delay:', delay);
|
|
setTimeout(() => {
|
|
// 调用控制函数执行操作
|
|
console.log('Executing action:', action);
|
|
controlMotor(action.direction);
|
|
}, delay);
|
|
}
|
|
}
|
|
|
|
// 回放完成后，确保发送停止请求
|
|
setTimeout(() => {
|
|
console.log('Playback completed, sending stop command');
|
|
controlMotor('stop');
|
|
status.innerHTML = `<p>回放完成</p>`;
|
|
console.log('Playback completed');
|
|
// 恢复原始录制状态
|
|
window.isRecording = originalRecordingState;
|
|
}, totalDuration + 1000);
|
|
}
|
|
|
|
console.log('Adding click event listener to playbackBtn');
|
|
playbackBtn.addEventListener('click', startPlayback);
|
|
|
|
// 回放按钮 - 触摸事件
|
|
console.log('Adding touchstart event listener to playbackBtn');
|
|
playbackBtn.addEventListener('touchstart', (e) => {
|
|
console.log('Touchstart event on playbackBtn');
|
|
e.preventDefault(); // 防止默认行为
|
|
startPlayback();
|
|
});
|
|
}); |