krzosa/wasm_transcript_browser
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

small hto load improvements

Browse Source
This commit is contained in:
Krzosa Karol
2025-01-26 19:55:31 +01:00
parent 5d127b7f2c
commit 8ae6e15bf8
18 changed files with 197 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
package/index.html
View File

@@ -99,6 +99,45 @@ class memory_t {
const canvas = document.getElementById("canvas");
const ctx2d = canvas.getContext('2d');
const mem = new memory_t(new WebAssembly['Memory']({ initial: 2000, maximum: 65536 }));
const wasm_app_imports = {
// core
memory: mem.mem,
wasm_parse_float: (str, len) => { return parseFloat(mem.read_cstr(str, len)); },
wasm_alert: (str, len) => { alert(mem.read_cstr(str,len)); },
wasm_trap: () => { throw new Error(); },
wasm_write_to_console: (str, len) => { console.log(mem.read_cstr(str, len)); },
// gfx
wasm_draw_text: (str, len, x, y, font_str, font_len, font_size, r, g, b, a) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
ctx2d.textBaseline = "top";
ctx2d.fillText(mem.read_cstr(str, len), x, y);
},
wasm_measure_text: (str, len, font_str, font_len, font_size) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.textBaseline = "top";
const metrics = ctx2d.measureText(mem.read_cstr(str, len));
return metrics.width;
},
wasm_draw_rect: (x, y, w, h, r, g, b, a) => {
ctx2d.beginPath();
ctx2d.rect(x, y, w, h);
ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
ctx2d.fill();
},
wasm_clear: () => {
ctx2d.clearRect(0, 0, canvas.width, canvas.height);
},
wasm_set_clip: (x, y, w, h) => {
ctx2d.restore();
ctx2d.save();
ctx2d.beginPath();
ctx2d.rect(x, y, w, h);
ctx2d.clip();
},
};
(async function main() {
if (!ctx2d) {
@@ -106,91 +145,13 @@ const ctx2d = canvas.getContext('2d');
return;
}
const mem = new memory_t(new WebAssembly['Memory']({ initial: 2000, maximum: 65536 }));
const request = await fetch('main.wasm');
const binary = await request.arrayBuffer();
const wasm_os_imports = {
wasm_local_time_now: (ptr, len) => {
const date = new Date();
const stream = mem.stream_write(ptr, len);
stream.write_u16(date.getMilliseconds());
stream.write_u16(date.getSeconds());
stream.write_u16(date.getMinutes());
stream.write_u16(date.getHours());
stream.write_u16(date.getDate());
stream.write_u16(date.getMonth());
stream.write_u16(date.getFullYear());
},
wasm_universal_time_now: (ptr, len) => {
const date = new Date();
const stream = mem.stream_write(ptr, len);
stream.write_u16(date.getUTCMilliseconds());
stream.write_u16(date.getUTCSeconds());
stream.write_u16(date.getUTCMinutes());
stream.write_u16(date.getUTCHours());
stream.write_u16(date.getUTCDate());
stream.write_u16(date.getUTCMonth());
stream.write_u16(date.getUTCFullYear());
},
wasm_milliseconds_now: () => { return performance.now(); },
};
let wasm_app_imports = {
// core
memory: mem.mem,
wasm_parse_float: (str, len) => { return parseFloat(mem.read_cstr(str, len)); },
wasm_alert: (str, len) => { alert(mem.read_cstr(str,len)); },
wasm_trap: () => { throw new Error(); },
wasm_write_to_console: (str, len) => { console.log(mem.read_cstr(str, len)); },
// gfx
wasm_draw_text: (str, len, x, y, font_str, font_len, font_size, r, g, b, a) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
ctx2d.textBaseline = "top";
ctx2d.fillText(mem.read_cstr(str, len), x, y);
},
wasm_measure_text: (str, len, font_str, font_len, font_size) => {
ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
ctx2d.textBaseline = "top";
const metrics = ctx2d.measureText(mem.read_cstr(str, len));
return metrics.width;
},
// wasm_get_font_height: (font_str, font_len, font_size) => {
// ctx2d.font = `${font_size}px ${mem.read_cstr(font_str, font_len)}`;
// ctx2d.textBaseline = "top";
// const v = ctx2d.measureText('NothinBelowTheBaseline');
// return v.fontBoundingBoxDescent;
// },
wasm_draw_rect: (x, y, w, h, r, g, b, a) => {
ctx2d.beginPath();
ctx2d.rect(x, y, w, h);
ctx2d.fillStyle = `rgba(${r}, ${g}, ${b}, ${a})`;
ctx2d.fill();
},
wasm_clear: () => {
ctx2d.clearRect(0, 0, canvas.width, canvas.height);
},
wasm_set_clip: (x, y, w, h) => {
ctx2d.restore();
ctx2d.save();
ctx2d.beginPath();
ctx2d.rect(x, y, w, h);
ctx2d.clip();
},
};
Object.assign(wasm_app_imports, wasm_os_imports);
const program = await WebAssembly['instantiate'](binary, { "env": wasm_app_imports });
const instance = program['instance'];
const wasm_exports = instance['exports'];
mem.exports = wasm_exports;
wasm_exports['wasm_init'](window.devicePixelRatio);
wasm_exports['wasm_init']();
let awake = true;