ProjectABE iFrames are in BETA!

We all love the emulator that @fmanga has built and now with a dev kit will try to add support for the FX chip. This thread can be used for all things related to the ProjectABE.

My contribution right now is that I have enabled iframe to support the use of ProjectABE in the forum.

THIS IS A BETA TEST PLEASE DONT PUBLISH IN THE PUBLIC SECTION YET

The code for doing it:

<iframe class="pabe" src="https://felipemanga.github.io/ProjectABE/?url=https://github.com/felipemanga/PodManager/releases/download/v0.1.0/FormulaPOD.hex?skin=BareFit"></iframe>

In mobile (resolutions less than 800px):
256x128, tapping on the emulator will load the full screen emulator with buttons

In desktop:
512x256, clicking on the emulator will take focus and allow you to use the arrow keys and CTRL + ALT

You CANNOT get this custom CSS by manually generating the iframe, you must upload a hex file to get the full functionality described within.

Issues:

The arrow keys still perform their default action and scroll the page. Fixed!
Replacement script needs to run as page loads and unloads content dynamically as user scrolls
(without crashing the browser)

Improvements:

Use CSS to make the frame look pretty.
Get rid of the gray “3d” border.
Center the iframe?
Give it Arduboy branding?

3 Likes

The html code that seems to solve the arrow key problem is:

<script>
window.addEventListener("keydown", function(e) {
    // space and arrow keys
    if([32, 37, 38, 39, 40].indexOf(e.keyCode) > -1) {
        e.preventDefault();
    }
}, false);
</script> 

However I think @FManga will need to implement that on his page. I’m also going to try targeting the DOM element of the iframe but it is probably better if it is done on the emulator page, solves the problem for anyone else trying to use the emulator too.

I fixed the scrolling issue and pressing Esc no longer exits the game if a direct link to a hex is used.
(you might need to clear the browser cache to see the changes)

2 Likes

You are a glorious and wonderful person! Thank you! I’m gonna work on making it pretty for the forum now and try to make the iframe generate whenever there is a .hex link.

Only thing I can think, do we like this resolution or do we want to go more bigger?

384x192
image

512x256
mystic_balloon

Let me know your feedback!

@FManga would it be super hard to have a skin that draws the canvas 100% width and height of the frame?

1 Like

You mean BareFit?

1 Like

download

I just played ARDdriving for like a minute.

2 Likes

That’s the problem with coding emulators: you run for a quick test and next thing you know you’ve overtaken 30 cars on the fifth try. :stuck_out_tongue:

1 Like

Feature Request: Can you make the background black so that if the aspect for some reason is off, that it will be hidden and not show gray letterbox?

Importance: Low

Status: 512 is great for desktop, but will need 256 for mobile, so I’m trying to build some responsive CSS for that. I have automatic hex recognizing working too. So now it’s just making it look pretty.

Wait, it won’t work for mobile anyways you need buttons. Well, I guess I kind of want it to render nicely anyways. I guess there will be an embedded link to take you to the full screen emulator then.

This looks so awesome.

@FManga When you are ready to add FX support to ProjectABE and have questions, don’t hesitate to ask them! here or in PM

Feature Request: Have the emulator detect if it is being run in mobile, and if the user touches on the canvas then it will link to the full emulator.

Importance: Medium

I think this is the relevant Stack Overflow:

13 posts were split to a new topic: ProjectABE FX Integration

Dude @FManga this is SO GOOD. People are going to LOSE THEIR MINDS when they see I update all the forum posts they can just click right on the game and start playing it.

It’s like how pico8 works now!

Yeah, you’ll have to write something to push the bits into the virtual eeprom chip.

UPDATE: I’m so excited to make a little Arduboy icon and branding “Arduboy Emulator by FManaga” on top. But I have to eat food, because I have not yet finished uploading my consciousness to the mainframe yet stuck in this meat space.

3 Likes

Anyone know about jQuery, I haven’t messed with this in a few years and I’m having problem with scope declaration:

var createABE = function(){
    $(".attachment").filter(function(){
        return $(this).attr("href").match(/\.(hex)$/i);
    }).before("<div>Arduboy Emulator by FManga<iframe class='pabe' src='https://felipemanga.github.io/ProjectABE/?url=" + $(this).attr("href")  + "?skin=Bare2x2'></iframe>" + $(this).attr("href") + "</div>");
}

In this scope $(this).attr(“href”) is undefined and I’m not really sure how to progress without starting over and starting over trying to think about how this actually works.

I’ve hit a wall on this so I’ll take a break and come back to it tomorrow with a fresh head hopefully someone has some ideas maybe.

$(".attachment").filter(function(){ return $(this).attr("href").match(/\.(hex)$/i); }).each(function(){ $(this).before("<div>Arduboy Emulator by FManga<iframe class='pabe' src='https://felipemanga.github.io/ProjectABE/?url=" + $(this).attr("href")  + "?skin=Bare2x2'></iframe>" + $(this).attr("href") + "</div>"); })

Looks like the .each is what I needed?

Yup, otherwise “this” refers to the window instead of each element you want to process.

1 Like

I figured as much, haven’t touched jquery in years. I used to be able to do anything with jqery, php and sql. ANYTHING.

1 Like

Well I have the iframe code and conversion and it’s pretty but now I have to battle the way the forums dynamically load and unload content. I’ve got a method that can capture every time the page is updated and then look for the iframe, but last time I did that and scrolled really fast it crashed my browser so I need to figure that one out next.

I just seperated the thread for the actual software development section of the emulator from the web development.

This is the web development section.

I think we are ready to go! If someone wants to drag and drop a hex file into this thread and see how it goes? Beta testers activate.

2 Likes