1-Bit-Grafik-Web-OS auf Basis der UI von Apples Lisa

 (alpha.lisagui.com)
1 Punkte von GN⁺ 2025-07-07 | 1 Kommentare | Auf WhatsApp teilen
  • Ein unabhängiger Entwickler hat ein webbasiertes Betriebssystem erstellt, das die Benutzeroberfläche von Apple Lisa nachbildet
  • Das Projekt zeichnet sich durch 1-Bit-Schwarzweißgrafik aus und ist für Retro-Computing-Enthusiasten besonders interessant
  • Desktop, Icons, Dateifenster und weitere Elemente ahmen das Design des Apple Lisa aus den 1980er-Jahren detailgetreu nach
  • Es läuft direkt im Webbrowser und erfordert keinen besonderen Installationsprozess
  • Es wurde als Open Source veröffentlicht, sodass Anpassungen und Erweiterungen durch andere Entwickler leicht möglich sind

Projektvorstellung

  • Dieses Projekt ist die Entwicklung eines Web-OS, mit dem sich die frühe Desktop-Betriebssystem-UI von Apple Lisa direkt in einer Webumgebung erleben lässt
  • Es verwendet 1-Bit-Grafik (reines Schwarzweiß) und bietet damit ein Retro-Nutzererlebnis
  • Desktop, Icons, Fenster und App-Start rekonstruieren eine klassische Desktop-Umgebung
  • Es implementiert nicht den vollständigen Funktionsumfang eines echten Betriebssystems, sondern konzentriert sich auf die Nachbildung von UI-Verhalten und visuellen Elementen
  • Mit einem modernen Browser ist es sofort zugänglich, wodurch die technische Einstiegshürde sehr niedrig ist

Hauptmerkmale

  • Das 1983 erschienene UI-Design des Apple Lisa wird originalgetreu nachgeahmt
  • Zentrale UI-Reaktionen wie Drag-and-Drop, Fensterbewegung und Größenänderung werden realistisch reproduziert
  • Der schlichte, aber präzise 1-Bit-Grafikstil vermittelt eine eigenständige visuelle Ästhetik
  • Enthält grundlegende Elemente eines Desktop-Betriebssystems wie App-Liste, Dateibrowsing und das Starten einfacher Apps

Nutzung und Bedeutung

  • Ein hervorragendes Demo-Material für Retro-Computing oder die Forschung zu UI/UX-Design
  • Auch Einsteiger können durch die Analyse des Quellcodes Web-UI-Systeme und Layoutstrukturen besser verstehen
  • Da es als Open Source verteilt wird, kann die Community auf vielfältige Weise Funktionen ergänzen oder Themes anpassen

Weitere Hinweise

  • Ohne separaten, komplexen Installationsprozess lässt es sich direkt über den Link im Web ausführen
  • Der Quellcode wird über öffentliche Repositories wie GitHub bereitgestellt
  • Dieses Projekt legt den Schwerpunkt nicht auf kommerzielle Nutzung, sondern auf einen experimentellen Ansatz und didaktische Zwecke

Verwandte Beiträge

1 Kommentare

 
GN⁺ 2025-07-07
Hacker-News-Kommentare

  • Lisa hatte keine quadratischen Pixel, daher ist das Canvas-Seitenverhältnis auf die 1,5-fache Höhe gegenüber der Breite eingestellt. Auf hochauflösenden Displays sieht das ziemlich gut aus, weil die Pixel selbst 2 Pixel breit × 3 Pixel hoch sind, aber auf niedrig auflösenden Displays werden die Pixel als 1 Pixel breit × 1,5 Pixel hoch dargestellt, wodurch Verzerrungen entstehen. Das ist ein bewusst in Kauf genommener Teil des Designs. Auf ausreichend großen niedrig auflösenden Displays greift aber die automatische Ganzzahl-Skalierung, wenn man die Fensterbreite vergrößert, sodass die Pixel selbst größer dargestellt werden. Man kann das auch in den Anzeigeoptionen der Einstellungen-App erzwingen. Falls man die Skalierung verstellt hat, kann man sie zurücksetzen, indem man LisaGUI neu startet und dabei die Shift-Taste gedrückt hält. Außerdem gibt es unter iOS einen kleinen PWA-bezogenen Canvas-Positionsfehler; er lässt sich beheben, indem man das Gerät dreht und wieder zurückdreht, ist aber ziemlich umständlich. Zum Schließen eines Fensters doppelklickt man auf das Symbol in der Titelleiste, worauf das Fenster zu einem Icon zusammengefaltet wird.

    • Ich frage mich, wie die dynamische Anpassung von Fenster- oder Schriftgrößen gehandhabt wird, unabhängig von der Browsergröße. In normalem HTML passiert so etwas ja automatisch, aber mich interessiert, wie das in diesem Projekt gelöst ist.

  • Ein Apple ][/e- oder /c-Klon (ein bulgarischer Pravetz 8Ц) war mein erster Computer, danach nutzte ich auch 286er- und 386er-PCs mit Hercules-Monochrommonitor. Beim großartigen Retro-UI dieses Projekts kommt bei mir deshalb echte Think-Pascal-Nostalgie auf.

  • Solche einzigartigen Lisa-GUI-Projekte sind genau der Grund, warum ich Hacker News mag. Es macht großen Spaß, aus purem Vanilla-JS und einem seiner Zeit voraus gewesenen UI zu lernen. Noch schöner wäre es, wenn in der Demo bzw. den Beispielen ein sofort spielbares Game im Breakout-Stil dabei wäre.

    • Ich möchte sagen, wie dankbar ich dafür bin. Als nächstes plane ich, Solitaire zu machen, und irgendwann würde ich auch gern etwas wie Mazewar vom Xerox Alto umsetzen. Gerade das Networking ist nicht einfach, aber als Hommage an Xerox möchte ich es versuchen.

  • Ich fand es sehr beeindruckend, im Preferences-App den Schatten-Textstil und den Fatbits-Editor zu sehen und festzustellen, dass dieses 40 Jahre alte UX selbst ohne Ballast noch produktiv und intuitiv ist. Etwas schade ist nur das Fehlen eines Schließen-Buttons. Dass sich Menüs mit nur einem Klick geöffnet halten lassen, ist eine gute Änderung, die in der UX-Entwicklung erst deutlich später kam.

    • Sticky-Menüs wurden erst viel später eingeführt. In dieser Umsetzung habe ich sie absichtlich eingebaut, weil moderne Nutzer daran gewöhnt sind. Man kann ein Menü mit einem Klick offen halten oder es durch Gedrückthalten der Maustaste und Ziehen öffnen und beim Loslassen wieder schließen. Es gibt sogar eine Extension für das alte Mac OS (System 6), die Sticky-Menüs ermöglicht; hier habe ich diese Funktion gewissermaßen noch weiter in die Vergangenheit zurückprojiziert. Und ja: Zum Schließen eines Fensters einfach auf das Symbol in der Titelleiste doppelklicken.

    • Es gibt tatsächlich die Funktion, ein Fenster durch Doppelklick auf das Symbol oben links zu schließen, so ähnlich wie ein Shortcut für File > Set Aside.

  • Ich habe Lisa nie lange benutzt, aber als Techniker Anfang der 90er mehrere Lisas verwendet und sie zu Mac XLs umgebaut. Dieses Projekt trifft die UI mit sehr hoher Genauigkeit und macht einfach Spaß beim Anklicken und Ausprobieren.

  • Früher hatte ich noch nicht einmal einen Lisa-Emulator benutzt, und dank dessen war das jetzt meine erste Erfahrung damit. Es war schön, dadurch mal wieder über die grundlegenden Ideen von GUI nachzudenken. Danke dafür.

  • Ich spreche GUI Laut für Laut aus; ich finde nicht, dass man es unbedingt wie „gooey“ aussprechen muss. Halb im Scherz, halb im Ernst: solidarische Zustimmung.

    • Ich bin dafür, Abkürzungen und Initialismen immer aussprechbar zu machen: TUI als „tu-i“, CLI als „kli“, TCP/IP als „tikipipi“, GPT als „gipiti“, DNS als „döns“, HTTP als „hitüp“, USB als „usber“, USB-C als „usberk“ und so weiter.

    • Solche kleinen Aussprachedebatten sind viel unterhaltsamer als die ernsten Diskussionen, die man heute etwa in der Politik hat: vi vs. emacs, vi vs. vim, die Aussprache von IF, m68k vs. x86, Mac vs. Amiga, BSD vs. Linux usw.

    • Schön, jemanden zu treffen, der genauso denkt.

  • Wenn man auf dem Handy einen Mauszeiger benutzt, ist die Methode von Microsoft Remote Desktop praktisch: Man bewegt nicht direkt mit dem Finger den Cursor, sondern separat irgendwo auf dem Bildschirm. Wenn man es selbst ausprobiert, merkt man sofort, wie sich das anfühlt. Das wäre ein Verbesserungsvorschlag.

    • Ist bereits implementiert. Wenn man im Touchscreen-Optionspanel der Einstellungen den Trackpad-Modus einschaltet, bekommt man genau diese Art von Touch-Cursor-Erlebnis.

  • Ich habe es auf dem Handy ausprobiert, und die Reaktionsfähigkeit ist beeindruckend gut.

    • Danke für das Feedback und dafür, dass du es ausprobiert hast.

  • Auf dem kleinen Bildschirm eines iPhone SE funktioniert es nicht richtig, daher denke ich, dass ich mir beim nächsten Mal mit einem Hardware-Upgrade ein besseres OS-Erlebnis gönnen sollte.