Frank's blogs

永远好奇

0%

使用网页版的触控板遥控电脑

发表于 更新于
本文字数： 9.1k 阅读时长 ≈ 17 分钟

使用网页版的触控板遥控电脑

基于flask和pyautogui开发的后端

from flask import Flask
from flask import request
from flask import make_response
from flask import send_from_directory
import json
import os

import pyautogui

app = Flask(__name__)


@app.route('/')
def returnIndex():
    return send_from_directory('', 'remotePage.html')


@app.route('/mousemove', methods=['POST', 'GET'])
def moveMouse():
    data = json.loads(request.get_data())
    xMove = data['x']
    yMove = data['y']
    pyautogui.moveRel(xOffset=xMove, yOffset=yMove, duration=0.0, tween=pyautogui.linear)
    return json.dumps(" ")


@app.route('/click', methods=['POST', 'GET'])
def click():
    data = json.loads(request.get_data())
    clickTime = data['time']
    clickBtn = data['btn']
    if (clickTime == 1):
        if (clickBtn == 1):  # 左单击
            pyautogui.click(x=None, y=None, clicks=1, interval=0.0, button='left', duration=0.0, tween=pyautogui.linear)
        else:  # 右单击
            pyautogui.click(x=None, y=None, clicks=1, interval=0.0, button='right', duration=0.0,
                            tween=pyautogui.linear)
    else:
        if (clickBtn == 1):  # 左双击
            pyautogui.doubleClick(x=None, y=None, interval=0.0, button='left', duration=0.0,
                                  tween=pyautogui.linear)
        else:  # 右双击
            pyautogui.doubleClick(x=None, y=None, interval=0.0, button='right', duration=0.0,
                                  tween=pyautogui.linear)
    return json.dumps(" ")


@app.route('/key', methods=['POST', 'GET'])
def keyBoard():
    data = json.loads(request.get_data())
    key = data['key']
    moveType = data['move']
    if (moveType == 1):
        pyautogui.keyDown(key)
    else:
        pyautogui.keyUp(key)
    return json.dumps(" ")

@app.route('/altTabAndWin' ,methods = ['POST','GET'])
def altAndWin():
    data = json.loads(request.get_data())
    key = data['key']
    if(key == 'altTab'):
        pyautogui.hotkey('altleft', 'tab')
    else:
        pyautogui.press('winleft')
    return json.dumps(" ")

if __name__ == '__main__':
    # app.config['JSON_AS_ASCII'] = False
    app.run(host='0.0.0.0', port=8080)

前端html

<!DOCTYPE html>
<html>
    <head>
        <script src = "https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    </head>
<body>
<!-- <div id = "div1">0, 0</div> -->
<!-- <button id="Mup" style="width: 10%; height: 30px; left: 45%;top:10px;position:absolute" onmousedown="handleMDown(event)"onmouseup = "handleMUp(event)">↑</button>
<button id="Mleft" style="width: 10%; height: 30px; left: 20%;top:60px;position:absolute" onmousedown="handleMDown(event)"onmouseup = "handleMUp(event)">←</button>
<button id="Mright" style="width: 10%; height: 30px; left: 70%;top: 60px;position:absolute" onmousedown="handleMDown(event)"onmouseup = "handleMUp(event)">→</button>
<button id="Mdown" style="width: 10%; height: 30px; left: 45%;top:110px;position:absolute" onmousedown="handleMDown(event)"onmouseup = "handleMUp(event)">↓</button> -->
<button id = "click" style = "width: 12%; height: 30px; left: 20%;top:160px;position:absolute"onclick = "handleClick(event);">左击</button>
<button id = "dClick" style = "width: 12%; height: 30px; left: 44%;top:160px;position:absolute"onclick = "handleClick(event);">双击</button>
<button id = "rClick" style = "width: 12%; height: 30px; left: 68%;top:160px;position:absolute"onclick = "handleClick(event);">右击</button>
<hr style="top:190px;position:relative">
<button id = "esc" style = "width: 10%; height: 30px; left: 20%;top:200px;position:absolute" onmousedown="handleDown(event)" onmouseup="handleUp(event)">Esc</button>
<button id = " " style = "width: 30%; height: 30px; left: 35%;top:200px;position:absolute" onmousedown="handleDown(event)" onmouseup="handleUp(event)">Space</button>
<button id = "enter" style = "width: 10%; height: 30px; left: 70%;top:200px;position:absolute"onmousedown="handleDown(event)" onmouseup="handleUp(event)">Enter</button>
<button id = "left" style = "width: 10%; height: 30px; left: 20%;top:240px;position:absolute"onmousedown="handleDown(event)"onmouseup="handleUp(event)">l</button>
<button id = "up" style = "width: 10%; height: 30px; left: 35%;top:240px;position:absolute"onmousedown="handleDown(event)"onmouseup="handleUp(event)">u</button>
<button id = "down" style = "width: 10%; height: 30px; left: 55%;top:240px;position:absolute"onmousedown="handleDown(event)"onmouseup="handleUp(event)">d</button>
<button id = "right" style = "width: 10%; height: 30px; left: 70%;top:240px;position:absolute"onmousedown="handleDown(event)"onmouseup="handleUp(event)">r</button>
<button id = "altTab" style = "width: 10%; height: 30px; left: 20%;top:280px;position:absolute"onclick = "handleClick(event);">AltTab</button>
<button id = "Win" style = "width: 10%; height: 30px; left: 70%;top:280px;position:absolute"onclick = "handleClick(event);">Win</button>
</body>

<script>

// mouseXPrev = window.event.clientX;
// mouseYPrev = window.touch.pageY;

mouseXPrev = -1;
mouseYPrev = -1;
// event.preventDefault();
document.addEventListener('touchstart', function(event)
{
    event.preventDefault();
    mouseXPrev = event.targetTouches[0].pageX;
    mouseYPrev = event.targetTouches[0].pageY;
    //document.getElementById("div1").value = mouseXPrev + ', ' + mouseYPrev;
})
document.addEventListener('touchmove', function(event)
{
    
    var touch = event.targetTouches[0];
    // if(mouseXPrev<0)mouseXPrev = Number(touch.pageX);
    // if(mouseYPrev<0)mouseYPrev = Number(touch.pageY);
    var dataToSend = {'x':0,'y':0};
    if(touch.pageY>160)return;
    var x = Number(touch.pageX)-mouseXPrev;
    var y = Number(touch.pageY)-mouseYPrev;
    dataToSend['x'] = x;
    dataToSend['y'] = y;
    mouseXPrev = Number(touch.pageX);
    mouseYPrev = Number(touch.pageY);
    var jsonToSend = JSON.stringify(dataToSend);
    console.log(jsonToSend)
    $.ajax({
        type:"POST",
        url:"mousemove",
        data:jsonToSend,
        success: function(datas)
        {}
    })
})


/*
function handleMDown(buttonClicked)
{
    switch(buttonClicked.target.id)
    {
        case 'Mup':Mup = true;break;
        case 'Mdown':Mdown = true;break;
        case 'Mleft':Mleft = true;break;
        case 'Mright':Mright = true;break;
    }
}

function handleMUp(buttonClicked)
{
    switch(buttonClicked.target.id)
    {
        case 'Mup':Mup = false;break;
        case 'Mdown':Mdown = false;break;
        case 'Mleft':Mleft = false;break;
        case 'Mright':Mright = false;break;
    }
}
*/

function handleDown(buttonClicked)
{
    var dataToSend = {'key':buttonClicked.target.id,'move':1};
    var jsonToSend = JSON.stringify(dataToSend);
    //console.log(jsonToSend)
    $.ajax({
        type:"POST",
        url:"key",
        data:jsonToSend,
        success: function(datas)
        {}
    })
}

function handleUp(buttonClicked)
{
    var dataToSend = {'key':buttonClicked.target.id,'move':2};
    var jsonToSend = JSON.stringify(dataToSend);
    // console.log(jsonToSend)
    $.ajax({
        type:"POST",
        url:"key",
        data:jsonToSend,
        success: function(datas)
        {}
    })
}

function handleClick(buttonClicked)
{
    switch(buttonClicked.target.id)
    {
        case 'click':
            var dataToSend = {'time':1,'btn':1};
            var jsonToSend = JSON.stringify(dataToSend);
            // console.log(jsonToSend)
            $.ajax({
                type:"POST",
                url:"click",
                data:jsonToSend,
                success: function(datas)
                {}
            })
            break;
        case 'dClick':
            var dataToSend = {'time':2,'btn':1};
            var jsonToSend = JSON.stringify(dataToSend);
            // console.log(jsonToSend)
            $.ajax({
                type:"POST",
                url:"click",
                data:jsonToSend,
                success: function(datas)
                {}
            })
            break;
        case 'rClick':
            var dataToSend = {'time':1,'btn':2};
            var jsonToSend = JSON.stringify(dataToSend);
            // console.log(jsonToSend)
            $.ajax({
                type:"POST",
                url:"click",
                data:jsonToSend,
                success: function(datas)
                {}
            })
            break;
        case 'altTab':
            var dataToSend = {'key':'altTab'};
            var jsonToSend = JSON.stringify(dataToSend);
            // console.log(jsonToSend)
            $.ajax({
                type:"POST",
                url:"altTabAndWin",
                data:jsonToSend,
                success: function(datas)
                {}
            })
            break;
        case 'Win':
            var dataToSend = {'key':'win'};
            var jsonToSend = JSON.stringify(dataToSend);
            // console.log(jsonToSend)
            $.ajax({
                type:"POST",
                url:"altTabAndWin",
                data:jsonToSend,
                success: function(datas)
                {}
            })
            break;
    }
}


</script>


</html>

  • 前端的要点是调用了event.targetTouches这一属性，获得手指按压或者是触控笔的位置
  • 此API在计算机端无法使用