初版测试

2026-04-12 14:44:05 +08:00
1 parent 82e8c1d43f
commit 9d8d7444b4
@@ -0,0 +1,145 @@
+// 获取按钮和状态元素
+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>`;
+    });
+}
@@ -0,0 +1,112 @@
+// 确保在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();
+    });
+});
@@ -0,0 +1,38 @@
+// 获取按钮和状态元素
+const forwardBtn = document.getElementById('forwardBtn');
+const backwardBtn = document.getElementById('backwardBtn');
+const status = document.getElementById('status');
+
+// 实际控制函数
+function controlMotor(direction) {
+    status.innerHTML = `<p>正在${direction === 'forward' ? '前进' : '后退'}...</p>`;
+    
+    // 发送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('click', () => {
+    controlMotor('forward');
+});
+
+backwardBtn.addEventListener('click', () => {
+    controlMotor('backward');
+});