Improved move detection

src/core/routes/Routes.py

@@ -54,10 +54,24 @@ def updateCoords(message):
         parts = message.split(",")
         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()

src/core/static/css/main.css

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

src/core/static/js/ajax.js

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

src/core/static/js/events.js

@@ -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 = 0;
-        }
-
-        socket.emit('update_coords', x2 + "," + y2);
-    }
-}
-
-
-const onRelease = (e) => {
-    if (isDragging === true) {
-        isDragging = false;
-        mod        = 2
-        xLast      = 0;
-        yLast      = 0;
+            py = -1;
+        } else if (e.direction == "down") {
             px = 0;
+            py = 1;
+        } else if (e.direction == "left") {
+            px = -1;
             py = 0;
-        updateText(px, py);
+        } 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;
         }
-}
+
+        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);

src/core/static/js/libs/jquery.mousedirection.js

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

src/core/templates/index.html

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

src/linux-start.sh

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

src/socket_run.sh

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

src/wsgi.py

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