Login

James D Jarvis · 04-19-2025, 12:55 PM

So is it possible to place a QBJS program and have it run from a webpage (assuming the viewers web browser supports it.) ?

If so, how?

Or is there a link scheme that allows the reader of the page to run the program by clicking on a link?

dbox · 04-19-2025, 08:22 PM

The short answer is yes. You can use the export feature to generate a standalone html/js version of your program. The easiest way to include it into an existing html page would be via an iframe. When I have a little time later I’ll put together an example.

James D Jarvis · (This post was last modified: 04-20-2025, 01:13 AM by James D Jarvis.)

thank you. An example would be appreciated. I've slipped in little javascript routines on blog posts in the past and would love to be able to put my basic skills to use.

dbox · 04-21-2025, 01:54 PM

(04-20-2025, 01:13 AM)James D Jarvis Wrote: thank you. An example would be appreciated. I've slipped in little javascript routines on blog posts in the past and would love to be able to put my basic skills to use.

Here is a quick little step-by-step guide for including a QBJS program into an existing web page.

Once you've got your program complete and tested in the QBJS IDE, you can export your work by launching the Share/Export window from this toolbar button:

Filename: share.png Size: 2.34 KB 04-21-2025, 01:34 PM

Then, select either the Play or Auto option which will enable the Export button:

Filename: export.png Size: 27.15 KB 04-21-2025, 01:34 PM

This will download a zip file containing the compiled version of your program. This file will contain an index.html from which your program can be launched as well as the compiled javascript version of your program and all of the supporting JS libraries.

For this example, I followed the steps above for both the Goldwave program and Simple Web Calculator that are out on the QBJS Samples site, saving each to the desktop as golwave.zip and calculator.zip, respectively. Then I extracted them to a sample directory and created a simple home.html. In this file I included the two programs by referencing them in an iframe, as shown below:

Code: (Select All)
<html>

    <head>

        <style>

        div { display: inline-block; vertical-align: top; margin-right:20px; margin-bottom: 20px }

        </style>

    </head>

    <body>

        <h1>Sample Page</h1>

        Here's a simple example of how you can embed QBJS programs into an existing web page.

        The following were exported from programs on the 

        <a href="https://boxgaming.github.io/qbjs-samples" target="_blank">QBJS Samples</a> site.<br>

        <br><br>

        <div>

            <b>Goldwave</b> by bplus<br>

            <iframe width=640 height=480 src="goldwave/index.html"></iframe>

        </div>

        <div>

            And here's a second example of a simple web-based calculator made in QBJS:<br>

            <iframe width=502 height=453 style="border:1px solid #ccc" src="calculator/index.html"></iframe>

        </div>

    </body>

</html>

The resulting page looks like this:

Filename: sample-page.png Size: 37.78 KB 04-21-2025, 01:34 PM

You can see the effects of the two different export options in the screenshot above. The Goldwave program was exported with the "Play" option and will not start executing until the user clicks the Play button. The Simple Web Calculator was exported with the "Auto" option and will begin execution as soon as the page loads.

You can try out this example yourself by downloading the attached sample.zip file, extracting it on your filesystem and then opening the home.html file in your browser.

James D Jarvis · (This post was last modified: 04-22-2025, 12:50 AM by James D Jarvis.)

I found out on windows-11 the zip files are not properly being decompressed. But if extracted with 7-zip the exported files work fine.

Got another related question:

Can you pass variable/arguments from one QBJS program to another using JavaScript assuming of course they are both being called from the same HTML wrapper? (not sure If I'm saying that right as my JavaScript knowledge is weak at best)

dbox · 04-22-2025, 07:47 PM

(04-22-2025, 12:50 AM)James D Jarvis Wrote: Can you pass variable/arguments from one QBJS program to another using JavaScript assuming of course they are both being called from the same HTML wrapper? (not sure If I'm saying that right as my JavaScript knowledge is weak at best)

There are a number of ways to do this. I think one of the simplest might be to leverage the browser's local storage. There is a simple QBJS API for getting and setting local storage values.

To demonstrate this, I put together another simple example with two programs. The first represents our very simple game which is listening for mouse clicks and then saving the score to a local storage value:

Code: (Select All)

Import Storage From "lib/web/storage.bas"

Dim score As Integer

Storage.Set "GAME_SCORE", score



Screen _NewImage(190, 120, 32)

Locate 4, 3

Print "Click here to play!"



Do

    While MouseInput: Wend

    If MouseButton(1) Then

        score = score + 1

        Storage.Set "GAME_SCORE", score

    End If

        

    Limit 10

Loop

The second program just queries the same local storage value and prints it to the screen:

Code: (Select All)

Import Storage From "lib/web/storage.bas"

Dim score As Integer

Storage.Set "GAME_SCORE", score



Screen _NewImage(190, 120, 32)

Locate 4, 3

Print "Click here to play!"



Do

    While MouseInput: Wend

    If MouseButton(1) Then

        score = score + 1

        Storage.Set "GAME_SCORE", score

    End If

        

    Limit 10

Loop

The result looks something like this:

Filename: sample2.png Size: 19.74 KB 04-22-2025, 07:25 PM

You can try it out with the attached sample2.zip.

**SMcNeill** · 04-22-2025, 08:30 PM

Question with this local storage -- does it reset/clear when the browser clears it cache?

The reason I ask is because of the stupid iPad. It saves data to local storage, which lasts for a few days, but then disappears at a browser/OS update and cache reset. Even doing a full reboot/power off/on cycle can erase that local storage on an iPad.

I haven't noticed the issue on my Win 11 PC or laptop, but iPad sucks with it.

dbox · 04-22-2025, 10:08 PM

(04-22-2025, 08:30 PM)SMcNeill Wrote: Question with this local storage -- does it reset/clear when the browser clears it cache?

The reason I ask is because of the stupid iPad. It saves data to local storage, which lasts for a few days, but then disappears at a browser/OS update and cache reset. Even doing a full reboot/power off/on cycle can erase that local storage on an iPad.

I haven't noticed the issue on my Win 11 PC or laptop, but iPad sucks with it.

Hrm, not sure what might be going on there. In general the local storage should not be deleted just because the system is restarted. The only exception to this that I am aware of is if you are using local storage in a private/incognito browser tab. The local storage data will be deleted when the last private browser tab is closed.

**SMcNeill** · (This post was last modified: 04-23-2025, 05:34 AM by SMcNeill.)

(04-22-2025, 10:08 PM)dbox Wrote:
(04-22-2025, 08:30 PM)SMcNeill Wrote: Question with this local storage -- does it reset/clear when the browser clears it cache?

The reason I ask is because of the stupid iPad. It saves data to local storage, which lasts for a few days, but then disappears at a browser/OS update and cache reset. Even doing a full reboot/power off/on cycle can erase that local storage on an iPad.

I haven't noticed the issue on my Win 11 PC or laptop, but iPad sucks with it.
Hrm, not sure what might be going on there. In general the local storage should not be deleted just because the system is restarted. The only exception to this that I am aware of is if you are using local storage in a private/incognito browser tab. The local storage data will be deleted when the last private browser tab is closed.

Here's where someone made a git report about the issue and what they think is going on with it: https://github.com/processing/p5.js-web-...ssues/3182

Quote:After some research, I suspect that the issue arises due to the sketch being contained in an <iframe> Tag (preview.p5js.org) and the local storage object being stored in the browser under that subdomain. The local storage being cleared after a browser reset is likely a WebKit security measure to prevent third party tracking ("Intelligent Tracking Prevention" https://webkit.org/blog/7675/intelligent...revention/). One solution could be to store and access the local storage object under the domain editor.p5js.org. But this exceeds the scope of my understanding.

Note 2: Safari and iPad erases *all* browser storage after seven days of it being unvisited. That's another of their security features they pushed on the public a while back to protect us all from ourselves. /sigh. Makes a real PITA with some of the html5 browser games. Take a break, start over...

dbox · 04-23-2025, 05:20 PM

(04-23-2025, 05:31 AM)SMcNeill Wrote: ...

Quote:After some research, I suspect that the issue arises due to the sketch being contained in an <iframe> Tag (preview.p5js.org) and the local storage object being stored in the browser under that subdomain. The local storage being cleared after a browser reset is likely a WebKit security measure to prevent third party tracking ("Intelligent Tracking Prevention" https://webkit.org/blog/7675/intelligent...revention/). One solution could be to store and access the local storage object under the domain editor.p5js.org. But this exceeds the scope of my understanding.

Note 2: Safari and iPad erases *all* browser storage after seven days of it being unvisited. That's another of their security features they pushed on the public a while back to protect us all from ourselves. /sigh. Makes a real PITA with some of the html5 browser games. Take a break, start over...

This is why we can't have nice things!

I typically don't use local storage for anything too important, user preferences, things like that. In the example above it was just being used as a simple mechanism for communication between different QBJS apps that have been included into a parent page via iframes. You can actually see that the storage value is cleared each time the page is loaded.

Login
Username/Email:
Password:	Lost Password?
	Remember me