Fullscreen Button

If the browser supports fullscreen mode, Koru adds a fullscreen button to the top right corner of the 3D scene preview. This button like snapshot buttons is a simple HTML object that can be configured and altered using JavaScript and CSS. Here we’ll show how.

Hiding the fullscreen button

Make a simple test scene and export it to a single HTML document. Then open it in your HTML/text editor and navigate to the <style> section atthe top of the file. There must be .parent CSS rule there and some extra rules depending on the export template. Add the following code to the bottom of the style block:

.koru-fullscreen {
	display: none;
}

Save the file and reload it in browser. The fullscreen button will disappear.

Making a custom fullscreen button

You can add your own button that will act as the built-in one. In order to do so, you will need to modify the <div> block with koru-viewport class this way:

<div class="koru-viewport" id="my-koru">
	<a href="#" class="myfullscreen" id="my-fullscreen" onclick="fullscreen()">fullscreen</a>
</div>

Note that we’ve added id attribute to the main DIV and added an A tag inside it. The id is needed to locate the DIV later, the link (A tag) will be the new fullscreen button.

Then add the following code to the <style> block to make the link look more like a button:

.myfullscreen {
	display: inline-block;
	padding: 10px;
	background-color: white;
	color: black;
	position: absolute;
	right: 10px;
	top: 10px;
	cursor: pointer;
	z-index: 100;
}

Finally scroll down to the <script> section of the HTML file and add the function that processes the fullscreen button clicks:

function fullscreen() {
	var viewport = document.getElementById("my-koru");
	var koru = viewport.koru;
	var button = document.getElementById("my-fullscreen");
	koru.toggleFullscreenMode(button);
}

Save the HTML file and give the new button a try. It should work exactly as the built-in one.

Even more styling

You can have different fullscreen button styles when the preview is in fullscreen or windowed mode. To do so you need just a few more lines in the <style> block. Add these lines right after the .myfullscreen rule:

.myfullscreen.koru-fullscreen-off {
	background-color: red;
}

This rule adds red background to the fullscreen button in the fullscreen mode. Feel free to further improve its look to your own taste.

That’s All!

The fullscreen button is just another HTML element in Koru exported scene. You can configure, hide or re-implement it the way you need. Due to the number of changes needed it is recommended to make a template of it, so you don’t have to modify exported files again and again. See here for template creation instructions.

There are more tutorials that you may find interesting:

• Decals — how to place images on objects as decals;
• Lightmaps — how to compute scene lightmaps and configure them;
• Floor reflection — how to add and configure floor reflection;
• Watermarks — adding 2D image overlays;
• Taking Screenshots — how to add "Take Screenshot" button to your Koru exports;
• Loading Images — how to upload your own images to exported Koru scenes;
• Automatic Rotation — how to make your scene automatically rotates when idle;
• Customizing Snapshot Buttons — how to customize snapshot buttons with CSS;
• Creating Snapshot Buttons — when CSS is not enough you can create snapshot buttons yourself;
• Drop–Down Snapshots Menus — convert snapshots to configurable options;
• Manual Snapshots Control — how to activate a specific snapshot;
• Customizing Background — replace that gray gradient for scenes with transparent background;
• Non-Interactive Scenes — can exported scenes ignore mouse clicks?
• Fullscreen Button — how to change the fullscreen button look?
• Materials — Koru materials explained;
• Partial Snapshots — making snapshots that affect just some scene elements;
• Using Metadata — add extra information to nodes and use it in browser.