nandenjin/_README.md

## _README.md

      
    Raw
  

              _README.md
            
          
    openframeworks with Emscripten Build

This is sample files for build openframeworks with Emscripten.
The article is available in ja-JP. 日本語の記事は以下にあります。

https://posts.nandenjin.com/2022/of-emscripten


## template.html
<!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>
	<!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>