Update UI, links, etc

README.md

@@ -1,20 +1,23 @@
 # ThingLab
 
-ThingLab was an application originally written in Smalltalk-76 by Alan Borning as part of his PhD dissertation work.  It was a constraint-based simulation laboratory, which allowed users to construct such things as demonstrations of geometric theorems, physics simulations of e.g. electrical circuits or bridges under load, graphical constraint-based calculators, and graphical layouts.  It is in many ways a further development of Ivan Sutherland's Sketchpad, and shares with Sketchpad the goals of using constraints for interactive graphics, and graphical construction of constrained objects.  It extends Sketchpad by adding additional application domains, providing support for a "kit-building kit" metaphor, and integration of constraints with part-whole hierarchies and Smalltalk's class hierarchy.  
+ThingLab was an application originally written in Smalltalk-76 by Alan Borning as part of his PhD dissertation work.  It was a constraint-based simulation laboratory, which allowed users to construct such things as demonstrations of geometric theorems, physics simulations of e.g. electrical circuits or bridges under load, graphical constraint-based calculators, and graphical layouts.  It is in many ways a further development of Ivan Sutherland's Sketchpad, and shares with Sketchpad the goals of using constraints for interactive graphics, and graphical construction of constrained objects.  It extends Sketchpad by adding additional application domains, providing support for a "kit-building kit" metaphor, and integration of constraints with part-whole hierarchies and Smalltalk's class hierarchy.
 
-For this project, we have the original ThingLab code from 1979 running in a newly implemented Smalltalk-78 interpreter in Lively/Javascript.  The interpreter is a resurrected version of the Smalltalk-78 system that ran on the Notetaker computer in 1979, with additional features restored from Smalltalk-76 that had been stripped out because of the Notetaker's limited hardware resources.  These implementations of Smalltalk-78 and ThingLab provide an important start on a novel way of exhibiting historic software systems.  They are more realistic than a re-implementation in a current programming language — the screen, the windows, the user interaction, and even the fonts are from the 35 year old version.  It's not the same as running on an original Alto or modern replica (probably the only possibility for even more realism) — but are much more widely accessible, to anyone with a modern browser, and surprisingly way faster (even though it is running on a ST78 interpreter written in Javascript).
+For this project, we have the original ThingLab code from 1979 running in a newly implemented Smalltalk-78 interpreter in Lively/Javascript.  The interpreter is a resurrected version of the Smalltalk-78 system that ran on the Notetaker computer in 1979, with additional features restored from Smalltalk-76 that had been stripped out because of the Notetaker's limited hardware resources.  These implementations of Smalltalk-78 and ThingLab provide an important start on a novel way of exhibiting historic software systems.  They are more realistic than a re-implementation in a current programming language — the screen, the windows, the user interaction, and even the fonts are from the 45 year old version (as of 2024).  It's not the same as running on an original Alto or modern replica (probably the only possibility for even more realism) — but are much more widely accessible, to anyone with a modern browser, and surprisingly way faster (even though it is running on a ST78 interpreter written in Javascript).
 
 ## Status
 
-#### June 2015
+### June 2015
 The original ThingLab code is now running well under the Lively/Javascript interpreter; as far as I know, remaining bugs are left over from the original code from 1979.  (ThingLab was a research prototype rather than a production system and there are indeed bugs still.)  The saved version of the ThingLab image has a help window open with suggestions for demos to try.
 
 The Smalltalk-78 interpreter itself is fully functional, and fine for demos, although with the occasional bug (save often).  Smalltalk-78 itself was also a demo, but it was derived from Smalltalk-76, which was a real production system, in daily use by all the members of the research group.  As a result, the underlying code (perhaps with additional features restored from ST76) is more amenable to being the basis for a solid, working system.  However, to be truly ready for release in a way that would showcase this historic system, it would need some additional work, both on fixing remaining bugs and on restoring functionality, and more importantly by embedding it in an active essay.
 
-#### April 2016
+### April 2016
 A few fixes to click delays and event timestamps have been made since the previous summer.
 
-## Links 
+### December 2024
+No changes to ThingLab itself, but updates to the Smalltalk-78 VM code and the web UI.
+
+## Links
 * https://cdglabs.github.io/thinglab/ (standalone version of ThingLab)
 * https://github.com/codefrau/Smalltalk78 (the Smalltalk-78 interpreter)
 * https://smalltalkzoo.thechm.org/HOPL-St78.html (a graphical debugger for the Smalltalk-78 interpreter; click the "load image" button at the bottom and select "ThingLab" if you want ThingLab rather than ST78 alone)
@@ -31,10 +34,10 @@ The [Smalltalk78 VM][St78] is included here using `git subtree`. This means you
 
 Only if you want to update to the latest VM code, use:
 
-    git subtree pull --prefix=St78 https://github.com/codefrau/Smalltalk78 master --squash
+    git subtree pull --prefix=St78 https://github.com/codefrau/Smalltalk78 main --squash
 
 And to push local modifications back upstream, use:
 
-    git subtree push --prefix=St78 https://github.com/codefrau/Smalltalk78 master
+    git subtree push --prefix=St78 https://github.com/codefrau/Smalltalk78 main
 
 [St78]:     https://github.com/codefrau/Smalltalk78

index.html

@@ -17,24 +17,45 @@
         cursor: none;
     }
     pre {
-        color: #333;
+        background: #EEE;
+        color: #000;
+        line-height: 1.5;
         display: none;
+        padding: 10px;
+        border-radius: 10px;
+        width: fit-content;
+    }
+    body.fullscreen {
+        background: #000;
+    }
+    body.fullscreen > *:not(canvas) {
+        display: none;
+    }
+    body.fullscreen #canvas {
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        border-radius: 0;
     }
 </style>
 <script src="St78/Smalltalk78.js"></script>
 <title>ThingLab</title>
 </head>
 
-<body>
-<a href="http://cdglabs.org/" target="_blank"><img src="cdg-logo.svg" width="75" height="75" align="right"></a>
+<body id="body">
+<a href="https://cdglabs.github.io" target="_blank"><img src="cdg-logo.svg" width="75" height="75" align="right"></a>
 
 <h1>ThingLab</h1>
 
 <canvas id="canvas" width="1024" height="768"></canvas>
 
-<p>This is Alan Borning's “ThingLab” running on the <a href="http://lively-web.org/users/bert/Smalltalk-78.html" target="_blank">Smalltalk-78 VM</a> by Bert Freudenberg and Dan Ingalls.</p>
+<p>This is Alan Borning's <a href="https://github.com/cdglabs/thinglab?#ThingLab" target="_blank">ThingLab</a>
+(1979) running on the <a href="https://github.com/codefrau/Smalltalk78" target="_blank">Smalltalk-78</a> VM
+by Vanessa Freudenberg and Dan Ingalls</p>
 
-<button id="helpbutton">Help</button>
+<button id="helpbutton">Mouse and Keyboard Help</button>
+<button id="fullscreenbutton">Fullscreen</button>
 
 <pre id="help">
 <b>Mouse</b>
@@ -50,7 +71,7 @@ <h1>ThingLab</h1>
 ¬: Ctrl-- (Ctrl-minus, unary minus, ¬1 instead of -1)
 ◢: Ctrl-] (Doit)
 ◦: Ctrl-A (<b>A</b>t)                      ..
-▹: Ctrl-C (open <b>C</b>olon)              ::
+⦂: Ctrl-C (open <b>C</b>olon)              ::
 ∢: Ctrl-E (<b>E</b>ye)                     &lt;)
 ⇒: Ctrl-F (i<b>F</b>)                      =&gt;
 ≥: Ctrl-G (<b>G</b>reater or equal)        >=
@@ -87,16 +108,35 @@ <h1>ThingLab</h1>
 </pre>
 
 <script>
-module("ThingLab").requires("Smalltalk78").toRun(function() {
-    Smalltalk78.run("thinglab.st78", canvas);
-});
-helpbutton.onclick = function() {
-    if (help.style.display) {
-        help.style.display = '';
-    } else {
-        help.style.display = 'block';
+    const params = new URLSearchParams(location.hash.slice(1));
+    if (params.get("width")) canvas.width = +params.get("width");
+    if (params.get("height")) canvas.height = +params.get("height");
+    if (params.has("fullscreen")) body.classList.add("fullscreen");
+
+    module("ThingLab").requires("Smalltalk78").toRun(() => {
+        Smalltalk78.run("thinglab.st78", canvas)
+    });
+
+    let timeout;
+    helpbutton.onclick = () => {
+        clearTimeout(timeout);
+        if (help.style.display) {
+            canvas.scrollIntoView({ behavior: 'smooth' });
+            timeout = setTimeout(() => help.style.display = '', 1000);
+        } else {
+            help.style.display = 'block';
+            helpbutton.scrollIntoView({ behavior: 'smooth' });
+        }
+    }
+
+    fullscreenbutton.onclick = () => {
+        canvas.requestFullscreen();
+    }
+
+    document.onfullscreenchange = () => {
+        const isFullscreen = document.fullscreenElement === canvas;
+        body.classList.toggle("fullscreen", isFullscreen);
     }
-}
 </script>
 
 </body>