added features, changed css

README.md

@@ -37,4 +37,4 @@ Windows
 ![1 Interface.... ](images/pic1.png)
 
 # TODO
-8 n/a
+* n/a

src/core/routes/Routes.py

@@ -21,7 +21,7 @@ pyautogui.MINIMUM_DURATION = 0
 pyautogui.PAUSE = 0
 
 
-@app.route('/', methods=['GET', 'POST'])
+@app.route('/')
 def home():
     if request.method == 'GET':
         return render_template('index.html',
@@ -32,17 +32,45 @@ def home():
                             message='Must use GET request type...')
 
 
-@app.route('/single-click', methods=['GET', 'POST'])
-def singleClick():
+
+@app.route('/mouse-down')
+@socketio.on('mouse_down')
+def mouseDown(eve = None):
+    pyautogui.mouseDown()
+    return ""
+
+@app.route('/mouse-up')
+@socketio.on('mouse_up')
+def mouseUp(eve = None):
+    pyautogui.mouseUp()
+    return ""
+
+
+@app.route('/left-click')
+@socketio.on('left_click')
+def leftClick(eve = None):
     pyautogui.click()
     return ""
 
-@app.route('/double-click', methods=['GET', 'POST'])
-def doubleClick():
-    pyautogui.doubleClick()
+@app.route('/right-click')
+@socketio.on('right_click')
+def rightClick(eve = None):
+    pyautogui.click(button='right')
     return ""
 
-@app.route('/get-coords', methods=['GET', 'POST'])
+@app.route('/scroll-up')
+@socketio.on('scroll_up')
+def scrollUp(eve = None):
+    pyautogui.scroll(1)
+    return ""
+
+@app.route('/scroll-down')
+@socketio.on('scroll_down')
+def scrollDown(eve = None):
+    pyautogui.scroll(-1)
+    return ""
+
+@app.route('/get-coords')
 def getCoords():
     x, y = pyautogui.position();
     return '{"x": "'+ str(x) +'", "y":"' + str(y) + '"}'

src/core/static/css/main.css

@@ -46,26 +46,38 @@ input {
 #canvas {
     position: relative;
     width: 98%;
-    min-height: 800px;
+    min-height: 1000px;
+    border: 1px solid #c3c3c3;
 }
 
-#singleClickBtn, #doubleClickBtn {
-    background-color: #62c462;
+#leftClickBtn, #rightClickBtn {
     border-style: dashed;
     border-width: 2px;
     overflow: auto;
-    height: 8em;
-    font-size: 200%;
-    color: black;
+    height: 5em;
+    font-size: 280%;
 }
 
-#singleClickBtn:hover,
-#doubleClickBtn:hover {
+#leftClickBtn:hover,
+#rightClickBtn:hover {
     background-color: rgba(0, 232, 255, 0.5);
     cursor: pointer;
 }
 
-#sendKeysBtn { width: 8em; }
+#scrollToggle,
+#mouseHoldToggle,
+#sendKeysBtn {
+    display: inline-block;
+    font-size: 280%;
+    width: 100%;
+}
+
+@media only screen and (min-width : 800px) {
+    body {
+    	width: 800px;
+    	margin: 0 auto;
+    }
+}
 
 
 /* Classes */

src/core/static/js/events.js

@@ -1,8 +1,13 @@
 const socket         = io();
+let mouseHoldToggle  = document.getElementById("mouseHoldToggle");
+let scrollTggl     = document.getElementById("scrollToggle");
+let clickSound     = document.getElementById("clickSound");
 let intervalTimer  = null;
+let isHoldingMouse = false;
+let isScrolling    = false;
+let mod            = 0;
 let px             = 0;
 let py             = 0;
-let mod      = 0;
 
 
 socket.on('connect', function() {
@@ -39,7 +44,17 @@ $(function () {
             py = 1 + mod;
         }
 
+        if (isScrolling) {
+            if (e.direction == "up") {
+                socket.emit('scroll_up', "");
+            } else {
+                socket.emit('scroll_down', "");
+            }
+        } else {
+            socket.emit('update_coords', px + "," + py);
+            // doAjax("/update-coords/xy/" + px + "/" + py, "" , "update-coords", "GET");
             updateText (px, py);
+        }
     });
 });
 
@@ -48,8 +63,6 @@ $(function () {
 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
@@ -87,12 +100,51 @@ function endTimerModBump() {
     mod = 0;
 }
 
-function singleClick() {
-    socket.emit('single_click', "");
+function leftClick() {
+    playClickSound();
+    socket.emit('left_click', "");
 }
 
-function doubleClick() {
-    socket.emit('double_click', "");
+function rightClick() {
+    playClickSound();
+    socket.emit('right_click', "");
+}
+
+function scrollToggle() {
+    if (isScrolling) {
+        isScrolling = false;
+        scrollTggl.classList.add("btn-success");
+        scrollTggl.classList.remove("btn-info");
+        scrollTggl.innerText = "Scroll Mode: Inactive";
+    } else {
+        isScrolling = true;
+        scrollTggl.classList.add("btn-info");
+        scrollTggl.classList.remove("btn-success");
+        scrollTggl.innerText = "Scroll Mode: Active";
+    }
+}
+
+
+function scrollToggle() {
+    if (isHoldingMouse) {
+        isHoldingMouse = false;
+        mouseHoldToggle.classList.add("btn-success");
+        mouseHoldToggle.classList.remove("btn-info");
+        mouseHoldToggle.innerText = "Mouse Hold: Inactive";
+        socket.emit('mouse_up', "");
+    } else {
+        isHoldingMouse = true;
+        mouseHoldToggle.classList.add("btn-info");
+        mouseHoldToggle.classList.remove("btn-success");
+        mouseHoldToggle.innerText = "Mouse Hold: Active";
+        socket.emit('mouse_down', "");
+    }
+}
+
+function playClickSound() {
+    clickSound.pause();
+    clickSound.currentTime = 0;
+    clickSound.play();
 }
 
 
@@ -102,5 +154,9 @@ document.addEventListener("touchstart", touchHandler, true);
 document.addEventListener("touchmove", touchHandler, true);
 document.addEventListener("touchend", touchHandler, true);
 document.addEventListener("touchcancel", touchHandler, true);
-document.getElementById("singleClickBtn").addEventListener("mouseup", singleClick, true);
-document.getElementById("doubleClickBtn").addEventListener("mouseup", doubleClick, true);
+
+document.getElementById("leftClickBtn").addEventListener("mouseup", leftClick, true);
+document.getElementById("rightClickBtn").addEventListener("mouseup", rightClick, true);
+
+document.getElementById("scrollToggle").addEventListener("mouseup", scrollToggle, true);
+document.getElementById("mouseHoldToggle").addEventListener("mouseup", mouseHoldToggle, true);

src/core/templates/index.html

@@ -5,21 +5,36 @@
 {% endblock body_header_additional %}
 
 {% block body_content %}
+<audio id="clickSound" src="{{url_for('static', filename='click.mp3')}}"></audio>
 <div class="container-auto">
     <div class="row">
-        <div id="singleClickBtn" class="col justify-content-center text-center">
-            Single-Click
+        <div id="leftClickBtn" class="col justify-content-center text-center btn btn-success">
+            Left-Click
         </div>
-        <div id="doubleClickBtn" class="col justify-content-center text-center">
-            Double-Click
+        <div id="rightClickBtn" class="col justify-content-center text-center btn btn-success">
+            Right-Click
         </div>
     </div>
     <br/><br/>
     <div class="row">
-            <input id="sendKeysField" type="text" value="" class="form-control" placeholder="Send keys...">
-            <button id="sendKeysBtn" class="btn btn-success">Send</button>
+        <div class="col justify-content-center text-center">
+            <button id="scrollToggle" class="btn btn-success btn-lg">Scroll Mode: Inactive</button>
+        </div>
+        <div class="col justify-content-center text-center">
+            <button id="mouseHoldToggle" class="btn btn-success btn-lg">Mouse Hold: Inactive</button>
+        </div>
     </div>
 </div>
+<br/><br/>
+<div class="row">
+    <div class="col justify-content-center text-center">
+        <input type="text" id="sendKeysField" class="form-control" style="font-size: 145%;" value="" placeholder="Send keys...">
+    </div>
+    <div class="col justify-content-center text-center">
+        <button id="sendKeysBtn" class="btn btn-success btn-lg">Send</button>
+    </div>
+</div>
+<br/><br/>
 <div class="container-auto">
     <div class="row">
         <div class="col justify-content-center text-center">
@@ -27,7 +42,7 @@
                 X coords: 0, Y coords: 0
             </div>
 
-            <canvas id="canvas" style="border:1px solid #c3c3c3;"></canvas>
+            <canvas id="canvas"></canvas>
         </div>
     </div>
 </div>