From a6c2adf0f08e8fe1e2e73a95416e6c4b2588383c Mon Sep 17 00:00:00 2001 From: Magnus Ulimoen Date: Mon, 25 May 2020 21:00:26 +0200 Subject: [PATCH] write solver specific intros --- webfront/misc/index.html | 20 +++++++++++++------- webfront/misc/main.js | 24 +++++++++++++++++++++--- webfront/misc/style.css | 1 + 3 files changed, 35 insertions(+), 10 deletions(-) diff --git a/webfront/misc/index.html b/webfront/misc/index.html index 69827e5..77c656e 100644 --- a/webfront/misc/index.html +++ b/webfront/misc/index.html @@ -4,7 +4,7 @@ - + ΣBP Solver @@ -17,13 +17,19 @@

Choose an equation set

-

- And here will be specific content for the solver in question -

+
+ The compressible Euler equations +
+
+ The Maxwell equations in 2D +
+
+ The Shallow Water Equations describes the surface of a body of water +

Grid

diff --git a/webfront/misc/main.js b/webfront/misc/main.js index 7f5ff0c..a0bb71d 100644 --- a/webfront/misc/main.js +++ b/webfront/misc/main.js @@ -142,6 +142,9 @@ class LineDrawer { } (async function run() { + const eq_sel = document.getElementById("eq-set"); + display_eqset(eq_sel.value); + const wasm = await init("./sbp_web_bg.wasm"); setPanicHook(); const canvas = document.getElementById("glCanvas"); @@ -240,8 +243,6 @@ class LineDrawer { resizeCanvas(); window.addEventListener("resize", resizeCanvas, false); - // window.requestAnimationFrame(drawMe); - const menu = document.getElementById("menu"); const menu_toggle = document.getElementById("toggle-menu"); menu_toggle.addEventListener("click", () => { @@ -252,10 +253,27 @@ class LineDrawer { } }); - const eq_sel = document.getElementById("eq-set"); eq_sel.addEventListener("change", (e) => { 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 is_setup = false; diff --git a/webfront/misc/style.css b/webfront/misc/style.css index 061c857..6585181 100644 --- a/webfront/misc/style.css +++ b/webfront/misc/style.css @@ -8,3 +8,4 @@ select#eq-set { width: 100%; } .controls:hover { opacity: 1.0; } .menu-item { flex-shrink: 0; } .horizontal-flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; } +.eq-set-options { display: none; }