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:
@@ -7,13 +7,14 @@
|
||||
</head>
|
||||
<body>
|
||||
<div class="main_section">
|
||||
<p>🠟 The canvas is below 🠟</p>
|
||||
<p style="margin-bottom:1px">🠟 The canvas is below 🠟</p>
|
||||
<div id="canvas_container">
|
||||
<canvas>
|
||||
Your browser does not support the HTML5 canvas tag.
|
||||
</canvas>
|
||||
<div id="label_container"> </div>
|
||||
</div>
|
||||
<p>🠝 The canvas is above 🠝</p>
|
||||
<p style="margin-top:1px">🠝 The canvas is above 🠝</p>
|
||||
</div>
|
||||
<script async type="module" src="main.js" ></script>
|
||||
</body>
|
||||
|
||||
@@ -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;
|
||||
|
||||
21
data/main.js
21
data/main.js
@@ -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
40
data/misc_functions.js
Normal 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,
|
||||
};
|
||||
Reference in New Issue
Block a user