Mobile Keyboard Input (#223)

* Draft - Mobile Keyboard * Prettier * Modifications * Fixes * Modifications * work around for backspace on mobile * Fixed issues with backspace, space and autocomplete. * Remove unneeded code for backspace * Add inputTextKeycode const and fix special characters * Rely in input event instead of keyup event for mobile keyboard input It seems like the input event is more robust and requires less massaging of the data to get it into the form we want. * Remove named constant for 229 keycode With the changes to remote-screen.html, the 229 value only appears once, so we don't need a named constant for it anymore. * Update style.css Co-authored-by: djclueless <[email protected]> Co-authored-by: Michael Lynch <[email protected]>
tiny-pilot · Sep 22, 2020 · 0de4194 · 0de4194
1 parent cd1c91c
commit 0de4194
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 3 deletions.
diff --git a/app/static/js/app.js b/app/static/js/app.js
@@ -2,7 +2,6 @@
 
 const socket = io();
 let connectedToServer = false;
-
 const screenCursorOptions = [
   "disabled", //to show on disconnect
   "default", // Note that this is the browser default, not TinyPilot's default.
@@ -313,6 +312,7 @@ document.getElementById("fullscreen-btn").addEventListener("click", (evt) => {
 document.getElementById("paste-btn").addEventListener("click", () => {
   showPasteOverlay();
 });
+
 document
   .getElementById("paste-overlay")
   .addEventListener("paste-text", (evt) => {

diff --git a/app/templates/custom-elements/remote-screen.html b/app/templates/custom-elements/remote-screen.html
@@ -30,8 +30,14 @@
     :host([fullscreen="true"]) #remote-screen-img.full-height {
       height: 100%;
     }
+
+    #mobile-keyboard-input {
+      position: fixed;
+      bottom: -1000px;
+    }
   </style>
   <div class="screen-wrapper">
+    <input id="mobile-keyboard-input" autocapitalize="off" type="text" />
     <img id="remote-screen-img" src="/stream?advance_headers=1" />
   </div>
   <script
@@ -108,8 +114,35 @@
           screenImg.addEventListener("contextmenu", (evt) => {
             evt.preventDefault();
           });
+          let isTouchScreen = false;
+          this.shadowRoot.addEventListener("touchend", () => {
+            isTouchScreen = true;
+          });
+          this.shadowRoot.addEventListener("click", () => {
+            if (isTouchScreen) {
+              this.shadowRoot.getElementById("mobile-keyboard-input").focus();
+            }
+          });
 
-          window.addEventListener("resize", this.onWindowResize);
+          // On mobile, the keydown events function differently due to the OS
+          // attempting to autocomplete text. Instead of listening for keydown
+          // events, we listen for input events.
+          const mobileKeyboard = this.shadowRoot.getElementById(
+            "mobile-keyboard-input"
+          );
+          mobileKeyboard.addEventListener("input", (evt) => {
+            // Handle insertCompositionText, which mean typing in autocomplete
+            // mode. The global keydown event handler processes all other key
+            // input events.
+            if (evt.inputType === "insertCompositionText") {
+              sendTextInput(evt.data);
+            }
+
+            // Force the autocomplete sequence to restart.
+            mobileKeyboard.blur();
+            mobileKeyboard.value = "";
+            mobileKeyboard.focus();
+          });
         }
 
         disconnectedCallback() {

diff --git a/app/templates/index.html b/app/templates/index.html
@@ -12,6 +12,10 @@
     <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
     <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, maximum-scale=1; scalable=no;"
+    />
     <meta name="csrf-token" content="{{ csrf_token() }}" />
   </head>
   <body>
@@ -33,7 +37,6 @@ <h3 id="error-type">Error Type</h3>
         <shutdown-dialog id="shutdown-dialog"></shutdown-dialog>
 
         <remote-screen id="remote-screen"></remote-screen>
-
         {% include "components/keyboard-panel.html" %}
       </div>
     </div>