Deploy WASM to Website (Squarespace)

[scimulate]

Hi there. I'm not a web developer, so I would appreciate any assistance. I successfully built a sample program using Qt Creator targeting WASM, and I uploaded it to a Github page (link). The functionality works as expected, but the webpage is otherwise bare. I'm having difficulty finding documentation regarding how to embed a WASM program into an existing webpage (with titles, headers, footers, etc.), like my business website which was built using Squarespace. I would like the result to look similar to the Qt examples (link). Can someone please point me in the correct direction? Thank you!

[Mesrine]

@scimulate

Hi, I am also not a web developer.
The right answer depends on the Qt Javascript Api you are using.
The general idea is you have a
<div class="qtscreen" > </div>
on your webpage.
So, you have a div element of the class qtscreen(this depends on the Qt javascript API ), in this element the Qt application will be shown once you initialize the QtLoader.

I created a javascript function to create the QtLoader and the different <div> elements on the webpage

// initQTwasm provides API on top of QtLoader. The qtloader.js script has to be loaded before this.
//
// usage:
//
// app_name : name of the application
// wasm_url : path to the app_name.wasm app_name.js app_name....js files
// rootDivSele :name  of the root div(html) where the app will be shown
// logoPath : fullpath to a logo image to show when compiling wasm
//

function initQTwasm(wasm_url, app_name, rootDivSele, logoPath) {
	const rootDiv = document.querySelector(rootDivSele);
	const screen = "screen" + app_name;
	

		rootDiv.innerHTML += '<figure  id="qtspinner"> <center > <img id="logo" crossorigin="anonymous" src="' + logoPath + '" ></img> <div id="qtstatus"></div> </center> </figure> <div class="qtscreen" id="'+ screen +'" ></div>';
	
	const spinner = rootDiv.querySelector('#qtspinner');
	const canvas = rootDiv.querySelector('#'+ screen);
	const status = rootDiv.querySelector('#qtstatus');

	const logo = spinner.querySelector('#logo');
	logo.style.cssText = String(logo.style.cssText);

	qtLoader = QtLoader({
		path: wasm_url,
		restartMode: 'RestartOnCrash',
		restartType: 'RestartModule',
              canvasElements : [canvas],
              showLoader: function(loaderStatus) {
                  spinner.style.display = (logoPath)?'block':'none';
                  canvas.style.display = 'none';
                  status.innerHTML = loaderStatus + "...";
              },
              showError: function(errorText) {
                  status.innerHTML = errorText;
                  spinner.style.display = (logoPath)?'block':'none';
                  canvas.style.display = 'none';
              },
              showExit: function() {
                  status.innerHTML = "Application exit";
                  if (qtLoader.exitCode !== undefined)
                      status.innerHTML += " with code " + qtLoader.exitCode;
                  if (qtLoader.exitText !== undefined)
                      status.innerHTML += " (" + qtLoader.exitText + ")";
                  spinner.style.display = (logoPath)?'block':'none';
                  canvas.style.display = 'none';
              },
              showCanvas: function() {
                  spinner.style.display = 'none';
                  canvas.style.display = 'block';
              },
	});
	qtLoader.loadEmscriptenModule(app_name);
	return qtLoader;
}

The produced qtloader.js when you compile to wasm "explains" how to do this.
Also, you have to set the CSS styles of these HTML elements.

An example here