This is sample files for build openframeworks with Emscripten.
The article is available in ja-JP. 日本語の記事は以下にあります。
Created
November 4, 2022 07:19
-
-
Save nandenjin/12e5aec866cf9be638a85d39e6e153a6 to your computer and use it in GitHub Desktop.
oF x Emscripten
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- Modern shell file for Emscripten --> | |
| <html> | |
| <meta charset="UTF-8"> | |
| <head> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <style> | |
| html, | |
| body { | |
| background-color: #000; | |
| margin: 0; | |
| color: #fff; | |
| } | |
| #control { | |
| position: fixed; | |
| top: 30px; | |
| left: 30px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="control"> | |
| <div id="status"></div> | |
| <progress id="progress"></progress> | |
| <div id="error"></div> | |
| </div> | |
| <canvas id="canvas"></canvas> | |
| <script> | |
| const statusElement = document.getElementById("status"); | |
| const progressElement = document.getElementById("progress"); | |
| var Module = { | |
| preRun: [updateCanvasSize], | |
| postRun: [], | |
| print: (text) => { | |
| // To be implemented | |
| }, | |
| printErr: (text) => { | |
| console.error(text); | |
| }, | |
| canvas: document.getElementById("canvas"), | |
| setStatus: (text) => { | |
| const now = Date.now(); | |
| // Save last execution, mock for initialization | |
| Module.setStatus.last = Module.setStatus.last || { | |
| time: now, | |
| text: "", | |
| }; | |
| // Ignore if same with current | |
| if (text === Module.setStatus.text) return; | |
| // Is progress update? | |
| const m = text.match(/([^(]+)\((\d+(\.\d+)?)\/(\d+)\)/); | |
| // Ignore if progress update in 30ms from previous | |
| if (m && now - Module.setStatus.last.time < 30) return; | |
| // If is progress update: | |
| if (m) { | |
| text = m[1]; | |
| progressElement.value = parseInt(m[2]); | |
| progressElement.max = parseInt(m[4]); | |
| } | |
| // Others: | |
| else { | |
| // Hide progress display | |
| progressElement.value = null; | |
| progressElement.max = null; | |
| progressElement.hidden = true; | |
| } | |
| // Output | |
| console.log(text); | |
| statusElement.innerHTML = text; | |
| // Store execution log | |
| Module.setStatus.last.time = now; | |
| Module.setStatus.last.text = text; | |
| }, | |
| }; | |
| // If some error is throwed, report by setting status | |
| window.addEventListener("error", (e) => { | |
| Module.setStatus("Error"); | |
| console.error(e); | |
| document.getElementById("error").innerHTML = e.message; | |
| }); | |
| /** Update canvas size with fitting to window size */ | |
| const updateCanvasSize = () => { | |
| Module.setCanvasSize?.(window.innerWidth, window.innerHeight); | |
| }; | |
| window.addEventListener("resize", updateCanvasSize); | |
| window.addEventListener("load", updateCanvasSize); | |
| Module.setStatus("Downloading..."); | |
| </script> | |
| {{{ SCRIPT }}} | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment