diff options
| author | kartofen <mladenovnasko0@gmail.com> | 2022-10-28 22:23:02 +0300 |
|---|---|---|
| committer | kartofen <mladenovnasko0@gmail.com> | 2022-10-28 22:23:02 +0300 |
| commit | 7363f062baf99097a9a5e2e4366cced0afd526cb (patch) | |
| tree | c1578d5fdbf9639aada5d48c6aa8e48565c43816 /src/shell.html | |
| parent | 8e235c8e6641f223c59e8502ac0caebf9c5c1ffc (diff) | |
Diffstat (limited to 'src/shell.html')
| -rw-r--r-- | src/shell.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/src/shell.html b/src/shell.html new file mode 100644 index 0000000..f8e31a8 --- /dev/null +++ b/src/shell.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html lang="en-us"> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <title>Pendulum</title> + <style> + .el { margin: 5px; } + div.el { float: left; } + textarea.el { font-family: monospace; width: 100%; } + canvas.el { border: 0px none; background-color: black; } + </style> + </head> + <body> + <div class="el" id="status">Downloading...</div> + + <div class="el"> + <canvas id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> + </div> + + <div class="el"> + <label>Angle (deg):</label> <br> + <input type="text" id="s_input"> <br> + <label>Lenght (m):</label> <br> + <input type="text" id="l_input"> <br> + <label>Mass (kg):</label> <br> + <input type="text" id="m_input"> <br> + <button onclick="loadParams();">Submit</button> + </div> + + <textarea class="el" id="output" rows="12"></textarea> + + + <script type='text/javascript'> + let params = new URLSearchParams(location.search); + let s = params.get('s'); s = (s == null) ? 0 : s; + let l = params.get('l'); l = (l == null) ? 0 : l; + let m = params.get('m'); m = (m == null) ? 0 : m; + + document.getElementById('s_input').value = s; + document.getElementById('l_input').value = l; + document.getElementById('m_input').value = m; + + function loadParams() { + let ns = document.getElementById('s_input').value; + let nl = document.getElementById('l_input').value; + let nm = document.getElementById('m_input').value; + window.location.href = `?s=${ns}&l=${nl}&m=${nm}`; + } + + var statusElement = document.getElementById('status'); + + var Module = { + attachGLFWEventsToCanvas: true, + preRun: [], + postRun: [], + arguments: [s, l, m], + print: (function() { + var element = document.getElementById('output'); + if (element) element.value = ''; // clear browser cache + return function(text) { + if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' '); + // These replacements are necessary if you render to raw HTML + //text = text.replace(/&/g, "&"); + //text = text.replace(/</g, "<"); + //text = text.replace(/>/g, ">"); + //text = text.replace('\n', '<br>', 'g'); + console.log(text); + if (element) { + element.value += text + "\n"; + element.scrollTop = element.scrollHeight; // focus on bottom + } + }; + })(), + canvas: (function() { + var canvas = document.getElementById('canvas'); + + // As a default initial behavior, pop up an alert when webgl context is lost. To make your + // application robust, you may want to override this behavior before shipping! + // See http://www.khronos.org/registry/webgl/specs/latest/1.0/#5.15.2 + canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); + + return canvas; + })(), + setStatus: function(text) { + if (!Module.setStatus.last) Module.setStatus.last = { time: Date.now(), text: '' }; + if (text === Module.setStatus.last.text) return; + var now = Date.now(); + Module.setStatus.last.time = now; + Module.setStatus.last.text = text; + statusElement.innerHTML = text; + }, + totalDependencies: 0, + monitorRunDependencies: function(left) { + this.totalDependencies = Math.max(this.totalDependencies, left); + Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies-left) + '/' + this.totalDependencies + ')' : 'All downloads complete.'); + } + }; + Module.setStatus('Downloading...'); + window.onerror = function() { + Module.setStatus('Exception thrown, see JavaScript console'); + Module.setStatus = function(text) { + if (text) console.error('[post-exception status] ' + text); + }; + }; + </script> + {{{ SCRIPT }}} + </body> +</html> |