mulimoen
/
SummationByParts
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
webfront/misc/index.html
View File

@ -4,7 +4,7 @@
<head>
<meta charset="utf-8" />
<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>
<link rel="stylesheet" type="text/css" href="style.css">
<script async type="module" src="main.js"></script>
@ -17,13 +17,19 @@
<div class="menu-item">
<p class="menu-header">Choose an equation set</p>
<select id="eq-set" name="eq-set">
<option value="euler"/> Euler</option>
<option value="maxwell"/> Maxwell</option>
<option value="shallow"/> Shallow Water</option>
<option value="euler"> Euler</option>
<option value="maxwell"> Maxwell</option>
<option value="shallow"> Shallow Water</option>
</select>
<p>
And here will be specific content for the solver in question
</p>
<div class="eq-set-options" id="euler-options">
The compressible Euler equations
</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 class="grid menu-item">
<p class="menu-header">Grid</p>

24
webfront/misc/main.js
View File

@ -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;

1
webfront/misc/style.css
View File

@ -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; }