jsbeeb 1.22.4 → 1.24.0

package/src/web/machine.js

@@ -1,28 +1,36 @@
-import { AtomCpu6502, Cpu6502 } from "../6502.js";
+import { machineSpec } from "../machine-spec.js";
 import { Cmos, localStoragePersistence } from "../cmos.js";
 import { Econet } from "../econet.js";
 import { LoadSD } from "../mmc.js";
 import { tubeModelFor } from "../models.js";
-import * as utils from "../utils.js";
 import { toast } from "./toast.js";
 import { errorText, reportLoadFailure, showNotice } from "./reporting.js";
+import { loadData } from "../loader.js";
 
 /**
  * The machine's fittings as the CPU wants them handed over. Pure, so the bank
  * and flag decisions are testable on their own.
  */
-export function buildEmulationConfig({ config, parsedQuery, keyLayout, cpuMultiplier, extraRoms, userPort, printer }) {
-    return {
+export function buildEmulationConfig({
+    settings,
+    parsedQuery,
+    keyLayout,
+    cpuMultiplier,
+    extraRoms,
+    userPort,
+    printer,
+}) {
+    return machineSpec({
         keyLayout,
         cpuMultiplier,
-        tubeCpuMultiplier: config.tubeCpuMultiplier,
+        tubeCpuMultiplier: settings.tubeCpuMultiplier,
         videoCyclesBatch: parsedQuery.videoCyclesBatch,
-        tube: config.coProcessor ? tubeModelFor(config.model) : null,
-        hasMusic5000: config.hasMusic5000,
-        hasTeletextAdaptor: config.hasTeletextAdaptor,
+        tube: settings.coProcessor ? tubeModelFor(settings.model) : null,
+        hasMusic5000: settings.hasMusic5000,
+        hasTeletextAdaptor: settings.hasTeletextAdaptor,
         // ROM order determines sideways bank allocation, and the fittings' ROMs claim banks
         // before any the user asked for with ?rom=.
-        extraRoms: [...config.extraRoms, ...extraRoms],
+        extraRoms: [...settings.extraRoms, ...extraRoms],
         userPort,
         printerPort: printer,
         getGamepads: function () {
@@ -33,14 +41,14 @@ export function buildEmulationConfig({ config, parsedQuery, keyLayout, cpuMultip
             logFdcCommands: parsedQuery.logFdcCommands !== undefined,
             logFdcStateChanges: parsedQuery.logFdcStateChanges !== undefined,
         },
-    };
+    });
 }
 
 /** The emulated machine itself: the processor with everything bolted to it, and its start-up. */
 export class Machine {
     constructor({
         model,
-        config,
+        settings,
         parsedQuery,
         keyLayout,
         cpuMultiplier,
@@ -52,14 +60,14 @@ export class Machine {
         video,
         audioHandler,
         dbgr,
-        makeCpu = (CpuClass, ...args) => new CpuClass(...args),
+        build = (cpuModel, options) => new cpuModel.Cpu(cpuModel, options),
     }) {
         this.model = model;
         this.audioHandler = audioHandler;
         this.speechOutput = speechOutput;
 
         this.econet = null;
-        if (config.hasEconet) {
+        if (settings.hasEconet) {
             this.econet = new Econet(stationId, model.cyclesPerSecond);
         } else {
             document.getElementById("fsmenuitem").style.display = "none";
@@ -78,8 +86,8 @@ export class Machine {
             this.econet,
         );
 
-        this.emulationConfig = buildEmulationConfig({
-            config,
+        this.spec = buildEmulationConfig({
+            settings,
             parsedQuery,
             keyLayout,
             cpuMultiplier,
@@ -88,17 +96,16 @@ export class Machine {
             printer,
         });
 
-        const CpuClass = model.isAtom ? AtomCpu6502 : Cpu6502;
-        this.processor = makeCpu(CpuClass, model, {
+        this.processor = build(model, {
             dbgr,
             video,
             soundChip: audioHandler.soundChip,
             ddNoise: audioHandler.ddNoise,
             relayNoise: audioHandler.relayNoise,
-            music5000: config.hasMusic5000 ? audioHandler.music5000 : null,
+            music5000: settings.hasMusic5000 ? audioHandler.music5000 : null,
             cmos: this.cmos,
-            config: this.emulationConfig,
             econet: this.econet,
+            config: this.spec,
         });
 
         printer.attach(this.processor.uservia);
@@ -187,7 +194,7 @@ export class Machine {
             await startImageLoad(`BASIC program ${loadBasic}`, () =>
                 autoBoot.insertBasic(
                     (async () => {
-                        const data = await utils.loadData(loadBasic);
+                        const data = await loadData(loadBasic);
                         return String.fromCharCode.apply(null, data);
                     })(),
                     basicNeedsRun,

package/src/web/media-loader.js

@@ -1,9 +1,12 @@
-import * as utils from "../utils.js";
 import * as disc from "../fdc.js";
+import { localDisc } from "./local-disc.js";
 import { DiscLayout } from "../disc.js";
 import { loadTapeFromData } from "../tapes.js";
 import { toast } from "./toast.js";
-import { errorText, reportIgnoredFiles, reportLoadFailure, unzipAndReport } from "./reporting.js";
+import { errorText, reportIgnoredFiles, reportLoadFailure } from "./reporting.js";
+import { MediaResolver, openIfZip, splitImage } from "../media-resolver.js";
+import { stringToUint8Array } from "../binary.js";
+import { noteEvent } from "./analytics.js";
 
 /** The images offered on the Discs dialog's built-in list. */
 export const BuiltInImages = [
@@ -24,13 +27,6 @@ export const BuiltInImages = [
     },
 ];
 
-export function splitImage(image) {
-    const match = image.match(/(([^:]+):\/?\/?|[!^|])?(.*)/);
-    const schema = match[2] || match[1] || "";
-    image = match[3];
-    return { image: image, schema: schema };
-}
-
 function readFileAsBinaryString(file) {
     return new Promise((resolve, reject) => {
         const reader = new FileReader();
@@ -63,11 +59,12 @@ export class MediaLoader extends EventTarget {
         this.drives = drives;
         this.urlState = urlState;
         this.modals = modals;
-        this.sources = {};
+        this.resolver = new MediaResolver();
+        this.driveSource = null;
 
         document.getElementById("disc_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
-            utils.noteEvent("local", "click"); // NB no filename here
+            noteEvent("local", "click"); // NB no filename here
             const file = evt.target.files[0];
             try {
                 await this.loadHTMLFile(file);
@@ -79,7 +76,7 @@ export class MediaLoader extends EventTarget {
 
         document.getElementById("fs_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
-            utils.noteEvent("local", "click"); // NB no filename here
+            noteEvent("local", "click"); // NB no filename here
             const file = evt.target.files[0];
             try {
                 await this.loadSCSIFile(file);
@@ -92,17 +89,15 @@ export class MediaLoader extends EventTarget {
         document.getElementById("tape_load").addEventListener("change", async (evt) => {
             if (evt.target.files.length === 0) return;
             const file = evt.target.files[0];
-            utils.noteEvent("local", "clickTape"); // NB no filename here
+            noteEvent("local", "clickTape"); // NB no filename here
 
             try {
-                let tapeData = await readFileAsBinaryString(file);
-                let tapeName = file.name;
-                if (/\.zip/i.test(tapeName)) {
-                    const unzipped = await unzipAndReport(utils.stringToUint8Array(tapeData));
-                    tapeData = unzipped.data;
-                    tapeName = unzipped.name;
-                }
-                this.setProcessorTape(await loadTapeFromData(tapeName, tapeData, model));
+                const { name, data, ignored } = await openIfZip(
+                    file.name,
+                    stringToUint8Array(await readFileAsBinaryString(file)),
+                );
+                reportIgnoredFiles(name, ignored);
+                this.setProcessorTape(await loadTapeFromData(name, data, model));
                 urlState.set({ tape: undefined });
                 modals.hide("tapes");
             } catch (error) {
@@ -119,7 +114,7 @@ export class MediaLoader extends EventTarget {
             event.dataTransfer.dropEffect = "copy";
         });
         pastetext.addEventListener("drop", async (event) => {
-            utils.noteEvent("local", "drop");
+            noteEvent("local", "drop");
             const file = event.dataTransfer.files[0];
             if (!file) return;
             try {
@@ -148,7 +143,7 @@ export class MediaLoader extends EventTarget {
             elem.querySelector(".name").textContent = image.name;
             elem.querySelector(".description").textContent = image.desc;
             elem.addEventListener("click", async () => {
-                utils.noteEvent("images", "click", image.file);
+                noteEvent("images", "click", image.file);
                 this.setDisc1Image(image.file);
                 modals.hide("discs");
                 try {
@@ -166,16 +161,12 @@ export class MediaLoader extends EventTarget {
 
     /** Register the fetcher behind an image schema; each picker calls this as it is constructed. */
     addSource(schema, fetcher) {
-        this.sources[schema] = fetcher;
+        if (schema === "drive") this.driveSource = fetcher;
+        else this.resolver.addSource(schema, fetcher);
     }
 
-    /** Route tape to the correct interface (ACIA for BBC, PPIA for Atom) */
     setProcessorTape(tape) {
-        if (this.model.isAtom) {
-            this.processor.atomppia.setTape(tape);
-        } else {
-            this.processor.acia.setTape(tape);
-        }
+        this.processor.tapeInterface.setTape(tape);
     }
 
     setDisc1Image(name) {
@@ -194,14 +185,8 @@ export class MediaLoader extends EventTarget {
     }
 
     async loadHTMLFile(file) {
-        const imageData = utils.stringToUint8Array(await readFileAsBinaryString(file));
-        const loadedDisc = disc.discFor(
-            this.processor.fdc,
-            file.name,
-            imageData,
-            undefined,
-            this.drives.layoutForDrive(0),
-        );
+        const imageData = stringToUint8Array(await readFileAsBinaryString(file));
+        const loadedDisc = disc.discFor(file.name, imageData, undefined, this.drives.layoutForDrive(0));
         // Local file: retain the image bytes for embedding in save-to-file snapshots.
         loadedDisc.setOriginalImage(imageData);
         this.drives.putDiscIn(0, loadedDisc);
@@ -213,7 +198,7 @@ export class MediaLoader extends EventTarget {
         const { processor } = this;
         if (!processor.filestore) return;
         const binaryData = await readFileAsBinaryString(file);
-        processor.filestore.scsi = utils.stringToUint8Array(binaryData);
+        processor.filestore.scsi = stringToUint8Array(binaryData);
 
         processor.filestore.PC = 0x400;
         processor.filestore.SP = 0xff;
@@ -229,128 +214,34 @@ export class MediaLoader extends EventTarget {
 
     async loadDiscImage(discImage, layout = DiscLayout.auto) {
         if (!discImage) return null;
-        const split = splitImage(discImage);
-        discImage = split.image;
-        const schema = split.schema;
+        const { schema, image } = splitImage(discImage);
         if (schema[0] === "!" || schema === "local") {
-            return disc.localDisc(this.processor.fdc, discImage, layout, (error) =>
+            return localDisc(image, layout, (error) =>
                 toast(
-                    `Browser storage would not take changes to ${discImage} (${errorText(error)}). Use Discs, Download to keep a copy.`,
+                    `Browser storage would not take changes to ${image} (${errorText(error)}). Use Discs, Download to keep a copy.`,
                     { title: "Disc", quietKey: "quietLocalDiscSaveFailed" },
                 ),
             );
         }
-        // TODO: come up with a decent UX for passing an 'onChange' parameter to each of these.
+        if (schema === "gd") {
+            const [, id, name = "(unknown)"] = image.match(/([^/]+)\/?(.*)/) ?? [null, image];
+            return this.driveSource({ name, id }, layout);
+        }
+        // TODO(#822) come up with a decent UX for passing an 'onChange' parameter to each of these.
         // Consider:
         // * hashing contents and making a local disc image named by original disc hash, save by that, and offer
         //   to load the modified disc on load.
         // * popping up a message that notes the disc has changed, and offers a way to make a local image
         // * Dialog box (ugh) saying "is this ok?"
-        switch (schema) {
-            case "|":
-            case "sth": {
-                const { name, data, ignored } = await this.sources.sth(discImage);
-                reportIgnoredFiles(name, ignored);
-                return disc.discFor(this.processor.fdc, name, data, undefined, layout);
-            }
-
-            case "hfe":
-                return disc.discFor(
-                    this.processor.fdc,
-                    discImage,
-                    await this.sources.hfe(discImage),
-                    undefined,
-                    layout,
-                );
-
-            case "gd": {
-                const splat = discImage.match(/([^/]+)\/?(.*)/);
-                let name = "(unknown)";
-                if (splat) {
-                    discImage = splat[1];
-                    name = splat[2];
-                }
-                return this.sources.drive({ name, id: discImage }, layout);
-            }
-            case "b64data":
-                return disc.discFor(this.processor.fdc, "disk.ssd", atob(discImage), undefined, layout);
-
-            case "data": {
-                const arr = Array.prototype.map.call(atob(discImage), (x) => x.charCodeAt(0));
-                const { name, data } = await unzipAndReport(arr);
-                return disc.discFor(this.processor.fdc, name, data, undefined, layout);
-            }
-            case "http":
-            case "https":
-            case "file": {
-                const asUrl = `${schema}://${discImage}`;
-                // url may end in query params etc, which can upset the DSD/SSD etc detection on the extension.
-                discImage = new URL(asUrl).pathname;
-                let discData = await utils.loadData(asUrl);
-                if (/\.zip/i.test(discImage)) {
-                    const unzipped = await unzipAndReport(discData);
-                    discData = unzipped.data;
-                    discImage = unzipped.name;
-                }
-                return disc.discFor(this.processor.fdc, discImage, discData, undefined, layout);
-            }
-            default:
-                return disc.discFor(
-                    this.processor.fdc,
-                    discImage,
-                    await disc.load("discs/" + discImage),
-                    undefined,
-                    layout,
-                );
-        }
+        const { name, data, ignored } = await this.resolver.resolve("disc", discImage);
+        reportIgnoredFiles(name, ignored);
+        return disc.discFor(name, data, undefined, layout);
     }
 
     async loadTapeImage(tapeImage) {
         if (!tapeImage) return null;
-        const split = splitImage(tapeImage);
-        tapeImage = split.image;
-        const schema = split.schema;
-
-        switch (schema) {
-            case "|":
-            case "sth": {
-                const { name, data, ignored } = await this.sources.tapeSth(tapeImage);
-                reportIgnoredFiles(name, ignored);
-                return await loadTapeFromData(name, data, this.model);
-            }
-
-            case "data": {
-                const arr = Array.prototype.map.call(atob(tapeImage), (x) => x.charCodeAt(0));
-                const { name, data } = await unzipAndReport(arr);
-                return await loadTapeFromData(name, data, this.model);
-            }
-
-            case "http":
-            case "https":
-            case "file": {
-                const asUrl = `${schema}://${tapeImage}`;
-                // url may end in query params etc, which can upset file handling
-                tapeImage = new URL(asUrl).pathname;
-                let tapeData = await utils.loadData(asUrl);
-                if (/\.zip/i.test(tapeImage)) {
-                    const unzipped = await unzipAndReport(tapeData);
-                    tapeData = unzipped.data;
-                    tapeImage = unzipped.name;
-                }
-                return await loadTapeFromData(tapeImage, tapeData, this.model);
-            }
-
-            default: {
-                const tapePath = "tapes/" + tapeImage;
-                let tapeData = await utils.loadData(tapePath);
-                let tapeName = tapeImage;
-                if (/\.zip/i.test(tapeName)) {
-                    const unzipped = await unzipAndReport(tapeData);
-                    tapeData = unzipped.data;
-                    tapeName = unzipped.name;
-                }
-                return await loadTapeFromData(tapeName, tapeData, this.model);
-            }
-        }
+        const { name, data, ignored } = await this.resolver.resolve("tape", tapeImage);
+        reportIgnoredFiles(name, ignored);
+        return loadTapeFromData(name, data, this.model);
     }
 }

package/src/{microphone-input.js → web/microphone-input.js}

@@ -1,4 +1,4 @@
-import { AnalogueSource } from "./analogue-source.js";
+import { AnalogueSource } from "../analogue-source.js";
 import { createAudioContext } from "./audio-utils.js";
 
 /**

package/src/web/modals.js

@@ -12,17 +12,16 @@ export class Modals {
         this.errorModal = new bootstrap.Modal(this.errorDialog);
         this.loadingDialog = document.getElementById("loading-dialog");
         this.loadingModal = new bootstrap.Modal(this.loadingDialog);
-        this.googleDriveAuth = document.getElementById("google-drive-auth");
         this.aysEl = document.getElementById("are-you-sure");
         this.aysModal = new bootstrap.Modal(this.aysEl);
 
-        let savedRunning = false;
-        document.addEventListener("show.bs.modal", () => {
-            if (!this.anyVisible()) savedRunning = loop.isRunning();
-            if (loop.isRunning()) loop.stop(false);
+        const holds = new WeakMap();
+        document.addEventListener("show.bs.modal", (event) => {
+            if (!holds.has(event.target)) holds.set(event.target, loop.pause(`the ${event.target.id} dialog`));
         });
-        document.addEventListener("hidden.bs.modal", () => {
-            if (!this.anyVisible() && savedRunning) loop.go();
+        document.addEventListener("hidden.bs.modal", (event) => {
+            holds.get(event.target)?.();
+            holds.delete(event.target);
         });
     }
 
@@ -48,12 +47,10 @@ export class Modals {
 
     popupLoading(msg) {
         this.loadingDialog.querySelector(".loading").textContent = msg;
-        this.googleDriveAuth.style.display = "none";
         this.loadingModal.show();
     }
 
     loadingFinished(message) {
-        this.googleDriveAuth.style.display = "none";
         this.loadingModal.hide();
         if (message) toast(message);
     }

package/src/web/page-actions.js

@@ -0,0 +1,88 @@
+import { downloadDriveData } from "./dom-utils.js";
+
+const UnloadWarning =
+    "It seems like you're still using the emulator. If you're in Chrome, it's impossible for jsbeeb to prevent some shortcuts (like ctrl-W) from performing their default behaviour (e.g. closing the window).\n" +
+    "As a workaround, create an 'Application Shortcut' from the Tools menu.  When jsbeeb runs as an application, it *can* prevent ctrl-W from closing the window.";
+
+/**
+ * The page around the emulator: the reset menu items and the filestore
+ * download, what focus and unload do to the machine, the drop guard, the
+ * dialogs a URL can ask for, and the version stamp.
+ */
+export class PageActions {
+    constructor({ loop, processor, keyboard, audioHandler, rewindUI, modals, parsedQuery, version }) {
+        this.processor = processor;
+        this.rewindUI = rewindUI;
+        this.pageListeners = new AbortController();
+        const { signal } = this.pageListeners;
+
+        for (const el of document.querySelectorAll(".initially-hidden")) el.classList.remove("initially-hidden");
+        document.getElementById("paste-form").addEventListener("submit", (event) => event.preventDefault());
+
+        window.addEventListener(
+            "blur",
+            () => {
+                keyboard.clearKeys();
+                loop.setEmulationLead(audioHandler.setWindowFocused(false));
+            },
+            { signal },
+        );
+        window.addEventListener("focus", () => loop.setEmulationLead(audioHandler.setWindowFocused(true)), { signal });
+
+        // To lower the chance of data loss, only the drop zone in the menu bar accepts drops.
+        document.addEventListener(
+            "dragover",
+            (event) => {
+                event.preventDefault();
+                event.dataTransfer.dropEffect = "none";
+            },
+            { signal },
+        );
+        document.addEventListener("drop", (event) => event.preventDefault(), { signal });
+
+        window.addEventListener(
+            "beforeunload",
+            (event) => {
+                if (!loop.isRunning() || !processor.sysvia.hasAnyKeyDown()) return;
+                event.preventDefault();
+                event.returnValue = UnloadWarning;
+            },
+            { signal },
+        );
+
+        document.getElementById("hard-reset").addEventListener("click", (event) => {
+            event.preventDefault();
+            this.hardReset();
+        });
+        document.getElementById("soft-reset").addEventListener("click", (event) => {
+            event.preventDefault();
+            this.softReset();
+        });
+        document.getElementById("download-filestore-link").addEventListener("click", () => this.downloadFilestore());
+
+        if (Object.hasOwn(parsedQuery, "about")) modals.show("info");
+        if (Object.hasOwn(parsedQuery, "pp-tos")) modals.show("pp-tos");
+
+        const versionElement = document.getElementById("jsbeeb-version");
+        if (versionElement) versionElement.textContent = `Version ${version}`;
+    }
+
+    /** Stops listening to the window and document; the elements go with the page. */
+    dispose() {
+        this.pageListeners.abort();
+    }
+
+    hardReset() {
+        this.rewindUI.reset();
+        this.processor.reset(true);
+    }
+
+    softReset() {
+        this.processor.reset(false);
+    }
+
+    downloadFilestore() {
+        if (!this.processor.filestore) return;
+        downloadDriveData(this.processor.filestore.scsi, "scsi", ".dat");
+    }
+}

package/src/web/quick-settings.js

@@ -1,44 +1,45 @@
 import { AudioOutputs } from "../audio-output.js";
 
 /**
- * The sound output, speaker amount and display mode controls on the top bar.
- * Choices go to the callbacks; what is shown follows the show methods, so the
- * bar can be kept in step with the same settings elsewhere.
+ * The sound output, speaker amount and display mode controls on the top bar:
+ * a view of those three settings, and a way to set them.
  */
 export class QuickSettings {
-    constructor({ onAudioOutput, onSpeakerAmount, onDisplayMode }, { audioOutput, speakerAmount, displayMode }) {
+    constructor(settings) {
         this.output = document.getElementById("audio-output");
         this.amount = document.getElementById("speaker-amount");
         this.display = document.getElementById("display-mode");
         if (!this.output || !this.amount || !this.display) return;
 
-        this.showAudioOutput(audioOutput);
-        this.showSpeakerAmount(speakerAmount);
-        this.showDisplayMode(displayMode);
+        this.showAudioOutput(settings.audioOutput);
+        this.showSpeakerAmount(settings.speakerAmount);
+        this.showDisplayMode(settings.displayMode);
+        settings.on("audioOutput", (audioOutput) => this.showAudioOutput(audioOutput));
+        settings.on("speakerAmount", (speakerAmount) => this.showSpeakerAmount(speakerAmount));
+        settings.on("displayMode", (displayMode) => this.showDisplayMode(displayMode));
 
         this.output.addEventListener("click", (e) => {
-            const value = e.target.closest("[data-output]")?.dataset.output;
-            if (value) onAudioOutput(value);
+            const audioOutput = e.target.closest("[data-output]")?.dataset.output;
+            if (audioOutput) settings.set({ audioOutput });
         });
-        this.amount.addEventListener("input", () => onSpeakerAmount(parseFloat(this.amount.value)));
+        this.amount.addEventListener("input", () => settings.set({ speakerAmount: parseFloat(this.amount.value) }));
         this.display.addEventListener("click", (e) => {
-            const mode = e.target.closest("[data-mode]")?.dataset.mode;
-            if (mode) onDisplayMode(mode);
+            const displayMode = e.target.closest("[data-mode]")?.dataset.mode;
+            if (displayMode) settings.set({ displayMode });
         });
     }
 
     showAudioOutput(audioOutput) {
-        if (!this.output) return;
         select(this.output.querySelectorAll("[data-output]"), (b) => b.dataset.output === audioOutput);
         this.amount.disabled = audioOutput !== AudioOutputs.speaker;
     }
 
     showSpeakerAmount(speakerAmount) {
-        if (this.amount) this.amount.value = speakerAmount;
+        this.amount.value = speakerAmount;
     }
 
     showDisplayMode(mode) {
-        if (this.display) select(this.display.querySelectorAll("[data-mode]"), (b) => b.dataset.mode === mode);
+        select(this.display.querySelectorAll("[data-mode]"), (b) => b.dataset.mode === mode);
     }
 }
 

package/src/web/reporting.js

@@ -1,4 +1,3 @@
-import * as utils from "../utils.js";
 import { toast } from "./toast.js";
 
 export const errorText = (error) => error?.message ?? `${error}`;
@@ -15,12 +14,6 @@ export function reportIgnoredFiles(name, ignored) {
     });
 }
 
-export async function unzipAndReport(data) {
-    const unzipped = await utils.unzipDiscImage(data);
-    reportIgnoredFiles(unzipped.name, unzipped.ignored);
-    return unzipped;
-}
-
 /** Handles a component's "notice" event by toasting it. */
 export function showNotice(event) {
     const { message, title, quietKey } = event.detail;

package/src/{rewind-thumbnail.js → web/rewind-thumbnail.js}

@@ -1,5 +1,3 @@
-"use strict";
-
 const ThumbnailWidth = 160;
 const ThumbnailHeight = 128;
 const FramebufferWidth = 1024;