dranke/microw8
1
0
Fork 0
mirror of https://github.com/exoticorn/microw8.git synced 2026-01-20 11:16:42 +01:00
Code Issues Projects Releases Wiki Activity

some styling and uw8.ram -> env.memory

Browse Source
This commit is contained in:
Dennis Ranke
2021-11-03 09:15:31 +01:00
parent b34ff18a60
commit a6336c5d11
5 changed files with 54 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
web/src/base.wasm
View File

Binary file not shown.

18
web/src/index.html
View File

@@ -3,13 +3,19 @@
<head> <head>
<meta charset="utf8" /> <meta charset="utf8" />
<title>MicroW8</title> <title>MicroW8</title>
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@500&display=swap" rel="stylesheet">
<style>
@import "style.css";
</style>
</head> </head>
<body> <body>
<canvas id="screen" width="320" height="256"></canvas> <div id="centered">
<div id="message"></div> <canvas id="screen" width="640" height="512"></canvas>
<input id="cart" type="file" accept=".wasm,.uw8,application/wasm"> <div id="message"></div>
<script type="module"> <input id="cart" type="file" accept=".wasm,.uw8,application/wasm">
import "./main.js"; </div>
</script>
</body> </body>
<script type="module">
import "./main.js";
</script>
</html> </html>

36
web/src/main.js
View File

@@ -16,6 +16,14 @@ function setMessage(size, error) {
document.getElementById('message').innerHTML = html; document.getElementById('message').innerHTML = html;
} }
let framebufferCanvas = document.createElement("canvas");
framebufferCanvas.width = 320;
framebufferCanvas.height = 256;
let framebufferCanvasCtx = framebufferCanvas.getContext("2d");
let imageData = framebufferCanvasCtx.createImageData(320, 256);
let canvasCtx = document.getElementById('screen').getContext('2d');
canvasCtx.imageSmoothingEnabled = false;
let cancelFunction; let cancelFunction;
async function runModule(data) { async function runModule(data) {
@@ -41,19 +49,18 @@ async function runModule(data) {
} }
newURL += '#' + btoa(dataString); newURL += '#' + btoa(dataString);
} }
if(newURL != window.location.href) { if(newURL != window.location.pathname + window.location.hash) {
history.replaceState(null, null, newURL);
history.pushState(null, null, newURL); history.pushState(null, null, newURL);
} }
try { try {
let loaderImport = { let loaderImport = {
uw8: { env: {
ram: new WebAssembly.Memory({ initial: 8 }) memory: new WebAssembly.Memory({ initial: 8 })
} }
}; };
let loadMem = loaderImport.uw8.ram.buffer; let loadMem = loaderImport.env.memory.buffer;
let loader = await loadWasm(loaderUrl, loaderImport); let loader = await loadWasm(loaderUrl, loaderImport);
let baseModule = await (await fetch(baseUrl)).arrayBuffer(); let baseModule = await (await fetch(baseUrl)).arrayBuffer();
@@ -70,27 +77,20 @@ async function runModule(data) {
} }
let importObject = { let importObject = {
uw8: { env: {
ram: new WebAssembly.Memory({ initial: 8, maximum: 8 }), memory: new WebAssembly.Memory({ initial: 8, maximum: 8 }),
} }
}; };
let instance = new WebAssembly.Instance(await WebAssembly.compile(data), importObject); let instance = new WebAssembly.Instance(await WebAssembly.compile(data), importObject);
let canvasCtx = document.getElementById('screen').getContext('2d');
let imageData = canvasCtx.createImageData(320, 256);
let buffer = imageData.data; let buffer = imageData.data;
for(let i = 0; i < 320*256; ++i) {
buffer[i * 4 + 3] = 255;
}
let startTime = Date.now(); let startTime = Date.now();
let keepRunning = true; let keepRunning = true;
cancelFunction = () => keepRunning = false; cancelFunction = () => keepRunning = false;
function mainloop() { function mainloop() {
if(!keepRunning) { if(!keepRunning) {
return; return;
@@ -99,13 +99,15 @@ async function runModule(data) {
try { try {
instance.exports.tic(Date.now() - startTime); instance.exports.tic(Date.now() - startTime);
let framebuffer = new Uint8Array(importObject.uw8.ram.buffer.slice(120, 120 + 320*256)); let framebuffer = new Uint8Array(importObject.env.memory.buffer.slice(120, 120 + 320*256));
for(let i = 0; i < 320*256; ++i) { for(let i = 0; i < 320*256; ++i) {
buffer[i * 4] = framebuffer[i]; buffer[i * 4] = framebuffer[i];
buffer[i * 4 + 1] = framebuffer[i]; buffer[i * 4 + 1] = framebuffer[i];
buffer[i * 4 + 2] = framebuffer[i]; buffer[i * 4 + 2] = framebuffer[i];
buffer[i * 4 + 3] = 255;
} }
canvasCtx.putImageData(imageData, 0, 0); framebufferCanvasCtx.putImageData(imageData, 0, 0);
canvasCtx.drawImage(framebufferCanvas, 0, 0, 640, 512);
window.requestAnimationFrame(mainloop); window.requestAnimationFrame(mainloop);
} catch(err) { } catch(err) {
@@ -127,6 +129,8 @@ function runModuleFromHash() {
let base64Data = window.location.hash.slice(1); let base64Data = window.location.hash.slice(1);
if(base64Data.length > 0) { if(base64Data.length > 0) {
runModuleFromURL('data:;base64,' + base64Data); runModuleFromURL('data:;base64,' + base64Data);
} else {
runModule(new ArrayBuffer(0));
} }
} }

22
web/src/style.css Normal file
View File

@@ -0,0 +1,22 @@
html {
font-family: 'Josefin Sans', sans-serif;
background-color: #202024;
color: #808070;
height: 100%;
}
body {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
canvas {
margin: 8px;
box-shadow: 5px 5px 20px black;
}
.error {
color: red;
}

BIN
web/src/uw8loader.wasm
View File

Binary file not shown.