diff options
| author | untir_l <87096069+untir-l@users.noreply.github.com> | 2022-02-24 14:57:35 +0000 |
|---|---|---|
| committer | untir-l <87096069+untir-l@users.noreply.github.com> | 2022-02-25 09:56:49 +0000 |
| commit | c23118e8e48d043e4bb9b4d813a498af8d454d73 (patch) | |
| tree | 265947d2a848e8a3fb27106be38c8ae95b2fffe0 /web/hitomezashi_web_shell.html | |
| parent | 8a7dde79de6edee01571d2eb4a333d8256f4c342 (diff) | |
| download | hitomezashi-c23118e8e48d043e4bb9b4d813a498af8d454d73.tar hitomezashi-c23118e8e48d043e4bb9b4d813a498af8d454d73.tar.gz hitomezashi-c23118e8e48d043e4bb9b4d813a498af8d454d73.zip | |
Add web app frontend, restructure almost everything
- Add web app frontend code
- Add .html, .js, .wasm to .gitignore
- Restructure Makefile to work with emmake, add build targets for web app,
add .html, .js, .wasm to make clean
- Explain the pattern in the README
- Add explanation of web frontend to README
- Restructure README generally for better clarity
- Remove "make web app version" from todos in README
- Set Doxygen to EXTRACT_ALL so trivial and useless doc comments are not
needed when the naming suffices to be explanatory.
- Move ascii_binary_str_to_ints to library code in new file
hitomezashi_utils.c (and corresponding header) as web app also needs it.
- Fix SDL2 include path so it also works with Emscripten
- Remove some cluttering and unnecessary doc comments
- Improve some doc comments
Diffstat (limited to 'web/hitomezashi_web_shell.html')
| -rw-r--r-- | web/hitomezashi_web_shell.html | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/web/hitomezashi_web_shell.html b/web/hitomezashi_web_shell.html new file mode 100644 index 0000000..13e723a --- /dev/null +++ b/web/hitomezashi_web_shell.html @@ -0,0 +1,69 @@ +<!doctype html> +<html lang="en-us"> + <head> + <meta charset="utf-8"> + <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> + <!--This is code modified from https://github.com/emscripten-core/emscripten/blob/main/src/shell_minimal.html.--> + <title>Hitomezashi</title> + <style> + .emscripten { padding-right: 0; margin-left: auto; margin-right: auto; display: block; } + div.emscripten { text-align: center; } + /* the canvas *must not* have any border or padding, or mouse coords will be wrong */ + canvas.emscripten { border: 0px none; background-color: black; } + form { + display: table; + margin: auto; + } + form p { + display: table-row; + } + form label { + display: table-cell; + } + form input { + display: table-cell; + } + p#infoLink { + text-align: center; + } + p#infoLink a { + margin-left: 1ex; + margin-right: 1ex; + } + </style> + </head> + <body> + <p id="infoLink">See <a href="https://github.com/untir-l/hitomezashi/blob/main/README.md">the README</a> for information.</p> + <form name="hitomezashi parameters" autocomplete="off" method="get"> + <p><label>x pattern: <input name="x_pattern"></label></p> + <p><label>y pattern: <input name="y_pattern"></label></p> + <p><label>gap: <input name="gap" type="number"></label></p> + <p><label>line thickness: <input name="line_thickness" type="number"></label></p> + <input type="submit" value="submit"></p> + </form> + <br> + <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> + <script type='text/javascript'> + var Module = { + preRun: [], + postRun: [], + 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; + })(), + }; + const params = new URLSearchParams(window.location.search); + document.querySelector("input[name=\"x_pattern\"]").value = params.get("x_pattern"); + document.querySelector("input[name=\"y_pattern\"]").value = params.get("y_pattern"); + document.querySelector("input[name=\"gap\"]").value = params.get("gap"); + document.querySelector("input[name=\"line_thickness\"]").value = params.get("line_thickness"); + </script> + {{{ SCRIPT }}} + </body> +</html> |