Improved move detection

This commit is contained in:
Maxim Stewart 2020-06-28 21:55:58 -05:00
parent 16c4d3f1dc
commit 93190587a6
10 changed files with 141 additions and 133 deletions

View File

@ -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()

View File

@ -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;
}

View File

@ -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');

View File

@ -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

View File

@ -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);

View File

@ -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 %}

View File

@ -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 $@;

View File

@ -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 $@;

View File

@ -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)