diff options
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 |