Fix Keyboard Input for Mobile Browser. Update files from https://bell…

…ard.org/jslinux
lupyuen · Jan 12, 2024 · 67d513f · 67d513f
1 parent 2ccdad5
commit 67d513f
Show file tree

Hide file tree

Showing 6 changed files with 405 additions and 120 deletions.
diff --git a/docs/tinyemu2/index.html b/docs/tinyemu2/index.html
@@ -1,28 +1,22 @@
-<!DOCTYPE html>
+
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 <html>
 <head>
-  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
-  <title>JSLinux</title>
-  <link href="style.css" type="text/css" rel="stylesheet"/>
-<style>
-</style>
+    <title>JSLinux</title>
+    <link href="style.css" type="text/css" rel="stylesheet"/>
 </head>
 <body>
 <div id="term_wrap">
-  <div id="term_container">
-  </div>
-  <div>
-    <textarea id="term_paste" cols="10" rows="1" autocorrect="off">Paste Here</textarea>
-    <label>
-      <img title="Upload files" src="images/upload-icon.png"><input type="file" id="files" multiple onchange="on_update_files(this.files)">
-    </label>
-    <progress id="net_progress">
-    </progress>
-  </div>
+    <div id="term_container">
+    </div>
+    <div id="term_bar">
+      <label>
+       <img title="Upload files" src="images/upload-icon.png"><input type="file" id="files" multiple onchange="on_update_files(this.files)">
+      </label>
+      <progress id="net_progress">
+      </progress>
+    </div>
 </div>
 <script type="text/javascript" src="term.js"></script>
-<script type="text/javascript" src="jslinux.js?1"></script>
-<div><a href="https://github.com/lupyuen/nuttx-tinyemu">Apache NuttX RTOS on TinyEMU: How it works</a></div>
-<div id="copyright">&copy; 2017-2019 Fabrice Bellard</div>
-</body>
-</html>
+<script type="text/javascript" src="jslinux.js"></script>
+<div id="copyright">&copy; 2011-2021 Fabrice Bellard - <a href="news.html">News</a> - <a href="index.html">VM list</a> - <a href="faq.html">FAQ</a> - <a href="tech.html">Technical notes</a></div>
diff --git a/docs/tinyemu2/jslinux.js b/docs/tinyemu2/jslinux.js
@@ -23,7 +23,7 @@
  */
 "use strict";
 
-var term, console_write1;
+var term, console_write1, console_resize_event;
 var graphic_display, display_key_event, display_mouse_event;
 var net_state, net_write_packet, net_set_carrier;
 var display_wheel_event;
@@ -505,6 +505,7 @@ function start_vm(user, pwd)
     {
         /* C functions called from javascript */
         console_write1 = Module.cwrap('console_queue_char', null, ['number']);
+        console_resize_event = Module.cwrap('console_resize_event', null, []);
         fs_import_file = Module.cwrap('fs_import_file', null, ['string', 'number', 'number']);
         display_key_event = Module.cwrap('display_key_event', null, ['number', 'number']);
         display_mouse_event = Module.cwrap('display_mouse_event', null, ['number', 'number', 'number']);
@@ -521,6 +522,19 @@ function start_vm(user, pwd)
         pwd = null;
     }
 
+    function term_wrap_onclick_handler()
+    {
+        var term_wrap_el, w, h, term_bar_el, bar_h;
+        term_wrap_el = document.getElementById("term_wrap");
+        term_bar_el = document.getElementById("term_bar");
+        w = term_wrap_el.clientWidth;
+        h = term_wrap_el.clientHeight;
+        bar_h = term_bar_el.clientHeight;
+        if (term.resizePixel(w, h - bar_h)) {
+            console_resize_event();
+        }
+    }
+
     /* read the parameters */
 
     params = get_params();
@@ -542,7 +556,7 @@ function start_vm(user, pwd)
     width = (params["w"] | 0) || 1024;
     height = (params["h"] | 0) || 640;
     graphic_enable = params["graphic"] | 0;
-    net_url = params["net_url"] || ""; /* empty string means no network */
+    net_url = params["net_url"]; /* empty string means no network */
     if (typeof net_url == "undefined")
         net_url = "wss://relay.widgetry.org/";
     drive_url = params["drive_url"] || "";
@@ -556,22 +570,26 @@ function start_vm(user, pwd)
     if (graphic_enable) {
         graphic_display = new GraphicDisplay(document.getElementById("term_container"), width, height);
     } else {
+        var term_wrap_el;
         width = 0;
         height = 0;
+
         /* start the terminal */
-        term = new Term(cols, rows, term_handler, 10000);
+        term = new Term({ cols: cols, rows: rows, scrollback: 10000, fontSize: font_size });
+        term.setKeyHandler(term_handler);
         term.open(document.getElementById("term_container"),
                   document.getElementById("term_paste"));
-        term.term_el.style.fontSize = font_size + "px";
+
+        term_wrap_el = document.getElementById("term_wrap")
+        term_wrap_el.style.width = term.term_el.style.width;
+        term_wrap_el.onclick = term_wrap_onclick_handler;
+
         term.write("Loading...\r\n");
     }
 
 //    console.log("cpu=" + cpu + " url=" + url + " mem=" + mem_size);
 
     switch(cpu) {
-    case "nuttx":
-        vm_file = "nuttx";
-        break;
     case "x86":
         vm_file = "x86emu";
         break;
@@ -646,4 +664,4 @@ function on_login()
         term_wrap_el.style.display = "block";
         start_vm(null, null);
     }
-})();
+})();
diff --git a/docs/tinyemu2/riscvemu64-wasm.js b/docs/tinyemu2/riscvemu64-wasm.js
diff --git a/docs/tinyemu2/riscvemu64-wasm.wasm b/docs/tinyemu2/riscvemu64-wasm.wasm
diff --git a/docs/tinyemu2/style.css b/docs/tinyemu2/style.css
@@ -1,27 +1,86 @@
+#os_table {
+    border: 1px solid;
+    border-collapse: collapse;
+    margin: 20px;
+}
+
+#os_table td,#os_table th, #os_table tr {
+    border: 1px solid;
+    padding: 6px;
+}
+
+.os_comment {
+    font-size: 12px;
+}
+
+#copyright {
+    font-size: 10px;
+}
+
+/* for the terminal */
+#term_wrap {
+    margin: 20px;
+    resize: both;
+    overflow: hidden;
+}
+
 .term {
-    font-family: courier,fixed,swiss,monospace,sans-serif;
-    font-size: 15px;
+    font-family: monospace,courier,fixed,swiss,sans-serif;
+    font-weight: normal;
+    font-variant-ligatures: none;
     color: #f0f0f0;
     background: #000000;
+    line-height: normal;
+    overflow: hidden;
+    white-space: nowrap;
 }
 
 .term_content a {
-    color: #ffff00;
+    color: inherit;
+    text-decoration: none;
+}
+
+.term_content a:hover {
+    color: inherit;
+    text-decoration: underline;
 }
 
 .term_cursor {
     color: #000000;
     background: #00ff00;
 }
 
-.term_scrollbar { background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; width: 15px; height: 100%; }
+.term_char_size {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0px;
+    left: -1000px;
+    padding: 0px;
+}
+
+.term_textarea {
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    width: 0px;
+    height: 0px;
+    padding: 0px;
+    border: 0px;
+    margin: 0px;
+    opacity: 0;
+    resize: none;
+}
+
+.term_scrollbar { background: transparent url(images/bg-scrollbar-track-y.png) no-repeat 0 0; position: relative; background-position: 0 0; float: right; height: 100%; }
 .term_track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
 .term_thumb { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 100%; height: 20px; width: 25px; cursor: pointer; overflow: hidden; position: absolute; top: 0; left: -5px; }
 .term_thumb .term_end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
 .noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
-#term_paste {
-    border: 1px solid;
-    height: 19px;
+
+#keyboard-icon {
+    margin-left: 5px
+    margin-right: 5px;
 }
 
 /* file import */
@@ -31,11 +90,16 @@
     height:1px;
     padding: 0px;
     margin: 0px;
-    bordex: 0px;
+    border: 0px;
 }
 
 label {
     cursor: pointer;
     margin-left: 5px;
     margin-right: 5px;
 }
+
+#net_progress {
+    visibility: hidden;
+    width: 80px;
+}