write solver specific intros

This commit is contained in:
Magnus Ulimoen 2020-05-25 21:00:26 +02:00
parent 4c40acbb1f
commit a6c2adf0f0
3 changed files with 35 additions and 10 deletions

View File

@ -4,7 +4,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="generator" content="by-hand" /> <meta name="generator" content="by-hand" />
<meta name="viewpost" context="width=device-width, inital-scale=1.0, user-scalable=yes" /> <meta name="viewport" context="width=device-width, inital-scale=1.0, user-scalable=yes" />
<title>ΣBP Solver</title> <title>ΣBP Solver</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script async type="module" src="main.js"></script> <script async type="module" src="main.js"></script>
@ -17,13 +17,19 @@
<div class="menu-item"> <div class="menu-item">
<p class="menu-header">Choose an equation set</p> <p class="menu-header">Choose an equation set</p>
<select id="eq-set" name="eq-set"> <select id="eq-set" name="eq-set">
<option value="euler"/> Euler</option> <option value="euler"> Euler</option>
<option value="maxwell"/> Maxwell</option> <option value="maxwell"> Maxwell</option>
<option value="shallow"/> Shallow Water</option> <option value="shallow"> Shallow Water</option>
</select> </select>
<p> <div class="eq-set-options" id="euler-options">
And here will be specific content for the solver in question The compressible Euler equations
</p> </div>
<div class="eq-set-options" id="maxwell-options">
The Maxwell equations in 2D
</div>
<div class="eq-set-options" id="shallow-options">
The Shallow Water Equations describes the surface of a body of water
</div>
</div> </div>
<div class="grid menu-item"> <div class="grid menu-item">
<p class="menu-header">Grid</p> <p class="menu-header">Grid</p>

View File

@ -142,6 +142,9 @@ class LineDrawer {
} }
(async function run() { (async function run() {
const eq_sel = document.getElementById("eq-set");
display_eqset(eq_sel.value);
const wasm = await init("./sbp_web_bg.wasm"); const wasm = await init("./sbp_web_bg.wasm");
setPanicHook(); setPanicHook();
const canvas = document.getElementById("glCanvas"); const canvas = document.getElementById("glCanvas");
@ -240,8 +243,6 @@ class LineDrawer {
resizeCanvas(); resizeCanvas();
window.addEventListener("resize", resizeCanvas, false); window.addEventListener("resize", resizeCanvas, false);
// window.requestAnimationFrame(drawMe);
const menu = document.getElementById("menu"); const menu = document.getElementById("menu");
const menu_toggle = document.getElementById("toggle-menu"); const menu_toggle = document.getElementById("toggle-menu");
menu_toggle.addEventListener("click", () => { menu_toggle.addEventListener("click", () => {
@ -252,10 +253,27 @@ class LineDrawer {
} }
}); });
const eq_sel = document.getElementById("eq-set");
eq_sel.addEventListener("change", (e) => { eq_sel.addEventListener("change", (e) => {
console.log("equation changed, wants: ", e.target.value); console.log("equation changed, wants: ", e.target.value);
display_eqset(eq_sel.value);
}); });
function display_eqset(value) {
const euler_options = document.getElementById("euler-options");
euler_options.style.display = "none";
const maxwell_options = document.getElementById("maxwell-options");
maxwell_options.style.display = "none";
const shallow_options = document.getElementById("shallow-options");
shallow_options.style.display = "none";
if (value === "euler") {
euler_options.style.display = "block";
} else if (value === "maxwell") {
maxwell_options.style.display = "block";
} else if (value === "shallow") {
shallow_options.style.display = "block";
} else {
console.error(`Unknown value ${value}`);
}
}
let animation = null; let animation = null;
let is_setup = false; let is_setup = false;

View File

@ -8,3 +8,4 @@ select#eq-set { width: 100%; }
.controls:hover { opacity: 1.0; } .controls:hover { opacity: 1.0; }
.menu-item { flex-shrink: 0; } .menu-item { flex-shrink: 0; }
.horizontal-flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } .horizontal-flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }
.eq-set-options { display: none; }