Skip to content

Commit

Permalink
Fix Keyboard Input for Mobile Browser. Update files from https://bell…
Browse files Browse the repository at this point in the history 
…ard.org/jslinux
  • Loading branch information
@lupyuen
lupyuen committed Jan 12, 2024
1 parent 67d513f commit 33f0857
Show file tree
Hide file tree
Showing 6 changed files with 406 additions and 120 deletions.
37 changes: 16 additions & 21 deletions docs/index.html
View file
@@ -1,28 +1,23 @@
<!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"><a href="https://github.com/lupyuen/nuttx-tinyemu">Apache NuttX RTOS on TinyEMU: How it works</a></div>
<div id="copyright">&copy; 2011-2021 Fabrice Bellard</div>
34 changes: 26 additions & 8 deletions docs/jslinux.js
View file
Expand Up @@ -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;
Expand Down Expand Up @@ -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']);
Expand All @@ -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();
Expand All @@ -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"] || "";
Expand All @@ -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;
Expand Down Expand Up @@ -646,4 +664,4 @@ function on_login()
term_wrap_el.style.display = "block";
start_vm(null, null);
}
})();
})();
2 changes: 1 addition & 1 deletion docs/riscvemu64-wasm.js
View file

Large diffs are not rendered by default.

Binary file modified docs/riscvemu64-wasm.wasm
View file
Binary file not shown.
80 changes: 72 additions & 8 deletions docs/style.css
View file
@@ -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 */
Expand All @@ -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;
}

1 comment on commit 33f0857

@lupyuen
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Where is the updated source code for the WebAssembly? What is the implementation of console_resize_event? Hmmm...

Please sign in to comment.