add pages

refactoring

static/main.css

@@ -0,0 +1,141 @@
+a {
+    color: #1e3650;
+}
+
+.btn-primary {
+    background: #1e3650;
+    border-color: #0e2640;
+}
+
+.nav-pills .nav-link.active {
+    background: #1e3650;
+}
+
+.nav-pills .nav-link {
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.nav-link {
+    font-size: 10px;
+}
+
+.legend {
+    color: #777;
+    margin: 3px 0;
+    padding: 3px 0;
+    border-bottom: 1px solid #eee;
+    font-size: 11px;
+    text-transform: uppercase;
+}
+
+.btn-sm {
+    font-size: 9px;
+}
+
+.select2 {
+    min-width: 100%;
+}
+
+.line {
+    height: 3px;
+}
+
+.pane {
+    display: none;
+}
+
+.no-margin {
+    margin: 0;
+}
+
+.no-padding {
+    padding: 0;
+}
+
+.no-radius {
+    border-radius: 0 !important;
+}
+
+#pointer {
+    height: calc(100vh - 80px);
+    margin: auto;
+    background: #ccc;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+}
+
+#scrollbar {
+    height: calc(100vh - 80px);
+    width: 50px;
+    background: #333;
+    position: absolute;
+    z-index: 100;
+    right: 0;
+}
+
+.fullscreen #scrollbar {
+    height: calc(100vh - 150px);
+}
+
+.fullscreen #pointer {
+    height: calc(100vh - 150px);
+}
+
+#pane-pointer .form-group {
+    padding: 0;
+    margin: 0;
+}
+
+#pointer-buttons {
+    position: absolute;
+    margin-top: -42px;
+    width: 100%;
+    z-index: 110;
+}
+
+#pointer-buttons .btn {
+    height: 50px;
+}
+
+#disconneced {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    background: #ff6161;
+    color: #fff;
+    padding: 5px;
+}
+
+#disconneced a {
+    color: #fff;
+    font-weight: bold;
+}
+
+#nav {
+    border-bottom: 2px solid #1e3650;
+}
+
+#shortcuts_special_keys input {
+    display: none;
+}
+
+#response {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    color: #fff;
+    background: #748c26;
+    padding: 5px;
+    display: none;
+}
+
+#screenshot img {
+    max-width: 100%;
+    margin-top: 10px;
+    cursor: pointer;
+}

static/main.js

@@ -0,0 +1,310 @@
+var ws;
+var $pointer, $scroller, $response, $screenshotImg;
+var scrollLastTimestamp, scrollLastValue;
+var mousePosX, mousePosY, mouseInitPosX, mouseInitPosY;
+var isLive = false;
+var isScreenshotWaiting = false;
+
+var createWebSocketConnection = function() {
+    ws = new WebSocket(`ws://${window.location.hostname}:${window.location.port}/ws`);
+
+    ws.onopen = function(event) {
+        $('#disconneced').fadeOut();
+    }
+
+    ws.onclose = function(event) {
+        $('#disconneced').fadeIn();
+
+        window.setTimeout(createWebSocketConnection, 5000);
+    }
+
+    ws.onmessage = function(event) {
+        var data = JSON.parse(event.data);
+
+        if (data.type === 'response') {
+            $response.text(data.value);
+            $response.fadeIn();
+
+            window.setTimeout(function() {
+                $response.fadeOut();
+            }, 2500);
+        } else if (data.type === 'screenshot') {
+            isScreenshotWaiting = false
+            $screenshotImg.attr('src', 'data:image/png;base64, ' + data.value);
+        }
+    }
+}
+
+var navigationClickHandler = function(e) {
+    if ($(this).attr('href') === '#') {
+        return
+    }
+
+    $('.pane').hide();
+
+    var target = $(this).attr('href');
+    $(target).show();
+
+    $('#nav a').removeClass('active');
+    $(this).addClass('active');
+}
+
+var buttonClickHandler = function(e) {
+    var msg = $(this).attr('data-msg');
+    ws.send(msg);
+}
+
+var shortcutClearClickHandler = function(e) {
+    $('#shortcut-key').val('');
+    $('#shortcuts_special_keys input:checked').each(function() {
+        $(this).prop('checked', false).trigger('change');
+    });
+}
+
+var shortcutSendClickHandler = function(e) {
+    var keys = [];
+
+    $('#shortcuts_special_keys input:checked').each(function() {
+        keys.push($(this).val());
+    });
+
+    var key = $('#shortcut-key').val();
+
+    if (keys.length) {
+        if (key) {
+            keys.push(key);
+        }
+
+        var msg = '{"type":"keys","value": "' + (keys.join(',').replace('"', '\\"')) + '"}';
+        ws.send(msg);
+    }
+}
+
+var textClearClickHandler = function(e) {
+    $('#text').val('');
+}
+
+var textSendClickHandler = function(e) {
+    var keys = $('#text').val();
+
+    if (keys.length) {
+        var msg = '{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}';
+        ws.send(msg);
+    }
+}
+
+var textKeyUpHandler = function(e) {
+    var keys = $('#text').val();
+
+    if (e.keyCode === 13) {
+        var msg = '{"type":"text","value": "' + (keys.replace('"', '\\"')) + '"}';
+        ws.send(msg);
+    }
+}
+
+var liveTextKeyUpHandler = function(e) {
+    var value = $(this).val();
+    var live = false;
+
+    if (e.keyCode === 8) {
+        var msg = '{"type":"key","value": "backspace"}';
+        ws.send(msg);
+    } else if (e.keyCode === 13) {
+        var msg = '{"type":"key","value": "enter"}';
+        ws.send(msg);
+    } else if (value.length) {
+        if (value === ' ') {
+            var msg = '{"type":"key","value": "space"}';
+            ws.send(msg);
+        } else {
+            var msg = '{"type":"text","value": "' + (value.replace('"', '\\"')) + '"}';
+            ws.send(msg);
+        }
+
+        $(this).val('');
+    }
+}
+
+var shortcutsSpecialKeysOnChangeHandler = function(e) {
+    $('#shortcuts_special_keys input:checked').each(function() {
+        $(this).parent().addClass('btn-primary').removeClass('btn-secondary');
+    })
+
+    $('#shortcuts_special_keys input:not(:checked)').each(function() {
+        $(this).parent().addClass('btn-secondary').removeClass('btn-primary');
+    })
+}
+
+var pointerClickHandler = function(e) {
+    var msg = '{"type":"pointer","click":"left"}';
+    ws.send(msg);
+}
+
+var scrollerTouchStartHandler = function(e) {
+    var touch = e.targetTouches[0];
+    mouseInitPosY = touch.pageY;
+}
+
+var scrollerTouchMoveHandler = function(e) {
+    var touch = e.changedTouches[0];
+    var value = ((touch.pageY - mouseInitPosY > 0) ? 'down' : 'up');
+    var now = new Date().getTime();
+
+    if (touch.pageY === mouseInitPosY || value === scrollLastValue && scrollLastTimestamp !== null && now - scrollLastTimestamp < 200) {
+        return;
+    }
+
+    scrollLastTimestamp = now;
+    scrollLastValue = value;
+
+    var msg = '{"type":"scroll","value": "' + value + '"}';
+
+    mouseInitPosY = touch.pageY;
+    ws.send(msg);
+}
+
+var pointerTouchStartHandler = function(e) {
+    var touch = e.targetTouches[0];
+    mouseInitPosX = touch.pageX;
+    mouseInitPosY = touch.pageY;
+}
+
+var pointerTouchMoveHandler = function(e) {
+    if (e.changedTouches.length === 2) {
+        return scrollerTouchMoveHandler(e);
+    }
+
+    var touch = e.changedTouches[0];
+    mousePosX = touch.pageX;
+    mousePosY = touch.pageY;
+
+    var newX = mousePosX - mouseInitPosX;
+    var newY = mousePosY - mouseInitPosY;
+
+    mouseInitPosX = mousePosX;
+    mouseInitPosY = mousePosY;
+
+    var msg = '{"type":"pointer","x": "' + newX + '","y": "' + newY + '"}';
+
+    ws.send(msg);
+}
+
+var liveHqClickHandler = function(e) {
+    return liveClickHandler(e, 'hq')
+}
+
+var liveLqClickHandler = function(e) {
+    return liveClickHandler(e, 'lq')
+}
+
+var liveClickHandler = function(e, quality) {
+    if (isLive) {
+        isLive = false;
+        isScreenshotWaiting = false;
+        $('#live-hq').text(`Live HQ`);
+        $('#live-lq').text(`Live LQ`);
+
+        return;
+    }
+
+    isLive = true;
+    $(e.target).text('Stop live');
+
+    var doScreenshot = function() {
+        if (isLive) {
+            if (!isScreenshotWaiting) {
+                isScreenshotWaiting = true
+                ws.send(`{"type":"screenshot","quality":"${quality}"}`);
+            }
+
+            window.setTimeout(doScreenshot, 100);
+        }
+    }
+
+    doScreenshot();
+}
+
+var fullscreenHandler = function(e) {
+    var element = $(e.target.getAttribute('data-target'));
+    var isFullscreen = parseInt($(e.target).attr('data-fullscreen'));
+
+    $('body').toggleClass('fullscreen', isFullscreen)
+
+    if (isFullscreen) {
+        element.attr('data-fullscreen', '0');
+
+        if (document.exitFullscreen) {
+            document.exitFullscreen();
+        } else if (document.webkitExitFullscreen) {
+            document.webkitExitFullscreen();
+        } else if (document.mozCancelFullScreen) {
+            document.mozCancelFullScreen();
+        }
+    } else {
+        $(e.target).attr('data-fullscreen', '1');
+
+        if (element.get(0).requestFullscreen) {
+            element.get(0).requestFullscreen();
+        } else if (element.get(0).webkitRequestFullscreen) {
+            element.get(0).webkitRequestFullscreen();
+        } else if (element.get(0).mozRequestFullScreen) {
+            element.get(0).mozRequestFullScreen();
+        }
+    }
+}
+
+var documentHashHandler = function() {
+    var hash = window.location.hash;
+
+    if (hash) {
+        $(hash).show();
+        $('a[href="' + hash + '"]').addClass('active');
+    } else {
+        $('#pane-keyboard').show();
+        $('#nav a').first().addClass('active');
+    }
+}
+
+var addListeners = function() {
+    $('#nav a').click(navigationClickHandler);
+    $('button[data-msg]').click(buttonClickHandler);
+
+    $('#shortcut-clear').click(shortcutClearClickHandler);
+    $('#shortcuts_special_keys input').change(shortcutsSpecialKeysOnChangeHandler);
+    $('#shortcut-send').click(shortcutSendClickHandler);
+
+    $('#text-clear').click(textClearClickHandler);
+    $('#text-send').click(textSendClickHandler);
+    $('#text').on('keyup', textKeyUpHandler);
+    $('.live-text').on('keyup', liveTextKeyUpHandler);
+
+    $scroller
+        .on('touchstart', scrollerTouchStartHandler)
+        .on('touchmove', scrollerTouchMoveHandler);
+
+    $pointer
+        .on('click', pointerClickHandler)
+        .on('touchstart', pointerTouchStartHandler)
+        .on('touchmove', pointerTouchMoveHandler);
+
+    $('#live-hq').click(liveHqClickHandler);
+    $('#live-lq').click(liveLqClickHandler);
+
+    $('.btn-fullscreen').click(fullscreenHandler)
+}
+
+var bootstrap = function() {
+    documentHashHandler();
+    shortcutsSpecialKeysOnChangeHandler();
+    createWebSocketConnection();
+    addListeners();
+}
+
+$(function() {
+    $pointer = $('#pointer');
+    $scroller = $('#scrollbar');
+    $response = $('#response');
+    $screenshotImg = $('#screenshot img');
+
+    bootstrap();
+});