In this guide we will learn how to embedd a application created inside nunuStudio in a webpage. nunuStudio applications are meant to be used inside web pages, nunuStudio editor can export web pages with the application already embedded in it and with fullscreen and vr buttons by default.
There are two options for embedding applications in your webpage, the first one can be used to fast embed application with a single line of code, the second one can be used for a more flexible approach, with page communication support or more advanced controls.
This is the fastest way to get a nunuStudio app running on your webpage, simple include the the nunu.min.js file in your webpage, and create a canvas with an id. Add the NunuApp.loadApp('pong.nsp', 'canvas') line to your body element onload and you are done, "pong.nsp" is the name of our project file and "canvas" is the id of our canvas element.
<html>
<head>
<script src="nunu.min.js"></script>
</head>
<body onload="Nunu.App.loadApp('pong.nsp', 'canvas')">
<canvas width="800" height="480" id="canvas"></canvas>
</body>
</html>If everything worked as expected you should be able to see a window with the pong application running. You can also import external aplication, they dont need to be stored locally. As an example if you change to NunuApp.loadApp('http://nunustudio.org/examples/files/nunu.nsp', 'canvas') the nunu homepage demo will be loaded instead.
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>Now lets create a new javascript script with the code bellow, this code creates a new App 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 app intance
app = new Nunu.App(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 attributes
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>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";
});
}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);