Skip to main content

HTML Template

This is the documentation for Pano2VR 4. You can find the new documentation for Pano2VR 5 here.

However, this document is still valid for the current version of Object2VR!

Introduction[edit]

Pano2VR and Object2VR use .ggt (stands for Garden Gnome Template) files as a basis for the HTML output. Instead of a simple text replacement, as in Pano2QTVR, the new templates use ECMAScript scripting language (JavaScript is also based on ECMAScript so the they use the same syntax), as defined in standard ECMA-262. You can find a list of predefined objects in Trolltechs ECMAScript Reference. The processing is similar to PHP where you embed scripting code into HTML. The big advantage of this approach is that many text editors are able to use syntax highlighting for HTML to make the code more readable.

The default directory for the .ggt files is on Windows XP

C:\Documents and Settings\<user name>\Application Data\GardenGnomeSoftware\Pano2VR\HtmlTemplates

on Vista

C:\Users\<user name>\AppData\Roaming\GardenGnomeSoftware\Pano2VR\HtmlTemplates

and on Mac it is

/Users/<user name>/Library/Application Support/GardenGnomeSoftware/Pano2VR/HtmlTemplates

You can always look up and change the path in the settings/preferences dialog.

File Structure[edit]

There are two processing tags:

<?ggf 
// your code 
?>
for forms and
<?ggs 
// your code 
?>
for the main script. Everything outside of those tags is added to the final HTML page.

All script sections[edit]

All script sections contain two predefined objects. The output object contains the configuration for the current output format and config gives access to the whole configuration file. The structure is similar to the structure in the p2vr project files.

For example, the project file looks like:

...
<panorama>
  <input>
   <type>auto</type>
   <filename>park.mov</filename>
  </input>
  <viewingparameter>
    <pan>
      <start>66.5</start>
      <min>0</min>
      <max>360</max>
...

so the corresponding method call for the pan minimum value is config.viewingparameter.pan.value("min") where the last part is the method to get the actual value. The values for the input file can be retrieved with config.input.value("filename").

The same method works with the output object for the current output format.

Functions and Variables[edit]

<?ggf ?> - section[edit]

The <?ggf ?> section contains a predefined form object.

Methods for the form object[edit]

All input fields have an id parameter that is used to identify the value. Those values can be accessed as formvalue["<id>"] in the <?ggs ?> section.

The items array is an associative JavaScript array. The return value is the key field.

Sample code:
var colors=new Array();
colors["#ff0000"]="red";
colors["#00ff00"]="green";
colors["#0000ff"]="blue";
form.addComboBox("bgcolor","Background Color",colors);

<?ggs ?> - section[edit]

The <?ggs ?> section contains a predefined document object. The methods document.write and document.writeln add text to the HTML document.

For example the code:

<html>
  <body>
<?ggs 
  document.writeln("    <h1>Hello World!</h1>");
?>
  </body>
</html>


would produce the following output:

<html>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

Methods for the Document Object[edit]

Functions and Variables[edit]

Example[edit]

This example shows a basic template for a QuickTime HTML page.

<?ggf
/*
	Create the form in the HTML dialog box
*/
	form.addColorButton("textcolor","Text Color","#000000");
	form.addColorButton("bgcolor","Background Color","#ffffff");
	form.addCheckBox("showcontroller","Show QuickTime Controller",true);
	// define possible output formats
	form.addOutputFormat("HTML (.html)","html");
	form.addOutputFormat("HTML (.htm)","htm");
 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title><?ggs document.writeEncoded(config.userdata.title()); ?></title>
<?ggs
	document.addfile("../common/p2q_embed_object.js","p2q_embed_object.js");
?>
<script type="text/javascript" src="p2q_embed_object.js">
</script>
<style type="text/css" title="Default">
body, div, h1, h2, h3, span, p {
	font-family: Verdana,Arial,Helvetica,sans-serif;
	color: <?ggs document.write(formvalue["textcolor"]); ?>; 
}
body {
	font-size: 10pt;
	background : <?ggs document.write(formvalue["bgcolor"]); ?>; 
}
h1 {
	font-size: 18pt;
}
h2 {
	font-size: 14pt;
}
</style>	
</head>
<body>
<h1><?ggs document.writeEncoded(config.userdata.title()); ?></h1>
<script type="text/javascript">
<!--
if ((window.p2q_Version) && (window.p2q_Version>=2.0)) {
<?ggs
	wh=output.windowHeight();
	if (formvalue["showuserdata"]==true) { 
		wh+=16;
	}
	document.write("\t\t\tp2q_EmbedQuicktime('" + outputfile + "','" + output.windowWidth() + "','" + wh + "'");
	document.write(",'bgcolor','" + formvalue["bgcolor"] + "'");
	document.write(",'scale','tofit'");
	document.write(",'controller','" + formvalue["showcontroller"] + "'");
	document.writeln(");");
?>				
} else {
	document.writeln('<p class="warning">p2q_embed_object.js is not included or it is too old! ' + 
                         'Please copy this file into your html directory.<\/p>');
}
//-->
</script>
<noscript>
	<p class="warning">Please enable Javascript!</p>
</noscript>
</body>
</html>


See also[edit]

QuickTime Output Settings (Pano2VR)
QuickTime Output Settings (Object2VR)
Flash Output Settings (Pano2VR)
Flash Output Settings (Object2VR)
HTML5/CSS3 Settings (Pano2VR)
IBooks Author Widget
Recovering Skins and Templates Folders