Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Minimum in HTML to run emscripten generated file.js #1326

Closed
capiman opened this issue Jun 24, 2013 · 3 comments
Closed

Minimum in HTML to run emscripten generated file.js #1326

capiman opened this issue Jun 24, 2013 · 3 comments

Comments

@capiman
Copy link

capiman commented Jun 24, 2013

I know i can compile via

python emcc test.cpp -o test.html

But know i want to use the generated Javascript code in an existing webpage
or page with own layout.

Therefore i compile it like the following:

python emcc test.cpp -o test.js

and want to include the test.js manually into a webpage.

What is the minimum needed in a HTML file
to call and run an emscripten generated JavaScript program?

The program needs only printf to a textarea in main and
emscripten API calls like emscripten_set_main_loop,
emscripten_async_wget2, ... no "graphical" output.

Something like:

text is not displayed by github, rework in second windows...
@capiman
Copy link
Author

capiman commented Jun 24, 2013

script src="test.js"></script>
script>

  var Module = {
    print: (function() {
      var element = document.getElementById('output');
      return function(text) {
        element.innerHTML += text.replace('\n', '<br>', 'g') + '<br>';
      };
    })(),
    canvas: document.getElementById('canvas')
  };

main()

/script>

textarea class="emscripten" id="output" rows="20"></textarea>

@kripken
Copy link
Member

kripken commented Jun 25, 2013

That's basically it, yes. Define Module.print and printErr and a console app can work, add Module.canvas to get rendering. See src/shell.html for the default stuff.

@kripken kripken closed this as completed Jun 25, 2013
@matthewwiese
Copy link

Due to the happenstance of Google's SEO, this issue comes up when searching for simple templates to use with the generated JavaScript file in HTML without the additional scaffolding that doing -o test.html directly with emcc provides.

Below is the most basic HTML I was able to get working with Emscripten:

<html>
	<body>
		<p id="output" />
		<script>
			var Module = {
				print: (function() {
					var element = document.getElementById('output');
					return function(text) {
						element.innerHTML += text + "<br>";
					};
				})(),
				printErr: function(text) {
						if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');
						if (0) {
							dump(text + '\n');
						}
				},				
				canvas: (function() {
					var canvas = document.getElementById('canvas');
					return canvas;
				})()
			};
		</script>
		<script src="bare.js"></script>
	</body>
</html>

The code above appears in my BASIC to C to WebAssembly project repository. My included sample BASIC code brute forces the primes up to 1000 and "prints" them. This skeleton HTML provides the means to retrieve that output and redirect it to the page in the form of a <p> tag.

@ampli ampli mentioned this issue Mar 10, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@kripken @matthewwiese @capiman