Steam HTML5 Compiler

[loftcat]

I'm thinking of purchasing the HTML5 Compiler on Steam (I have the Steam version of GLB). I can't seem to find any documentation for it (apart from a few notes on the Steam site):

This compiler, using Emscripten, results in an html webpage, that runs your GLBasic application/game in any modern webbrowser. You can also use it to export GLBasic function to JavaScript for other projects. Emscripten will compile a wasm (Web assembly) for you, that runs really fast.
There are two options included:

    HTML5-WebGL - This uses the webgl backend and allows fast graphics, using hardware accelleration
    HTML5 - This uses a builtin graphics engine, that renders the output per pixel. It's not as fast as webgl, but more compatible for older computers or computers with higher security limitations.


There are some limitations, though:

    You must run the main loop using SETLOOPSUB, instead of a classic WHILE TRUE; ...; WEND loop.
    File write access is quite limited
    The data must be loaded using a real webserver, or a local webserver (included for testing). Modern browsers will refuse to load graphics, if you just open the html file from the local drive.

I've had a nose around the forum and elsewhere for some more documentation but without luck. I'd be interested to know a bit more before buying it if possible (although might just take the plunge and have a play with it  )

If anyone knows of any guides, release note docs would be much appreciated! I did find a 9 year old thread testing html5 but nothing recent for the Steam release.

[Kitty Hello]

There is not much documentation, but almost everything should work. My G.A.C.K. games run in HTML5.

[loftcat]

Hi, thanks for the reply. I think I understand the need for a webserver and the SETLOOPSUB, but I wonder if you have any more detail about the restrictions around file write access? This is something I might like to try and do if possible, so I'd like to know what can't be done.

[loftcat]

Ok I took the plunge and bought the HTML5 Compiler from Steam just to see where I could get to. It automatically installs it as DLC via Steam which is nice and start GLBasic is the usual way, through a desktop icon or Start menu in Windows 10.

I've made a really simple program with a SETLOOPSUB. I've then navigated to Project > Options and checked the Platform Configuration is set to 'HTML5', applied and exit. I've then gone to Compiler -> Build Multi-platform and clicked on HTML5.

The result is a .app project sub-folder containing a project.html file telling me it's a dummy file. In the Distribute folder an HTML5 sub-folder has been created containing 1 file: run_local_test.bat

The compile report contains the following:

*** Configuration: HTML5 ***
precompiling:
GPC - GLBasic Precompiler V.17.312 SN:58f00c1b - 3D, NET
Wordcount:17 commands
compile+link:
Adding directories to PATH:
PATH += Q:\Compiler\platform\HTML5\emsdk\upstream\emscripten
PATH += Q:\Compiler\platform\HTML5\emsdk\node\12.18.1_64bit\bin
PATH += Q:\Compiler\platform\HTML5\emsdk\python\3.7.4-pywin32_64bit
PATH += Q:\Compiler\platform\HTML5\emsdk\java\8.152_64bit\bin

Setting environment variables:
PATH = Q:\Compiler\platform\HTML5\emsdk\upstream\emscripten;Q:\Compiler\platform\HTML5\emsdk\node\12.18.1_64bit\bin;Q:\Compiler\platform\HTML5\emsdk\python\3.7.4-pywin32_64bit;Q:\Compiler\platform\HTML5\emsdk\java\8.152_64bit\bin;Q:\Compiler\platform\HTML5\emsdk;Q:\Compiler\platform\HTML5\bin
EM_CONFIG = Q:\Compiler\platform\HTML5\emsdk\.emscripten
EM_CACHE = Q:/Compiler/platform/HTML5/emsdk/upstream/emscripten\cache
EMSDK_NODE = Q:\Compiler\platform\HTML5\emsdk\node\12.18.1_64bit\bin\node.exe
EMSDK_PYTHON = Q:\Compiler\platform\HTML5\emsdk\python\3.7.4-pywin32_64bit\python.exe
JAVA_HOME = Q:\Compiler\platform\HTML5\emsdk\java\8.152_64bit
emcc:WARNING: --js-opts ignored when using llvm backend
em++: error: Attempt to set a non-existent setting: 'OUTLINING_LIMIT'
- did you mean one of INLINING_LIMIT?
- perhaps a typo in emcc's  -s X=Y  notation?
- (see src/settings.js for valid values)
distribute HTML5 to: C:/GLB/GLBasic/htmltest4/distribute/HTML5
exit
success
_______________________________________
*** Finished ***
Elapsed: 5.7 sec. Time: 14:37
Build: 5 succeeded.

Any ideas what I'm doing wrong? Am I missing a component to make this work? There's clearly an error in the compile but I don't know if it's relevant. A search on the forum throws up a thread from 2020 about OUTLINING_LIMIT but doesn't conclude anything. Really hope I can get this working on some level.

Help appreciated!

[Qedo]

OUTLINING_LIMIT is an error I get when compiling with HTML5.
If I compile with HTML5-WebGL everything is OK
Tried with version 16.947 and the latest html5 Steam version (not sure which version)

[Qedo]

There is not much documentation, but almost everything should work. My G.A.C.K. games run in HTML5.

Yet Gernot in HTLM5 the mouse test:

SETLOOPSUB "MainLoop1"
SUB MainLoop1:
    PRINT "X:" + MOUSEAXIS (0), 0, 0
    PRINT "Y:" + MOUSEAXIS (1), 0, 20
    PRINT "Z:" + MOUSEAXIS (2), 0, 40
    PRINT "A:" + MOUSEAXIS (3), 0, 60
    PRINT "B:" + MOUSEAXIS (4), 0, 80
    PRINT "C:" + MOUSEAXIS (5), 0.100
    SHOWSCREEN
ENDSUB

only the left mouse button works.
Any idea?

[loftcat]

OUTLINING_LIMIT is an error I get when compiling with HTML5.
If I compile with HTML5-WebGL everything is OK
Tried with version 16.947 and the latest html5 Steam version (not sure which version)

Same observation for me Qedo, no OUTLINING_LIMIT error when compiling to HTML5_GL which is good, but unfortunately for me no luck getting an html5 program to launch    I am compiling and getting the attached report, the tail of which shows:

Nothing to do!
em++: error: 'Q:\Compiler\platform\HTML5\emsdk\upstream\emscripten\tools\file_packager.bat C:\Users\tonyk\AppData\Local\Temp\glbasic\Hello_world.data --from-emcc --export-name=Module --preload Media' failed (1)
distribute HTML5 to: C:/GLB/GLBasic/helloworld/distribute/HTML5
exit
success
_______________________________________
*** Finished ***
Elapsed: 20.5 sec. Time: 11:25
Build: 5 succeeded.

In the Hello_world app folder it has generated a single file, Hello_world.html which appears to be a dummy file. The \distribute\HTML5 folder contains 2 files:

Hello_world.wasm
run_local_test.bat

When I open the bat file it briefly launches a command window which promptly closes itself, and the browser opens a tab telling me it cannot launch localhost:8000.

I'm not certain if the problem is the local server failing to launch or the program files haven't generated properly. I was expecting more files to be generated but maybe the above is correct?

[loftcat]

Anyone at all seen this error...?

[dreamerman]

Sorry for late reply, there were some newer topics about HTML5, generally for me it always had some issues, tutorials and other such small things were compiled ok, but normal projects, with OpenGL inline had some issues, from v16 HTML5 looked broken for me completely, scripts were based on older emscripten and there was some version / arguments conflict.
I don't have HTML5 dlc for current GLB version, so can't test anything.
HTML5_WebGL was referred target as it supports more advanced rendering routines.

What file size has that *wasm file?
Generally browsers will not launch wasm normally, you need some local webserver to make them available (security reasons), one of most popular is XAMPP, if wasm file is good, put it to local server htdocs (or whatever directory for document will be called) and run it with something like this: "localhost://hello_world.wasm"
No idea what with that media packing error that you got.

[loftcat]

Thanks for the advice. I've downloaded XAMPP and installed. Seems to be running ok as I can create a simple html file in the htdocs folder and open it fine.

I've tried recompiling to HTML5 webGL once again with a brand new simple three line program to display hello world. The good news I think is I'm no longer getting the OUTLINING_LIMIT error, but still getting an odd error at the end of the compiling:

em++: error: 'Q:\Compiler\platform\HTML5\emsdk\upstream\emscripten\tools\file_packager.bat C:\Users\tonyk\AppData\Local\Temp\glbasic\HelloAgain.data --from-emcc --export-name=Module --preload Media' failed (1)
distribute HTML5 to: C:/GLB/GLBasic/HelloAgain/distribute/HTML5
exit
success
_______________________________________
*** Finished ***
Elapsed: 11.1 sec. Time: 23:10
Build: 5 succeeded.

The wasm file is 235kb and along with run_local_test.bat are the only files generated. If I drop the wasm file into the XAMPP htdocs folder and try opening https://localhost/HelloAgain.wasm from a web browser it prompts to download the wasm file. It then does something odd where it automatically keeps opening multiple browser tabs until I force close the browser.  It's a bit odd and slightly inconsistent which isn't helping. Hoping Gernot might see this when he's feeling better and can help 

[Qedo]

If the "Media" folder is empty this is probably the problem.
Put any file in it and recompile.
Once compiled, forget XAMPP and run "run_local_test.bat" instead

[Qedo]

try this:

SETLOOPSUB "MainLoop1"
SUB MainLoop1:
   PRINT "Hello World",10,10
     SHOWSCREEN
ENDSUB

[loftcat]

Thank you so much for the help. Still no luck with running the bat file to run the local webserver, but my good news is that I can now compile, copy the content of the folder to XAMPP and it works! It now produces an html file which I can call from the web browser via localhost.

Main change I made was simply to add a file to a media folder. It's also imperative to use a SETLOOPSUB as you mentioned (Gernot sets that out in the pre-reqs to be fair although I did need reminding). When I get a few more minutes I'll put together an idiots guide to getting started with the HTML Compiler (mainly for me so I don't forget  , but for anyone in the future that might need it).

[loftcat]

Yet Gernot in HTLM5 the mouse test:

SETLOOPSUB "MainLoop1"
SUB MainLoop1:
    PRINT "X:" + MOUSEAXIS (0), 0, 0
    PRINT "Y:" + MOUSEAXIS (1), 0, 20
    PRINT "Z:" + MOUSEAXIS (2), 0, 40
    PRINT "A:" + MOUSEAXIS (3), 0, 60
    PRINT "B:" + MOUSEAXIS (4), 0, 80
    PRINT "C:" + MOUSEAXIS (5), 0.100
    SHOWSCREEN
ENDSUB

only the left mouse button works.
Any idea?

When testing today I noticed if I put a mousewait into my MainLoop1 the HTML5 compiled but failed to run. But I could call out to a procedure to do it and it works.

[Qedo]

about the local web server not working but are you sure you have python installed?
To check this, open a cmd and run python.exe