Koru automatically creates snapshot buttons for you and you can style them up with CSS, which covers most of the possible usage cases, but sometimes you may need a very different way to control snapshots and the default buttons may not work at all. What’s then?
Creating a Template
When Koru exports a scene, it wraps it up in some HTML called “template”. Template decides whether the scene will be fullscreen or not, template customizes snapshot buttons and can do some other scene control. Finally, template may simply add your logotype to the caption of the page. Any time you need a custom HTML output in Koru, you make a template.
You can read more about templates here, but best of all you don’t really need to start from scratch. Koru comes with a couple of pre-defined templates that you can use to kick-start your own. Let’s clone one of the existing ones now.
Start Koru and click its File menu. In the drop-down list select Open Templates Library item. You will see a folder on your disk where Koru stores its templates. Find a folder called snapshots and make a clone of it. On Mac you need to right-click it and select Duplicate, on Windows you can simply copy and paste it. Rename the new folder to my-snapshot-buttons and enter that folder.
You will see three files inside:
- _preview.png - the preview image displayed when you select this template in export window, you can leave it as is for now;
- _readme.txt - contains the text description of the template. You will need to edit it a bit;
- _template.html - the template itself, here we’ll be adding the screenshot button.
It has two functions: koruInit() and onLoadEnd(). The first one gets called when the Koru engine is started. It sets up a handler for “loadend” event that Koru sends when it finishes loading the scene. The other thing is that it sets createSnapshotButtons property to false which tells Koru that you don’t need the standard buttons.
When Koru loads the scene it doesn’t create the default buttons as you asked it and finally it calls your onLoadEnd() function. The function gets Koru object and also gets the HTML element with “snapshots-row” identifier that will contain the new buttons.
The function then loops through the snapshots, check if snapshot is visible and makes a link-based button for each of the snapshots. It also adds a handler to each button that activates the snapshot.
That is all, easy!
You can use the same idea to automatically start a snapshot when the scene is loaded. Just replace the loop in the code above with getting the first (or any other) snapshot and directly calling that apply() method on it.
If this is too much for you and all you need is to change the buttons appearance, have a look at our other tutorial that shows how to customize snapshot buttons with CSS.
- 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;
- 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?
- Using Metadata — add extra information to nodes and use it in browser.