diff options
| author | untir_l <87096069+untir-l@users.noreply.github.com> | 2022-06-11 15:43:23 +0000 |
|---|---|---|
| committer | untir_l <87096069+untir-l@users.noreply.github.com> | 2022-06-11 15:49:12 +0000 |
| commit | 2aa35e2c108f954949ec001f1e33846379e7cc98 (patch) | |
| tree | 1653252d1419d01b7347a70f47416ae45d4fb2c4 /web/hitomezashi_web_shell.html | |
| parent | e0babc53b16ef49ff40db21bbc4326e6e23185fa (diff) | |
| download | hitomezashi-2aa35e2c108f954949ec001f1e33846379e7cc98.tar hitomezashi-2aa35e2c108f954949ec001f1e33846379e7cc98.tar.gz hitomezashi-2aa35e2c108f954949ec001f1e33846379e7cc98.zip | |
Web: canvas now updates on the fly based on input
Also some other minor changes to thw web README.md and the Makefile, and
making some stuff const where they weren't throughout the lib/ tree as well.
Diffstat (limited to 'web/hitomezashi_web_shell.html')
| -rw-r--r-- | web/hitomezashi_web_shell.html | 164 |
1 files changed, 79 insertions, 85 deletions
diff --git a/web/hitomezashi_web_shell.html b/web/hitomezashi_web_shell.html index a774f1e..e0e23d4 100644 --- a/web/hitomezashi_web_shell.html +++ b/web/hitomezashi_web_shell.html @@ -1,90 +1,84 @@ <!doctype html> <html lang="en-us"> - <head> - <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.--> - <meta name="viewport" content="width=device-width, initial-scale=1.0"> - <title>Hitomezashi</title> - <style> - canvas { - padding-right: 0; - margin-left: auto; - margin-right: auto; - display: block; - border: 0px none; - background-color: black; - } - form { - display: table; - margin: auto; - } - form > p { - display: table-row; - } - form > p > label { - display: table-cell; - } - form > p > label > input { - display: table-cell; - } - button#downloadCanvas { - display: block; - margin: 0 auto; - } - p#info { - text-align: center; - } - p#info > a { - margin-left: 1ex; - margin-right: 1ex; - } - </style> - </head> - <body> - <p id="info">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> - <p><label>foreground colour: <input name="fg_colour" type="color"></label></p> - <p><label>background colour: <input name="bg_colour" type="color"></label></p> - <p><input type="submit" value="submit"></p> - </form> - <br> - <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> - <br> - <button id="downloadCanvas">download as image</button> - <script type='text/javascript'> - // Make sure the WebGL context preserves the drawing buffer so the download button works - // Based on https://stackoverflow.com/a/43979935 - const canvas = document.querySelector("#canvas"); - canvas.getContext("webgl", {preserveDrawingBuffer: true}); - var Module = { - canvas: (function() { - canvas.addEventListener("webglcontextlost", function(e) { alert('WebGL context lost. You will need to reload the page.'); e.preventDefault(); }, false); - return canvas; - })(), - }; +<head> + <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.--> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>Hitomezashi</title> + <style> + canvas { + padding-right: 0; + margin-left: auto; + margin-right: auto; + display: block; + border: 0px none; + background-color: black; + } - // Set the input fields based on the query string so they appear sticky - 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"); - document.querySelector("input[name=\"fg_colour\"]").value = params.get("fg_colour"); - document.querySelector("input[name=\"bg_colour\"]").value = params.get("bg_colour"); + form { + display: table; + margin: auto; + } - function downloadCanvas() { - let downloadLink = document.createElement("a"); - downloadLink.setAttribute("download", "hitomezashi"); - downloadLink.setAttribute("href", canvas.toDataURL()); - downloadLink.click(); - } - document.querySelector("#downloadCanvas").addEventListener("click", downloadCanvas); - </script> - {{{ SCRIPT }}} - </body> -</html> + form>p { + display: table-row; + } + + form>p>label { + display: table-cell; + } + + form>p>label>input { + display: table-cell; + } + + button#downloadCanvas { + display: block; + margin: 0 auto; + } + + p#info { + text-align: center; + } + + p#info>a { + margin-left: 1ex; + margin-right: 1ex; + } + </style> +</head> + +<body> + <form name="hitomezashi parameters" autocomplete="off"> + <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> + <p><label>foreground colour: <input name="fg_colour" type="color"></label></p> + <p><label>background colour: <input name="bg_colour" type="color"></label></p> + </form> + + <canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas> + <script type='text/javascript'> + var Module = { + canvas: (function () { + var canvas = document.getElementById('canvas'); + + canvas.addEventListener("webglcontextlost", function (e) { alert('Error: WebGL context lost. Please reload the page.'); e.preventDefault(); }, false); + + return canvas; + })(), + }; + function downloadCanvas() { + let downloadLink = document.createElement("a"); + downloadLink.setAttribute("download", "hitomezashi"); + downloadLink.setAttribute("href", canvas.toDataURL()); + downloadLink.click(); + } + document.querySelector("#downloadCanvas").addEventListener("click", downloadCanvas); + </script> + {{{ SCRIPT }}} +</body> + +</html>
\ No newline at end of file |