Graduation_Project/main/Javascript/control.js

// 获取按钮和状态元素
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');

// 实际控制函数
function controlMotor(direction) {
    // 根据方向设置状态消息
    if (direction === 'stop') {
        status.innerHTML = `<p>正在停止...</p>`;
    } else {
        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 = `<p>正在${actionText}...</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();
});

// 左移按钮 - 支持鼠标和触摸事件
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() {
    // 记录操作（如果正在录制）
    if (window.isRecording) {
        const timestamp = Date.now() - window.recordingStartTime;
        window.recordedActions.push({ direction: 'stop', timestamp });
        console.log('Recorded action:', { direction: 'stop', timestamp });
    } else {
        console.log('Not recording, action:', 'stop');
    }
    
    // 发送停止请求到服务器
    fetch('/control', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({ direction: 'stop' })
    })
    .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>`;
    });
}