Fixes, mods, updates

README.md

@@ -1,4 +1,4 @@
-# Dropper
+#  Remote-Mouse
 Remote Mouse is a flask + pyautogui app to control a PC from your phone or any other device.
 
 # Notes

src/core/static/css/base.css

@@ -0,0 +1,14 @@
+body {
+    overflow: hidden; /* Used to prevent touch scroll down reloading page. Ref: https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature */
+    -webkit-touch-callout: none; /* iOS Safari */
+      -webkit-user-select: none; /* Safari */
+       -khtml-user-select: none; /* Konqueror HTML */
+         -moz-user-select: none; /* Old versions of Firefox */
+          -ms-user-select: none; /* Internet Explorer/Edge */
+              user-select: none; /* Non-prefixed version, currently
+                                    supported by Chrome, Opera and Firefox */
+}
+
+ol, ul, li {
+    list-style: none;
+}

src/core/static/css/iframe.css

@@ -0,0 +1,5 @@
+body,
+.container-fluid, .row, .col,
+.error-styling, .dir-style, .movie-style, .file-style {
+    background-color: rgba(0,0,0,0.0);
+}

src/core/static/css/main.css

@@ -1,27 +1,3 @@
-/* Elms */
-ul, li {
-    list-style: none;
-}
-
-body {
-    overflow: hidden; /* Used to prevent touch scroll down reloading page. Ref: https://stackoverflow.com/questions/29008194/disabling-androids-chrome-pull-down-to-refresh-feature */
-    -webkit-touch-callout: none; /* iOS Safari */
-      -webkit-user-select: none; /* Safari */
-       -khtml-user-select: none; /* Konqueror HTML */
-         -moz-user-select: none; /* Old versions of Firefox */
-          -ms-user-select: none; /* Internet Explorer/Edge */
-              user-select: none; /* Non-prefixed version, currently
-                                    supported by Chrome, Opera and Firefox */
-}
-
-input {
-    width: 75% !important;
-    margin: 0 auto !important;
-    font-size: 200% !important;
-    background-color: #00000000 !important;
-}
-
-
 /* IDs */
 #bg {
     position: fixed;
@@ -43,45 +19,118 @@ input {
     z-index: -999;
 }
 
-#canvas {
+#file-grid {
-    position: relative;
+    display: grid;
-    width: 98%;
+    grid-template-columns: repeat(auto-fit, minmax(18em, 1fr));
-    min-height: 1000px;
+    grid-column-gap: 1em;
-    border: 1px solid #c3c3c3;
+    grid-row-gap: 1em;
+    margin: 5em auto;
+    width: 85%;
+    padding: 2em;
 }
 
-#leftClickBtn, #rightClickBtn {
+
-    border-style: dashed;
+
-    border-width: 2px;
+/* CLASSES */
+.scroller {
+  scrollbar-color: #00000084 #ffffff64;
+  scrollbar-width: thin;
+}
+
+.dir-style, .video-style, .file-style {
+    display: block;
+    width: 100%;
+    height: auto;
     overflow: auto;
-    height: 5em;
+    padding-bottom: 0.5em;
-    font-size: 280%;
+    color: #ffffff;
+    text-align: center;
+    font-size: 1.2em;
+    background-color: rgba(0,0,0,0.64);
+    background-repeat: no-repeat;
+    background-size: 42px 42px;
+    touch-action: manipulation;
 }
 
-#leftClickBtn:hover,
+.dir-style, .file-style {
-#rightClickBtn:hover {
+    background-position: 32px center;
-    background-color: rgba(0, 232, 255, 0.5);
+}
+
+.image-style,
+.video-style {
+    min-height: 6.5em;
+    width: auto;
+    overflow: hidden;
+    background-size: 100% 100%;
+}
+
+.card-popout-btn {
+	float: right;
+	z-index: 2;
+	width: 2em;
+	height: 2em;
+	text-align: center;
+	background-color: rgba(0,0,0, 0.85);
+	color: rgb(255,255,255);
+	border-style: solid;
+	border-color: rgb(255,255,255);
+}
+
+.close-btn:hover,
+.card-popout-btn:hover,
+.popout-btn:hover {
     cursor: pointer;
 }
 
-#scrollToggle,
+.close-btn:hover,
-#mouseHoldToggle,
+.card-popout-btn:hover,
-#sendKeysBtn {
+.popout-btn:hover {
-    display: inline-block;
+    background-color: rgba(255,255,255, 0.85);
-    font-size: 280%;
+    color: #000000;
-    width: 100%;
+    border-color: #000000;
-}
-
-@media only screen and (min-width : 800px) {
-    body {
-    	width: 800px;
-    	margin: 0 auto;
-    }
 }
 
 
-/* Classes */
+
-/* Other message text colors */
+.dir-style:hover, .image-style:hover, .video-style:hover, .file-style:hover {
-.errorTxt   { color: rgb(170, 18, 18);  }
+    background-color: rgba(0, 141, 166, 0.56);
-.warningTxt { color: rgb(255, 168, 0);  }
+    cursor: pointer;
-.successTxt { color: rgb(136, 204, 39); }
+    box-shadow: 0px 0px 15px rgb(114,184,199);
+    border-radius: 0.5em;
+}
+
+.dir-style:focus, .image-style:focus, .video-style:focus, .file-style:focus {
+    background-color: rgba(0, 139, 35, 0.76);
+    cursor: pointer;
+    box-shadow: 0px 0px 25px rgb(114, 199, 120);
+    border-radius: 0.5em;
+}
+
+
+.dir-title, .file-title, .video-title {
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    text-align: center;
+    overflow: hidden;
+    border-style: none;
+    font-size: 75%;
+    user-select: none;
+    -moz-user-select: none;
+}
+
+.dir-title, .file-title {
+    width: auto;
+    background-color: #00000000;
+    color: #ffffff;
+}
+
+.video-title {
+	width: 100%;
+	margin-top: 5.5em;
+	background-color: rgba(0, 0, 0, 0.64);
+	color: rgb(255, 255, 255);
+	text-align: center;
+	border-top: 1px solid rgb(255, 255, 255);
+	border-bottom: 1px solid rgb(255, 255, 255);
+	text-overflow: ellipsis;
+}

src/core/static/css/overrides.css

@@ -0,0 +1,14 @@
+.modal-content {
+    background-color: #32383e74;
+    border-color: #f8940674;
+}
+
+.sticky-top,
+.card {
+    background-color: rgba(50, 56, 62, 0.84);
+}
+
+.label-as-badge {
+    border-radius: 1em;
+    cursor: pointer;
+}

src/core/static/js/events.js

@@ -2,9 +2,11 @@ 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 isClicking     = true;
+let step           = 1;
+let stepBump       = 0.1;
 let mod            = 0;
 let px             = 0;
 let py             = 0;
@@ -18,32 +20,35 @@ socket.on('connect', function() {
 $(function () {
     $.mousedirection();
     $("#canvas").on("mousedirection", function (e) {
+        isClicking = false;
         if (e.direction == "up") {
             px = 0;
-            py = -1 - mod;
+            py = -step - mod;
         } else if (e.direction == "down") {
             px = 0;
-            py = 1 + mod;
+            py = step + mod;
         } else if (e.direction == "left") {
-            px = -1 - mod;
+            px = -step - mod;
             py = 0;
         } else if (e.direction == "right") {
-            px = 1 + mod;
+            px = step + mod;
             py = 0;
         } else if (e.direction == "top-left") {
-            px = -1 - mod;
+            px = -step - mod;
-            py = -1 - mod;
+            py = -step - mod;
         } else if (e.direction == "top-right") {
-            px = 1 + mod;
+            px = step + mod;
-            py = -1 - mod;
+            py = -step - mod;
         } else if (e.direction == "bottom-left") {
-            px = -1 - mod;
+            px = -step - mod;
-            py = 1 + mod;
+            py = step + mod;
         } else if (e.direction == "bottom-right") {
-            px = 1 + mod;
+            px = step + mod;
-            py = 1 + mod;
+            py = step + mod;
         }
 
+        mod += stepBump;
+
         if (isScrolling) {
             if (e.direction == "up") {
                 socket.emit('scroll_up', "");
@@ -53,18 +58,11 @@ $(function () {
         } else {
             socket.emit('update_coords', px + "," + py);
             // doAjax("/update-coords/xy/" + px + "/" + py, "" , "update-coords", "GET");
-            updateText (px, py);
         }
     });
 });
 
 
-
-function updateText (px, py) {
-    const coordsTxt = "X coords: " + px + ", Y coords: " + py;
-    document.getElementById("cordsText").innerText = coordsTxt;
-}
-
 // Touch events converted to mouse events
 function touchHandler(event) {
     let touches = event.changedTouches,
@@ -89,15 +87,15 @@ function touchHandler(event) {
 }
 
 
-function beginTimerModBump() {
+function setClickkCheck() {
-    intervalTimer = setInterval(function () {
+    isClicking = true;
-        mod += 2;
-    }, 600);
 }
 
-function endTimerModBump() {
+function resetClickCheckAndModBump(e) {
-    clearInterval(intervalTimer);
     mod = 0;
+    if (e.target.id == "canvas" && isClicking) {
+        leftClick();
+    }
 }
 
 function leftClick() {
@@ -148,14 +146,13 @@ function playClickSound() {
 }
 
 
-document.addEventListener("mousedown", beginTimerModBump, true);
+document.addEventListener("mousedown", setClickkCheck, true);
-document.addEventListener("mouseup", endTimerModBump, true);
+document.addEventListener("mouseup", resetClickCheckAndModBump, true);
 document.addEventListener("touchstart", touchHandler, true);
 document.addEventListener("touchmove", touchHandler, true);
 document.addEventListener("touchend", touchHandler, true);
 document.addEventListener("touchcancel", touchHandler, true);
 
-document.getElementById("leftClickBtn").addEventListener("mouseup", leftClick, true);
 document.getElementById("rightClickBtn").addEventListener("mouseup", rightClick, true);
 
 document.getElementById("scrollToggle").addEventListener("mouseup", scrollToggle, true);

src/core/templates/index.html

@@ -8,11 +8,15 @@
 <audio id="clickSound" src="{{url_for('static', filename='click.mp3')}}"></audio>
 <div class="container-auto">
     <div class="row">
-        <div id="leftClickBtn" class="col justify-content-center text-center btn btn-success">
+        <div class="col justify-content-center text-center">
-            Left-Click
+            <input type="text" id="sendKeysField" class="form-control"
+                value="" placeholder="Send keys..." />
         </div>
-        <div id="rightClickBtn" class="col justify-content-center text-center btn btn-success">
+    </div>
-            Right-Click
+    <br/><br/>
+    <div class="row">
+        <div class="col justify-content-center text-center">
+            <button id="sendKeysBtn" class="btn btn-success btn-lg">Send</button>
         </div>
     </div>
     <br/><br/>
@@ -27,22 +31,14 @@
 </div>
 <br/><br/>
 <div class="row">
-    <div class="col justify-content-center text-center">
+    <div id="rightClickBtn" class="col justify-content-center text-center btn btn-success">
-        <input type="text" id="sendKeysField" class="form-control" style="font-size: 145%;" value="" placeholder="Send keys...">
+        Right-Click
-    </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">
+        <div id="canvas" class="col justify-content-center text-center">
-            <div id="cordsText" style="font-size: 280%;">
-                X coords: 0, Y coords: 0
-            </div>
-
-            <canvas id="canvas"></canvas>
         </div>
     </div>
 </div>