Please consider publishing / creating a guide to embed JSBeeb emulators in websites

[ntoll]

Hi,

As a British child of the 1980s, I learned to code on a BBC B, and I wouldn't have become a professional programmer without those first experiences.

Context: I've found my old disks full of software created by my 11yo self. I'm visiting TNMOC on Saturday to work with their Acorn team to extract the contents of those disks. I'd like to blog about what I find, and if possible, embed BBC emulators inside my blog so folks could run my goofy code fragments as they read along. Clearly JSBeeb is the way to go, and I've poked around this and related projects to see how you do it.

Basically, I'm fishing for guidance and/or docs for how to embed the emulator in a static website (I could work this out from your own pages, but I'll be reverse engineering and will likely miss things or get the wrong end of the stick). I honestly think quite a number of folk will find such a guide really helpful for spreading the BBC micro love/nostalgia. ;-)

In an ideal world, the instructions would be something as simple as:

• Download or CDN link to these static JS files in your HTML: a.js, b.js, c.js
• Ensure you have linked these static CSS files: a.css, b.css
• Create a div with the id emulator (or something equivalent)
• For multiple emulators on a single web page, do X, Y and Z.
• ???
• Profit..!
• PS: to add LEDs use a div with the id leds
• PPS: to automatically load a disk in an emulator instance, do x, y and z.
• PPPS: to toggle the CUB monitor, set the flag foo=bar in ???

I'm not really a JavaScript coder and would rather not get entangled in npm or node. Rather, as you can see, the ideal solution for me would be a bunch of simple static files I can reference in HTML along with some configuration guidance to embed emulators running specific code/disk images.

Quite understand if no answer is forthcoming: busy people are, after all, busy. But if I don't ask or mention, how are you to know folks might be interested in this sort of fun..? ;-)

In any case, thank you for your work and efforts on the emulator, it's really magnificent work. Warmest of best wishes.

[ribbons]

I'd also be interested in something along these lines for https://8bs.nerdoftheherd.com/ - I'm currently embedding an <iframe> to jsbeeb which works okay-ish but is a bit fragile. I'd love to be able to reference a script file and then create a jsbeeb instance programmatically but I've held off from suggesting it previously as I didn't really have the time to dedicate to it 😄.

[mattgodbolt]

Thanks for the suggestion! I recently changed how jsbeeb "builds" (like, it now actually does build!) and so this is a great time to ensure it plays well for embedding! I'll put this nearer the top of my todo list :)

[ntoll]

Thank you for taking a look at this. If you need testers, please don't hesitate to reach out.

[ntoll]

More context... here's an example of the sort of thing I want to be able to embed (enjoy!):

https://bbc.godbolt.org/?&disc1=https://ntoll.org/static/bbcdiscs/music.ssd

(My 13-14yo self naively coded up "the Swan" and "Road goes Ever On") 🙂

I've plenty of disc images like this, and I'd love to blog about my findings and embed JSBEEB.

[mattgodbolt]

If putting an iframe in your site is feasible, then an easy(ish) way is to "just" iframe it in!

<iframe 
    src="https://bbc.godbolt.org/?&disc1=https://ntoll.org/static/bbcdiscs/music.ssd&autoboot"
    width="800" height="600"
/>

(or something like that; you can style the iframe with CSS).

Making it "simple" to mix and match HTML components is trickier as it would mean me hardcoding and treating certain HTML elements as being fixed. And there's a lot (check out how big the HTML document is! Lots of widgets etc).

But it's not unreasonable to consider making it slightly better; it's tricky without getting in to npm/javascript as jsbeeb is now more "built" from components.

[mattgodbolt]

@ntoll did you try looking at the iframe "solution" - it's the one most likely to stay working.

[ntoll]

@mattgodbolt hi, yes, sorry. I meant to say, but have been busy writing up the blog post.

The iframe based solution you suggest works perfectly. My only suggestion being that it's included in the docs somewhere obvious so others understand the "blessed" solution for embedding the emulator into a website.

I'll ping over the blog post when it's finished. I'm just waiting on some commentary from one of the authors of the software I'm discussing. I managed to track them down, much to their surprise and delight... they thought their code was lost in the mists of time!

Thanks again for JSBEEB... honestly, so many wonderful memories. :-)

[ribbons]

@ntoll - just a heads up that Matt kindly merged a PR of mine yesterday which means if you add the parameter 'embed' to the jsbeeb url in an iframe it now makes the BBC screen as large as possible within it and makes the page background transparent (so the background of the parent page is used instead). Just in-case you find either of those useful 👍

[ntoll]

@ribbons / @mattgodbolt this is great... I'm still working on my BBC micro related blog post ("real work" ™️ in the shape of a new job has been taking up rather a lot of my time, but I hope to get to it very soon - over my summer holidays). I'll link to it when it's done.

Thank you so much for the heads up..! 👍

[mattgodbolt]

We're now pretty "sensibly" embedded in bbcmicro.co.uk and we have the "embed" thing too. I hope this is "good enough" but if not, please ping and we can work on it!