diff --git a/README.md b/README.md index 556ea9e..c44301b 100644 --- a/README.md +++ b/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) diff --git a/client/assets/css/main.css b/client/assets/css/main.css index 72da165..9f96b4b 100644 --- a/client/assets/css/main.css +++ b/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; diff --git a/client/assets/js/main.js b/client/assets/js/main.js index c8c48e5..a88a6f0 100644 --- a/client/assets/js/main.js +++ b/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) { - if (e.targetTouches.length == 1) { - var touch = e.targetTouches[0]; - mouseInitPosX = touch.pageX; - mouseInitPosY = touch.pageY; + $scroller.on('touchstart', function(e) { + var touch = e.targetTouches[0]; + 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]; - mousePosX = touch.pageX; - mousePosY = touch.pageY; + var touch = e.changedTouches[0]; + mousePosX = touch.pageX; + mousePosY = touch.pageY; - var newX = mousePosX - mouseInitPosX; - var newY = mousePosY - mouseInitPosY; + var newX = mousePosX - mouseInitPosX; + var newY = mousePosY - mouseInitPosY; - mouseInitPosX = mousePosX; - mouseInitPosY = mousePosY; + mouseInitPosX = mousePosX; + mouseInitPosY = mousePosY; - var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}'; - ws.send(msg); - } + var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}'; + + ws.send(msg); }); }); diff --git a/client/index.html b/client/index.html index 99a8ea5..fb356e0 100644 --- a/client/index.html +++ b/client/index.html @@ -116,8 +116,8 @@
-
-
+
+
diff --git a/server/server b/server/server index 401c831..1ae8b8e 100755 --- a/server/server +++ b/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;