Readme

README.md

@@ -13,11 +13,11 @@ It allows you to:
 * change the i3-wm workspaces
 * manage volume and spotify
 * send text and shortcuts
-* move the pointer and click
+* move the pointer, scroll and click
 
 …by using a web interface with your phone.
 
 ![](https://upload.deblan.org/u/2018-02/5a79780f.png)
 ![](https://upload.deblan.org/u/2018-02/5a797815.png)
-![](https://upload.deblan.org/u/2018-02/5a79781a.png)
+![](https://upload.deblan.org/u/2018-02/5a798866.png)
 ![](https://upload.deblan.org/u/2018-02/5a79781e.png)

client/assets/css/main.css

@@ -34,6 +34,15 @@
     background: #ccc;
 }
 
+#scrollbar {
+    height: 80vh;
+    width: 50px;
+    background: #333;
+    position: absolute;
+    z-index: 100;
+    right: 0;
+}
+
 #disconneced {
     position: absolute;
     top: 0;

client/assets/js/main.js

@@ -1,10 +1,13 @@
 $(function() {
     var ws = new WebSocket('ws://' + window.location.hostname + ':14598');
     var $pointer = $('#pointer');
+    var $scroller = $('#scrollbar');
     var mouseInitPosX = null;
     var mouseInitPosY = null;
     var mousePosX = null;
     var mousePosY = null;
+    var scrollLastTimestamp = null;
+    var scrollLastValue = null;
 
     $('.select2').select2();
 
@@ -104,28 +107,48 @@ $(function() {
         }
     });
 
-    $pointer.on('touchstart', function(e) {
+    $scroller.on('touchstart', function(e) {
-        if (e.targetTouches.length == 1) {
+        var touch = e.targetTouches[0];
-            var touch = e.targetTouches[0];
+        mouseInitPosY = touch.pageY;
-            mouseInitPosX = touch.pageX;
+    });
-            mouseInitPosY = touch.pageY;
+
+    $scroller.on('touchmove', function(e) {
+        var touch = e.changedTouches[0];
+        var value = ((touch.pageY - mouseInitPosY > 0) ? 'down' : 'up');
+        var now = new Date().getTime();
+
+        if (value === scrollLastValue && scrollLastTimestamp !== null && now - scrollLastTimestamp < 200) {
+            return;
         }
+
+        scrollLastTimestamp = now;
+        scrollLastValue = value;
+
+        var msg = '{"type":"scroll","value": "' + value + '"}';
+
+        mouseInitPosY = touch.pageY;
+        ws.send(msg);
+    });
+
+    $pointer.on('touchstart', function(e) {
+        var touch = e.targetTouches[0];
+        mouseInitPosX = touch.pageX;
+        mouseInitPosY = touch.pageY;
     });
 
     $pointer.on('touchmove', function(e) {
-        if (e.changedTouches.length == 1) {
+        var touch = e.changedTouches[0];
-            var touch = e.changedTouches[0];
+        mousePosX = touch.pageX;
-            mousePosX = touch.pageX;
+        mousePosY = touch.pageY;
-            mousePosY = touch.pageY;
 
-            var newX = mousePosX - mouseInitPosX;
+        var newX = mousePosX - mouseInitPosX;
-            var newY = mousePosY - mouseInitPosY;
+        var newY = mousePosY - mouseInitPosY;
 
-            mouseInitPosX = mousePosX;
+        mouseInitPosX = mousePosX;
-            mouseInitPosY = mousePosY;
+        mouseInitPosY = mousePosY;
 
-            var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}';
+        var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}';
-            ws.send(msg);
+
-        }
+        ws.send(msg);
     });
 });

client/index.html

@@ -116,8 +116,8 @@
     </div>
 
     <div class="row pane" id="pane-pointer">
-        <div id="pointer" class="col-12">
+        <div id="scrollbar"></div>
-        </div>
+        <div id="pointer" class="col-12"></div>
         <div id="pointer-log"></div>
         <div class="text-center">
             <button type="button" data-msg='{"type":"pointer","click":"left"}' class="btn btn-secondary col-3">Left</button>

server/server

@@ -33,6 +33,16 @@ $server->addMessageHandler('pointer', function (ConnectionInterface $from, array
     }
 });
 
+$server->addMessageHandler('scroll', function (ConnectionInterface $from, array $data) {
+    $value = $data['value'] ?? null;
+
+    if ($value === 'down') {
+        return shell_exec('xdotool click 5 && xdotool click 5');
+    } elseif ($value === 'up') {
+        return shell_exec('xdotool click 4 && xdotool click 4');
+    }
+});
+
 $server->addMessageHandler('workspace', function (ConnectionInterface $from, array $data) {
     $value = $data['value'] ?? null;