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: