HTML Template

1 Introduction
2 Example
3 See also

Introduction

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 DataGardenGnomeSoftwarePano2VRHtmlTemplates

on Vista

C:Users<user name>AppDataRoamingGardenGnomeSoftwarePano2VRHtmlTemplates

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

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

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

void alter(string s)
Show s in a message box. This function is good for debugging the code.

<?ggf ?> – section

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

Methods for the form object

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.

void addLineEdit(string id, string label,int len=0,string default=””)
void addCheckBox(string id, string label, bool default=false)
void addSpinBox(string id, string label, int default=0, int minRange=0,int maxRange=100)
void addComboBox(string id, string label, array items, string default)

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);

void addColorButton(string id, string label, string default=””)
void addFileNameInput(string id, string label, string text, string filter, string default=””)
void addLine()
void addText(QString label)
void addOutputFormat(string text, string ext)

<?ggs ?> – section

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:

would produce the following output:

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

Methods for the Document Object

string encode(string s)
Encode the string s into html entities
string encodeUrl(string s )
Encode the string s as URL
void write(string s)
add the string s to the output file
void writeln(string s)
add the string s + new line to the output file
void writeEncoded(string s)
void writelnEncoded(string s)
same as write & writeln but encode the string into html entities
void addfile(string src,string dst)
add the src file to the output dst file. For relative paths of the src the root is the template directory. For dst it is the output path. Subdirectories in dst are created automatically.
void createfile(string dst, string content)
create a new text file dst with the content from content
void createutf8file(string dst, string content)
create a new UTF-8 encoded text file dst with the content from content
string expandFilename(string fn)
expand the filename fn with the project base path as root
void zipoutput(string documentName)
compress the whole output with all the files into a ZIP archive and name the html document documentName. The ZIP file name is the output file name selected in the GUI.

Functions and Variables

(string) outputfile
filename + relative path to the output file produced.
(array of strings) outputfiles
filenames + relative path to the output files produced. This is used if more then one output file has been generated like for the cube faces export.
(map of strings) formvalue
Values of the form input fields. You can access those values with formvalue[“<form-id>”].

Example

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("tttp2q_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>

HTML Template

Contents

Introduction

File Structure

All script sections

Functions and Variables

<?ggf ?> – section

Methods for the form object

<?ggs ?> – section

Methods for the Document Object

Functions and Variables

Example

See also