Improved move detection
This commit is contained in:
parent
16c4d3f1dc
commit
93190587a6
|
@ -52,12 +52,26 @@ def getCoords():
|
|||
def updateCoords(message):
|
||||
try:
|
||||
parts = message.split(",")
|
||||
x = float( parts[0] )
|
||||
y = float( parts[1] )
|
||||
x = float( parts[0] )
|
||||
y = float( parts[1] )
|
||||
# print(str(x) + "," + str(y))
|
||||
pyautogui.moveRel(x, y);
|
||||
except Exception as e:
|
||||
print( repr(e) )
|
||||
|
||||
@app.route('/update-coords/xy/<x>/<y>')
|
||||
def updateCoords2(x, y):
|
||||
try:
|
||||
# print(x + "," + y)
|
||||
pyautogui.moveRel(float(x), float(y));
|
||||
return "{}"
|
||||
except Exception as e:
|
||||
print( repr(e) )
|
||||
return render_template('error.html',
|
||||
title='Error!',
|
||||
message='Key is not a valid input...')
|
||||
|
||||
|
||||
@app.route('/send-key', methods=['GET', 'POST'])
|
||||
def sendKey():
|
||||
pyautogui.doubleClick()
|
||||
|
|
|
@ -43,12 +43,6 @@ input {
|
|||
z-index: -999;
|
||||
}
|
||||
|
||||
#canvas {
|
||||
width: 100%;
|
||||
min-height: 65em;
|
||||
background-color: rgba(56, 56, 56, 0.67);
|
||||
}
|
||||
|
||||
#singleClickBtn, #doubleClickBtn {
|
||||
background-color: #62c462;
|
||||
border-style: dashed;
|
||||
|
@ -60,9 +54,7 @@ input {
|
|||
}
|
||||
|
||||
#singleClickBtn:hover,
|
||||
#doubleClickBtn:hover,
|
||||
#singleClickBtn:active,
|
||||
#doubleClickBtn:active {
|
||||
#doubleClickBtn:hover {
|
||||
background-color: rgba(0, 232, 255, 0.5);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
const doAjax = (actionPath, data, action) => {
|
||||
const doAjax = async (actionPath, data, action, postType = "POST") => {
|
||||
let xhttp = new XMLHttpRequest();
|
||||
xhttp.open("POST", actionPath, true);
|
||||
xhttp.open(postType, actionPath, true);
|
||||
xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
|
||||
// Force return to be JSON NOTE: Use application/xml to force XML
|
||||
xhttp.overrideMimeType('application/json');
|
||||
|
|
|
@ -1,133 +1,79 @@
|
|||
const socket = io();
|
||||
let px = 0;
|
||||
let py = 0;
|
||||
|
||||
|
||||
socket.on('connect', function() {
|
||||
console.log("Websocket connected...");
|
||||
});
|
||||
|
||||
|
||||
// When true, moving the mouse updates coords
|
||||
const canvas = document.getElementById("canvas");
|
||||
let isDragging = false;
|
||||
let runUpdate = false;
|
||||
let xLast = 0;
|
||||
let yLast = 0;
|
||||
let mod = 2;
|
||||
let px = 0;
|
||||
let py = 0;
|
||||
let x1 = 0;
|
||||
let y1 = 0;
|
||||
let x2 = 0;
|
||||
let y2 = 0;
|
||||
let m = undefined; // slope value
|
||||
|
||||
|
||||
canvas.addEventListener('touchstart', e => { onPress(e); });
|
||||
canvas.addEventListener('mousedown', e => { onPress(e); });
|
||||
canvas.addEventListener('touchmove', e => { onMoveing(e); });
|
||||
canvas.addEventListener('mousemove', e => { onMoveing(e); });
|
||||
canvas.addEventListener('touchend', e => { onRelease(e); });
|
||||
canvas.addEventListener('mouseup', e => { onRelease(e); });
|
||||
|
||||
|
||||
const onPress = (e) => {
|
||||
isDragging = true;
|
||||
runUpdate = true;
|
||||
xLast = e.offsetX;
|
||||
yLast = e.offsetY;
|
||||
updateText(xLast, yLast);
|
||||
}
|
||||
|
||||
|
||||
const onMoveing = (e) => {
|
||||
if (isDragging === true) {
|
||||
x1 = xLast;
|
||||
y1 = yLast;
|
||||
|
||||
if (e.type === 'mousemove') {
|
||||
x2 = e.offsetX;
|
||||
y2 = e.offsetY;
|
||||
xLast = e.offsetX;
|
||||
yLast = e.offsetY;
|
||||
} else if (e.type === 'touchmove') {
|
||||
x2 = parseInt(e.touches[0].clientX, 10);
|
||||
y2 = parseInt(e.touches[0].clientY, 10);
|
||||
xLast = parseInt(e.touches[0].clientX, 10);
|
||||
yLast = parseInt(e.touches[0].clientY, 10);
|
||||
}
|
||||
|
||||
// Calculate the delta of the points
|
||||
if (x2 > x1) {
|
||||
px = mod // Is growing
|
||||
} else {
|
||||
px = -mod // Is shrinking
|
||||
}
|
||||
|
||||
if (y2 > y1) {
|
||||
py = mod // Is growing
|
||||
} else {
|
||||
py = -mod // Is shrinking
|
||||
}
|
||||
|
||||
m = (y2-y1)/(x2-x1)
|
||||
if (m === undefined) {
|
||||
py = 0;
|
||||
} else if (!isFinite(m)) {
|
||||
$(function () {
|
||||
$.mousedirection();
|
||||
$("#canvas").on("mousedirection", function (e) {
|
||||
if (e.direction == "up") {
|
||||
px = 0;
|
||||
}
|
||||
|
||||
if ( (m > 0.05 && m <= 1) && (m > -0.05 && m >= -1) ) {
|
||||
py = -1;
|
||||
} else if (e.direction == "down") {
|
||||
px = 0;
|
||||
py = 1;
|
||||
} else if (e.direction == "left") {
|
||||
px = -1;
|
||||
py = 0;
|
||||
} else if (e.direction == "right") {
|
||||
px = 1;
|
||||
py = 0;
|
||||
} else if (e.direction == "top-left") {
|
||||
px = -1;
|
||||
py = -1;
|
||||
} else if (e.direction == "top-right") {
|
||||
px = 1;
|
||||
py = -1;
|
||||
} else if (e.direction == "bottom-left") {
|
||||
px = -1;
|
||||
py = 1;
|
||||
} else if (e.direction == "bottom-right") {
|
||||
px = 1;
|
||||
py = 1;
|
||||
}
|
||||
|
||||
socket.emit('update_coords', x2 + "," + y2);
|
||||
}
|
||||
}
|
||||
updateText (px, py);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
const onRelease = (e) => {
|
||||
if (isDragging === true) {
|
||||
isDragging = false;
|
||||
mod = 2
|
||||
xLast = 0;
|
||||
yLast = 0;
|
||||
px = 0;
|
||||
py = 0;
|
||||
updateText(px, py);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
const updateText = (x, y) => {
|
||||
const coordsTxt = "X coords: " + x + ", Y coords: " + y;
|
||||
function updateText (px, py) {
|
||||
const coordsTxt = "X coords: " + px + ", Y coords: " + py;
|
||||
document.getElementById("cordsText").innerText = coordsTxt;
|
||||
// doAjax("/update-coords/xy/" + px + "/" + py, "" , "update-coords", "GET");
|
||||
socket.emit('update_coords', px + "," + py);
|
||||
}
|
||||
|
||||
// Touch events converted to mouse events
|
||||
function touchHandler(event) {
|
||||
let touches = event.changedTouches,
|
||||
first = touches[0],
|
||||
type = "";
|
||||
|
||||
switch(event.type) {
|
||||
case "touchstart": type = "mousedown"; break;
|
||||
case "touchmove": type = "mousemove"; break;
|
||||
case "touchend": type = "mouseup"; break;
|
||||
default: return;
|
||||
}
|
||||
|
||||
// Click events
|
||||
document.getElementById("singleClickBtn").addEventListener('mouseup', e => { onSingleClick(e); });
|
||||
document.getElementById("singleClickBtn").addEventListener('touchend', e => { onSingleClick(e); });
|
||||
document.getElementById("doubleClickBtn").addEventListener('mouseup', e => { onDoubleClick(e); });
|
||||
document.getElementById("doubleClickBtn").addEventListener('touchend', e => { onDoubleClick(e); });
|
||||
let simulatedEvent = document.createEvent("MouseEvent");
|
||||
simulatedEvent.initMouseEvent(type, true, true, window, 1,
|
||||
first.screenX, first.screenY,
|
||||
first.clientX, first.clientY, false,
|
||||
false, false, false, 0/*left*/, null);
|
||||
|
||||
const onSingleClick = (e) => {
|
||||
doAjax("/single-click", "ref=null", "singleClick");
|
||||
first.target.dispatchEvent(simulatedEvent);
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
const onDoubleClick = (e) => {
|
||||
doAjax("/double-click", "ref=null", "doubleClick");
|
||||
}
|
||||
|
||||
|
||||
|
||||
// Key input events
|
||||
// document.getElementById("sendKeysField").addEventListener('input', e => { onSendKeys(e); });
|
||||
// document.getElementById("sendKeysField").addEventListener('change', e => { onSendKeys(e); });
|
||||
document.getElementById("sendKeysBtn").addEventListener('mouseup', e => { onSendKeys(e); });
|
||||
document.getElementById("sendKeysBtn").addEventListener('touchend', e => { onSendKeys(e); });
|
||||
|
||||
const onSendKeys = (e) => {
|
||||
let target = document.getElementById("sendKeysField");
|
||||
const text = target.value;
|
||||
doAjax("/send-key", "text=" + text, "sendKeys");
|
||||
target.value = "";
|
||||
}
|
||||
document.addEventListener("touchstart", touchHandler, true);
|
||||
document.addEventListener("touchmove", touchHandler, true);
|
||||
document.addEventListener("touchend", touchHandler, true);
|
||||
document.addEventListener("touchcancel", touchHandler, true);
|
||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,47 @@
|
|||
/**
|
||||
* jQuery Mouse Direction Plugin
|
||||
* @version: 1.1
|
||||
* @author Hasin Hayder [hasin@leevio.com | http://hasin.me]
|
||||
*/
|
||||
(function ($) {
|
||||
var options = {};
|
||||
var oldx = 0;
|
||||
var oldy = 0;
|
||||
var direction="";
|
||||
$.mousedirection = function (opts) {
|
||||
var defaults = {
|
||||
};
|
||||
options = $.extend(defaults, opts);
|
||||
$(document).bind("mousemove", function (e) {
|
||||
var activeElement = e.target || e.srcElement;
|
||||
if (e.pageX > oldx && e.pageY > oldy) {
|
||||
direction="bottom-right";
|
||||
}
|
||||
else if (e.pageX > oldx && e.pageY < oldy) {
|
||||
direction="top-right";
|
||||
}
|
||||
else if (e.pageX < oldx && e.pageY < oldy) {
|
||||
direction="top-left";
|
||||
}
|
||||
else if (e.pageX < oldx && e.pageY > oldy) {
|
||||
direction="bottom-left";
|
||||
}
|
||||
else if (e.pageX > oldx && e.pageY == oldy) {
|
||||
direction="right";
|
||||
}
|
||||
else if (e.pageX == oldx && e.pageY > oldy) {
|
||||
direction="down";
|
||||
}
|
||||
else if (e.pageX == oldx && e.pageY < oldy) {
|
||||
direction="up";
|
||||
}
|
||||
else if (e.pageX < oldx && e.pageY == oldy) {
|
||||
direction="left";
|
||||
}
|
||||
$(activeElement).trigger(direction);
|
||||
$(activeElement).trigger({type:"mousedirection",direction:direction});
|
||||
oldx=e.pageX;
|
||||
oldy=e.pageY;
|
||||
});
|
||||
}
|
||||
})(jQuery);
|
|
@ -1,7 +1,7 @@
|
|||
{% extends "layout.html" %}
|
||||
|
||||
{% block body_header_additional %}
|
||||
<script src="{{url_for('static', filename='js/libs/socket.io.js')}}"></script>
|
||||
<script src="{{url_for('static', filename='js/libs/jquery-1.12.4.min.js')}}"></script>
|
||||
{% endblock body_header_additional %}
|
||||
|
||||
{% block body_content %}
|
||||
|
@ -20,12 +20,14 @@
|
|||
<button id="sendKeysBtn" class="btn btn-success">Send</button>
|
||||
</div>
|
||||
</div>
|
||||
<div id="canvas" class="container-auto">
|
||||
<div class="container-auto">
|
||||
<div class="row">
|
||||
<div class="col justify-content-center text-center">
|
||||
<div id="cordsText" style="font-size: 280%;">
|
||||
X coords: 0, Y coords: 0
|
||||
</div>
|
||||
|
||||
<canvas id="canvas" width="650" height="650" style="border:1px solid #c3c3c3;"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -36,7 +38,8 @@
|
|||
{% endblock body_footer_additional %}
|
||||
|
||||
{% block body_scripts_additional %}
|
||||
<script src="{{url_for('static', filename='js/libs/socket.io.js')}}"></script>
|
||||
<script src="{{url_for('static', filename='js/libs/jquery.mousedirection.js')}}"></script>
|
||||
<script src="{{url_for('static', filename='js/ajax.js')}}"></script>
|
||||
<script src="{{url_for('static', filename='js/events.js')}}"></script>
|
||||
<!-- <script src="{{url_for('static', filename='js/draging.js')}}"></script> -->
|
||||
{% endblock body_scripts_additional %}
|
||||
|
|
|
@ -6,8 +6,9 @@
|
|||
|
||||
|
||||
function main() {
|
||||
source "../venv/bin/activate"
|
||||
source "/home/abaddon/Portable_Apps/py-venvs/remotemouse-venv/bin/activate"
|
||||
# Note can replace 127.0.0.1 with 0.0.0.0 to make it 'network/internet' accessable...
|
||||
gunicorn wsgi:app -b 127.0.0.1:8088 # <module>:<app> IE <file>:<flask app variable>
|
||||
# Note: NEED -k eventlet for this to work! I spent too many hours on this...
|
||||
gunicorn wsgi:app -b 127.0.0.1:8088 -k eventlet # <module>:<app> IE <file>:<flask app variable>
|
||||
}
|
||||
main $@;
|
||||
|
|
|
@ -10,6 +10,7 @@ function main() {
|
|||
cd "${SCRIPTPATH}"
|
||||
echo "Working Dir: " $(pwd)
|
||||
mkdir /tmp/apps
|
||||
../venv/bin/gunicorn --bind unix:/tmp/apps/remoteconn.sock wsgi:app
|
||||
/home/abaddon/Portable_Apps/py-venvs/remotemouse-venv/bin/gunicorn \
|
||||
--bind unix:/tmp/apps/remoteconn.sock wsgi:app
|
||||
}
|
||||
main $@;
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
from core import socketio, app
|
||||
from core import app, socketio
|
||||
|
||||
if __name__ == '__main__':
|
||||
socketio.run(app, host="127.0.0.1", port="8088")
|
||||
# app.run(debug=True)
|
||||
|
|
Loading…
Reference in New Issue