Set up status messages (requires multi-threading to actually work)

This commit is contained in:
Alan O'Cull 2023-12-06 15:39:53 -05:00
parent fbfdaca8f6
commit 61d7569d92
6 changed files with 35 additions and 17 deletions

View File

@ -22,3 +22,7 @@ canvas {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
p.status {
text-align: center;
}

View File

@ -13,5 +13,6 @@
</canvas> </canvas>
</div> </div>
<p class="status" id="status">Loading...</p>
</body> </body>
</html> </html>

View File

@ -1,4 +1,4 @@
@REM rmdir dist\ rmdir dist\
@REM mkdir dist\public mkdir dist\public
@REM xcopy .\assets .\dist\public /e /h /y /f xcopy .\assets .\dist\public /e /h /y /f
tsc && webpack --config .\webpack\development.js --watch tsc && webpack --config .\webpack\development.js --watch

View File

@ -23,20 +23,34 @@ const request_mesh = (request: XMLHttpRequest, filename: string) => {
// Wait for page load before executing code // Wait for page load before executing code
window.addEventListener('load', function() { window.addEventListener('load', function() {
console.log('PAGE LOADED'); const status = <HTMLParagraphElement>this.document.getElementById('status');
let lastStatus = Date.now();
const canvas = new Canvas(<HTMLCanvasElement>this.document.getElementById('draw')); const canvas = new Canvas(<HTMLCanvasElement>this.document.getElementById('draw'));
const req = new XMLHttpRequest(); const req = new XMLHttpRequest();
const update_status = (text: string, punctuate: boolean = true) => {
let newStatus = Date.now();
const timeDiff = newStatus - lastStatus
console.log(`Completed step '${status.textContent}' in ${timeDiff} ms`);
if (punctuate) {
status.textContent = `${text}...`;
} else {
status.textContent = text;
}
lastStatus = newStatus;
}
req.onreadystatechange = function() { req.onreadystatechange = function() {
if (req.readyState == XMLHttpRequest.DONE) { if (req.readyState == XMLHttpRequest.DONE) {
console.log(req.responseText); const mesh = MeshImport.parse(req.responseText, update_status);
const mesh = MeshImport.parse(req.responseText); update_status('Drawing');
console.log(`Got mesh array at ${mesh.name}`);
console.log(mesh);
canvas.draw_shells(mesh.shells); canvas.draw_shells(mesh.shells);
update_status('Done!', false);
} }
} }
update_status('Fetching mesh over network');
request_mesh(req, 'clover.obj'); request_mesh(req, 'clover.obj');
}); });

View File

@ -31,7 +31,8 @@ const parse_tri = (line: string) => {
} }
class MeshImport { class MeshImport {
public static parse(buffer: string) { public static parse(buffer: string, statusEvent: CallableFunction) {
statusEvent('Parsing mesh file');
const buff = buffer.split('\n'); const buff = buffer.split('\n');
// Initialize buffers // Initialize buffers
@ -56,6 +57,7 @@ class MeshImport {
console.log(`# VERTs: ${verts.length / 3}\t# UVs ${uvs.length}\t# TRIs: ${tris.length / 6}`); console.log(`# VERTs: ${verts.length / 3}\t# UVs ${uvs.length}\t# TRIs: ${tris.length / 6}`);
// Construct triangles // Construct triangles
statusEvent('Constructing triangles');
let t: Triangle[] = []; let t: Triangle[] = [];
for (let i = 0; i < tris.length; i += 6) { for (let i = 0; i < tris.length; i += 6) {
let indices: number[] = [tris[i], tris[i+2], tris[i+4]]; let indices: number[] = [tris[i], tris[i+2], tris[i+4]];
@ -70,9 +72,8 @@ class MeshImport {
t.push(new Triangle(v, uv, uvi)); t.push(new Triangle(v, uv, uvi));
} }
console.log('IMPORT: Total triangles found', t.length);
// Create an initial shell // Create an initial shell
statusEvent('Initializing UV shells');
let shells: Shell[] = []; let shells: Shell[] = [];
// Initialize shells by sorting triangles roughly int othem // Initialize shells by sorting triangles roughly int othem
for (let i = 0; i < t.length; i++) { for (let i = 0; i < t.length; i++) {
@ -92,9 +93,8 @@ class MeshImport {
} }
} }
console.log('IMPORT: Total shells initial', shells.length);
// Now, combine shells // Now, combine shells
statusEvent('Merging UV shells');
for (let i = 0; i < shells.length; i++) { for (let i = 0; i < shells.length; i++) {
const a = shells[i]; const a = shells[i];
for (let j = i+1; j < shells.length; j++) { for (let j = i+1; j < shells.length; j++) {
@ -109,6 +109,7 @@ class MeshImport {
} }
// Finally, calculate shells // Finally, calculate shells
statusEvent('Baking UV shells');
shells.forEach((s: Shell) => { shells.forEach((s: Shell) => {
s.precompute(); s.precompute();
}); });

View File

@ -33,8 +33,6 @@ class Canvas {
this.context.fill(s.path); this.context.fill(s.path);
this.context.stroke(s.path); this.context.stroke(s.path);
}); });
console.log("Canvas drawn");
} }
}; };