MassageRobot_Dobot/UI_next/static/js/set_volume.js

const volumeControl = document.getElementById("volume-control");
const volumeProgress = document.getElementById("volume-progress");
const volumeValue = document.getElementById("volume-value");
const volumeIcon = document.getElementById("volume-icon");


// 获取当前音量的值
function getVolumeVal() {
    return new Promise((resolve, reject) => {
        fetch('/get_volume')
            .then(response => response.json())
            .then(data => {
                if (data.current_volume !== undefined) {
                    resolve(data.current_volume);  // 通过 resolve 返回当前音量
                } else {
                    console.error('无法获取音量');
                    reject('无法获取音量');
                }
            })
            .catch(error => {
                console.error('Error:', error);
                reject(error);  // 发生错误时调用 reject
            });
    });
}

// 获取当前音量并更新UI
function getCurrentVolume() {
    fetch('/get_volume')
        .then(response => response.json())
        .then(data => {
            if (data.current_volume !== undefined) {
                console.log(`当前音量: ${data.current_volume}%`);
                updateVolume(data.current_volume);  // 更新UI
            } else {
                console.error('无法获取音量');
            }
        })
        .catch(error => {
            console.error('Error:', error);
        });
}

// 调用该函数获取当前音量
getCurrentVolume();

// 设置音量进度条宽度
function updateVolume(value) {
    volume = value;
    volumeProgress.style.width = `${volume}%`;  // 使用整数值更新宽度
    volumeValue.textContent = `${volume}%`;     // 显示整数音量
    if (value > 66) {
        volumeIcon.src = "/static/images/volume/vol-high.png";
    } else if (value > 33) {
        volumeIcon.src = "/static/images/volume/vol-med.png";
    } else if (value > 0) {
        volumeIcon.src = "/static/images/volume/vol-low.png";
    } else {
        volumeIcon.src = "/static/images/volume/vol-mute.png";
    }
}

// 监听触摸事件
volumeControl.addEventListener("touchstart", handleTouchStart);
volumeControl.addEventListener("touchmove", handleTouchMove);

let touchStartX = 0;
let touchStartVolume = 50;

function handleTouchStart(event) {
    touchStartX = event.touches[0].pageX;
    touchStartVolume = volume;
}

function handleTouchMove(event) {
    const touchEndX = event.touches[0].pageX;
    const touchDelta = touchEndX - touchStartX;
    const volumeChange = (touchDelta / volumeControl.offsetWidth) * 100;
    let newVolume = touchStartVolume + volumeChange;

    if (newVolume < 0) newVolume = 0;
    if (newVolume > 100) newVolume = 100;
    newVolume = Math.round(newVolume);  // 四舍五入为整数
    updateVolume(newVolume);  // 更新音量并保证是整数

    // 向后端发送调整音量的请求
    sendVolumeToServer(newVolume, 'set', false);
}

// 向后端发送音量调整请求
function sendVolumeToServer(newVolume, operation, notify_frontend = true) {
    // 默认操作为设置音量
    let adjustVolumeData;

    // 如果参数为 set，设置音量
    if (!operation || operation === 'set') {
        adjustVolumeData = {
            adjust_volumn_result: `=${newVolume}`,// 发送音量设置指令，例如 '=50'
            notify_frontend
        };
    }
    // 如果参数为 'increase'，增加音量
    else if (operation === 'increase') {
        adjustVolumeData = {
            adjust_volumn_result: `+${newVolume}`, // 发送增加音量指令，例如 '+10'
            notify_frontend
        };
    }
    // 如果参数为 'decrease'，减少音量
    else if (operation === 'decrease') {
        adjustVolumeData = {
            adjust_volumn_result: `-${newVolume}`, // 发送减少音量指令，例如 '-10'
            notify_frontend
        };
    }


    fetch('/adjust_volume', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(adjustVolumeData)
    })
        .then(response => response.json())
        .then(data => {
            console.log(data);  // 显示后端返回的结果
        })
        .catch(error => {
            console.error('Error:', error);
        });
}


function increaseVolume(vol) {
    getVolumeVal().then(currentVolume => {
        console.log(`当前音量: ${currentVolume}%`);
        let newVolume = currentVolume + parseInt(vol);  // 增加音量
        if (newVolume > 100) newVolume = 100;  // 最大音量为100
        // updateVolume(newVolume);  // 更新UI

        // 向后端发送增加音量的请求
        sendVolumeToServer(vol, 'increase');
    }).catch(error => {
        console.error('无法获取当前音量:', error);
    });
}


function decreaseVolume(vol) {
    getVolumeVal().then(currentVolume => {
        let newVolume = currentVolume - parseInt(vol);  // 减少音量
        if (newVolume < 0) newVolume = 0;  // 最小音量为0
        // 向后端发送减少音量的请求
        sendVolumeToServer(vol, 'decrease');
    }).catch(error => {
        console.error('无法获取当前音量:', error);
    });
}

// 监听音量调整事件
socket.on('volume_adjusted', (data) => {
    getVolumeVal().then(val => {
        updateVolume(val);
    }).catch(error => {
        console.error('无法获取当前音量:', error);
    });
    // 在前端做进一步的处理，例如显示弹窗、更新UI等
});