Jump to content
IGNORED

Embedding 6502.ts in other webpages


DirtyHairy

Recommended Posts

As I am going to use it for another project (http://atariage.com/forums/topic/266415-2600-homebrew-for-showcasing-on-our-website/), I am planning on adding an interface for embedding 6502.ts in other webpages. Before going ahead and deciding on an API, I wanted to ask if anybody else is interested in this and, if yes, whether you have any particular suggestions how the interface should look like and what options it should provide :)

 

The basic setup I have in mind is a Javascript library that you load on your webpage and that gives you access to the emulator as a library. You have to include a canvas element on your page; then you start the emulator with a cartridge image and a bit of configuration, and you're set. However, the details are still variable. Is anybody else interested in using this?

  • Like 2
Link to comment
Share on other sites

I've a few pages on my site, like Homebrews Online, that use JStella; though it hasn't worked in a while (probably due to browser changes and /or security settings).

 

When it worked it was pretty slick - all the buttons on Artie the Atari were functional. When it was powered off you could change the game, at which point the game the instructions below Artie would also be changed.

 

It'd be nice to get that working again :)

  • Like 1
Link to comment
Share on other sites

I've a few pages on my site, like Homebrews Online, that use JStella; though it hasn't worked in a while (probably due to browser changes and /or security settings).

 

When it worked it was pretty slick - all the buttons on Artie the Atari were functional. When it was powered off you could change the game, at which point the game the instructions below Artie would also be changed.

 

It'd be nice to get that working again :)

 

I just took a look; I think hooking up 6502.ts should be no issue (with the only catch that the keybindings are different and cannot be configured atm ;) ). I'll post here once I come up with a first version of the embedding API, then we can see whether this works for you (or make any necessary changes).

Link to comment
Share on other sites

  • 6 months later...

It has been a while, but I finally have a embedded version of Stellerator running :) The full documentation (including API docs) is available here, but I'll add a few remarks here anyway:

 

  • Check out the example page and its source to get started. The emulator instance is exposed as windows.stellerator, so you can open the developer tools and play with it.
  • There are two scripts that you have to download and host alongside your web page. One needs to be loaded via a script tag, the other (the web worker) is loaded by the emulator at runtime. You can grab the scripts from the Github releases page.
  • If you have a javascript application with a dedicated build process, you can also grab the module from NPM and include it in your build. Note that you still have to host the web worker script.
  • The emulator runs fine in recent versions of Chrome, Firefox and Safari. Edge works but currently has severe performance issues.

If you try this out and encounter any issues or have suggestions on how to improve the documentation, please comment in this thread or open an issue on GitHub.

Edited by DirtyHairy
  • Like 3
Link to comment
Share on other sites

Great, I'll see about updating my site to use it.

 

Have you solved the issue with joystick controls in iOS yet? Last time I tried it (Sunday the 7th) they were still inverted.

 

 

Great, drop me a note if you encounter any issues.

 

I have not yet done anything on the gamepad issue. However, I have thought that I could include a set of nonstandard mappings for known combinations of controller / OS. I'll drop you a note when I get to adding this, I'll need some information about the gamepad's ID and the data the browser identifies itself with :) I also want to grab one of our company test devices these days and check out the audio issues on iOS.

Edited by DirtyHairy
Link to comment
Share on other sites

Just a short followup on iOS audio: I found some time to snatch a test device and fiddle with it before leaving work today. I still need some testing and polishing, but I have a workaround and will publish an update this weekend. However, it will still require a touch anywhere on the page before playing audio, that's what is enforced by Apple.

 

I tested an iPhone 6s must say that I was very impressed by how smooth they emu runs --- the interface remains silky smooth, and I didn't get a single audio dropout. No way to compare this to android where the interface jerks and I couldn't get more then one second of sustained full speed ;) I'll also add fullscreen by tapping to Stellerator and fix interface on mobile, and will be looking at touch controls soon.

Edited by DirtyHairy
  • Like 1
Link to comment
Share on other sites

I just published 0.9.8. It includes the promised iOS audio fix: audio starts once you tap anywhere on the display (this is unavoidable and enforced by Apple). In addition, I have made changes to the Stellerator UI to display properly on phone-sized devices.

 

However, I have excluded click-for-fullscreen for the time being as I had to find out that iOS does not support the HTML5 fullscreen API :roll: . I have hacked around this by displaying the canvas element above everything else, but the browser toolbar will still interfere. This is a known problem on iOS, and there is not much that can be done about it. I think it will still work sort-of fine once I have touch support (at the expense of manually scrolling the display to remove the toolbar), but there is not much point before that. I'll also add support for adding Stellerator as a home screen application, which will also get rid of the toolbar if it is launched that way :P .

 

Speaking of touch, I think I have finally come up with an input scheme that might be practical for actual gaming (that's what has been keeping me from working on this so far). I have started the implementation, but it may still take some to to be ready for prime time.

Edited by DirtyHairy
  • Like 1
Link to comment
Share on other sites

  • 1 year later...

It has been a while, but I finally have a embedded version of Stellerator running :) The full documentation (including API docs) is available here, but I'll add a few remarks here anyway:

Ran across this tweet with javatari running in a model 3

 

https://twitter.com/ManuelPazosMSX/status/1131824395582877698

 

So decided to try your demo

 

post-3056-0-20965100-1559314347_thumb.jpg

 

Appears to be running, but I couldn't figure out how to get it to play. Will look into it more this weekend.

  • Like 1
Link to comment
Share on other sites

Appears to be running, but I couldn't figure out how to get it to play. Will look into it more this weekend.

 

 

Pretty cool :) Now if they only exposed an API to query the steering wheel in JS --- would lend itself nicely to pole position. Out of curiosity: do you hear audio?

 

If Tesla supports the JS touch API in their browser (which I guess is based on webkit), you should be able to use the touch controls to play.

Edited by DirtyHairy
Link to comment
Share on other sites

I tried copying the source and put it on a new page atari_draconian.html. Despite the page name, that should load up FlapPing.

 

 

I FTPed the files to my site as:

htdocs/atari_draconian.html

htdocs/js/compiled/stellerator_embedded.min.js
htdocs/js/compiled/stellerator_embedded.min.js.map

htdocs/js/compiled/worker/stellerator_worker.min.js
htdocs/js/compiled/worker/stellerator_worker.min.js.map

 

I get this warning:

post-3056-0-86073700-1559343964_thumb.png

 

and these errors:

post-3056-0-29427300-1559343969_thumb.png

Link to comment
Share on other sites

Your web page works for me, I see FlapPing running happily. Maybe a caching issue? You can ignore the webaudio warning, it is a harmless Safari issue. You can ignore any errors about the .map files, too, those are for debugging only (they are similar to debug symbols).

 

post-47984-0-38855400-1559345045_thumb.png

Edited by DirtyHairy
  • Like 1
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...