Used __builtin_wasm_memory_size(0) instead of having the Javascript code call init_mem with the initial page count. Added a simple <div> below the canvas that can hold any number of labels that can be filled/updated through jsSetLabel which lives in a new file misc_functions.js.

This commit is contained in:
2025-09-02 16:05:53 -07:00
parent f45c2d88e0
commit 04028b29d3
10 changed files with 117 additions and 30 deletions

View File

@@ -7,13 +7,14 @@
</head>
<body>
<div class="main_section">
<p>&#129055 The canvas is below &#129055</p>
<p style="margin-bottom:1px">&#129055 The canvas is below &#129055</p>
<div id="canvas_container">
<canvas>
Your browser does not support the HTML5 canvas tag.
</canvas>
<div id="label_container"> </div>
</div>
<p>&#129053 The canvas is above &#129053</p>
<p style="margin-top:1px">&#129053 The canvas is above &#129053</p>
</div>
<script async type="module" src="main.js" ></script>
</body>

View File

@@ -14,6 +14,17 @@ body
display: inline-block;
}
#label_container
{
display: flex;
}
#label_container > p
{
margin-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
canvas
{
border: 1px solid black;

View File

@@ -3,6 +3,7 @@ import { WASM_MEMORY_PAGE_SIZE, appGlobals } from './globals.js'
import { loadWasmModule, wasmPntrToJsString, wasmPntrAndLengthToJsString } from './wasm_functions.js'
import { jsStdFunctions } from './std_functions.js'
import { jsGlFunctions } from './gl_functions.js'
import { jsMiscFunctions } from './misc_functions.js'
function AcquireCanvas(canvasWidth, canvasHeight)
{
@@ -23,24 +24,11 @@ function AcquireCanvas(canvasWidth, canvasHeight)
appGlobals.canvas = canvas;
}
async function LoadWasmModule(wasmFilePath, initialWasmPageCount)
async function MainLoop()
{
appGlobals.textDecoder = new TextDecoder("utf-8");
appGlobals.textEncoder = new TextEncoder("utf-8");
appGlobals.wasmModule = await loadWasmModule(wasmFilePath, { ...jsStdFunctions, ...jsGlFunctions });
appGlobals.memDataView = new DataView(new Uint8Array(appGlobals.wasmModule.exports.memory.buffer).buffer);
let memorySize = appGlobals.wasmModule.exports.memory.buffer.byteLength;
let numMemoryPagesAfterLoad = memorySize / WASM_MEMORY_PAGE_SIZE;
if ((memorySize % WASM_MEMORY_PAGE_SIZE) != 0)
{
console.warn("memorySize (" + memorySize + ") is not a multiple of WASM_MEMORY_PAGE_SIZE (" + WASM_MEMORY_PAGE_SIZE + ")");
numMemoryPagesAfterLoad++;
}
appGlobals.wasmModule.exports.init_mem(numMemoryPagesAfterLoad);
}
async function MainLoop()
{
console.log("Initializing WebGL Canvas...");
AcquireCanvas(600, 400);
@@ -50,7 +38,8 @@ async function MainLoop()
appGlobals.glContext = canvasContextGl;
console.log("Loading WASM Module...");
await LoadWasmModule("app.wasm", 4);
appGlobals.wasmModule = await loadWasmModule("app.wasm", { ...jsStdFunctions, ...jsGlFunctions, ...jsMiscFunctions });
appGlobals.memDataView = new DataView(new Uint8Array(appGlobals.wasmModule.exports.memory.buffer).buffer);
let initSuccess = appGlobals.wasmModule.exports.App_Initialize();

40
data/misc_functions.js Normal file
View File

@@ -0,0 +1,40 @@
import { appGlobals } from './globals.js'
import { wasmPntrToJsString, wasmPntrAndLengthToJsString } from './wasm_functions.js'
export function jsSetLabel(labelIdStrPntr, labelStrPntr)
{
let labelIdStr = wasmPntrToJsString(labelIdStrPntr);
let labelStr = wasmPntrToJsString(labelStrPntr);
var labelContainer = document.getElementById("label_container");
if (labelContainer != null)
{
var foundExistingLabel = false;
var existingLabels = labelContainer.getElementsByClassName("wasm_label");
if (existingLabels != null)
{
for (var lIndex = 0; lIndex < existingLabels.length; lIndex++)
{
if (existingLabels[lIndex].id == labelIdStr)
{
existingLabels[lIndex].textContent = labelStr;
foundExistingLabel = true;
break;
}
}
}
if (!foundExistingLabel)
{
const newLabel = document.createElement("p");
newLabel.className = "wasm_label";
newLabel.id = labelIdStr;
newLabel.textContent = labelStr;
labelContainer.appendChild(newLabel);
}
}
else { console.error("Failed to file container with id \"label_container\"!"); }
}
export let jsMiscFunctions = {
jsSetLabel: jsSetLabel,
};