AmpleWeb: Joining the Family of Ample Ports (WASM/Browser Target)

[anomixer]

Hi @ksherlock and the Ample community,

As the developer behind the AmpleWin and AmpleLinux ports, I’ve been dedicated to bringing the Ample experience to as many desktop users as possible. Today, I’m excited to introduce the newest addition to the family: AmpleWeb.

AmpleWeb is a browser-based port that leverages WASM to bring Ample's powerful emulation to any device with a modern web browser, no installation required.

Live Demo: https://anomixer.github.io/ample/
Source Code: anomixer/ample (AmpleWeb subdirectory)

Why AmpleWeb?

Following the philosophy of AmpleWin and AmpleLinux, I wanted to create a version that is truly universal. AmpleWeb uses Vite + React for a modern UI and brings the same machine-selection logic from the desktop versions to the web.

Key Features:

• Unified UI/UX: I've kept the UI consistent with the other ports (including the iconic 🍎 launch button) for a familiar experience.
• Zero-Setup: Users can jump straight into Apple II or Macintosh emulation without configuring local environments.
• Automated ROM Patching: To solve the issue where some online ROM collections (like CallApple) are missing modern MAME dependencies (e.g., for Dragon 32), I implemented a specialized CI/CD script. It automatically fetches and merges missing IC dumps from MDK during the deployment process.
• ROM Source Fixes: I've also addressed misclassifications in common ROM repositories. For example, the TK3000 (an Apple //e clone) is often found under apple2c.zip instead of apple2e.zip. AmpleWeb automatically handles these copies to ensure the machines boot correctly.

Feedback Welcome

Since this is a new frontier for the project, I would love to hear your thoughts and have the community test it out. I'm particularly interested in feedback on:

• Performance compared to native desktop versions.
• Browser-specific edge cases.
• Any features from AmpleWin/Linux you'd like to see prioritized in the Web port.

Thank you for your continued support and for the amazing foundation that Ample provides!

Best regards,
anomixer
Developer of AmpleWin, AmpleLinux, and AmpleWeb

[inexorabletash]

Very cool. In my Apple II project I link to a couple of web-based emulators from release pages so it is easy for end users to try it out with a single click so I'm excited about a potential MAME-powered option.

I noticed a handful of issues (using Chrome 147.0.7727.138, macOS 15.7.4), testing with apple2ee

• When starting the console always has an error index-B2JOv8UC.js:49 HEAD https://anomixer.github.io/ample/wasm/mametiny.wasm net::ERR_ABORTED 404 (Not Found) although this doesn't appear to affect operation. If this is truly optional, fetch and catch rejections to prevent the log? (seems to work in newer Chrome)
• After selecting an Apple II Mouse Card e.g. for slot 2 and starting, there are warnings about missing ROMs followed by an error mame.js?t=1778078555813:1 Uncaught CppException {excPtr: 18840904}; the emulation just hangs, rather than just reporting any error to the user. Similar when selecting an Apple II Memory Expansion Card. CFFA2 seems to work, though!
• After selecting an "A2retroNET SmartPort" card, [MAME] Ignoring MAME exception: Unknown slot option 'retronet' in slot 'sl7' is logged followed by an error
• Once an emulation has started successfully, if you select Stop the machine type is de-selected - unexpected. If you re-select the machine type, all of your selections (slots, media, etc) are lost - unexpected and frustrating!

And things I couldn't figure out:

• How to access the MAME menus, e.g. to select video options.

Feature requests:

• Allow specifying media paths as HTTP(S) URLs. With apple2js and apple2ts I am able to pass URLs to a disk image (served with appropriate CORS headers) to allow a single-click launch of an emulator with the specified web-hosted media. This may be supported with something like &autoboot but I didn't spot
• Allow specifying emulation options (as would be provided in the MAME menu, e.g. ) via URL parameters. This may not be feasible due to MAME's architecture.

Mentioning these here to provide some context about the state of the project as perceived by a potential user. I'm happy to file specific issues over in https://github.com/anomixer/ample if desired.

[anomixer]

Hi @inexorabletash, thank you so much for the detailed feedback and for testing it out! It’s an honor to have a prominent figure from the Apple II web community take a look.

As noted in the README, AmpleWeb is still a work in progress (WIP) with many known limitations. Developing for the WASM target brings a lot of unique constraints compared to native desktop versions. For instance, everything relies strictly on .zip structures, and each peripheral ROM needs to be precisely defined and bundled. Mapping all these dependencies correctly is a huge task that I'm still perfecting.

Regarding your excellent suggestions:

• URL loading for media: I've actually implemented a similar mechanism in my other project, SamCoupeWeb. I'm also a huge fan of how the international version of apple2ts handles Internet Archive resources via corsfix. I definitely plan to bring this "single-click launch" functionality to AmpleWeb as it matures.
• UI/UX (Stop button behavior): I hear you on the frustration of losing configurations. Refining the state management and fixing the WASM hangs (like the ones you saw with the Mouse/Memory cards) are high on my priority list.

By the way, I've been following your work on Apple II Desktop (a2d). In honor of the GS 40th anniversary, I developed a2gsemu-ia, a MAME-based IIGS emulator with curated games from the Internet Archive; perhaps it could be a useful resource for the a2d ecosystem. I also recently ported clemens_iigs to WASM with a 100% UI match, which you might find interesting.

If you’re interested in AmpleWeb, PRs are always welcome! I’d be happy to collaborate or discuss any improvements further.

Thank you again for your support and for the inspiration your work has provided!

[anomixer]

Hi @ksherlock , @inexorabletash and the community,

I have some exciting updates regarding AmpleWeb to share! These days, I've focused on stability and making the emulator truly "sharable" via the web.

🚀 Latest Milestones:

• Deep Linking & Instant Sharing: We've implemented a robust URL parameter system. You can now share a specific machine configuration (slots, peripheral settings, and media) via a single link.
  • Autoboot Support: Adding &autoboot to the URL will trigger an automatic 2-second countdown and launch the emulator immediately, making it perfect for preservation and educational demos.
• Cloud Media Mounting:
  • Integrated CORS proxy support (sponsored by Corsfix) to allow direct downloading of disk images from external sources like GitHub Releases.
  • Added a new 🌐 URL Button in the Media tab for pasting direct links. We now support automatic slot identification for .dsk, .po, .do, .nib, .woz (defaulting to floppy) and .2mg, .hdv, .chd, .zip (defaulting to hard disk).
• Intelligent Initialization & UX:
  • URL Sync: After a remote disk is downloaded, AmpleWeb automatically synchronizes the browser's address bar to reflect the local filename using history.replaceState. This prevents redundant downloads on page refreshes.
  • Smart Reset: Switching machines now intelligently clears incompatible slot settings and media from previous sessions to ensure a clean boot every time.
• Automated Dependency Handling: The ROM manager now recursively resolves device dependencies (e.g., automatically fetching the mouse card's MCU ROM when a mouse is inserted into a slot).

🖥️ Try the new "Instant Boot" Demo:

Here is a link that auto-boots an Apple IIgs with a CFFA2 hard drive image loaded directly from GitHub:
👉 Launch Apple II Desktop (Cloud)

I am continuing to polish the experience and would love for you to give these new features a spin!

Best regards,
anomixer

[inexorabletash]

Nice! My top two bits of feedback are:

• Weird pixel artifacting in both Chrome and Firefox (but different in each). Looks like it is scaling down to something to narrow horizontally, then scaling up, leading to vertical strips of pixels being lost.
• UX: on mobile (e.g. iPhone) the left/right sidebars take up all the horizontal real-estate. Emulation on a touch device will always be awkward, but I spend more time on my phone than laptop, so for a first "make sure it works" pass I often use my phone.

[anomixer]

Thanks for the great feedback! I've just pushed another set of updates to address the specific Mobile Chrome behaviors you noted:

• Pixel-Perfect Rendering Fix: The "vertical strips" artifacting was indeed caused by CSS overrides fighting with MAME's internal aspect ratio correction. I've replaced the hardcoded resolution logic with a MutationObserver that dynamically tracks the actual intrinsic dimensions set by the MAME core. It now applies exact integer multiples for the CSS scaling, ensuring 1:1 pixel mapping.

• Mobile UX & Scrolling Fixes:

  • Natural Scrolling: I've optimized the mobile layout to use 100dvh (Dynamic Viewport Height) and natural document scrolling. This ensures the browser's address bar doesn't cut off the "Launch" button and prevents nested scroll-traps.
  • Collapsible Lanes: You can now hide the machine list or settings panel via the ☰ and ⚙️ buttons in the header to maximize the emulator space.
  • Progress Bar logic: Fixed the issue where the loading bar would linger at 100%. It now disappears immediately as soon as the WASM transfer completes.

• Viewport Stability: Toggling the sidebars now automatically triggers a resize event, forcing the MAME/SDL renderer to recalculate the viewport and mouse scaling instantly.

You can try the updated version at the same URL. Let me know if the "Launch" button is easier to reach on your iPhone now!

[inexorabletash]

Thanks - still trying on my laptop. I found the "MAME Menu" and "MAME UI" buttons, so that's sorted. URL parameters to pick configurations (like Video-7 for the IIe) would be nice.

Scaling is better, but it's still overly pixelated on my laptop. I have a "retina" display so window.devicePixelRatio is 2; one approach to take advantage of this while avoiding filtering is to use this to create a canvas that's scaled appropriately (e.g. instead of matching the width/height in CSS pixels, multiply it by the DPR). Also (from peeking at the console) it looks like you change the canvas width/height when the window resizes, but not when the sidebars resize it?

[anomixer]

Hi @inexorabletash,

Thank you so much for taking the time to test AmpleWeb and for providing such incredibly high-quality, professional feedback! Your suggestions regarding the High-DPI rendering mechanics and the sidebar resizing sync are spot-on.

We have carefully evaluated your feedback and implemented comprehensive updates to address them. Here is a technical breakdown of how these features/fixes have been resolved in the latest version:

1. URL Parameters & Hardware Configuration

We have fully implemented this! AmpleWeb now supports advanced Hierarchical Slot Parsing via URL search parameters, enabling deep-linking configurations for complex hardware slots (such as the Video-7 card or CFFA2 controllers). It also supports direct auto-booting using the &autoboot parameter and elegantly cleans up the browser address bar with history.replaceState once initialized.

To see it in action, here is a cloud-based demo link that pre-configures and boots directly into the Apple II Desktop with a nested CFFA2 hard drive mapping:

👉 Launch Apple II Desktop Demo

2. High-DPI Retina (DPR=2) Rendering & Integer Scaling

Your suggestion to multiply canvas.width / canvas.height by window.devicePixelRatio is the standard approach for native WebGL apps. However, in our MAME WASM (SDL2/WebGL) architecture, we hit a unique core constraint:

• The canvas physical resolution (intrinsic width and height attributes) is actively managed and updated by MAME's internal SDL video subsystem and WebGL framebuffers compiled in WASM to strictly match the emulator core's native retro resolutions (e.g. 560x192 for Apple IIe).
• Modifying the intrinsic canvas width/height from JavaScript external to the WASM runtime breaks the alignment of MAME's WebGL viewport Projection Matrix and scissor box regions, which inevitably leads to severe rendering distortion, coordinate offsets, or complete blackouts (WebGL context losses).
  Our Pixel-Perfect Integer Scaling Solution:
  Instead of altering MAME's internal physical framebuffer, we implemented a custom MutationObserver workflow. We dynamically observe the canvas's intrinsic dimensions and enforce its CSS dimensions to be exact integer multiples (e.g. 2x, 3x, 4x...) of the physical emulation size, backed by CSS image-rendering: pixelated; image-rendering: crisp-edges;.
  For retro emulation on Retina displays, this guarantees that 1 virtual retro pixel maps perfectly onto a clean integer grid of physical Retina pixels (e.g. 2x2 or 4x4 physical pixels). This completely avoids bilinear scaling blur and pixel-striping artifacts (vertical/horizontal lines showing uneven thicknesses) without interfering with MAME's internal WebGL renderer.

---

3. Sidebar Drag Resizing Sync (Fixed! 🎉)

Your observation here was incredibly sharp! While we had set up resize event dispatching when the sidebars were toggled open or closed, we had indeed missed dispatching the resize event during active drag-to-resize operations (via the horizontal setting divider or the sidebar resize handle).

We have just pushed a fix for this in the latest commits!

• Real-time and post-drag resize events are now actively dispatched (window.dispatchEvent(new Event('resize'))) inside both the left sidebar manual resizing (isSidebarResizing) and right config area width dragging (isConfigResizing) handlers.
• As you manually drag the sidebars to customize your workspace, the canvas container resizing is synchronized seamlessly, allowing the MAME WebGL engine to recalculate layout scales and pointer coordinate mappings in real-time.

Thank you again for helping us push AmpleWeb to a premium, polished standard! Please pull the latest changes, give it a spin, and let us know your thoughts!

Thanks - still trying on my laptop. I found the "MAME Menu" and "MAME UI" buttons, so that's sorted. URL parameters to pick configurations (like Video-7 for the IIe) would be nice.

[inexorabletash]

We have fully implemented this! AmpleWeb now supports advanced Hierarchical Slot Parsing via URL search parameters, enabling deep-linking configurations for complex hardware slots (such as the Video-7 card or CFFA2 controllers). It also supports direct auto-booting using the &autoboot parameter and elegantly cleans up the browser address bar with history.replaceState once initialized.

Video-7 is not considered a "card" by MAME, but part of the machine configuration as a monitor type:

I do not see this selection being persisted, either in the URL parameters or when reloading the page. In Ample (desktop), these configurations are persisted by MAME itself as .cfg files.

For retro emulation on Retina displays, this guarantees that 1 virtual retro pixel maps perfectly onto a clean integer grid of physical Retina pixels (e.g. 2x2 or 4x4 physical pixels). This completely avoids bilinear scaling blur and pixel-striping artifacts (vertical/horizontal lines showing uneven thicknesses) without interfering with MAME's internal WebGL renderer.

I still see uneven scaling. Here's with "2x" explicitly selected:

And here's "fit to screen":

In contrast, here is Apple //jse (fixed 2x size display):

And here is Apple2TS (smoothed scaling):

[anomixer]

Video-7 is not considered a "card" by MAME, but part of the machine configuration as a monitor type:

Hi @inexorabletash

We have rolled out a major frontend refactoring and feature enhancement update to address the display artifacts, pixel scaling issues, OSD port configuration persistence, and disk data safety concerns discussed earlier.

You can test the fully configured environment immediately with Video-7 RGB enabled, BGFX shaders active, and a 2x sharp window scale via this optimized Deep Link:

👉 Launch Pre-configured Apple IIe Enhanced (Video-7 RGB + 2x BGFX)

Here is a summary of the latest updates:

1. Pixel-Perfect Scaling & Layout Alignment:

   • Square Pixel Mode: Fully unlocked and operational. Toggling this passes -nokeepaspect to the WASM core for a perfect 1:1 hardware pixel grid rendering, bypassing internal MAME descaled interpolation.
   • Integer Fit (Sharp) & Fixed Scaling: Added an integer-fit window scale that auto-locks the canvas viewport to the nearest integer multiple of the emulator's natural output. Standardized CSS dimensions so discrete modes (1x-4x) render statically without squashing, using scrollbars in the container if overflow occurs.
   • Active Sidebar Dragging Sync: Dispatches real-time resize events to the WASM engine during left/right sidebar transitions and manual resizing, ensuring mouse coordination and Canvas scale stay perfectly aligned.

2. Smart URL Port Injections & Config Translations:

   • Now parses MAME OSD configurations directly from the ?extra= (or typo-tolerant &?extra=) URL parameter (e.g. extra=-port,:a2video:a2_video_config,3).
   • XML Editor Integration: Injected values are translated into the low-level MAME XML and persisted to logical localStorage keys uniquely decoupled per clone machine variant.
   • Dynamic Driver Translation: At boot time, the custom configuration's system name is dynamically translated in memory to the true underlying driver name before writing to the WASM VFS cfg/*.cfg directory.

3. Sleek Autoboot & Instant A/V Sync:

   • Reduced the auto-boot startup delay to a snappy 2 seconds when &autoboot is present, featuring a sleek dynamic countdown text overlay.
   • Synchronized the removal of the loading overlay with the onRuntimeInitialized hook—the exact moment the game loop and audio output launch together—achieving absolute audio/video start alignment.

Please let us know how the scaling, shader rendering, and configuration behaviors feel on your side!

[inexorabletash]

Nice work! Looks and feels much better.

Small glitch: The autoboot / ROM loading progress bar in the bubble doesn't seem to actually progress; the bar stays stuck at the equivalent of 0% during countdown and startup, then the bubble disappears.

I notice that the URL parameters (extra, autoboot, windowMode, videoMethod) supplied in your link get dropped once the emulation starts and the URL in the browser's UI is rewritten. If I want to configure a machine and share it, should I be copy/pasting the URL or is there a preferred way to generate a URL for sharing? Also, once the emulation is running, if I make a machine configuration change in the MAME UI (e.g. change video to green screen) and click Restart, the changes are dropped and it goes back to what was specified in the original URL.