LisaGUI is a "web OS" - a website that mimics the look, feel, and functionality of an operating system. More bluntly, it's a giant Javascript program which recreates the Lisa's user interface from scratch (to the best of my ability). The Lisa was Apple's first computer with a graphical user interface; more information about it can be found in the history section.

Right now, I don't have an extensive user manual for LisaGUI beyond a simple read-me document included with the system. In the future I will be adding more detailed end-user documentation as soon as I get the time to write it!

This page contains some technical information about LisaGUI and some very nice looking screenshots. I recently did a total revamp of these supplemental pages; I'm still in the process of figuring out exactly how I want to organize the information on this page.

LisaGUI is almost entirely vanilla Javascript. Aside from Gulp.js, which I use as a simple build tool to produce a minified JS file, no third party libraries or frameworks are utilized. LisaGUI contains no code from the Lisa Office System's source code (or any code written by Apple), and doesn't utilize any component of any emulator, like LisaEm or IDLE. It contains no AI-generated code.

The entirety of LisaGUI's user interface is computed in Javascript and rendered to a single canvas element. Aside from the canvas, and a few other elements which serve various purposes, the document object model is not used at all. As a result, all the user interface components had to be coded from scratch in JS; they aren't simply reskinned HTML nodes. Instead of the DOM, I wrote my own hierarchical system for organizing objects. All elements in the UI exist within the hierarchy, the root of which is the desktop.

This isn't a CSS skin; CSS is mainly used to position and style the canvas. It's also used to style the "bootloader" UI which resembles the Lisa's hardware test screen. This UI is displayed while the script loads, and is used as a fallback if JS is disabled (where it takes on the appearance of a Lisa startup error).

To render screen elements onto the canvas, I wrote what I hesitate to call a graphics engine. It's a bit naively written (and thus slow) and really needs a rewrite or reimplementation, perhaps using WebGL or some other system utilizing the GPU. However, it works, and has full support for 1-bit blending modes. The system is heavily optimized; regions of the display are only drawn when the position of an object changes, and only the objects placed within the rectangular bounds of the region are included in those calculations.

Each screen element has two 1-bit channels - one for image data, and one for an alpha channel. Each channel functions independently of the other, and there are several object classes used to store channel data. There are two bitmap classes - one of them uses bitmasking to store data as compactly as possible. In other classes, the image can be generated programmatically. One of the classes displays tiled bitmap patterns. Another stores pixel data using a set of x/y points (instead of a 2D array), allowing for compact storage of large images with minimal amounts of information.

LisaGUI has its own (very basic) typesetting system. Similar to the Lisa (and early versions of the Mac System software) one or more text styles can be applied to each character. This includes standard styles such as bold and italic, but also outlined and shadowed text. There are variety of ways to format paragraphs: text alignment and line spacing are adjustable, and the engine supports formatting text along left-to-right or right-to-left directionalities.

For storing data, LisaGUI uses an IndexedDB-based file system. In keeping with the diegetic nature of this project (in the spirit of the Lisa's stronger adherence to the desktop metaphor), each IndexedDB database corresponds to a single "hard disk." Multiple disks can be added to the system. The system also supports "RAM disks" which are just JS objects stored in memory.