Back

Embedding

In this guide we will learn how to embedd a application created inside nunuStudio in a completly normal webpage without using any external plugins.

nunuStudio apps are meant to be used inside web pages, nunuStudio can export full page web apps with a fullscreen and vr buttons by default.

Preparing the page

First we need to import the nunu.min.js file to the webpage, this javascript file includes all the code required to run a nunuStudio aplication.

After including the runtime file a canvas to display the application is needed, add a canvas to your html code.

<!--Import nunuStudio runtime-->
<script type="text/javascript" src="nunu.min.js"></script>

<!--Canvas used to draw content-->
<canvas id="canvas"></canvas>

NunuApp object

Now lets create a new javascript script with the code bellow, this code creates a new NunuApp instance that will use the provided canvas to render the application.

If you dont want to start running the application immediately you can use the loadProgramAsync() or loadProgram() (not recommended, this blocks the page until all files are loaded), these will load the application files and decode them but will not start running the application immediately, this can be used for preloading applications into an webpage, after the app gets loaded the run() method can be used to start it and the exit() method can be used to kill the application and dispose all resources used.

var app, canvas;

//Should be called after page load
function initialize()
{
	//Get the canvas that will be used to draw content
	canvas = document.getElementById("canvas");

	//Create new NunuApp intance
	app = new NunuApp(canvas);

	//Load and run the "app.nsp" file
	app.loadRunProgram("app.nsp");
}

//Should be called every time the window is resized
function resize()
{
	//Update canvas width and height properties
	canvas.width = canvas.offsetWidth;
	canvas.height = canvas.offsetHeight;

	//Resize app
	app.resize();
}

To finish we need to call the initialize method after the page loads, and the resize method every time the canvas is resized. To do this we can add the code bellow to the document body declaration.

<body onload="initialize();" onresize="resize();">
...
</body>

Toggle Fullscreen and VR

To toggle fullscreen its possible to use the toggleFullscreen method present in the app object, for VR its recomended to check if the browser supports WebVR and if there is a VRDisplay available before creating a button to toggle vr mode. To check for VR support use the following code.

//Toggle fullscreen mode
function toggleFullscreen()
{
	app.toggleFullscreen(document.body);
}

//Toggle VR mode
function toggleVR()
{
	app.toggleVR();
}

//Check if VR is available
if(app.vrAvailable())
{
	//Check if there are displays available add button
	Nunu.getVRDisplays(function(display)
	{
		button = document.getElementById("vr");
		button.style.visibility = "visible";
	});
}

Adding a loading bar

Booth the loadRunProgram() and the loadProgramAsync() methods provide a onProgress callback field, this callback returns a value from 0.0 to 1.0 that indicates loading progress, this value can be used to control a loading bar.

A simple way to create a loading bar is by adding a couple of divisions, the code bellow is used for the default loading bar created when exporting web projects directly from the nunuStudio editor.

<!--Loading bar frame-->
<div style="position:absolute; width:100%; height:7%; left:0%; top:120%; border-style:solid; border-color:#FFFFFF; border-width:2px">
	<!--Loading bar-->
	<div id="bar" style="position:absolute; width:0%; height:100%; left:0%; top:0%; background-color:#FFFFFF">
</div>

To control the created bar the following code can be used.

//onProgress callback
var bar = document.getElementById("bar");
var onProgress = function(event)
{
	if(event.lengthComputable)
	{
		var progress = event.loaded / event.total * 100;
		bar.style.width = progress + "%";
	}
};

//onLoad callback
var onLoad = function(){};

//Load and run nunu app
app.loadRunProgram("app.nsp", onLoad, onProgress);