Finishing touches.

doc/stellerator_embedded.md

@@ -11,9 +11,9 @@ You can find the comprehensive API documentation (including this document)
 # Example
 
 You can find a example of the embedded emulator
-[here](https://6502ts.github.io/dev/stellerator_embedded_demo.html).
+[here](https://6502ts.github.io/stellerator_embedded).
 The source code is available in the 6502.ts repository on GitHub
-[here](https://github.com/6502ts/6502.ts/blob/master/web/stellerator_embedded_demo.html).
+[here](https://github.com/6502ts/6502.ts/blob/master/template/stellerator-embedded.html).
 
 The example exposes the Stellerator instance (see below) as `window.stellerator`, so
 you can access and explore it in the developer console.
@@ -29,7 +29,7 @@ activity on the web page.
 ## Frontend
 
 The frontend provides a single class called
-[`Stellerator`](https://6502ts.github.io/typedoc/stellerator-embedded/classes/stellerator_.stellerator.html).
+[`Stellerator`](https://6502ts.github.io/typedoc/stellerator-embedded/classes/stellerator.stellerator-2.html).
 It is available both as a prebuild bundle that can directly loaded via script tag
 and in the `6502.ts` package on NPM. The prebuilt script is most suitable
 for including the emulator in a web page, while the NPM package is mainly aimed at
@@ -151,6 +151,62 @@ as well as borders must be avoided. Please use a wrapper element to achieve
 those effects. In addition, fullscreen mode (see below) changes element styles on
 the canvas --- do not use element styles on the canvas in oder to avoid collisions.
 
+## Emulator options
+
+There are several options that influence the behavior of Stellerator. These can either
+be specified when the constructor is invoked or changed at runtime by invoking setters
+on the `Stellerator` instance. The following example code is taken from the example page:
+
+```javascript
+const stellerator = new $6502.Stellerator(
+  document.getElementById('stellerator-canvas'),
+  'worker/stellerator.min.js',
+  {
+      gamma: 1,
+      scalingMode: Stellerator.ScalingMode.qis,
+      tvEmulation: Stellerator.TvEmulation.composite,
+      phosphorLevel: 0.5,
+      scanlineLevel: 0.2
+  }
+);
+```
+
+## Video output
+
+Stellerator has serveral options that influence the video display
+
+### Gamma
+
+This adjusts the gamma correction factor that is applied to the image.
+
+### Scaling mode
+
+This changes the algorithm that is used to scale the emulator image to the canvas size
+
+* **QIS (Quasi Integer Scaling) (default)**: Produces a crisp image while avoiding
+  Moirée artifacts.
+* **Bilinear scaling:** Avoids Moirée artifacts, but introduces visible blurring.
+* **None:** Plain nearest neightbour scaling. A crisp image, but there will be
+  Moirée artifacts if the scaling factor is not an integer.
+
+### TV Emulation
+
+Stellerator emulates the effect of modulating / demodulating the video signal for
+the TV. This uses hardware acceleration and runs on the GPU and may cause visual
+artifacts on ancient GPUs.
+
+If you want to be 100% sure that everyone can use the emulator without artifacts
+you might want to disable TV emulation by setting `tvEmulation: Stellerator.TvEmulation.none`.
+
+### Phosphor
+
+Stellerator emulates the phosphor effect from CRT tubes. The blend facotor can be controlled
+with the `phosphotLevel` option. Setting this to 0 disables phosphor.
+
+### Scanlines
+
+The blend factor of the scanline overlay can be adjusted with `scalineLevel`.
+
 ## Fullscreen mode
 
 The display can be put in fullscreen mode either programmatically or (unless disabled)
@@ -243,7 +299,7 @@ for details.
 If the emulator fails to work, please check the debug console for any errors. In
 particular, check the network tab whether the worker script is loaded correctly.
 Also, check whether the
-[example](https://6502ts.github.io/dev/stellerator_embedded_demo.html)
+[example](https://6502ts.github.iostellerator_embedded)
 works.
 
 If need help or think that you may have found an issue, please file a bug on the

package.json

@@ -72,6 +72,7 @@
     "ts-node": "^9.0.0",
     "tslint": "^6.1.3",
     "typedoc": "^0.20.19",
+    "typedoc-plugin-jekyll": "^0.1.0",
     "typescript": "^4.0.3"
   },
   "resolutions": {

rollup.config.js

@@ -173,14 +173,17 @@ export default [
         output: dist('stellerator-embedded/stellerator-embedded.min.js'),
         name: '$6502',
         copy: {
-            targets: [{ src: 'template/stellerator-embedded.html', dest: dist('stellerator-embedded') }],
+            targets: [
+                { src: 'template/stellerator-embedded.html', dest: dist('stellerator-embedded'), rename: 'index.html' },
+                { src: 'aux/2600/flapping/flapping.bin', dest: dist('stellerator-embedded') },
+            ],
         },
     }),
     elmFrontend({
         input: 'src/frontend/stellerator/index.ts',
         output: dist('frontend/stellerator'),
         copy: {
-            targets: [{ src: 'template/stellerator.html', dest: dist('frontend/stellerator'), rename: 'index.html'  }],
+            targets: [{ src: 'template/stellerator.html', dest: dist('frontend/stellerator'), rename: 'index.html' }],
         },
         extraAssets: ['doc', 'CHANGELOG.md', 'LICENSE.md'],
         serviceWorker: {
@@ -197,7 +200,9 @@ export default [
         input: 'src/frontend/ui-playground/index.ts',
         output: dist('frontend/ui-playground'),
         copy: {
-            targets: [{ src: 'template/ui-playground.html', dest: dist('frontend/ui-playground'), rename: 'index.html'  }],
+            targets: [
+                { src: 'template/ui-playground.html', dest: dist('frontend/ui-playground'), rename: 'index.html' },
+            ],
         },
     }),
 ];

template/stellerator-embedded.html

@@ -71,19 +71,32 @@
 
         <script src="stellerator-embedded.min.js"></script>
         <script>
-            {
+            // Wrap everything in an async self-executing function so that we can use async/await.
+            (async function() {
                 // Shortcut to avoid typing out the namespace
                 const Stellerator = $6502.Stellerator;
 
-                // We hardcode the ROM as a base64 encoded string. We could also use an array or typed array.
-                const rom = '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HKB8hAaQ5qixmoUbhYmpAIUNijjlhWkJkNeosZyFG6BNhAaFi2jkkQiKhQhKSqi5qADq6oUNpYmFG6l8hQY4ub4AhQ2pTYUGpYuFG4rl4mkIkKKosd+oytCfhg2GHoUCqQaFCYYbhhyFAoUCqQKFAoUBoh6FAsrQ+4UNqQCFCUwN86kKhRWpCIUWxtUQI8bUEASpD4XUpNS5gf+F1cbVuXH/MAmFF6kMhRlMPfupAIUZxtcQI8bWEASpC4XWpNa5sf+F18bXuaX/MAmFGKkIhRpMZPupAIUapevwA0yD8Uyk9v////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8ADAyM3Px8LAwADBw8fHw8DAwAMDAxOz8+NDAAMDg8Pj48MDAAAAB9/nQ+ceAA4HA4fP90DwAAAF1VXQBXVVcAAAAcNj4qXWMAADxCQkI8PggIKBh+YBxCPHwCHAJ8BAR+RER8AnxAfjxCfGAeEAgEAn48QjxCPAICHiIcRKqSgoIAAAAAAAA+CAgICCgYAH5AIBwCQjwAfAICPAICfAAAAGDwkBAQUNDQ0NDQ0NDQ0NDQ0NDQ0NCQoKCgoKAgQMCAAAAAAGHxm44mJiIgICAmNzcXFdXX19HZmYuLyOjo4GcPiPhwAAYPiYiIiouLk5eXlpaWpubGjp4eGlre3l5OLCATHwwAAAAgcNCQACBgYGDg4ODg4ODA0NDQ0NDAQEDQ0NDQ0JAgYMCAAAAAAICAwEBAQUFufgAALS0tLae3t7e3l4eHl7c0EBFH5rwQCBgUIiIpTU1cnr6/v76goaGtvb29tZWVXVxcWEgjJzwIAAD/Ef8R/xD/EP8P/w//Ev8SKBQKGigUChooFAoaKBQKGg8ODQwLCgkIBwYGAgICAgICAgIQ/3j/KP94/3j/KP94EAIEAgoCFgIKAhYC////////////////////////////////////////////////////////////////////////////////////APAA8A==';
+                // We load the ROM file using the fetch API. We could also hardcode the ROM as a base64 encoded string
+                // and pass that to stellerator instead.
+                const response = await fetch("./flapping.bin");
+                const rom = new Uint8Array(await response.arrayBuffer());
 
                 // Create the stellerator instance
                 const stellerator = new $6502.Stellerator(
                     // The canvas element
                     document.getElementById('stellerator-canvas'),
                     // The URL from which the web worker will be loaded
-                    'worker/stellerator.min.js'
+                    'worker/stellerator.min.js',
+                    {
+                        // You might want to adjust the following parameters. There are more options,
+                        // check out the documentation:
+                        // https://6502ts.github.io/typedoc/stellerator-embedded/interfaces/stellerator.stellerator-1.config.html
+                        gamma: 1,
+                        scalingMode: Stellerator.ScalingMode.qis,
+                        tvEmulation: Stellerator.TvEmulation.composite,
+                        phosphorLevel: 0.5,
+                        scanlineLevel: 0.2
+                    }
                 );
 
                 // The DOM node that displays emulation speed
@@ -105,7 +118,7 @@
 
                 // Expose the instance for tinkering.
                 window.stellerator = stellerator;
-            }
+            })();
         </script>
     </body>
 </html>

yarn.lock

@@ -5988,6 +5988,11 @@ typedoc-default-themes@^0.12.5:
   resolved "https://registry.yarnpkg.com/typedoc-default-themes/-/typedoc-default-themes-0.12.5.tgz#063725a3eb407593ab07e4f110e5cf33b3892616"
   integrity sha512-JQ2O9laZ/EhfWUWYp/8EyuShYhtXLhIa6DU8eZNUfaurMhEgKdffbadKNv6HMmTfOxAcgiePg06OCxNX8EyP3g==
 
+typedoc-plugin-jekyll@^0.1.0:
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/typedoc-plugin-jekyll/-/typedoc-plugin-jekyll-0.1.0.tgz#9ac24a26ff7a42a7c5d9a539775abcfcafb4e86e"
+  integrity sha512-fqSFpqgjOYc3VV5MKXA0Jdse5nGTVFC9YLHEbv5FJeP2XUKwmzhOXhT59oUITAvAFAvMGNXhzjs14ylwbD1gNw==
+
 typedoc@^0.20.19:
   version "0.20.19"
   resolved "https://registry.yarnpkg.com/typedoc/-/typedoc-0.20.19.tgz#4871f659bc03a545c572066329273f1b30fb1cba"