←back to thread

511 points ayaros | 3 comments | | HN request time: 0.495s | source

https://lisagui.com/info.html

This is a web OS I wrote in vanilla JS that looks like the Apple Lisa Office System (1983-85), with other contemporaneous influences and additional improvements and features. It's currently in alpha and isn't remotely bug free. I had been holding off on posting this here until it was somewhat presentable and useful. Please note; the Lisa conforms more literally to the desktop metaphor than most modern GUIs - some of the important differences are mentioned in the readme.

This is a complete recreation of the UI in JS; it all renders to a single canvas element. It's not a CSS theme, and not an emulator ported to JS. None of the code is written by Apple. I'll be happy to elaborate more in the comments, but the short version is the entire UI is defined outside the DOM using JS objects. Thus, every interface element - menus, windows, controls, and even typefaces - was recreated from scratch. There are no font files - I wrote my own typesetting system, which supports combining multiple text styles and generates new glyph variants on the fly.

Many of the technical decisions I made were motivated by a desire to have this look the same in every browser. That's harder to do with the DOM and CSS, and why I moved as much logic as I could to JS. Also, the only part of the project outside of vanilla JS and standard web APIs is the Gulp toolkit, which I'm using as a minification/build tool. No vibe coding was used to make this!

This is based on a UI from the 80s, and won't work well on your phone. If you insist on running it that way, turn on trackpad mode in the touchscreen settings panel of the preferences app. For best results, install it as a PWA (add it to your home screen). Also there are some odd Android bugs; the native touchscreen keyboard is currently broken, and there's an issue with the cursor when dragging windows.

I realize there's not a whole lot to do within LisaGUI right now; I've got a big list of additional features and apps I'll be adding in the future. I've been working on this project for a while, and I'm eager to hear people's feedback and answer questions about it.

1. djaychela ◴[] No.44487207[source]
Just trying this out on iPhone on Firefox, and found something. If the phone is rotation locked in portrait mode (which mine normally is) I don't see buttons to install, try etc.

But if rotation lock is off, it's fine. Maybe there's something in the way the resolution is read that is different if the lock is on? Nothing appears in the menu bar at the top so there was no way to do anything.

Amazing efforts here though, now I can actually use it! Truly impressive.

replies(2): >>44487422 #>>44489467 #
2. ayaros ◴[] No.44487422[source]
The menu bar is hidden in the installer because that's how the Lisa's installer looked. I definitely need to do some work on layouts to make things more responsive. If your phone's screen is too small the text may overflow and things can get cut-off. But I don't want to cram scroll-able panes into all these dialogs because the Lisa didn't even do that.

I'm balancing historical accuracy with modern constraints with my own self-imposed technical debts, so there's bound to be compromises!

3. zoom6628 ◴[] No.44489467[source]
I had to scale down a bit using page zoom to see the buttons and after that all was good. Well not good actually .... it was bloody brilliant!!

Love this .... actually made me smile while using it. And so fast!