+- QB64 Phoenix Edition (https://staging.qb64phoenix.com)
+-- Forum: QB64 Rising (https://staging.qb64phoenix.com/forumdisplay.php?fid=1)
+--- Forum: QBJS, BAM, and Other BASICs (https://staging.qb64phoenix.com/forumdisplay.php?fid=50)
+--- Thread: BAM: How to embed your program in a web page (/showthread.php?tid=1097)
BAM: How to embed your program in a web page - CharlieJV - 11-10-2022
Create your program in BASIC Anywhere Machine.
Once you're happy with your development version, promote it to production (if you want).
Go to the Project menu, and click on Export.
In the Export Options window, click on either Program Deployment (DEV) or Program Deployment (PROD) (to create either a deployment file for the development version of your application or the production version of your application.
Take the HTML file and upload it to your web server/site. If you just want to share that program as is, share the URL link to that HTML file.
To embed your in-the-one-HTML-file program in any website, do like I'm showing below for this program I have hosted on the web:
Code: (Select All)
<iframe src="https://basicanywheremachine.neocities.org/sample_programs/Rotating%204D%20cube.prod.run.html" style="width:500px;height:400px;"></iframe>![[Image: Screenshot-2022-11-10-2-57-37-PM.png]](https://i.ibb.co/Hqmb1tJ/Screenshot-2022-11-10-2-57-37-PM.png)
RE: BAM: How to embed your program in a web page - vince - 11-10-2022
Nice, it's good to have a condensed link option along with embeds. I'm hoping QBJS may get something similar (perhaps to trusted users) otherwise I think it can run an external BAS file which you upload elsewhere -- what's the procedure for that anyway?
My issue is: say I want to share a QB program with a non-QBer, I either have to send a 20 page QBJS URL which is probably a virus or have to explain what in the world is Steve's Turbo64 Peacock Edition to run a simple BAS file.
RE: BAM: How to embed your program in a web page - Pete - 11-10-2022
using iframe is a fun way to run other sites or projects at a page on your website, but for anyone who isn't already using this feature, and most don't, I highly recommend you look into the impact it will have on your Page ranking (SEO stuff). Pros and cons. If ranking isn't important to you, just do it. It's pretty cool. If ranking is very important to you, look into some SEO articles, first.
To Vince's point, use of iframe on your site requires some vigilance. Also pick a trusted source as unlike links, with iframes the activity opens directly on your site when the page loads. Take for example when QB64 dot net wasn't renewed, and another party bought the domain name. We got a warning from Rob the new site owner was using the site collect personal data. So if I had an iframe set to display what used to be trusted material from that site, oops, possibly now I'm just an accomplice to passing on some sort of malicious activity. Let me just say all this would be very rare, but the point is, it's possible.
Personally I like the display iframe can bring to a page. It is very much like embedding a video. No need to keep traveling from site to site, and no different than knowing a video can be edited or changed out without your immediate knowledge.
Pete
RE: BAM: How to embed your program in a web page - CharlieJV - 11-10-2022
(11-10-2022, 07:20 PM)vince Wrote: Nice, it's good to have a condensed link option along with embeds. I'm hoping QBJS may get something similar (perhaps to trusted users) otherwise I think it can run an external BAS file which you upload elsewhere -- what's the procedure for that anyway?
My issue is: say I want to share a QB program with a non-QBer, I either have to send a 20 page QBJS URL which is probably a virus or have to explain what in the world is Steve's Turbo64 Peacock Edition to run a simple BAS file.
Yeah, I'm pretty fussy about all the bits and pieces in the software development cycle, whatever the size of the project, even if just a small BASIC program.
That's why everything that is BASIC Anywhere Machine and is created with BASIC Anywhere Machine exists in that one HTML file.
To just share the one program I create in BAM, same thing: I want just one file per shared option.
Often times, though, I like to share the one program in both of these ways: the one HTML file that displays the running program, and the other HTML file which is a nice display of the source code.
The beauty of sharing that BASIC program that can run in a web browser: folk just need whatever device that has a web browser.
I don't know anywhere near enough about QBJS to comment, other than I think it will always be the better option for extremely high compatibility with QB64PE and higher performance.
The sharing a program via URL can be a problem with web browsers that have URL size limits. A big QBJS program with a really big URL might have problems running on some browsers.
BTW, here's a sample of what an HTML file for a wwwBASIC program looks like. BAM does pretty much the same thing, except that the javascript is embedded in the HTML file, not stored externally with the file or on some web site. From the wwwBASIC page:
How to use wwwBASIC
You can include wwwBASIC directly in Web pages:
Code: (Select All)
<!DOCTYPE html>
<html>
<head>
<script src="https://google.github.io/wwwbasic/wwwbasic.js"></script>
<script type="text/basic">
PRINT "Hello World!"
FOR i = 1 to 10
PRINT "Counting "; i
NEXT i
</script>
</head>
</html>RE: BAM: How to embed your program in a web page - CharlieJV - 11-10-2022
(11-10-2022, 07:37 PM)Pete Wrote: using iframe is a fun way to run other sites or projects at a page on your website, but for anyone who isn't already using this feature, and most don't, I highly recommend you look into the impact it will have on your Page ranking (SEO stuff). Pros and cons. If ranking isn't important to you, just do it. It's pretty cool. If ranking is very important to you, look into some SEO articles, first.
To Vince's point, use of iframe on your site requires some vigilance. Also pick a trusted source as unlike links, with iframes the activity opens directly on your site when the page loads. Take for example when QB64 dot net wasn't renewed, and another party bought the domain name. We got a warning from Rob the new site owner was using the site collect personal data. So if I had an iframe set to display what used to be trusted material from that site, oops, possibly now I'm just an accomplice to passing on some sort of malicious activity. Let me just say all this would be very rare, but the point is, it's possible.
Personally I like the display iframe can bring to a page. It is very much like embedding a video. No need to keep traveling from site to site, and no different than knowing a video can be edited or changed out without your immediate knowledge.
Pete
That is a rocking clarification. I wasn't thinking about iframe to show stuff from third party sites.
I use iframe's in my sites to show stuff I've created. (Well, I do embed some YouTube and Google Calendar etc.)
That's what I'd do with programs exported from either BAM or QBJS. iframe 'em.
Total aside: when you are in BAM and you run a program, what you are seeing is an iframe to which BAM injects the program, the interpreter, and the HTML structure. So the HTML is dynamically generated at runtime. Javascript is not allowed to run in BAM proper.
RE: BAM: How to embed your program in a web page - Pete - 11-10-2022
I almost wish I was back in the website authoring days again. I've been away from it for about 5 years now, I guess. Anyway, I tried the example code, added a couple of things, and yep, that's what I'm interested in. Use of onclick buttons could control running the code.
Neat how it generates an "image" as a wbpage. The F12 inspect element helps break down the components well enough to see what's going on under the hood. So I tried integrate it a bit with an html doc...
Code: (Select All)
<!DOCTYPE html>
<html>
<head>
<script src="https://google.github.io/wwwbasic/wwwbasic.js"></script>
<style>
body {
background-image: url('golf-scorecard.jpg'); width: 100%;
}
div.fixed {
position: fixed;
top: 356px;
left: 156px;
width: 100%;
}
</style>
</head>
<body>
<div class="fixed">
<script type="text/basic">
PRINT "Hello World!"
COLOR 1, 7
line input "Hello: "; a$
</script>
</div>
</body>
</html>Notes: The nbsp; was required to make the divide property work.
The LINE INPUT statement is a bit buggy. I typed to the edge and it left a letter on the right margin on row down as it went back to begin line-2. Behavior continued. Typed 3 lines, but backspace was only able to go back 1 line.
Pete
RE: BAM: How to embed your program in a web page - CharlieJV - 11-10-2022
(11-10-2022, 08:36 PM)Pete Wrote: ...
The LINE INPUT statement is a bit buggy. I typed to the edge and it left a letter on the right margin on row down as it went back to begin line-2. Behavior continued. Typed 3 lines, but backspace was only able to go back 1 line.
Pete
Yeah, that bit of wwwBASIC is pretty borked.
Something I'd like to fix eventually, but I can't stare at javascript too long before getting really cranky.
The big problem with using a canvas element: useless for virtual keyboards (mobile devices and otherwise.) When you touch the canvas element, it is like mouse-clicking on it. So no way to trigger the virtual keyboard, and nothing to capture input from a virtual keyboard.
My fix right now is with the BAM statements:
Code: (Select All)
_PROMPT (message, defaultValue)
_CONFIRM (message)
_ALERT (message)Not in love with that, but it will have to do for now.
I'm thinking of having the interpreter check for and confirm touchscreen devices, and automagically redirect the normal keyboard input statements to the mobile-friendly statements at runtime, so that we can stick with QBasic/QB64PE syntax, but the interpreter will just do the magic of running the other statements instead.
Hmmm, maybe that's what I should do with LINE INPUT. Redirect to _PROMPT all of the time...
RE: BAM: How to embed your program in a web page - Pete - 11-10-2022
A think you're spot on with the redirect idea.
Pete