-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
177 lines (159 loc) · 11.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
<!DOCTYPE html>
<html lang="en_us">
<head>
<title>Terminal Troubles</title>
<meta charset="utf-8" />
<meta name="generator" content="Pelican" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="/static/css/main.css" />
<link rel="stylesheet" href="/static/css/theme.css" />
<link rel="icon" href="/images/yazani/yazani_1_extracted_bg_big_eyes_cropped.png" type="image/png" />
<link rel="apple-touch-icon" href="/images/yazani/yazani_1_extracted_bg_big_eyes_cropped.png" type="image/png" />
<script src="/static/misc.js"></script>
<script src="/blog/banner_image.js"></script>
<meta name="tags" content="programming, phoo, javascript" />
<meta property="og:site_name" content="dragoncoder047’s blog" />
<meta property="og:title" content="Terminal Troubles" />
<meta property="og:description" content="I have finally gotten to the point in Phoo’s development that I am ready to set up the web interface. I chose xterm.js for the terminal interface because I intend for Phoo to be able to be run in Nodejs as well as in the browser, but I …" />
<meta property="og:image" content="/images/yazani/yazani_1_extracted_bg.png" />
<meta property="og:type" content="article" />
<meta property="og:url" content="https://dragoncoder047.github.io/blog/2022/terminal-troubles" />
<meta property="og:locale" content="['']" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="dragoncoder047’s blog - Terminal Troubles" />
<meta name="twitter:description" content="I have finally gotten to the point in Phoo’s development that I am ready to set up the web interface. I chose xterm.js for the terminal interface because I intend for Phoo to be able to be run in Nodejs as well as in the browser, but I …" />
<meta name="twitter:image" content="/images/yazani/yazani_1_extracted_bg.png" />
</head>
<body class="match-braces rainbow-braces">
<header>
<a href="https://dragoncoder047.github.io/blog" class="flex-row"><div class="flex-row"><img src="/images/yazani/yazani_1_extracted_bg.png" style="max-height:10em" id="banner-image" /><div id="sitename-text"><h1>dragoncoder047’s blog</h1><h2>random thoughts about nonrandom things</h2></div></div></a>
<nav>
<ul>
<li><a href="https://dragoncoder047.github.io/blog/">Home</a></li>
<li><a href="https://dragoncoder047.github.io/blog/archives">Archives</a>
</li>
<li><a href="https://dragoncoder047.github.io/blog/tags">By tag</a>
</li>
<li><a href="/">Site root</a>
</li>
<li><a href="#">Projects</a>
<ul>
<li><a href="https://dragoncoder047.github.io/thuepaste">Thuepaste</a>
</li>
<li><a href="https://dragoncoder047.github.io/armdroid">Armdroid</a>
</li>
<li><a href="https://dragoncoder047.github.io/langton-music">Langton's Ant Music</a>
</li>
<li><a href="https://dragoncoder047.github.io/schemascii">Schemascii</a>
</li>
<li><a href="https://dragoncoder047.github.io/parasite">Parasite</a>
</li>
</ul>
</li>
<li>
<form action="https://www.google.com/search" method="GET">
<input name="q" type="search" placeholder="Search"></input>
<input type="hidden" name="as_sitesearch" value="https://dragoncoder047.github.io/blog"></input>
<input type="submit" value="Search"></input>
</form>
</li>
</ul>
</nav>
</header>
<main>
<h1><a href="https://dragoncoder047.github.io/blog/2022/terminal-troubles" rel="bookmark" title="Permalink to this page">Terminal Troubles</a></h1>
<div class="flex-row">
<span style="flex: 1">← Previous:
<a href="https://dragoncoder047.github.io/blog/2022/how-i-came-up-with-phoo">
How I came up with Phoo
</a>
</span>
<span>Next:
<a href="https://dragoncoder047.github.io/blog/2022/airdrop-for-non-apple-users">
Airdrop for non-Apple users
</a> →
</span>
</div>
<div class="post-info">
Posted <time class="published" datetime="2022-03-23T00:00:00-04:00">Wed 23 March 2022</time>
<address>By
<a href="https://dragoncoder047.github.io/blog/">dragoncoder047</a>
</address>
<div class="tags">
Tags:
<a href="https://dragoncoder047.github.io/blog/tag/javascript">javascript</a>
<a href="https://dragoncoder047.github.io/blog/tag/phoo">phoo</a>
<a href="https://dragoncoder047.github.io/blog/tag/programming">programming</a>
</div>
</div>
<p>I have finally gotten to the point in Phoo’s development that I am ready to set up the web interface.</p>
<p>I chose xterm.js for the terminal interface because I intend for Phoo to be able to be run in Nodejs as well as in the browser, but I don’t really use Nodejs much, so I wanted to have a simulated terminal to run it in.</p>
<p>It took me a while to set up the terminal so that it came up properly. I then had the problem of how to get input from the user. I searched around for xterm.js addons and I found <a href="https://github.com/wavesoft/local-echo">local-echo</a>, made by a guy named Ioannis Charalampidis. With a few patches (<a href="https://github.com/wavesoft/local-echo/issues/24">#24</a>, <a href="https://github.com/wavesoft/local-echo/issues/30">#30</a>, and <a href="https://github.com/wavesoft/local-echo/issues/34">#34</a>) I had a little shell running. It seemed to work well enough with just a simple echo backend (not actually invoking Phoo), but I quickly encountered a few more problems:</p>
<h2 id="issue-25">Issue <a href="https://github.com/wavesoft/local-echo/issues/25">#25</a></h2>
<p><img alt="xterm_typetypetype.png" src="https://dragoncoder047.github.io/blog/2022/terminal-troubles/xterm_images/xterm_typetypetype.png"></p>
<p>The first line is being duplicated in the view every time you press a key, but the actual input buffer is fine, as shown by the red text. I think this is just some off-by-one typo, but it has been quite a problem.</p>
<h2 id="issue-50">Issue <a href="https://github.com/wavesoft/local-echo/issues/50">#50</a></h2>
<p>This one was completely new:</p>
<p><img alt="xterm_clobber.png" src="https://dragoncoder047.github.io/blog/2022/terminal-troubles/xterm_images/xterm_clobber.png"></p>
<p>What happened <em>here</em> is that I just typed the text (in red), and then pressed enter. With the cursor <strong>on the last line</strong>, it works (the top part), it works fine. But with the cursor <strong>not on the last line</strong> (I put it in the middle of the b’s) it assumes it <em>is</em> on the last line and in doing so clobbers over however many lines of input on the subsequent lines. This is <em>baaaaaad</em>. To be honest I actually spent more time trying to fix this than working on the actual web app for a day or two.</p>
<p>As a side note I also noticed another issue (<a href="https://github.com/wavesoft/local-echo/issues/51">#51</a>) where the up/down keys didn’t behave as I expected and changed the history regardless of what line you were on. Really annoying and takes some time to get used to, but not a priority.</p>
<p>These two issues practically make the entire interface totally unusable and I’m back to square zero.</p>
<p>Not to mention that there hasn’t been an official release of local-echo since 2018, so I had to manually cobble together a pseudo-‘build’ that works with xterm.js version 4. I probably broke something in there.</p>
<p>Hoefully either me or someone else will fix these issues.</p>
<hr />
<p><strong>Related Posts</strong></p>
<ul>
<li><a href="https://dragoncoder047.github.io/blog/2022/debugger-almost">Debugger, Almost</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2022/i-still-have-no-idea">I Still Have No Idea</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2022/phoo-is-mostly-finished">Phoo is (mostly) finished</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2022/why-i-prefer-python">Why I Prefer Python</a></li>
<li><a href="https://dragoncoder047.github.io/blog/2022/change-of-plans">Change of Plans</a></li>
</ul>
<script src="https://giscus.app/client.js"
data-repo="dragoncoder047/blog"
data-repo-id="R_kgDOHCL60w"
data-category="Post Comments"
data-category-id="DIC_kwDOHCL6084CRxCW"
data-mapping="og:title"
data-reactions-enabled="1"
data-input-position="top"
data-theme="dark"
data-lang="en"
crossorigin="anonymous"
async
></script>
<section id="extras">
<div class="blogroll">
<ul>
<li><a href="https://www.conwaylife.com/">Conwaylife.com Forums</a></li>
<li><a href="https://www.python.org/">Python</a></li>
<li><a href="http://www.ulisp.com/">uLisp</a></li>
</ul>
</div>
<div class="social">
<ul>
<li><a href="https://github.com/dragoncoder047">dragoncoder047 on GitHub</a></li>
<li><a href="https://youtube.com/@dragoncoder047">dragoncoder047 on YouTube</a></li>
<li><a href="https://instagram.com/dragoncoder047/">dragoncoder047 on Instagram</a></li>
</ul>
</div>
</section>
</main>
<footer>
<address>
Site built by <a href="https://getpelican.com/">Pelican</a>
</address>
<a href="#" onclick="window.scrollTo({top: 0, left: 0});">Back to top</a>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XR0F89CCGK"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag("js", new Date());
gtag("config", "G-XR0F89CCGK");
</script>
</footer>
</body>
</html>