How To


This page introduces the screenshot tool integrated in 3DHOP, showing how to set-up it in two simple steps.

Screenshot Tool

Click to run live demo
Capture your best shots with 3DHOP

Set Up

To grab a snapshot of the screen is an action that can be accomplished in many different ways: hotkeys, OS integrated programs, third-party software. Although some of these methods are capable of taking screenshots of a single window, none of them allow users to capture clips of specific items in those windows (unless laborious and time-consuming selection procedures are used). For this reason 3DHOP introduces a one-click screenshot tool aimed at providing immediate snapshots tailored to its CANVAS element.

To set-up the screenshot tool two steps are needed: the first consists in definying an HTML element able to drive the screenshot tool, while the second one consists in registering the function able to activate the screen-capture event. Let us begin with the first one: adding a screenshot dedicated element to the 3DHOP interface.

For doing this, as usual we will add to the 3DHOP toolbar a button for activating our tool. This is achieved by adding just one line of code in the toolbar declaration, defining an icon to click for taking the snapshot. This button works similarly to the one used to recall the viewer's home status. A suitable icon ("screenshot.png") is already present in the "skin" folder.
So, in the BODY of the HTML page, where the toolbar is defined, we just add one new clickable image, with ID "screenshot", as shown in the following code box:

<div id="3dhop" class="tdhop" onmousedown="if (event.preventDefault) event.preventDefault()">
 <div id="toolbar">
  <img id="home"       title="Home"                  src="skins/dark/home.png"         /><br/> 
  <img id="zoomin"     title="Zoom In"               src="skins/dark/zoomin.png"       /><br/>
  <img id="zoomout"    title="Zoom Out"              src="skins/dark/zoomout.png"      /><br/>
  <img id="light_on"   title="Disable Light Control" src="skins/dark/lightcontrol_on.png" 
                                                          style="position:absolute; visibility:hidden;"/>
  <img id="light"      title="Enable Light Control"  src="skins/dark/lightcontrol.png" /><br/>
  <img id="screenshot" title="Save Screenshot"       src="skins/dark/screenshot.png"   /><br/>  
  <img id="full_on"    title="Exit Full Screen"      src="skins/dark/full_on.png" 
                                                          style="position:absolute; visibility:hidden;"/>
  <img id="full"       title="Full Screen"           src="skins/dark/full.png"         />

Now that we have the HTML component, we only need to connect it to the 3DHOP viewer. In the script block below, we can now add the new button-related action in the "actionsToolbar" JavaScript function (that we presented in one of the first HOW-TOs):

function actionsToolbar(action) {
  else if(action=='zoomin') 
  else if(action=='zoomout') 
  else if(action=='light' || action=='light_on') { 
    presenter.enableLightTrackball(!presenter.isLightTrackballEnabled()); lightSwitch(); } 
  else if(action=='screenshot') 
  else if(action=='full'  || action=='full_on') 

The new code is in the second-last "else if" statement, handling the "screenshot" action ID. When the user presses the screenshot button, "actionsToolbar" is called with this ID. Exploiting the ID value the function enters the related statement and executes the code in it.
More specifically, when the screenshot button is pressed, 3DHOP runs the "presenter.saveScreenshot()" function, that instantaneously takes a snapshot of the entire 3D scene contained in the CANVAS, saving it, as PNG file, in the client device running the viewer.


Please note that:

  • the file-naming convention adopted by 3DHOP for the output files uses the "screenshot" attribute followed by a timestamp (in HH:MM:SS format) in the file name;
  • the routine used to save the captured screenshot on the user's device is browser dependant. This means that download folder and eventual confirmation question will depend exclusively by the browser setup;
  • the screenshot created by 3DHOP includes only the 3D scene, captured with an alpha-transparent background. No other HTML elements (toolbars, panels, etc.) will be represented in the downloadable file.

Summarizing, to use the 3DHOP screenshot tool you just have to add to the viewer a new toolbar button, setting up the toolbar actions JavaScript function in the proper way and… you are done!

The complete sources of this example are provided together with the 3DHOP code in the download section.