diff --git a/README.md b/README.md index 196052f..c33338c 100644 --- a/README.md +++ b/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 diff --git a/images/pic1.png b/images/pic1.png index de572c1..7187f34 100644 Binary files a/images/pic1.png and b/images/pic1.png differ diff --git a/src/core/static/css/base.css b/src/core/static/css/base.css new file mode 100644 index 0000000..a2918f9 --- /dev/null +++ b/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; +} diff --git a/src/core/static/css/iframe.css b/src/core/static/css/iframe.css new file mode 100644 index 0000000..f4e1830 --- /dev/null +++ b/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); +} diff --git a/src/core/static/css/main.css b/src/core/static/css/main.css index 2d906a7..18bd0d0 100644 --- a/src/core/static/css/main.css +++ b/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 { - position: relative; - width: 98%; - min-height: 1000px; - border: 1px solid #c3c3c3; +#file-grid { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(18em, 1fr)); + grid-column-gap: 1em; + 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; - font-size: 280%; + padding-bottom: 0.5em; + 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, -#rightClickBtn:hover { - background-color: rgba(0, 232, 255, 0.5); +.dir-style, .file-style { + background-position: 32px center; +} + +.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, -#mouseHoldToggle, -#sendKeysBtn { - display: inline-block; - font-size: 280%; - width: 100%; -} - -@media only screen and (min-width : 800px) { - body { - width: 800px; - margin: 0 auto; - } +.close-btn:hover, +.card-popout-btn:hover, +.popout-btn:hover { + background-color: rgba(255,255,255, 0.85); + color: #000000; + border-color: #000000; } -/* Classes */ -/* Other message text colors */ -.errorTxt { color: rgb(170, 18, 18); } -.warningTxt { color: rgb(255, 168, 0); } -.successTxt { color: rgb(136, 204, 39); } + +.dir-style:hover, .image-style:hover, .video-style:hover, .file-style:hover { + background-color: rgba(0, 141, 166, 0.56); + cursor: pointer; + 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; +} diff --git a/src/core/static/css/overrides.css b/src/core/static/css/overrides.css new file mode 100644 index 0000000..15e59a9 --- /dev/null +++ b/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; +} diff --git a/src/core/static/js/events.js b/src/core/static/js/events.js index f20c1ea..83c4a4f 100644 --- a/src/core/static/js/events.js +++ b/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; - py = -1 - mod; + px = -step - mod; + py = -step - mod; } else if (e.direction == "top-right") { - px = 1 + mod; - py = -1 - mod; + px = step + mod; + py = -step - mod; } else if (e.direction == "bottom-left") { - px = -1 - mod; - py = 1 + mod; + px = -step - mod; + py = step + mod; } else if (e.direction == "bottom-right") { - px = 1 + mod; - py = 1 + mod; + px = step + 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() { - intervalTimer = setInterval(function () { - mod += 2; - }, 600); +function setClickkCheck() { + isClicking = true; } -function endTimerModBump() { - clearInterval(intervalTimer); +function resetClickCheckAndModBump(e) { mod = 0; + if (e.target.id == "canvas" && isClicking) { + leftClick(); + } } function leftClick() { @@ -148,14 +146,13 @@ function playClickSound() { } -document.addEventListener("mousedown", beginTimerModBump, true); -document.addEventListener("mouseup", endTimerModBump, true); +document.addEventListener("mousedown", setClickkCheck, 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); diff --git a/src/core/templates/index.html b/src/core/templates/index.html index 11b052f..c1e510c 100644 --- a/src/core/templates/index.html +++ b/src/core/templates/index.html @@ -8,11 +8,15 @@
-
- Left-Click +
+
-
- Right-Click +
+

+
+
+


@@ -27,22 +31,14 @@


-
- -
-
- +
+ Right-Click


-
-
- X coords: 0, Y coords: 0 -
- - +