add grid options

2020-05-24 23:31:33 +02:00
parent cd72ce3477
commit 4c40acbb1f
3 changed files with 134 additions and 64 deletions
--- a/webfront/misc/index.html
+++ b/webfront/misc/index.html
@@ -10,38 +10,54 @@
        <script async type="module" src="main.js"></script>
    </head>
    <body>
-        <canvas id="glCanvas"></canvas>
+        <div class="canvas">
+            <canvas id="glCanvas"></canvas>
+        </div>
+        <div class="vertical-menu" id="menu">
+            <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>
+                </select>
+                <p>
+                    And here will be specific content for the solver in question
+                </p>
+            </div>
+            <div class="grid menu-item">
+                <p class="menu-header">Grid</p>
+                <div class="horizontal-flex">
+                    x:
+                    <label for="x0">x0:</label><input type="number" name="x0" id="x0" step="any" placeholder="0.0" value="0.0">
+                    <label for="xn">xn:</label><input type="number" name="xn" id="xn" step="any" placeholder="1.0" value="1.0">
+                    <label for="xN">N:</label><input type="number" name="xN" id="xN" placeholder="25" value="25" min="2">
+                </div>
+                <div class="horizontal-flex">
+                    y:
+                    <label for="y0">y0:</label><input type="number" name="y0" id="y0" step="any" placeholder="0.0" value="0.0">
+                    <label for="yn">yn:</label><input type="number" name="yn" id="yn" step="any" placeholder="1.0" value="1.0">
+                    <label for="yN">N:</label><input type="number" name="yN" id="yN" placeholder="25" value="25" min="2">
+                </div>
+                <div>
+                    <label for="diamond">Tilt grid </label><input type="checkbox" name="diamond" id="diamond">
+                </div>
+                <!--
+                Curvilinear? Inputting some random json?
+                -->
+            </div>
+            <div class="gen_set menu-item">
+                <p class="menu-header">Settings</p>
+            </div>
+            <div class="about menu-item">
+                <p class="menu-header">About</p>
+                <p>More information can be found along with the <a href="https://ulimoen.dev/git/mulimoen/SBPonWEB">source code</a>.</p>
+            </div>
+        </div>
+        <div class="controls">
+            <button title="Menu" class="control-item" id="toggle-menu" type="button">☰</button>
+            <button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button>
+            <button title="Reset" class="control-item" id="reset">🔄️</button>
+        </div>
    </body>
-    <div class="vertical-menu" id="menu">
-        <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>
-            </select>
-            <p>
-                And here will be specific content for the solver in question
-            </p>
-        </div>
-        <div class="grid menu-item">
-            <p class="menu-header">Grid settings:</p>
-            x: x0, yn, n<br/>
-            y: y0, yn, n<br/>
-
-            Curvilinear? Diamond shaped domain?
-        </div>
-        <div class="gen_set menu-item">
-            <p class="menu-header">General settings</p>
-        </div>
-        <div class="about menu-item">
-            <p class="menu-header">About</p>
-            <p>More information can be found along with the <a href="https://ulimoen.dev/git/mulimoen/SBPonWEB">source code</a>.</p>
-        </div>
-    </div>
-    <div class="controls">
-        <button title="Menu" class="control-item" id="toggle-menu" type="button">☰</button>
-        <button title="Play/pause" class="control-item" id="toggle-playing">▶️/⏸️</button>
-        <button title="Reset" class="control-item" id="reset">🔄️</button>
-    </div>
 </html>
--- a/webfront/misc/main.js
+++ b/webfront/misc/main.js
@@ -1,3 +1,6 @@
+import { default as init, set_panic_hook as setPanicHook,
+         MaxwellUniverse, EulerUniverse, ShallowWaterUniverse } from "./sbp_web.js";
+
 function compile_and_link(ctx, vsource, fsource) {
    const program = ctx.createProgram();
    const vsShader = ctx.createShader(ctx.VERTEX_SHADER);
@@ -139,6 +142,8 @@ class LineDrawer {
 }

 (async function run() {
+    const wasm = await init("./sbp_web_bg.wasm");
+    setPanicHook();
    const canvas = document.getElementById("glCanvas");

    const gl = canvas.getContext("webgl");
@@ -149,26 +154,10 @@ class LineDrawer {

    console.info("Successfully opened webgl canvas");

-    const width = 23;
-    const height = 21;
-
-    const x = new Float32Array(width * height);
-    const y = new Float32Array(width * height);
-    for (let j = 0; j < height; j += 1) {
-        for (let i = 0; i < width; i += 1) {
-            const n = width*j + i;
-            x[n] = i / (width - 1.0);
-            y[n] = j / (height - 1.0);
-        }
-    }
-
-    const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
-    for (let i = 0; i < width*height; i += 1) {
-        bbox[0] = Math.min(bbox[0], x[i]);
-        bbox[1] = Math.max(bbox[1], x[i]);
-        bbox[2] = Math.min(bbox[2], y[i]);
-        bbox[3] = Math.max(bbox[3], y[i]);
-    }
+    let x;
+    let y;
+    let width;
+    let height;

    // A nice pink to show missing values
    gl.clearColor(1.0, 0.753, 0.796, 1.0);
@@ -180,22 +169,64 @@ class LineDrawer {

    const xBuffer = gl.createBuffer();
    const yBuffer = gl.createBuffer();
-
-    gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
-    gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
-
    const lineDrawer = new LineDrawer(gl);
-    lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);

+    function setup() {
+        width = parseInt(document.getElementById("xN").value);
+        height = parseInt(document.getElementById("yN").value);

-    function drawMe() {
+        const x0 = parseFloat(document.getElementById("x0").value);
+        const xn = parseFloat(document.getElementById("xn").value);
+        const y0 = parseFloat(document.getElementById("y0").value);
+        const yn = parseFloat(document.getElementById("yn").value);
+
+        const diamond = document.getElementById("diamond").checked;
+        console.log(diamond);
+
+        x = new Float32Array(width * height);
+        y = new Float32Array(width * height);
+        const dx = (xn - x0) / (width - 1)
+        const dy = (yn - y0) / (height - 1)
+        for (let j = 0; j < height; j += 1) {
+            for (let i = 0; i < width; i += 1) {
+                const n = width*j + i;
+                x[n] = dx*i;
+                y[n] = dy*j;
+
+                if (diamond) {
+                    const xn = x[n];
+                    const yn = y[n];
+
+                    x[n] = xn - yn;
+                    y[n] = xn + yn;
+                }
+            }
+        }
+
+        const bbox = [+Number(Infinity), -Number(Infinity), +Number(Infinity), -Number(Infinity)];
+        for (let i = 0; i < width*height; i += 1) {
+            bbox[0] = Math.min(bbox[0], x[i]);
+            bbox[1] = Math.max(bbox[1], x[i]);
+            bbox[2] = Math.min(bbox[2], y[i]);
+            bbox[3] = Math.max(bbox[3], y[i]);
+        }
+        gl.bindBuffer(gl.ARRAY_BUFFER, xBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, x, gl.STATIC_DRAW);
+        gl.bindBuffer(gl.ARRAY_BUFFER, yBuffer);
+        gl.bufferData(gl.ARRAY_BUFFER, y, gl.STATIC_DRAW);
+
+        lineDrawer.set_xy(width, height, xBuffer, yBuffer, bbox);
+    }
+
+    function draw() {
        gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

        lineDrawer.draw();
+    }

-        window.requestAnimationFrame(drawMe);
+    function drawMe() {
+        draw();
+        animation = window.requestAnimationFrame(drawMe);
    }

    function resizeCanvas() {
@@ -208,7 +239,8 @@ class LineDrawer {

    resizeCanvas();
    window.addEventListener("resize", resizeCanvas, false);
-    window.requestAnimationFrame(drawMe);
+
+    // window.requestAnimationFrame(drawMe);

    const menu = document.getElementById("menu");
    const menu_toggle = document.getElementById("toggle-menu");
@@ -225,6 +257,27 @@ class LineDrawer {
        console.log("equation changed, wants: ", e.target.value);
    });

+    let animation = null;
+    let is_setup = false;
    const play_button = document.getElementById("toggle-playing");
+    play_button.addEventListener("click", (_e) => {
+        console.log("play/pause pressed");
+        if (!animation) {
+            if (!is_setup) {
+                setup();
+            }
+            animation = window.requestAnimationFrame(drawMe);
+        } else {
+            window.cancelAnimationFrame(animation);
+            animation = null;
+        }
+    });
    const reset_button = document.getElementById("reset");
+    reset_button.addEventListener("click", (_e) => {
+        window.cancelAnimationFrame(animation);
+        animation = null;
+        is_setup = false;
+        setup();
+        draw();
+    });
 }());
--- a/webfront/misc/style.css
+++ b/webfront/misc/style.css
@@ -1,9 +1,10 @@
 * { margin: 0; padding: 0; overflow: hidden; }
 html, body { width:100%; height:100%; }
-canvas { display:block; position: fixed; z-index: 1; }
+.canvas { display:block; position: fixed; z-index: -1; width: 100%; height: 100%; }
 select#eq-set { width: 100%; }
 .vertical-menu { position: fixed; width: 30%; min-width: 200px; top: 0; bottom: 30px; z-index: 2; background-color: #eee; display: flex; flex-direction: column; justify-content: space-between; padding: 0.5em; overflow-y: auto; }
 .menu-header { font-weight: bold; }
 .controls { position: relative; z-index: 3; top: calc(100% - 30px); height: 30px; display: flex; align-items: center; width: 175px; justify-content: space-around; opacity: 0.5; }
 .controls:hover { opacity: 1.0; }
 .menu-item { flex-shrink: 0; }
+.horizontal-flex { display: flex; flex-direction: row; align-items: center; justify-content: space-between; }