Skip to content

Commit 33f0857

Browse files
lupyuenlupyuen
committed
Fix Keyboard Input for Mobile Browser. Update files from https://bellard.org/jslinux 
1 parent 67d513f commit 33f0857

File tree

6 files changed

+406
-120
lines changed

6 files changed

+406
-120
lines changed

‎docs/index.html‎

Lines changed: 16 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,23 @@
1-
<!DOCTYPE html>
1+
2+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
23
<html>
34
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5-
<title>JSLinux</title>
6-
<link href="style.css" type="text/css" rel="stylesheet"/>
7-
<style>
8-
</style>
5+
<title>JSLinux</title>
6+
<link href="style.css" type="text/css" rel="stylesheet"/>
97
</head>
108
<body>
119
<div id="term_wrap">
12-
<div id="term_container">
13-
</div>
14-
<div>
15-
<textarea id="term_paste" cols="10" rows="1" autocorrect="off">Paste Here</textarea>
16-
<label>
17-
<img title="Upload files" src="images/upload-icon.png"><input type="file" id="files" multiple onchange="on_update_files(this.files)">
18-
</label>
19-
<progress id="net_progress">
20-
</progress>
21-
</div>
10+
<div id="term_container">
11+
</div>
12+
<div id="term_bar">
13+
<label>
14+
<img title="Upload files" src="images/upload-icon.png"><input type="file" id="files" multiple onchange="on_update_files(this.files)">
15+
</label>
16+
<progress id="net_progress">
17+
</progress>
18+
</div>
2219
</div>
2320
<script type="text/javascript" src="term.js"></script>
24-
<script type="text/javascript" src="jslinux.js?1"></script>
25-
<div><a href="https://github.com/lupyuen/nuttx-tinyemu">Apache NuttX RTOS on TinyEMU: How it works</a></div>
26-
<div id="copyright">&copy; 2017-2019 Fabrice Bellard</div>
27-
</body>
28-
</html>
21+
<script type="text/javascript" src="jslinux.js"></script>
22+
<div id="copyright"><a href="https://github.com/lupyuen/nuttx-tinyemu">Apache NuttX RTOS on TinyEMU: How it works</a></div>
23+
<div id="copyright">&copy; 2011-2021 Fabrice Bellard</div>

‎docs/jslinux.js‎

Lines changed: 26 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
*/
2424
"use strict";
2525

26-
var term, console_write1;
26+
var term, console_write1, console_resize_event;
2727
var graphic_display, display_key_event, display_mouse_event;
2828
var net_state, net_write_packet, net_set_carrier;
2929
var display_wheel_event;
@@ -505,6 +505,7 @@ function start_vm(user, pwd)
505505
{
506506
/* C functions called from javascript */
507507
console_write1 = Module.cwrap('console_queue_char', null, ['number']);
508+
console_resize_event = Module.cwrap('console_resize_event', null, []);
508509
fs_import_file = Module.cwrap('fs_import_file', null, ['string', 'number', 'number']);
509510
display_key_event = Module.cwrap('display_key_event', null, ['number', 'number']);
510511
display_mouse_event = Module.cwrap('display_mouse_event', null, ['number', 'number', 'number']);
@@ -521,6 +522,19 @@ function start_vm(user, pwd)
521522
pwd = null;
522523
}
523524

525+
function term_wrap_onclick_handler()
526+
{
527+
var term_wrap_el, w, h, term_bar_el, bar_h;
528+
term_wrap_el = document.getElementById("term_wrap");
529+
term_bar_el = document.getElementById("term_bar");
530+
w = term_wrap_el.clientWidth;
531+
h = term_wrap_el.clientHeight;
532+
bar_h = term_bar_el.clientHeight;
533+
if (term.resizePixel(w, h - bar_h)) {
534+
console_resize_event();
535+
}
536+
}
537+
524538
/* read the parameters */
525539

526540
params = get_params();
@@ -542,7 +556,7 @@ function start_vm(user, pwd)
542556
width = (params["w"] | 0) || 1024;
543557
height = (params["h"] | 0) || 640;
544558
graphic_enable = params["graphic"] | 0;
545-
net_url = params["net_url"] || ""; /* empty string means no network */
559+
net_url = params["net_url"]; /* empty string means no network */
546560
if (typeof net_url == "undefined")
547561
net_url = "wss://relay.widgetry.org/";
548562
drive_url = params["drive_url"] || "";
@@ -556,22 +570,26 @@ function start_vm(user, pwd)
556570
if (graphic_enable) {
557571
graphic_display = new GraphicDisplay(document.getElementById("term_container"), width, height);
558572
} else {
573+
var term_wrap_el;
559574
width = 0;
560575
height = 0;
576+
561577
/* start the terminal */
562-
term = new Term(cols, rows, term_handler, 10000);
578+
term = new Term({ cols: cols, rows: rows, scrollback: 10000, fontSize: font_size });
579+
term.setKeyHandler(term_handler);
563580
term.open(document.getElementById("term_container"),
564581
document.getElementById("term_paste"));
565-
term.term_el.style.fontSize = font_size + "px";
582+
583+
term_wrap_el = document.getElementById("term_wrap")
584+
term_wrap_el.style.width = term.term_el.style.width;
585+
term_wrap_el.onclick = term_wrap_onclick_handler;
586+
566587
term.write("Loading...\r\n");
567588
}
568589

569590
// console.log("cpu=" + cpu + " url=" + url + " mem=" + mem_size);
570591

571592
switch(cpu) {
572-
case "nuttx":
573-
vm_file = "nuttx";
574-
break;
575593
case "x86":
576594
vm_file = "x86emu";
577595
break;
@@ -646,4 +664,4 @@ function on_login()
646664
term_wrap_el.style.display = "block";
647665
start_vm(null, null);
648666
}
649-
})();
667+
})();

‎docs/riscvemu64-wasm.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎docs/riscvemu64-wasm.wasm‎

1.23 KB
Binary file not shown.

‎docs/style.css‎

Lines changed: 72 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,86 @@
1+
#os_table {
2+
border: 1px solid;
3+
border-collapse: collapse;
4+
margin: 20px;
5+
}
6+
7+
#os_table td,#os_table th, #os_table tr {
8+
border: 1px solid;
9+
padding: 6px;
10+
}
11+
12+
.os_comment {
13+
font-size: 12px;
14+
}
15+
16+
#copyright {
17+
font-size: 10px;
18+
}
19+
20+
/* for the terminal */
21+
#term_wrap {
22+
margin: 20px;
23+
resize: both;
24+
overflow: hidden;
25+
}
26+
127
.term {
2-
font-family: courier,fixed,swiss,monospace,sans-serif;
3-
font-size: 15px;
28+
font-family: monospace,courier,fixed,swiss,sans-serif;
29+
font-weight: normal;
30+
font-variant-ligatures: none;
431
color: #f0f0f0;
532
background: #000000;
33+
line-height: normal;
34+
overflow: hidden;
35+
white-space: nowrap;
636
}
737

838
.term_content a {
9-
color: #ffff00;
39+
color: inherit;
40+
text-decoration: none;
41+
}
42+
43+
.term_content a:hover {
44+
color: inherit;
45+
text-decoration: underline;
1046
}
1147

1248
.term_cursor {
1349
color: #000000;
1450
background: #00ff00;
1551
}
1652

17-
.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%; }
53+
.term_char_size {
54+
display: inline-block;
55+
visibility: hidden;
56+
position: absolute;
57+
top: 0px;
58+
left: -1000px;
59+
padding: 0px;
60+
}
61+
62+
.term_textarea {
63+
position: absolute;
64+
top: 0px;
65+
left: 0px;
66+
width: 0px;
67+
height: 0px;
68+
padding: 0px;
69+
border: 0px;
70+
margin: 0px;
71+
opacity: 0;
72+
resize: none;
73+
}
74+
75+
.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%; }
1876
.term_track { background: transparent url(images/bg-scrollbar-trackend-y.png) no-repeat 0 100%; height: 100%; width:13px; position: relative; padding: 0 1px; }
1977
.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; }
2078
.term_thumb .term_end { background: transparent url(images/bg-scrollbar-thumb-y.png) no-repeat 50% 0; overflow: hidden; height: 5px; width: 25px; }
2179
.noSelect { user-select: none; -o-user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; }
22-
#term_paste {
23-
border: 1px solid;
24-
height: 19px;
80+
81+
#keyboard-icon {
82+
margin-left: 5px
83+
margin-right: 5px;
2584
}
2685

2786
/* file import */
@@ -31,11 +90,16 @@
3190
height:1px;
3291
padding: 0px;
3392
margin: 0px;
34-
bordex: 0px;
93+
border: 0px;
3594
}
3695

3796
label {
3897
cursor: pointer;
3998
margin-left: 5px;
4099
margin-right: 5px;
41100
}
101+
102+
#net_progress {
103+
visibility: hidden;
104+
width: 80px;
105+
}

0 commit comments

Comments
 (0)