117 lines
4.2 KiB
HTML
117 lines
4.2 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
<meta name="description" content="Run a finite-element Poisson solve with MFEM compiled to WebAssembly.">
|
||
<title>MFEM WebAssembly Lab</title>
|
||
<link rel="stylesheet" href="./styles.css">
|
||
<script src="./mfem-wasm-demo.js" defer></script>
|
||
<script src="./demo.js" defer></script>
|
||
</head>
|
||
<body>
|
||
<header class="masthead">
|
||
<a class="brand" href="#workspace" aria-label="MFEM WebAssembly Lab home">
|
||
<span class="brand-mark" aria-hidden="true">M</span>
|
||
<span>
|
||
<strong>MFEM</strong>
|
||
<small>WebAssembly Lab</small>
|
||
</span>
|
||
</a>
|
||
<div class="runtime-state" role="status" aria-live="polite">
|
||
<span class="status-dot" id="status-dot"></span>
|
||
<span id="runtime-status">Loading numerical runtime</span>
|
||
</div>
|
||
</header>
|
||
|
||
<main id="workspace" class="workspace">
|
||
<section class="control-panel" aria-labelledby="problem-title">
|
||
<div class="eyebrow">Poisson equation · unit square</div>
|
||
<h1 id="problem-title">Solve a finite-element system in your browser.</h1>
|
||
<p class="lede">
|
||
MFEM assembles and solves the system locally through WebAssembly.
|
||
Change the mesh or polynomial order and compare the resulting error and workload.
|
||
</p>
|
||
|
||
<form id="solve-form">
|
||
<div class="field-group">
|
||
<div class="field-heading">
|
||
<label for="cells">Cells per axis</label>
|
||
<output id="cells-value" for="cells">10</output>
|
||
</div>
|
||
<input id="cells" name="cells" type="range" min="4" max="40" step="2" value="10">
|
||
<div class="range-labels" aria-hidden="true"><span>4</span><span>40</span></div>
|
||
</div>
|
||
|
||
<div class="field-group">
|
||
<label for="order">Polynomial order</label>
|
||
<select id="order" name="order">
|
||
<option value="1">1 · Linear</option>
|
||
<option value="2" selected>2 · Quadratic</option>
|
||
<option value="3">3 · Cubic</option>
|
||
<option value="4">4 · Quartic</option>
|
||
</select>
|
||
</div>
|
||
|
||
<button id="solve-button" type="submit" disabled>
|
||
<span>Run MFEM solve</span>
|
||
<span aria-hidden="true">→</span>
|
||
</button>
|
||
</form>
|
||
|
||
<div class="capabilities" aria-label="Compiled capabilities">
|
||
<span class="capability-label">Runtime</span>
|
||
<div id="capability-list"></div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="result-panel" aria-labelledby="result-title">
|
||
<div class="result-heading">
|
||
<div>
|
||
<div class="eyebrow">Computed result</div>
|
||
<h2 id="result-title">Finite-element mesh</h2>
|
||
</div>
|
||
<span class="run-index" id="run-index">Awaiting run</span>
|
||
</div>
|
||
|
||
<div class="mesh-frame">
|
||
<canvas id="mesh-canvas" width="720" height="500" aria-label="Structured finite-element mesh preview"></canvas>
|
||
<div class="equation" aria-label="Negative Laplacian of u equals f">
|
||
<span>−Δu = f</span>
|
||
<small>u = 0 on ∂Ω</small>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="metrics" aria-live="polite">
|
||
<article>
|
||
<span>True DOFs</span>
|
||
<strong id="metric-dofs">—</strong>
|
||
</article>
|
||
<article>
|
||
<span>CG iterations</span>
|
||
<strong id="metric-iterations">—</strong>
|
||
</article>
|
||
<article>
|
||
<span>L² error</span>
|
||
<strong id="metric-error">—</strong>
|
||
</article>
|
||
<article>
|
||
<span>Browser time</span>
|
||
<strong id="metric-time">—</strong>
|
||
</article>
|
||
</div>
|
||
|
||
<details class="console-panel">
|
||
<summary>Runtime details</summary>
|
||
<pre id="runtime-log">Waiting for WebAssembly initialization…</pre>
|
||
</details>
|
||
</section>
|
||
</main>
|
||
|
||
<footer>
|
||
<span>All computation stays in this browser tab.</span>
|
||
<span id="footer-version">MFEM WebAssembly</span>
|
||
</footer>
|
||
</body>
|
||
</html>
|