aboutsummaryrefslogtreecommitdiff
path: root/public/trying-to-build-a-new-kind-of-terminal-emulator.html
diff options
context:
space:
mode:
authorMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:25:41 +0200
committerMitja Felicijan <m@mitjafelicijan.com>2023-07-08 23:25:41 +0200
commitcd6644ea4ddc78597934ab0ef5ba50e3c3daa927 (patch)
tree03de331a8db6386dfd6fa75155bfbcea6b4feaf3 /public/trying-to-build-a-new-kind-of-terminal-emulator.html
parent84ed124529ffeee1590295b8de3a8faf51848680 (diff)
downloadmitjafelicijan.com-cd6644ea4ddc78597934ab0ef5ba50e3c3daa927.tar.gz
Moved to a simpler SSG
Diffstat (limited to 'public/trying-to-build-a-new-kind-of-terminal-emulator.html')
-rwxr-xr-xpublic/trying-to-build-a-new-kind-of-terminal-emulator.html191
1 files changed, 191 insertions, 0 deletions
diff --git a/public/trying-to-build-a-new-kind-of-terminal-emulator.html b/public/trying-to-build-a-new-kind-of-terminal-emulator.html
new file mode 100755
index 0000000..e670f3a
--- /dev/null
+++ b/public/trying-to-build-a-new-kind-of-terminal-emulator.html
@@ -0,0 +1,191 @@
1<!doctype html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1"><link href="data:image/x-icon;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL69vf8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAv76+/8LBwQkAAAAAAAAAAAAAAAC+vb3/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAL+9vf/Bv78JAAAAAAAAAAAAAAAAu7q6/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC7ubr/vr29CAAAAAAAAAAAy8nJAZ6foP8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAnqGj/6GipAoAAAAAHLjU/xcXHf/BwsL/I8XY/yPK3v8XGiD/IbjL/yPF2f8XGiD/Fxkf/yLF2f8gnK3/Fxog/62ztv8fwNf/FRcd/x271v8mz93/GRsi/xkXHf8p097/GiIp/xobIv8p0t3/KdPe/xocIv8fYmr/KNPe/xoZH/8aHCL/J87c/xy81/8VFxz/IsPZ/8zS0/8XGiD/Ir/R/yPH2/8XGiD/Fxkf/yPH2/8dd4T/GBog/yPJ3f8jyNr/uru9/xcUGv8cudb/EhITDKi5vRKlvMP/RUpOERwcHRAdOj4QHTk8EBwdHRAdNTgQHTo/EBwcHRAcHB0QSGduEKW4vf+koqQfHzg+EBqz0ewSFRv7EyMr/xq51vsTERb7ExUb+xq41fsau9j7ExUb+xiPp/sZudb7ExUb+xMVG/sZuNX/GKvI/BIUGfMdvdn/IrfL/xcaIP8n1eb/J9Dh/xkcIf8ZGR7/J8/f/xxCSv8ZGyH/J9Dg/ybQ4P8ZHCL/FSQs/yPK3/8UExj/GE1b/ybS5P8ZGB7/Ghwj/ynW5P8p2Ob/Ghwi/yWrtv8p1eH/Ghwi/xocIv8p1uT/J8XT/xkcIv8m1un/Hb7d/xUYH/8hzOr/HtHu/xcaIf8XGB//I8vi/xgxOv8XGSD/I8rg/yPK4P8XGiD/GUFL/yPP6f8SERj/Fhkh/x3A4f8AAAAAJ2f9/ydr//8mZPH/AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlYu38J2v//ydo/f8AAAAAAAAAAAd8/fkFqf//Iob8sAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMY39awWr//8FfP3/AAAAAAAAAAAFm/7/SfD//wR+/f8AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAOB/f9B7v//BaX+/wAAAAAAAAAAQ878SAyZ/v9n1v4KAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADu9v8DDJb+/z3N/XgAAAAA3/sAAN/7AADf+wAA3/sAAAAAAAAAAAAAAAAAAN/7AAAAAAAAAAAAAAAAAAAAAAAAj/EAAI/5AACP8QAA3/sAAA==" rel=icon type=image/x-icon><title>Trying to build a New kind of terminal emulator for the modern age</title><meta name=description content="Over the past few weeks, I have been really thinking about terminal emulators,how we interact with computers, the separation of text-based programs and GUIones."><link rel=alternate type=application/rss+xml title="Mitja Felicijan's posts" href=https://mitjafelicijan.com/index.xml><link rel=alternate type=application/rss+xml title="Mitja Felicijan's notes" href=https://mitjafelicijan.com/notes.xml><style>body{padding:1rem;max-width:760px;background:#fff;font-family:times new roman,Times,serif;line-height:1.35rem}hr{margin-block-start:1.5rem}h1,h2,h3{line-height:initial}footer{margin-block-start:3rem}table{max-width:100%;border-collapse:separate;border-spacing:2px;border:1px solid #000;border-left:1px solid #999;border-top:1px solid #999}blockquote{font-style:italic}table thead{background:#eee}td,th{border:1px solid #000;padding:4px;border-right:1px solid #999;border-bottom:1px solid #999;text-align:left}pre{text-wrap:nowrap;overflow-x:auto;margin-block-start:1.5rem;margin-block-end:1.5rem;padding:.5rem 0;border-top:1px solid #000;border-bottom:1px solid #000}pre code{line-height:1.3em}pre,code,pre *,code *{font-family:monospace;font-size:initial!important}img,video,audio{max-width:100%}header{display:flex;flex-direction:row;gap:3rem}nav{display:flex;gap:.75rem}.pstatus-orange{background:gold}.pstatus-green{background:#9acd32}.pstatus-red{background:#cd5c5c}@media only screen and (max-width:600px){header{flex-direction:column;gap:1rem}a{word-wrap:break-word}}</style><header><nav class=main><a href=/>Home</a>
2<a href=https://git.mitjafelicijan.com/ target=_blank>Git</a>
3<a href=https://files.mitjafelicijan.com/ target=_blank>Files</a>
4<a href=/mitjafelicijan.pgp.pub.txt target=_blank>PGP</a>
5<a href=/curriculum-vitae.html>CV</a>
6<a href=/index.xml target=_blank>RSS</a></nav></header><main><div><h1>Trying to build a New kind of terminal emulator for the modern age</h1><p>Jan 26, 2023<div><p>Over the past few weeks, I have been really thinking about terminal emulators,
7how we interact with computers, the separation of text-based programs and GUI
8ones. To be perfectly honest, I got pissed off one evening when I was cleaning
9up files on my computer. Normally, I go into console and do <code>ncdu</code> and check
10where the junk is. Then I start deleting stuff. Without any discrimination,
11usually. But when it comes to screenshots, I have learned that it's good to keep
12them somewhere near if I need to refer to something that I was doing. I am an
13avid screenshot taker. So at that point I checked Pictures folder and also did a
14basic search <code>find . -type f -name "*.jpg"</code> for all the JPEG files in my home
15directory and immediately got pissed off. Why can’t I see thumbnails in my
16terminal? I know why, but why in the year of 2022 this is still a problem. I am
17used to traversing my disk via terminal. I am faster, and I am more comfortable
18this way. But when it comes to visualization, I then need to revert to GUI
19applications and again find the same file to see it. I know that programs like
20<code>feh</code> and <code>sxiv</code> are available, but I would just like to see the preview. Like
21<a href=https://jupyter.org/>Jupyter notebook</a> or something similar. Just having it
22inline. Part of a result.<p>It also didn’t help that I was spending some time with the <a href=https://plan9.io/plan9/>Plan
239</a> Operating system. More specifically
24<a href=http://9front.org/>9FRONT</a>. The way that <a href=http://acme.cat-v.org/>ACME editor</a>
25handles text editing is just wonderful. Different and fresh somehow, even though
26it’s super old.<p>So, I went on a lookout for an interesting way of visualizing results of some
27query. I found these applications to be outstanding examples of how not to be a
28captive of a predetermined way of doing things.<ul><li><a href=https://www.wolfram.com/mathematica/>Wolfram Mathematica</a><li><a href=https://jupyter.org/>Jupyter notebooks</a><li><a href=http://www.9front.org>Plan 9 / 9FRONT</a><li><a href=https://templeos.org/>Temple OS</a><li><a href=https://www.gnu.org/software/emacs/>Emacs</a></ul><p>My idea is not as out there as ACME is, but it is a spin on the terminal
29emulators. I like the modes that Vi/Vim provides you with. I like the way the
30Emacs does its own <code>M-x</code> <code>M-c</code>. Furthermore, I really like how Mathematica and
31Jupyter present the data in a free flowing form. And I love how Temple OS is
32basically a C interpreter on some level.<blockquote><p><strong>Note:</strong> This is part 1 of the journey. Nowhere finished yet. I am just
33tinkering with this at the moment. This whole thing can easily spectacularly
34fail.</blockquote><p>So I started. I knew that I wanted to have the couple of modes, but I didn’t
35like the repetition of keystrokes, so the only option was to have some sort of
36toggle and indicate to the user that they are in a special mode. Like Vi does
37for Normal and Visual mode.<p>These modes would for the first version be:<ul><li><em>Preview mode</em> (toggle with Ctrl + P)<ul><li>When this mode would be enabled, the <code>ls</code> command would try to find images
38from the results and display thumbnails from them in the terminal itself.
39No ASCII art. Proper images. In a grid!</ul><li><em>Detach mode</em> (toggle with Ctrl + D)<ul><li>When this mode would be enabled, every command would open a new window
40and execute that command in it. This would be useful for starting <code>htop</code>
41in a separate window.</ul></ul><p>The reason for having these modes togglable is to not ask for previews every
42time. You enable a mode and until you disable it, it behaves that way. Purely
43out of ergonomic reasons.<p>I would like to treat every terminal I open as a session mentally. When I start
44using the terminal, I start digging deeper into the issue I am trying to
45resolve. And while I am doing this, I would like to open detached windows
46etc. A lot of these things can be done easily with something like
47<a href=https://i3wm.org/>i3</a>, but also that pull you out of the context of what you
48were doing. I would like to orchestrate everything from one single point.<p>In planning for this project, I knew that I would need to use a language like C
49and a library such as <a href=https://www.libsdl.org/>SDL2</a> in order to achieve the
50desired results. I had considered other options, but ultimately determined that
51<a href=https://www.libsdl.org/>SDL2</a> was the best fit based on its capabilities and
52reputation in the programming community.<p>At first, I thought the idea of a hardware accelerated terminal was a bit of a
53joke. It seemed like such a niche and unnecessary feature, especially given the
54fact that terminal emulators have been around for decades and have always relied
55on software rendering. But to be fair, <a href=https://alacritty.org/>Alacritty</a> is
56doing the same thing. Well, they are doing a remarkable job at it.<p>So, I embarked on a journey. Everything has to start somewhere. For me, it
57started with creating a window! It has to start somewhere. 🙂<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:green>// Oh, Hi Mark!
58</span></span></span><span style=display:flex><span><span style=color:green>// Create the window, obviously.
59</span></span></span><span style=display:flex><span><span style=color:green></span>SDL_Window *window = SDL_CreateWindow(
60</span></span><span style=display:flex><span> WINDOW_TITLE, SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED,
61</span></span><span style=display:flex><span> WINDOW_WIDTH, WINDOW_HEIGHT,
62</span></span><span style=display:flex><span> SDL_WINDOW_RESIZABLE | SDL_WINDOW_OPENGL | SDL_WINDOW_SHOWN);
63</span></span></code></pre><p>I continued like this to get some text displayed on the screen.<p>I noted that
64<a href=https://wiki.libsdl.org/SDL_ttf/TTF_RenderText_Solid><code>TTF_RenderText_Solid</code></a>
65rendered text really poorly. There were no antialiasing at all. In my wisdom, I
66never checked the documentation. Well, that was a fail. To uneducated like me:
67<code>TTF_RenderText_Solid</code> renders Latin1 text at fast quality to a new 8-bit
68surface. So, that's why the texts looked like shit. No wonder.<p>Remarks on <code>TTF_RenderText_Solid</code>: This function will allocate a new 8-bit,
69palettized surface. The surface's 0 pixel will be the colorkey, giving a
70transparent background. The 1 pixel will be set to the text color.<p>After I replaced it with
71<a href=https://wiki.libsdl.org/SDL_ttf/TTF_RenderText_LCD><code>TTF_RenderText_LCD</code></a> which
72renders Latin1 text at LCD subpixel quality to a new ARGB surface, the text
73started looking good. Really make sure you read the documentation. It’s actually
74good. As a side note, you can find all the documentation regarding <a href=https://wiki.libsdl.org/>SDL2 on
75their Wiki</a>.<p>After that was done, I started working on displaying other things like <code>Preview</code>
76and <code>Detach</code> modes. This wasn’t really that hard. In SDL2 you can check all the
77available events with <code>while (SDL_PollEvent(&amp;event) > 0)</code> and have a bunch of
78switch statements to determine which key is currently being pressed. More about
79keys, <a href=https://documentation.help/SDL/sdlkey.html>SDLKey</a> and mroe about
80pooling the events on
81<a href=https://documentation.help/SDL/sdlpollevent.html>SDL_PollEvent</a>.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>while</span> (SDL_PollEvent(&amp;event) &gt; 0)
82</span></span><span style=display:flex><span>{
83</span></span><span style=display:flex><span> <span style=color:#00f>switch</span> (event.type)
84</span></span><span style=display:flex><span> {
85</span></span><span style=display:flex><span> <span style=color:#00f>case</span> SDL_QUIT:
86</span></span><span style=display:flex><span> running = false;
87</span></span><span style=display:flex><span> <span style=color:#00f>break</span>;
88</span></span><span style=display:flex><span>
89</span></span><span style=display:flex><span> <span style=color:#00f>case</span> SDL_TEXTINPUT:
90</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (!meta_key_pressed)
91</span></span><span style=display:flex><span> {
92</span></span><span style=display:flex><span> strncat(input_prompt_text, event.text.text, 1);
93</span></span><span style=display:flex><span> update_input_prompt = true;
94</span></span><span style=display:flex><span> }
95</span></span><span style=display:flex><span> <span style=color:#00f>break</span>;
96</span></span><span style=display:flex><span> }
97</span></span><span style=display:flex><span>}
98</span></span></code></pre><p>After that was somewhat working correctly, I started creating a struct that
99would hold all the commands and results and I call them Cells. Yes, I stole that
100naming idea from Jupyter.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>typedef</span> <span style=color:#00f>struct</span>
101</span></span><span style=display:flex><span>{
102</span></span><span style=display:flex><span> <span style=color:#2b91af>char</span> *command;
103</span></span><span style=display:flex><span> <span style=color:#2b91af>char</span> *result;
104</span></span><span style=display:flex><span> SDL_Surface *surface;
105</span></span><span style=display:flex><span> SDL_Texture *texture;
106</span></span><span style=display:flex><span> SDL_Rect rect;
107</span></span><span style=display:flex><span>} Cell;
108</span></span></code></pre><p>I am at a place now where I am starting to implement scrolling. This will for
109sure be fun to code. Memory management in C is super easy. 😂<p>I have also added a simple <a href=https://en.wikipedia.org/wiki/INI_file>INI file like
110configuration</a> support. It is done in an
111<a href=https://github.com/nothings/stb/blob/master/docs/stb_howto.txt>STB style of
112header</a> and maps
113to specific options supported by the terminal. It is not universal, and the code
114below demonstrates how I will use it in the future.<pre tabindex=0 style=background-color:#fff><code><span style=display:flex><span><span style=color:#00f>#ifndef CONFIG_H
115</span></span></span><span style=display:flex><span><span style=color:#00f>#define CONFIG_H
116</span></span></span><span style=display:flex><span><span style=color:#00f></span>
117</span></span><span style=display:flex><span><span style=color:green>/*
118</span></span></span><span style=display:flex><span><span style=color:green># This is a comment
119</span></span></span><span style=display:flex><span><span style=color:green>
120</span></span></span><span style=display:flex><span><span style=color:green># This is the first configuration option
121</span></span></span><span style=display:flex><span><span style=color:green>dettach=value11111
122</span></span></span><span style=display:flex><span><span style=color:green>
123</span></span></span><span style=display:flex><span><span style=color:green># This is the second configuration option
124</span></span></span><span style=display:flex><span><span style=color:green>preview=value22222
125</span></span></span><span style=display:flex><span><span style=color:green>
126</span></span></span><span style=display:flex><span><span style=color:green># This is the third configuration option
127</span></span></span><span style=display:flex><span><span style=color:green>debug=value33333
128</span></span></span><span style=display:flex><span><span style=color:green>*/</span>
129</span></span><span style=display:flex><span>
130</span></span><span style=display:flex><span><span style=color:green>// Define a struct to hold the configuration options
131</span></span></span><span style=display:flex><span><span style=color:green></span><span style=color:#00f>typedef</span> <span style=color:#00f>struct</span>
132</span></span><span style=display:flex><span>{
133</span></span><span style=display:flex><span> <span style=color:#2b91af>char</span> dettach[256];
134</span></span><span style=display:flex><span> <span style=color:#2b91af>char</span> preview[256];
135</span></span><span style=display:flex><span> <span style=color:#2b91af>char</span> debug[256];
136</span></span><span style=display:flex><span>} Config;
137</span></span><span style=display:flex><span>
138</span></span><span style=display:flex><span><span style=color:green>// Read the configuration file and return the options as a struct
139</span></span></span><span style=display:flex><span><span style=color:green></span><span style=color:#00f>extern</span> Config read_config_file(<span style=color:#00f>const</span> <span style=color:#2b91af>char</span> *filename)
140</span></span><span style=display:flex><span>{
141</span></span><span style=display:flex><span> <span style=color:green>// Create a struct to hold the configuration options
142</span></span></span><span style=display:flex><span><span style=color:green></span> Config config = {0};
143</span></span><span style=display:flex><span>
144</span></span><span style=display:flex><span> <span style=color:green>// Open the configuration file
145</span></span></span><span style=display:flex><span><span style=color:green></span> FILE *file = fopen(filename, <span style=color:#a31515>&#34;r&#34;</span>);
146</span></span><span style=display:flex><span>
147</span></span><span style=display:flex><span> <span style=color:green>// Read each line from the file
148</span></span></span><span style=display:flex><span><span style=color:green></span> <span style=color:#2b91af>char</span> line[256];
149</span></span><span style=display:flex><span> <span style=color:#00f>while</span> (fgets(line, <span style=color:#00f>sizeof</span>(line), file))
150</span></span><span style=display:flex><span> {
151</span></span><span style=display:flex><span> <span style=color:green>// Check if this line is a comment or empty
152</span></span></span><span style=display:flex><span><span style=color:green></span> <span style=color:#00f>if</span> (line[0] == <span style=color:#a31515>&#39;#&#39;</span> || line[0] == <span style=color:#a31515>&#39;\n&#39;</span>)
153</span></span><span style=display:flex><span> <span style=color:#00f>continue</span>;
154</span></span><span style=display:flex><span>
155</span></span><span style=display:flex><span> <span style=color:green>// Parse the line to get the option and value
156</span></span></span><span style=display:flex><span><span style=color:green></span> <span style=color:#2b91af>char</span> option[128], value[128];
157</span></span><span style=display:flex><span> <span style=color:#00f>if</span> (sscanf(line, <span style=color:#a31515>&#34;%[^=]=%s&#34;</span>, option, value) != 2)
158</span></span><span style=display:flex><span> <span style=color:#00f>continue</span>;
159</span></span><span style=display:flex><span>
160</span></span><span style=display:flex><span> <span style=color:green>// Set the value of the appropriate option in the config struct
161</span></span></span><span style=display:flex><span><span style=color:green></span> <span style=color:#00f>if</span> (strcmp(option, <span style=color:#a31515>&#34;dettach&#34;</span>) == 0)
162</span></span><span style=display:flex><span> {
163</span></span><span style=display:flex><span> strncpy(config.option1, value, <span style=color:#00f>sizeof</span>(config.option1));
164</span></span><span style=display:flex><span> }
165</span></span><span style=display:flex><span> <span style=color:#00f>else</span> <span style=color:#00f>if</span> (strcmp(option, <span style=color:#a31515>&#34;preview&#34;</span>) == 0)
166</span></span><span style=display:flex><span> {
167</span></span><span style=display:flex><span> strncpy(config.option2, value, <span style=color:#00f>sizeof</span>(config.option2));
168</span></span><span style=display:flex><span> }
169</span></span><span style=display:flex><span> <span style=color:#00f>else</span> <span style=color:#00f>if</span> (strcmp(option, <span style=color:#a31515>&#34;debug&#34;</span>) == 0)
170</span></span><span style=display:flex><span> {
171</span></span><span style=display:flex><span> strncpy(config.option3, value, <span style=color:#00f>sizeof</span>(config.option3));
172</span></span><span style=display:flex><span> }
173</span></span><span style=display:flex><span> }
174</span></span><span style=display:flex><span>
175</span></span><span style=display:flex><span> <span style=color:green>// Close the configuration file
176</span></span></span><span style=display:flex><span><span style=color:green></span> fclose(file);
177</span></span><span style=display:flex><span>
178</span></span><span style=display:flex><span> <span style=color:green>// Return the configuration options
179</span></span></span><span style=display:flex><span><span style=color:green></span> <span style=color:#00f>return</span> config;
180</span></span><span style=display:flex><span>}
181</span></span><span style=display:flex><span>
182</span></span><span style=display:flex><span><span style=color:#00f>#endif
183</span></span></span></code></pre><p>This is as far as I managed to get for now. I have a daily job and this
184prohibits me to work on these things full time. But I should probably get back
185and finish this. At least have a simple version working out, so I can start
186testing it on my machines. Fingers crossed. 🕵️‍♂️</div></div></main><footer><hr><div><h3>Want to comment or have something to add?</h3>You can write me an email at
187<a href=mailto:m@mitjafelicijan.com>m@mitjafelicijan.com</a> or catch up
188with me
189<a href=https://telegram.me/mitjafelicijan target=_blank>on Telegram</a>.</div><hr><p>This website does not track you. Content is made available under
190the <a href=https://creativecommons.org/licenses/by/4.0/ target=_blank rel=noreferrer>CC BY 4.0 license</a> unless specified
191otherwise. Blog feed is available as <a href=/index.xml target=_blank>RSS feed</a>.</footer><script src=https://cdn.usefathom.com/script.js data-site=XHQARKXP defer></script> \ No newline at end of file
generated by cgit v1.2.3 (git 2.46.0) at 2026-05-01 00:35:47 +0000