improve mobile experience, add dynamic web manifest for pwa, minor style bugfixes

app.js

@@ -15,6 +15,7 @@ var FM_HOME = process.env.FM_HOME || '/config';
 var KEYBOARD = process.env.KEYBOARD || 'en-us-qwerty';
 
 //// Application Variables ////
+var package_info = require('./package.json');
 var socketIO = require('socket.io');
 var crypto = require('crypto');
 var ejs = require('ejs');
@@ -78,6 +79,11 @@ baseRouter.get('/', function (req, res) {
   res.render(__dirname + '/rdp.ejs', {token : encrypt(connectString), title: TITLE, keyboard: KEYBOARD});
 });
 
+//// Web app manifest ////
+baseRouter.get('/manifest.json', function (req, res) {
+  res.render(__dirname + '/manifest.ejs', {version: package_info.version, title: TITLE});
+});
+
 //// Web File Browser ////
 // Send landing page 
 baseRouter.get('/files', function (req, res) {

manifest.ejs

@@ -1,9 +1,9 @@
 {
-  "name": "LinuxServer Guacamole Client",
-  "short_name": "RDP Client",
+  "name": "<%- title -%>",
+  "short_name": "<%- title -%>",
   "manifest_version": 2,
-  "version": "0.2.0",
-  "display": "standalone",
+  "version": "<%- version -%>",
+  "display": "fullscreen",
   "background_color": "#000000",
   "theme_color": "#000000",
   "icons": [

package.json

@@ -1,6 +1,6 @@
 {
   "name": "GClient",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "LinuxServer Guacamole Client",
   "main": "app.js",
   "scripts": {

public/css/files.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?><svg version="1.1" viewBox="0 0 128 128" xmlns="http://www.w3.org/2000/svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"><path d="m28.11 13.609c-2.7387 0-4.9494 2.2106-4.9494 4.9494v90.883c0 2.7387 2.2106 4.9494 4.9494 4.9494h71.809c2.7387 0 4.9204-2.2106 4.9204-4.9494v-90.883c0-2.7387-2.1817-4.9494-4.9204-4.9494zm7.9595 7.3517h55.861c3.0814 0 5.5572 2.5047 5.5572 5.5861v12.648c0 3.0814-2.4758 5.5572-5.5572 5.5572h-55.861c-3.0814 0-5.5282-2.4758-5.5282-5.5572v-12.648c0-3.0814 2.4468-5.5861 5.5282-5.5861zm21.071 9.0015c-2.3244 0-4.1968 1.592-4.1968 3.5601 0 1.9681 1.8724 3.5311 4.1968 3.5311h15.109c2.3244 0 4.1968-1.563 4.1968-3.5311 0-1.9681-1.8724-3.5601-4.1968-3.5601zm-21.071 22.142h55.861c3.0814 0 5.5572 2.5047 5.5572 5.5861v12.648c0 3.0814-2.4758 5.5572-5.5572 5.5572h-55.861c-3.0814 0-5.5282-2.4758-5.5282-5.5572v-12.648c0-3.0814 2.4468-5.5861 5.5282-5.5861zm21.071 9.0015c-2.3244 0-4.1968 1.592-4.1968 3.5601 0 1.9681 1.8724 3.5311 4.1968 3.5311h15.109c2.3244 0 4.1968-1.5631 4.1968-3.5311 0-1.9681-1.8724-3.5601-4.1968-3.5601zm-21.071 22.142h55.861c3.0814 0 5.5572 2.5047 5.5572 5.5861v12.648c0 3.0814-2.4758 5.5572-5.5572 5.5572h-55.861c-3.0814 0-5.5282-2.4758-5.5282-5.5572v-12.648c0-3.0814 2.4468-5.5861 5.5282-5.5861zm21.071 9.0015c-2.3244 0-4.1968 1.592-4.1968 3.5601 0 1.9681 1.8724 3.5311 4.1968 3.5311h15.109c2.3244 0 4.1968-1.563 4.1968-3.5311 0-1.9681-1.8724-3.5601-4.1968-3.5601z"/></svg>
+

public/css/fit.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg class="bi bi-fullscreen" fill="currentColor" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/></svg>

public/css/fullscreen.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="M0,0v512h512V0H0z M477.867,477.867H34.133V34.133h443.733V477.867z"/><polygon points="126.53 102.4 199.11 102.4 199.11 68.267 68.267 68.267 68.267 199.11 102.4 199.11 102.4 126.54 198.42 222.56 222.56 198.42"/><polygon points="222.56 313.58 198.42 289.44 102.4 385.47 102.4 312.89 68.267 312.89 68.267 443.73 199.11 443.73 199.11 409.6 126.54 409.6"/><polygon points="409.6 312.89 409.6 385.47 313.58 289.44 289.44 313.58 385.46 409.6 312.89 409.6 312.89 443.73 443.73 443.73 443.73 312.89"/><polygon points="312.89 68.267 312.89 102.4 385.47 102.4 289.44 198.42 313.58 222.56 409.6 126.54 409.6 199.11 443.73 199.11 443.73 68.267"/></svg>

public/css/keyboard.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 361.875 361.875" version="1.1" viewBox="0 0 361.88 361.88" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><path d="m336.88 49.448h-311.88c-13.785 0-25 11.215-25 25v212.98c0 13.785 11.215 25 25 25h311.88c13.785 0 25-11.215 25-25v-212.98c0-13.786-11.215-25-25-25zm15 237.98c0 8.271-6.728 15-15 15h-311.88c-8.271 0-15-6.729-15-15v-170.96h341.88v170.96zm0-180.96h-341.88v-32.02c0-8.271 6.729-15 15-15h311.88c8.272 0 15 6.729 15 15v32.02z"/><path d="m38.85 177.49h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.288 9.579 9.579 9.579z"/><path d="m91.314 177.49h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579z"/><path d="m143.78 177.49h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.288 9.579 9.579 9.579z"/><path d="m196.24 177.49h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579z"/><path d="m248.71 177.49h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579z"/><path d="m301.17 177.49h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.854c0-5.29-4.288-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579z"/><path d="m98.476 220.37v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.288 9.579 9.579 9.579h21.854c5.29 1e-3 9.579-4.288 9.579-9.579z"/><path d="m141.36 229.95c5.29 0 9.579-4.288 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579h21.854z"/><path d="m193.83 229.95c5.29 0 9.579-4.288 9.579-9.579v-21.854c0-5.29-4.288-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579h21.854z"/><path d="m246.29 229.95c5.29 0 9.579-4.288 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.288 9.579 9.579 9.579h21.854z"/><path d="m298.75 229.95c5.29 0 9.579-4.288 9.579-9.579v-21.854c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.854c0 5.29 4.289 9.579 9.579 9.579h21.854z"/><path d="m38.85 282.42h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.853c0-5.29-4.289-9.579-9.579-9.579h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.853c0 5.29 4.288 9.579 9.579 9.579z"/><path d="m323.02 241.41h-21.854c-5.29 0-9.579 4.289-9.579 9.579v21.853c0 5.29 4.289 9.579 9.579 9.579h21.854c5.29 0 9.579-4.289 9.579-9.579v-21.853c0-5.29-4.288-9.579-9.579-9.579z"/><path d="m270.56 241.41h-179.25c-5.29 0-9.579 4.289-9.579 9.579v21.853c0 5.29 4.289 9.579 9.579 9.579h179.25c5.29 0 9.579-4.289 9.579-9.579v-21.853c0-5.29-4.289-9.579-9.579-9.579z"/></svg>

public/css/vdi.css

@@ -39,26 +39,40 @@ button {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
-  color: white;
   z-index: 2;
-  background: rgba(0, 0, 0, 0.3);
-  text-decoration: none;
-  font-size: 1.2em;
-  border-radius: 5px;
-  border:1px solid white;
+  width: 20vw;
+  height: 30vh;
 }
 
-.sidenav {
-  width: 100%;
+.menu {
+  white-space: nowrap;
+}
+
+.icons {
+  margin-right: 1px;
+  margin-left: 1px;
+  padding: 4px;
+  height: 6vh;
+  width: 3.7vw;
   cursor: pointer;
-  text-align: center;
-  padding-top: 10px;
-  padding-bottom: 10px;
-  border-radius: 5px;
+  border-radius: 3px;
+  background: rgba(255, 255, 255, 0.3);
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) contrast(105%);
 }
 
-.sidenav:hover {
+.menu-vert {
+}
+
+.icons-vert {
+  margin-right: 1px;
+  margin-left: 1px;
+  padding: 4px;
+  height: 6vh;
+  width: 20vw;
+  cursor: pointer;
+  border-radius: 3px;
   background: rgba(255, 255, 255, 0.3);
+  filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(82deg) brightness(105%) contrast(105%);
 }
 
 #sideopen {
@@ -68,9 +82,9 @@ button {
   top: 50%;
   transform: translateY(-50%);
   border-radius:50%;
-  width: 20px;
-  height: 20px;
-  border:1px solid white;
+  width: 18px;
+  height: 18px;
+  border: 2px solid white;
 }
 
 .close {
@@ -82,11 +96,14 @@ button {
   border-radius:50%;
   width: 20px;
   height: 20px;
-  border:1px solid white;
+  border: 2px solid white;
 }
 
 #clipboard {
   border-radius: 5px;
+  height: 20vh;
+  width: 19.55vw;
+  resize: none;
 }
 
 /* On Screen Keyboard */
@@ -97,7 +114,7 @@ button {
   bottom: 0;
   left: 0;
   width: 100vw;
-  opacity: 0.5;
+  opacity: 0.8;
   z-index: 2;
   background: rgba(0, 0, 0, 0.1);
 }

rdp.ejs

@@ -25,11 +25,13 @@
     <div id="display"></div>
     <!-- SideBar -->
     <div id="sidebar">
-      <textarea id="clipboard" rows="7" class="stopcapture"></textarea>
-      <div class="sidenav" onclick="poposk()">Keyboard</div>
-      <div class="sidenav" onclick="popfiles()">Manage Files</div>
-      <div class="sidenav" onclick="fullscreen()">Fullscreen</div>
-      <div class="sidenav" onclick="resize()">Fit to window</div>
+      <textarea id="clipboard" cols="100" rows="100" class="stopcapture"></textarea>
+      <div class="menu">
+        <img class="icons" title="On Screen Keyboard" src="css/keyboard.svg" onclick="poposk()"/>
+        <img class="icons" title="File Manager" src="css/files.svg" onclick="popfiles()"/>
+        <img class="icons" title="Fit to Window" src="css/fit.svg" onclick="resize()"/>
+        <img class="icons" title="Fullscreen" src="css/fullscreen.svg" onclick="fullscreen()"/>
+      </div>
       <div class="close" onclick="$('#sidebar').toggle(100)"></div>
     </div>
     <div id="sideopen" onclick="$('#sidebar').toggle(100)"></div>