update from devel d01d275

pkarnakov · Jan 14, 2024 · 0325958 · 0325958
1 parent b9d31bd
commit 0325958
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 79 deletions.
diff --git a/.gitrev b/.gitrev
@@ -1 +1 @@
-3d440b7
+4428e78
diff --git a/poisson/index.html b/poisson/index.html
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <link rel="icon" type="image/png" href="favicon.png">
     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-    <meta name="viewport" content="width=450, initial-scale=0.8, minimum-scale=0.8, maximum-scale=3">
+    <meta name="viewport" content="width=470">
     <title>ODIL Poisson</title>
     <link rel="stylesheet" href="poisson.css" />
   </head>
@@ -15,33 +15,24 @@
       </div>
     </noscript>
 
-    <div style="text-align: center;">
-      <div style="display: inline; vertical-align: top;">
-        <div style="display: inline-block; vertical-align: top;">
-          <div>
-            <a class="github-button" href="https://github.com/pkarnakov/autodiff" data-size="large" data-show-count="true" aria-label="Star on GitHub">Star</a>
-            <a href="https://github.com/pkarnakov/autodiff" style="position:relative; bottom:0.6em;">github.com/pkarnakov/autodiff</a>
-          </div>
-          <canvas class="emscripten" id="canvas" tabindex=-1></canvas>
-        </div>
-        <div style="margin:auto;">
-          <input type="button" title="space" class="button" id="button_pause" value="pause" onclick="togglePause();">
-          <input type="button" title='r' class="button" id="button_restart" value="restart" onclick="pressButton('r')">
-        </div>
-        <div style="width:400px;margin:auto;text-align:left;">
-          <kbd>click</kbd> draw mask,
-          <kbd>space</kbd> toggle pause,
-          <kbd>r</kbd> restart
-          <br>
-          <div id="text_status" style="margin-top:10px;"></div>
-        </div>
-        <!--
-        <div style="display: inline-block; vertical-align: top; margin: 0;">
-          <textarea class="emscripten" id="output" style="width:800px;height:100px;"></textarea>
-          <textarea class="emscripten" id="outputerr" style="width:800px;height:100px;"></textarea>
-        </div>
-        -->
+    <div id="content_column">
+      <div class="row">
+        <a class="github-button" href="https://github.com/pkarnakov/autodiff" data-size="large" data-show-count="true" aria-label="Star on GitHub">Star</a>
+        <a href="https://github.com/pkarnakov/autodiff" style="position:relative; bottom:0.6em;">github.com/pkarnakov/autodiff</a>
       </div>
+      <div class="row">
+        <canvas id="canvas" tabindex=-1></canvas>
+      </div>
+      <div class="row">
+        <input type="button" title="space" class="button" id="button_pause" value="pause" onclick="togglePause();">
+        <input type="button" title='r' class="button" id="button_restart" value="restart" onclick="pressButton('r')">
+      </div>
+      <div class="row">
+        <span class="kbdspan"><kbd>click</kbd> draw mask</span>,
+        <span class="kbdspan"><kbd>space</kbd> toggle pause</span>,
+        <span class="kbdspan"><kbd>r</kbd> restart</span>
+      </div>
+      <div class="row" id="text_status"></div>
     </div>
 
     <script async defer src="libs/github_buttons.js"></script>

diff --git a/poisson/poisson.css b/poisson/poisson.css
@@ -4,9 +4,30 @@ html, body {
   margin: 0;
   padding: 0;
 }
-textarea.emscripten { font-family: monospace; width: 300px; padding: 0; margin: 0; }
-canvas.emscripten { border: 1px solid; border-radius: 0; background-color: white; width: 400px; }
-div.emscripten { text-align: center; }
+#textarea_out, #textarea_err {
+  font-family: monospace;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  height:100px;
+}
+#content_column {
+  margin: auto;
+  margin-top: 0px;
+  padding: 10px 10px 0px 10px;
+  text-align: center;
+  width: 450px;
+}
+.row {
+  margin: 5px 0px 5px 0px;
+}
+#canvas {
+  border: 1px solid;
+  border-radius: 0;
+  background-color: white;
+  width: 450px;
+  height: 450px;
+}
 body {
   display: flex;
   flex-flow: column;
@@ -29,20 +50,18 @@ textarea {
 }
 
 .button {
-  display: inline-block;
-  color: #000000;
   background: #ffffff;
   vertical-align: baseline;
   border-radius: 0;
-  border: 0.15em solid #808080;
-  margin: 2px 0px 2px 0px;
-  padding: 0px 5px 2px 5px;
+  border: 3px solid #808080;
+  color: #000000;
+  font-size: 1.2em;
+  height: 1.8em;
+  line-height: 1;
   text-align: center;
   text-decoration: none;
-  font-size: 18px;
-  height: 1.8em;
-  width: auto;
   touch-action: manipulation;
+  white-space: nowrap;
 }
 .button:hover {
   border-color: #000000;
@@ -76,9 +95,17 @@ kbd {
   border: 1px solid #b4b4b4;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
   color: #333;
-  display: inline-block;
   font-size: 1em;
   line-height: 1;
   padding: 1px 2px;
   white-space: nowrap;
 }
+.kbdspan {
+  white-space:nowrap;
+}
+#text_status {
+  margin-top: 10px;
+  font-family: Courier New, monospace;
+  font-size: 1em;
+  text-align: left;
+}
diff --git a/poisson/poisson.js b/poisson/poisson.js
diff --git a/poisson/poisson.wasm b/poisson/poisson.wasm
diff --git a/poisson/poisson_inc.js b/poisson/poisson_inc.js
@@ -1,5 +1,6 @@
-var output = document.getElementById('output');
-var outputerr = document.getElementById('outputerr');
+var debug = false;
+var textarea_out;
+var textarea_err;
 var g_shared_canvas;
 
 // Colors.
@@ -56,23 +57,23 @@ function togglePause() {
 }
 
 function clearOutput() {
-  if (output) {
-    output.value = '';
+  if (textarea_out) {
+    textarea_out.value = '';
   }
-  if (outputerr) {
-    outputerr.value = '';
+  if (textarea_err) {
+    textarea_err.value = '';
   }
 }
-function print(text) {
-  if (output) {
-    output.value += text + "\n";
-    output.scrollTop = output.scrollHeight;
+function printOut(text) {
+  if (textarea_out) {
+    textarea_out.value += text + "\n";
+    textarea_out.scrollTop = textarea_out.scrollHeight;
   }
 }
-function printError(text) {
-  if (outputerr) {
-    outputerr.value += text + "\n";
-    outputerr.scrollTop = outputerr.scrollHeight;
+function printErr(text) {
+  if (textarea_err) {
+    textarea_err.value += text + "\n";
+    textarea_err.scrollTop = textarea_err.scrollHeight;
   }
 }
 
@@ -92,6 +93,21 @@ function pressButton(c) {
   }
 }
 
+function preRun() {
+  if (debug) {
+    const fragment = document.createDocumentFragment();
+    const div = fragment.appendChild(document.createElement("div"));
+    div.className = "row";
+    textarea_out = document.createElement("textarea")
+    textarea_out.id = "textarea_out";
+    div.appendChild(textarea_out);
+    textarea_err = document.createElement("textarea")
+    textarea_err.id = "textarea_err";
+    div.appendChild(textarea_err);
+    window.content_column.appendChild(fragment);
+  }
+}
+
 function postRun() {
   SendKeyDown = Module.cwrap('SendKeyDown', null, ['number']);
   SendMouseMotion = Module.cwrap('SendMouseMotion', null, ['number', 'number']);
@@ -109,15 +125,15 @@ function postRun() {
   g_shared_canvas.height = GetBitmapHeight();
 
   let handler_keydown = function(e) {
-    if (e.key == ' ') {
-      togglePause();
+    let nodename = e.target.nodeName;
+    if (nodename == 'TEXTAREA') {
       return;
     }
-    pressButton(e.key);
-    // Prevent scrolling by Space.
-    if(e.keyCode == 32 && e.target == document.body) {
+    if (e.key == ' ') {
       e.preventDefault();
+      togglePause();
     }
+    pressButton(e.key);
   };
   let get_xy = function(e) {
     let x = e.offsetX / canvas.clientWidth;
@@ -171,35 +187,19 @@ function postRun() {
   canvas.addEventListener('touchstart', handler_touchstart);
   canvas.addEventListener('touchend', handler_touchend);
 
-  // Disable Space on buttons.
-  [
-    window.button_pause, window.button_restart,
-  ].forEach(b => {
-    b.addEventListener('keydown', function(e){
-      if (e.key == ' ') {
-        e.preventDefault();
-      }
-    }, false);
-    b.addEventListener('keyup', function(e){
-      if (e.key == ' ') {
-        e.preventDefault();
-      }
-    }, false);
-  });
-
   syncButtons();
 }
 
 var Module = {
-  preRun: [],
+  preRun: [preRun],
   postRun: [postRun],
   print: (function(text) {
     clearOutput();
     return function(text) {
       if (arguments.length > 1) {
         text = Array.prototype.slice.call(arguments).join(' ');
       }
-      print(text);
+      printOut(text);
     };
   })(),
   printErr: (function(text) {
@@ -208,7 +208,7 @@ var Module = {
       if (arguments.length > 1) {
         text = Array.prototype.slice.call(arguments).join(' ');
       }
-      printError(text);
+      printErr(text);
     };
   })(),
   canvas: (function() { return document.getElementById('canvas'); })(),