BeebEm now in WebAssembly (in-browser)
BeebEm now in WebAssembly (in-browser)
Working on WebAssembly quite a bit here and thought that a BeebEm port would make a good project to show what's possible in recent browsers.
I've taken the 0.0.13 version of BeebEm for Unix, updated it to use SDL2 rather than SDL1.2 and built a WebAssembly binary with the Emscripten tools. The process was reasonably straightforward - the main addition was adding a way to pull in disc images from the web (currently using a ?disc1=http://some/disc/image.ssd query string in the url when loading).
Testing seems to be not too bad - sound is a bit glitchy, but I get a solid 50fps at 1x speed. Memory usage is around 130 MB in Chrome.
The source is here : https://github.com/rhys101/beebem-wasm
and you can try it out here : https://beeb.webassembly.link/
Same keyboard layout as beebem - F12 for the menu (fn-F12 on a Mac). Needs a bit more work, but it's a start.
--Rhys
I've taken the 0.0.13 version of BeebEm for Unix, updated it to use SDL2 rather than SDL1.2 and built a WebAssembly binary with the Emscripten tools. The process was reasonably straightforward - the main addition was adding a way to pull in disc images from the web (currently using a ?disc1=http://some/disc/image.ssd query string in the url when loading).
Testing seems to be not too bad - sound is a bit glitchy, but I get a solid 50fps at 1x speed. Memory usage is around 130 MB in Chrome.
The source is here : https://github.com/rhys101/beebem-wasm
and you can try it out here : https://beeb.webassembly.link/
Same keyboard layout as beebem - F12 for the menu (fn-F12 on a Mac). Needs a bit more work, but it's a start.
--Rhys
- Matt Godbolt
- Posts: 181
- Joined: Mon Jul 31, 2006 10:02 am
- Location: Chicago
- Contact:
Re: BeebEm now in WebAssembly (in-browser)
Wow! Super cool! How does one configure the keyboard - I couldn't work out how to get BREAK to work?
Re: BeebEm now in WebAssembly (in-browser)
BREAK is mapped to the Break key currently - I'll need to update to use a friendlier layout! Will see if I can get the standard right-cmd+F12 keys etc to work.
Re: BeebEm now in WebAssembly (in-browser)
I've just updated the map so that the Delete key also maps to BREAK.
So on a Mac the combination fn-Backspace will BREAK and shift-fn-Backspace will !BOOT
So on a Mac the combination fn-Backspace will BREAK and shift-fn-Backspace will !BOOT
- richmond62
- Posts: 229
- Joined: Sun Apr 16, 2017 3:15 pm
- Location: Bulgaria
- Contact:
Re: BeebEm now in WebAssembly (in-browser)
I have about 12 Macintosh keyboards of various vintages to hand and I cannot work
out what you mean by "fn".
I normally use a 2001 iMac keyboard that has 15 F keys, and sometimes I use
a 2010 keyboard that has 16 F keys.
Neither of these has anything marked "fn".
out what you mean by "fn".
I normally use a 2001 iMac keyboard that has 15 F keys, and sometimes I use
a 2010 keyboard that has 16 F keys.
Neither of these has anything marked "fn".
Re: BeebEm now in WebAssembly (in-browser)
Drats - it was based on a quick re-map I did on a macbook air that I have here - sorry about that. I have a Mac desktop keyboard at work, so will be able to check and update later tomorrow.
Normally for the Mac laptop-based keyboards, fn is the bottom left key where present - on the desktop keyboards some models have it in the navigation cluster above the arrows (under the f13 I think). For these desktop keyboards however, the Delete key should work directly as Break, so worth giving that a go.
Normally for the Mac laptop-based keyboards, fn is the bottom left key where present - on the desktop keyboards some models have it in the navigation cluster above the arrows (under the f13 I think). For these desktop keyboards however, the Delete key should work directly as Break, so worth giving that a go.
- richmond62
- Posts: 229
- Joined: Sun Apr 16, 2017 3:15 pm
- Location: Bulgaria
- Contact:
Re: BeebEm now in WebAssembly (in-browser)
My wife's MacBook Air laptop has an fn key . . . but that is not every Macintosh.
Re: BeebEm now in WebAssembly (in-browser)
It is the usual thing. iMac keyboards have had the ‘fn’ for a decade, but yours are a little older.richmond62 wrote: ↑Sun Jun 10, 2018 6:18 pmMy wife's MacBook Air laptop has an fn key . . . but that is not every Macintosh.

Edit: checked and manufacture date of keyboard was 2007.
- richmond62
- Posts: 229
- Joined: Sun Apr 16, 2017 3:15 pm
- Location: Bulgaria
- Contact:
Re: BeebEm now in WebAssembly (in-browser)
OK: I went to the System Prefs. thingy in Mac OS 10.7.5 and turned off all the F-keys mods.
Now I'm up queer street as the '=' (among others) key does not line up with the '=' on the Macintosh keyboard.
Now I'm up queer street as the '=' (among others) key does not line up with the '=' on the Macintosh keyboard.
Re: BeebEm now in WebAssembly (in-browser)
I do remember years ago remapped all the F key due to Acorn Emulators on Mac. I think it was mainly mission control stuff I moved.
I also use Flour utility to auto switch fn mode.
I also use Flour utility to auto switch fn mode.
Re: BeebEm now in WebAssembly (in-browser)
This is quite cool, but I can't find any way to add / change ROMs. Is this possible?
Re: BeebEm now in WebAssembly (in-browser)
Sure - I've now added a way to load ROMs into the emulator from the URL parameter - it uses the ?bbcromd=https://bla format.
I've linked a few examples from the roms at http://mdfs.net/ (if that's ok) - e.g.:
Pascal
Lisp
More details at https://beeb.webassembly.link and code updated on github too.
I've linked a few examples from the roms at http://mdfs.net/ (if that's ok) - e.g.:
Pascal
Lisp
More details at https://beeb.webassembly.link and code updated on github too.
Re: BeebEm now in WebAssembly (in-browser)
Awesome. Thank you. I'll try it out tomorrow.
Re: BeebEm now in WebAssembly (in-browser)
Ok, a couple of quick questions:
1. Is it possible to load multiple ROMS? I tried the following, but it didn't seem to work:
https://beeb.webassembly.link/beebem.ht ... APASCAL100
Not sure if I have the format correct.
2. Is it possible to load these ROMS into any of the other machine types, other than the default BBC B? When, for example, I select the BBC+IntegraB (from the F12 / System menu), all the ROMS appear to get reset.
3. Can I only load ROMS into banks C & D using the '?bbcromx=' command? I've tried some other banks, but they don't seem to work. Also, would it be possible to use the '?bbcromx=' command to overwrite the default file system and language ROMS that are loaded with something different?
Edit1: So, I've just answered my first question. I need to use '&' instead of '?' for the subsequent ROMS:
https://beeb.webassembly.link/beebem.ht ... APASCAL100
Edit2: And I see from your readme that only banks C & D are passed right now. Hopefully you'll be able to add all 16 banks at a later date.
1. Is it possible to load multiple ROMS? I tried the following, but it didn't seem to work:
https://beeb.webassembly.link/beebem.ht ... APASCAL100
Not sure if I have the format correct.
2. Is it possible to load these ROMS into any of the other machine types, other than the default BBC B? When, for example, I select the BBC+IntegraB (from the F12 / System menu), all the ROMS appear to get reset.
3. Can I only load ROMS into banks C & D using the '?bbcromx=' command? I've tried some other banks, but they don't seem to work. Also, would it be possible to use the '?bbcromx=' command to overwrite the default file system and language ROMS that are loaded with something different?
Edit1: So, I've just answered my first question. I need to use '&' instead of '?' for the subsequent ROMS:
https://beeb.webassembly.link/beebem.ht ... APASCAL100
Edit2: And I see from your readme that only banks C & D are passed right now. Hopefully you'll be able to add all 16 banks at a later date.
Last edited by KenLowe on Wed Aug 08, 2018 8:38 am, edited 2 times in total.
Re: BeebEm now in WebAssembly (in-browser)
Yes, it's a minimal test at the moment - I'll expand so that the other banks can be specified and also add a machine-type flag as well in the url query string. It's all already there in the beebem source, just needs to be exposed through the WebAssembly link layer.
I should then put a better front-end so that these can be easily set rather than hand-typed in the address bar!
I should then put a better front-end so that these can be easily set rather than hand-typed in the address bar!