This is the source for my website, written as an homage to teletext and retro computing in general.
2024-05-22.14-17-53.mp4
The terminal uses a character set taken from the Mullard SAA5050 character generator chip, used in countless TVs and the like. The text characters come from here, and the graphics characters were generated by myself using the Python script generate_saa_graphics.py.
The terminal is a configurable character grid based on an HTML canvas element. The grid is updated every frame by the TerminalRenderWorker
which pushes the pixels to the canvas.
To enable saving and loading to and from the terminal, the state of the screen can be encapsulated by representing each character (including its position) by a 32-bit integer, in the following configuration:
# 0XXXXXXX YYYYYYYI DDBBBFFF CCCCCCCC
# X position
# Y position
# I = 1 if inverse
# D ≠ 00 if double height
# B = background colour
# F = foreground colour
# C = character index
The advantage of encoding the position into the character code is that 'blank' characters do not need to be included, saving space.
The character index follows ASCII for the first 128 characters. Following this, in the next 64 bits the Mullard SAA5050 graphics character set is used, in which each character is a 6-bit grid:
As with the original Teletext spec, the colours are represented as a 3-bit integer, as follows:
The PageEdit application exploits the character code system to allow for saving and loading. For each character that isn't blank, it is concatenated into an 32-bit array and then that array is converted to base64 string encoding. From this, the string can be saved and loaded from the terminal.
A simple terminal interface capable of running "programs" is also provided in the OS.ts file. Effectively, each program is class with an asynchronous run
method, which is called by the OS. All key events are passed to the OS, which then passes them to the currently running program, which also has control of the terminal.
git clone [email protected]:C-Lunn/CALFAX.git
npm install
or whichever package manager you use -- I recommend bun
.
bun run dev
will start a Vite development server
bun run build
will bundle the website and place it in the dist/
directory.