同一局域网下的移动端网页模拟电脑操作软件二次开发

原项目为对手机连接电脑的同一局域网后用网页访问本地服务器的方式对电脑的操作的模拟

原软件问题解析:在过宽屏幕打开时判定区域改变,有部分重复,需要重新修改网页代码
改进思路:写相对位置按钮,增加判定区域显示
软件运行截图
以下是手机访问网页后,服务器的连接显示

手机网页显示

改动部分:
通过添加js文件

import React, {Component} from 'react';
import Button from '@mui/material/Button';
import Box from '@mui/material/Box';
import {createTheme, ThemeProvider} from '@mui/material/styles';

const customTheme = createTheme({
palette: {
primary: {
main: '#6df',
},
},
});

class MouseDPadButtons extends Component {
constructor(props) {
super(props);
this.state = {
buttonSW2: true,
buttonSW3: true,
buttonSW4: false,
};
};

// 发送按钮信号的函数，传递信号为纯文本
sendButtonSignal = (buttonType) => {
    // 使用简短编码表示不同的按钮
    const signal =
        buttonType === 'Left' ? 'L' :
        buttonType === 'Middle' ? 'M' :
        buttonType === 'Right' ? 'R' :
        buttonType === 'DUp' ? 'W' :
        buttonType === 'DLeft' ? 'A' :
        buttonType === 'DDown' ? 'S' :
        buttonType === 'DRight' ? 'D' : '';

    fetch('/button_signal', {
        method: 'POST',
        headers: {
            'Content-Type': 'text/plain',
        },
        body: signal,
    })
        .then(response => response.json())
        .then(data => console.log('Success:', data))
        .catch((error) => {
            console.error('Error:', error);
        });
};

componentDidMount() {
    document.getElementById("button-sw2").addEventListener("click", () => {
        this.setState(prevState => ({
            buttonSW2: !prevState.buttonSW2,
        }));
    });
    document.getElementById("button-sw3").addEventListener("click", () => {
        this.setState(prevState => ({
            buttonSW3: !prevState.buttonSW3,
        }));
    });
    document.getElementById("button-sw4").addEventListener("click", () => {
        this.setState(prevState => ({
            buttonSW4: !prevState.buttonSW4,
        }));
    });
};

render() {
    let buttonWidth = window.innerWidth / 4;
    let buttonHeight = window.innerHeight / 5;
    return (
        <ThemeProvider theme={customTheme}>
            <Box sx={{
                display: 'flex',
                justifyContent: 'space-between', // 使按钮间有等距间隙
                p: 1, // 设置内边距
                marginBottom: '50px',
                bottom: 0,
                position: 'fixed',
                width: '100%',
                backgroundColor: 'transparent',
            }}>
                {this.state.buttonSW2 ? (
                    <>
                        <Button color="primary" variant="outlined" onClick={() => this.sendButtonSignal('Left')}
                                sx={{width: '100%', mx: '2%'}}>L</Button>
                        {this.state.buttonSW3 ? (
                            <Button color="primary" variant="outlined"
                                    onClick={() => this.sendButtonSignal('Middle')}
                                    sx={{width: '100%', mx: '2%'}}>M</Button> // 中间按钮左右各留出一些空间
                        ) : null}
                        <Button color="primary" variant="outlined" onClick={() => this.sendButtonSignal('Right')}
                                sx={{width: '100%', mx: '2%'}}>R</Button>
                    </>
                ) : null}
            </Box>
            <Box
                sx={{
                    display: 'flex',
                    flexDirection: 'column',
                    alignItems: 'center',
                    justifyContent: 'center',
                    width: '100%',
                    backgroundColor: 'transparent',
                }}
            >
                {this.state.buttonSW4 ? (
                    <>
                        <Box>
                            <Button color="primary" variant="outlined" onClick={() => this.sendButtonSignal('DUp')}
                                    sx={{mb: 2, width: buttonWidth, height: buttonHeight}}>↑</Button>
                        </Box>
                        <Box
                            sx={{
                                display: 'flex',
                                flexDirection: 'row',
                                alignItems: 'center',
                                justifyContent: 'center',
                            }}
                        >
                            <Button color="primary" variant="outlined"
                                    onClick={() => this.sendButtonSignal('DLeft')}
                                    sx={{width: buttonWidth, height: buttonHeight}}>←</Button>
                            <Button color="primary" variant="outlined"
                                    onClick={() => this.sendButtonSignal('DDown')}
                                    sx={{mx: 2, width: buttonWidth, height: buttonHeight}}>↓</Button>
                            <Button color="primary" variant="outlined"
                                    onClick={() => this.sendButtonSignal('DRight')}
                                    sx={{width: buttonWidth, height: buttonHeight}}>→</Button>
                        </Box>
                        <Box>
                        </Box>
                    </>
                ) : null}
            </Box>
        </ThemeProvider>
    );
}

}

export default MouseDPadButtons;

代码作用:将pad中的操作加入到网页操作中,可以映射出"wasd"和`鼠标点击的操作,仿照原版做了对较宽屏幕的pad的适配,增加了4个上下左右按钮
以下是网页客户端截图:

这是py主函数的增加部分:

elif signal == 'W':
pyautogui.press('up')
action = "press up"
elif signal == 'A':
pyautogui.press('left')
action = "press left"
elif signal == 'S':
pyautogui.press('down')
action = "press down"
elif signal == 'D':
pyautogui.press('right')
action = "press right"

作用是让服务器对按钮返回的信号进行反应
流程图:

感谢原代码作者的分享,我将代码改进了一下,至少看起来好看了不少